【 更新 】おすすめ記事はこちら

WordPress

【WordPress】CSSとJSをfunctions.phpで読み込んで出力する

「header.php」などのコードをスッキリさせるなら、「functions.php」を使うのがおすすめ。

これまでヘッダー、フッターに配置していたタグに代わって、以下を「functions.php」に記述します。

<?php
    function enqueue_name(){
　　　//ここに読み込ませるファイルを入力
   }
    add_action('wp_enqueue_scripts','enqueue_name');
?>

あとは、CSSを「wp_enqueue_style」で、JavaScriptを「wp_enqueue_script」で読み込むだけでOK。

ただし、CDNのような外部データの場合と、ディレクトリに保存している場合とで書き方が違うのでご注意ください。

ファイルを一か所にまとめることで、各種機能を一覧で確認できるため、メンテナンス性もグッと上がりますよ！

functionsにファイルを読み込む

ファイルを読み込ませるための共通のコードはこちらです。

<?php
    function enqueue_name(){
　　　//ここに読み込ませるファイルを入力
   }
    add_action('wp_enqueue_scripts','enqueue_name');
?>

以降コメントアウト部分にコードを追記していきます。

「enqueue_name」はリネーム可能です。変更するときは、2か所それぞれに同じものを設定します。「wp_enqueue_scripts」は変更不可です。

「CSS」を読み込む

CSSスタイルシートは以下コードを使います。

wp_enqueue_style('style_name', get_template_directory_uri() . '/css/style.css', array(), '1.0.0');

意味はこちらです。

wp_enqueue_style('任意の名前', 関数 . '/ディレクトリ/ファイル名.css', このファイル以前に読み込むファイル, '任意のバージョン', 'メディア属性');

get_template_directory_uri()は、テーマディレクトリまでのURLを出力する関数です。

また、任意の名前は、文字列として認識されるので日本語もOK。分かりやすい名前をつけてください。

メディア属性については、以下の記事をご覧ください。

関連記事【WordPress】wp_enqueue_styleでメディアクエリを指定する

「JavaScript」を読み込む

JavaScriptファイルは以下コードを使います。

wp_enqueue_script('script_name', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true);

意味はこちらです。

wp_enqueue_style('任意の名前', 関数 . '/ディレクトリ/ファイル名.js', このファイル以前に読み込むスクリプトファイル, '任意のバージョン', footerで読み込むか);

先ほどのwp_enqueue_style()との違いは、/ディレクトリ/ファイル名.js以降の記述です。

array()は、指定したファイルより「前に」読み込みたいものを設定します。例えば、jQueryを利用するケースです。

// jQuery デフォルトファイルの例
wp_enqueue_script('script_jquery', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);

WordPressにデフォルトで組み込まれているものを使う時は、array('jquery')と書き、先に読み込む必要があります。

一方で、ディレクトリに保存されている場合は、バージョンも加えると以下のようになります。

// jQuery ダウンロードファイルの例
wp_enqueue_script('script_jquery', get_template_directory_uri() . '/js/jquery-3.6.0.min.js', array(), '3.6.0', true);

「外部ファイル」を読み込む

CDNでフォントなどのファイルを読み込むときは、記述が少し変わります。

ディレクトリを考える必要がないので、任意の名前より後ろにあるコードを消してURLをそのまま書きます。

// fontAwesomeの例
wp_enqueue_style('style_fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css' array(), '6.1.0');

ちなみに、外部ファイルでバージョンがあるもしくは任意でつけたい場合は、以下のように記述します。

// jQueryの例
wp_enqueue_script('script_jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), '3.6.0', true);

読み込んだファイルを出力する

出力するときは、冒頭で説明した共通のコードを使います。

既にテーマファイルで<?php ?>で囲まれているときは、以下のコードから外してください。

<?php
    function enqueue_name(){
        // スタイルシート
        wp_enqueue_style('style_name', get_template_directory_uri() . '/css/style.css', array(), '1.0.0');
        // スクリプトファイル
        wp_enqueue_script('script_jquery', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);
   }
    add_action('wp_enqueue_scripts','enqueue_name');
?>

おわりに

「functions.php」でCSSとJavaScriptファイルを読み込み、出力する方法は以上です。

「header.php」「footer.php」のコードはスッキリしましたか？

サイトのソースコード上は、各ファイルに書いたときとほぼ同じように出力されるため、外から見ただけでは分かりません。

ただ、大元のファイルは記述量が減ることで見通しの良いコードになり、「functions.php」を見れば、読み込んでいるデータがひと目で分かるようになりました。

今回ご紹介したスタンダードな記述、管理方法を取り入れて、作業の効率化などに役立ててくださいね。