【WordPress】CSSとJavaScriptをfunctions.phpで読み込もう

今回はWordPressで自作テーマを作成する際のfinctions.phpでCSSをJavaScriptを読み込む方法について解説します。

書き方はもちろん、理由についても詳しく探っていきます。

理解が甘いなと思う方は一緒に確認しながら理解を深めていきましょう。

最終的なコード

functions.phpに記述する最終的なコードは下記です。

コードだけ見たいという方はこちらを参考にしてください。

functions.php
<?php
function my_enqueue_scripts()
{
  $version = wp_get_theme()->get( 'Version' );

  wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css', array(), $version);
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js', array(), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

jQueryを使っている場合は以下のように記述します。

functions.php
<?php
function my_enqueue_scripts()
{
  $version = wp_get_theme()->get( 'Version' );

  wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css', array(), $version);
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js', array('jquery'), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

ファイルへのパスはサンプル用になっているので、上記のコードを使用する場合はご自分の環境に合わせて変えてください。

CSSやJavaScriptの読み込みはheadに直接書かない

WordPressを使用しないサイト制作ではヘッダー部分にlinkタグを使用してCSSを読み込ませることが多いと思いますが、WordPressではfunctions.phpで管理できるようになっています。

作成しているテーマだけでなく、対応しているプラグインや子テーマからも制御することができるようになるからです。

そのため、テーマはこの方法でCSSを読み込むことが推奨されています(JavaScriptファイルも同様です)。

functions.phpにはこれらの関数を使用して記述します。

  • wp_enqueue_style()
  • wp_enqueue_script()

WordPressが用意している上記2つの関数を使用してfunctions.phpに記述し、header.phpのheadタグ内に「wp_head()」を設置することで自動的に適切なタグが生成されます。

wp_enqueue_style()

wp_enqueue_style関数を理解しよう

wp_enqueue_style関数はCSSを安全に追加する関数です。

記述方法を詳しく見ていきましょう。

<?php wp_enqueue_style($handle, $slug, $deps, $ver, $media); ?>

パラメーターは5つあります。

  • $handle – システム上の名前
  • $slug – スタイルシートのURL(初期値: false)
  • $deps – スタイルシートより前に呼び出すスタイルシート(初期値: array())
  • $ver – スタイルシートのバージョン(初期値: false)
  • $media – スタイルシートのメディアタイプ(初期値: all)

必須の項目は第一引数のみですが、自前で書いたCSSを読み込む場合は第二引数でファイルを指定して読み込みます。

そのほかはオプションになっているので、必要があったら記述しましょう。

実際の記述で確認しよう

最初の記述例を参考に実際の記述を確認していきます。

<?php wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css');

上記のコードの場合、

  • $handle → theme-style
  • $slug → get_template_directory_uri() . ‘/assets/css/theme.css’

このように設定しているということがわかります。

つまり、「theme-style」というシステム上の名前で、場所は「get_template_directory_uri() . ‘/assets/css/theme.css’」にあるということが書かれています。

get_template_directory_uri()は、テンプレートディレクトリのURIを取得する関数です。

Codexには下のように定義されています。


有効化している テンプレート ディレクトリの URI を取得する。SSL が存在するかチェックする。

関数リファレンス/get template directory uri – WordPress Codex 日本語版

関数を使用することで、異なる環境(ローカル環境と本番環境等)でテーマを使用する場合でもパスを自動的に出力してくれるので変更の手間や漏れを防ぎます。

コードを記述する人も関数に慣れれば、こちらの方が読みやすいですね。

このように設定できればwp_enqueue_style関数を使用してCSSを追加することができます。

wp_enqueue_script()

次にwp_enqueue_script関数について深掘りしていきます。

wp_enqueue_script関数を理解しよう

wp_enqueue_script関数はJavaScriptに関する関数です。

Codexでは下のように定義されています。

スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。スクリプトのリンクは、wp_register_script() 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。

これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。

関数リファレンス/wp enqueue script – WordPress Codex 日本語版

依存関係(読み込む順番)を設定すればそれに従ったタイミングでリンクしてくれる便利な関数です。

また、上記からwp_enqueue_script関数を使用する方法はWordPressで推奨されていることがわかりますね。

記述方法を詳しく見ていきましょう。

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

パラメーターは5つあります。

  • $handle – システム上の名前
  • $slug – JavaScriptファイルのURL(初期値: false)
  • $deps – JavaScriptファイルより前に呼び出すJavaScriptファイル(初期値: array())
  • $ver – JavaScriptファイルのバージョン(初期値: false)
  • $in_footer – JavaScriptファイルをフッターで読み込むか(初期値: false)

CSSのwp_enqueue_style関数とほとんど一緒ですが、最後の「$in_footer」が違います。

JavaScriptファイルは通常headタグ内で読み込むようになっていますが、「$in_footer」を’true’にするとフッターで読み込むことができます。

注意点は、この時テンプレートファイルのfooter.phpに「wp_footer()」を設置してある必要があるということです。

注意点さえおさえれば、読み込む位置が指定されている既存のファイルでも「$in_footer」を使用して簡単に使用することができます。

実際の記述で確認しよう

最初の記述例を参考に実際の記述を確認していきます。

<?php wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js');

上記のコードの場合、

  • $handle → theme-script
  • $slug → get_template_directory_uri() . ‘/assets/js/script.js’

このように設定しています。

つまり、「theme-script」というシステム上の名前で、ファイルの場所は「get_template_directory_uri() . ‘/assets/js/script.js’」にあるということがわかります。

functions.phpにadd_action関数を使用して記述する

wp_enqueue_style関数とwp_enqueue_script関数に名前とファイルの場所を設定しましたが、それだけだと読み込まれません。

そこで、add_action関数を使用します。

まずadd_action関数とは何かをCodexで見てみましょう。

add_action関数とは

特定のアクションに関数をフックします。

関数リファレンス/add action – WordPress Codex 日本語版

書き方はこちらです。

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

パラメーターの詳細はこちらです。

  • $hook – $function_to_add がフックされるアクション名
  • $function_to_add – フックする関数名
  • $priority – 特定のアクションに関連づけられている関数が実行される優先順序を指定する
  • $accepted_args – フックした関数が受け入れられる引数の数

第一引数のアクションに第二引数の$function_to_addで記述された関数を追加するという認識でいいかと思います。

add_action関数を使用した今回のコードの解説

ここで完成形のコードを見てみましょう。

functions.php
<?php
function my_enqueue_scripts()
{
  wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css');
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js');
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

add_action関数には第一引数に「wp_enqueue_scripts」、第二引数に「my_enqueue_scripts」が記述されています。

一つずつ見ていきましょう。

add_actionの第二引数

add_action関数の第二引数に記述されているのは「my_enqueue_scripts」です。

第二引数はフックする関数名を記述します。

「my_enqueue_scripts」は今回のサンプルのために私が作成した独自関数で、function〜の書き方で自分で関数を作成できます。

<?php
function my_enqueue_scripts()
{
  wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css');
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js');
}

今回はmy_enqueue_scripts関数の中にシステムの名前とファイルの場所を設定したwp_enqueue_style関数とwp_enqueue_script関数を記述することでCSSとJavaScriptを登録しました。

wp_enqueue_scripts()

add_action関数の第一引数は「wp_enqueue_scripts」が記述されています。

第一引数は、第二引数の関数がフックされるアクションの名前です。

「wp_enqueue_scripts」はこのように定義されています。

wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.

wp_enqueue_scripts | Hook | WordPress Developer Resources

「wp_enqueue_scripts は、フロントエンドに表示されるスクリプトとスタイルをエンキューするときに使用する適切なフックです。名前に反して、これはスクリプトとスタイルの両方をエンキューするために使用されます。」

このように翻訳されます。

この関数を使用すると、フロントエンドに表示されるJavaScriptとCSSのファイルを読み込んでくれるということですね。

さらに、add_action関数を使用するとCSSとJavaScriptのファイルを登録した独自で定義した関数を追加し、フロントエンドに表示されるファイルを読み込んでくれるということになります。

以上の記述でCSSとJavaScriptを読み込ませることができました。

jQueryを使用する場合

JSファイルでjQueryを使っている場合は、jQueryの読み込みの後に自分で作成したJSファイルを読み込む必要があります。

その場合は、以下のように記述します。

functions.php
<?php
function my_enqueue_scripts()
{
  wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css');
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

第三引数に依存するJSファイルのハンドル名を記述します。これでjQueryの読み込みの後に自分で作成したJSファイルを読み込むことができます。

キャッシュをクリアする

CSSやJSファイルを修正したけど、うまく反映されないことがあります。

それは、ブラウザにキャッシュが保存されており、修正前の古いファイルが読み込まれているために起こります。

保存されているキャッシュではなく修正後のCSS/JSファイルを反映させたい時は、第四引数のバージョンを指定します。

functions.php
<?php
function my_enqueue_scripts()
{
  $version = wp_get_theme()->get( 'Version' );

  wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css', array(), $version);
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js', array(), $version);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

こうすることで、それぞれtheme.css?ver=1.0.1script.js?ver=1.0.1のような形でパラメータ付きでファイルが読み込まれるようになります。

CSSやJSファイルを修正したら、style.cssのVersionを変更しましょう。

style.css
/*
Theme Name: theme name
Version: 1.0.1
*/

これでキャッシュされた古いファイルではなく修正後のファイルが読み込まれるようになります。

JSファイルはフッターで読み込む

特に理由がなければ、JSファイルはフッターで読み込むようにしましょう。

理由としてはコンテンツが読み込まれた後にJSファイルが読み込まれるため、コンテンツの表示速度が早くなるからです。

wp_enqueue_script関数の第5引数をtrueにすると、JSファイルはフッター(wp_footer関数のある所)で読み込まれます。

functions.php
<?php
function my_enqueue_scripts()
{
  $version = wp_get_theme()->get( 'Version' );

  wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/theme.css', array(), $version);
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/assets/js/script.js', array(), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

このように記述して、フッターで読み込んでください。

まとめ

今回はfinctions.phpでCSSをJavaScriptを読み込む方法について解説しました。

WordPressで使用する関数がいくつか出てきましたね。

  • wp_enqueue_style()
  • wp_enqueue_script()
  • get_template_directory_uri()
  • add_action()
  • wp_enqueue_scripts()

WordPressの便利な関数はたくさんありますが、上記の関数は実際にテーマ制作に使用する関数なので内容も合わせてぜひ覚えておいてください。

もし理解がまだ足りないと思えば、この記事を読み返したり、公式の説明を読んだりして理解を深めてみてくださいね。


その他の記事