WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解しておこう。

webサイトでcssやjsファイルを読み込む時、普通ならheadタグ内にlinkタグなどを記述しますが、WordPressではwp_enqueue_style()やwp_enqueue_script()といった関数を使用してファイルを読み込むことが推奨されています。

WordPressを使用する上で必須知識となるこれらの関数の具体的な使い方や引数の種類と意味を整理し、ファイルの読み込み位置を分ける方法やフロント側・管理画面側でのファイルの読み込み方の違いなどをメモしていこうかと思います。

どうしてファイルの読み込みにwp_enqueue_styleやwp_enqueue_scriptを使うのか

これらの関数には、読み込むファイルを区別するための「ハンドル名」を指定する必要があるのですが、このハンドル名をしっかり付けることによって、CSSやJavaScriptの重複読み込みを回避することができます。

また、head内でファイルを読み込むか、body閉じタグ前で読み込むかを指定することもでき、複数箇所でファイルを読み込む必要がある場合でも、記述場所はfunctions.php内で統一されるため、読み込むファイルを一元管理できます。

あとは単純に、WordPressの公式で推奨されているんだから大人しくそうしましょうよ、って話。

基本的な使い方

まず第一に気をつけなくてはならないのは、wp_enqueue_styleやwp_enqueue_scriptはこれら単体では使えないということです。

WordPressの「ファイル読み用のアクション」に「フック」させて使います。いわゆる「アクションフック」などと呼ばれているものですね。

WordPressには様々な「アクションフック」というものが用意されています。

WPオブジェクトが設定された時、プラグインが読み込まれた時、テーマ設定が初期化された時、WordPressが完全に読み込まれた時、などなど、様々な段階で、それ専用の「アクション」が実行されます。

そのアクションフックの中で、ファイル読み込み用の「wp_enqueue_scripts」アクションというのがあり、wp_enqueue_styleとwp_enqueue_scriptは基本的にこいつにフックして使用します。

例：こんな感じ

//ファイルの読み込みに関する記述をまとめた関数
function add_files(){

    //wp_enqueue_styleやwp_enqueue_scriptはこの中で使う

    wp_enqueue_style('好きなハンドル名','読み込みたいcssファイルまでのパス');
    wp_enqueue_script('好きなハンドル名','読み込みたいjsファイルまでのパス');

}

//上記のファイルの読み込みに関する記述をまとめた関数を、「wp_enqueue_scripts」アクションにフックさせる。
add_action('wp_enqueue_scripts', 'add_files');

実際のファイル読み込み例

細かいことは気にせず、まずは実際の使い方を見て慣れましょう。

テーマディレクトリ直下のstyle.cssと、jsフォルダ内のscript.jsという2つのファイルを読み込みたい場合。

テーマのディレクトリ構造がこんな感じだとします

テーマディレクトリ/
　├ js/
　│　└ script.js  //これを読み込む
　├ style.css     //これを読み込む
　├ header.php
　├ footer.php
　└ その他ファイルたち…

上記の2つを読み込むためには、

functions.php内にて以下を記述します

//テーマディレクトリまでのパスを定数にしておくと便利です
define("DIRE", get_template_directory_uri());

function add_files(){

    wp_enqueue_style('my_style',DIRE.'/style.css');
    wp_enqueue_script('my_script',DIRE.'/js/script.js');

}
add_action('wp_enqueue_scripts', 'add_files');

wp_enqueue_styleやwp_enqueue_scriptの引数の意味

wp_enqueue_styleとwp_enqueue_scriptについて、改めて詳しく見ていきます。

wp_enqueue_style

使用形式

wp_enqueue_style($handle, $src, $deps, $ver, $media);

引数は5つまで指定できます。それぞれの意味は以下の通りです。

wp_enqueue_script

先ほど出てきたスクリプトを読み込むためのwp_enqueue_script()は、引数でwp_head()かwp_footerのどちらで読み込むかを指定できます。

使用形式

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

引数はこちらも5つ。それぞれの意味は以下の通りです。

第５引数だけ、wp_enqueue_styleの場合と意味合いが異なりますね。

この5つ目の引数 $in_footer をtrueに指定するだけで、wp_enqueue_scriptでのスクリプトの読み込みはwp_footer()で行われるようになります。

第3、第4引数は特に指定する（初期値から変える）必要がなく、第5引数の$in_footerだけ指定したい！という場合

第3、第4引数は初期値のまま指定します

wp_enqueue_script('ハンドル名','スクリプトへのパス', array(), false, true);

array()の部分は依存関係を特に指定しないということなので、falseでも良いです。

第3、第4は省略して最後の引数をtrueにするだけでよい、という記事を見かけたのですが、私はそれでは読み込み位置は変わりませんでした。

これだと読み込み位置変わらず

wp_enqueue_script('ハンドル名','スクリプトへのパス', true);

CSSをwp_footer()で読み込ませるには？

CSSの場合、wp_enqueue_style()には$in_footerのような引数がないので、スクリプトと同じようにはいきませんね。

なので、wp_enqueue_styleを直接wp_footer()にフックすることで対応できます。

function add_css(){
  wp_enqueue_style('reset_style',DIRE.'/style.css');
  //その他CSSファイルの読み込み…
}
add_action('wp_footer', 'add_css');

スタイルシートをwp_footer()で読み込んでしまうと、スタイルが適用される前の純粋なHTML構造がそのまま表示される時間ができてしまいます。
なので、ファーストビューの部分、つまりスクロールせずに最初から見える部分に関するスタイルシートはwp_footer()で読み込ませないようにしましょう。

管理画面でファイルを読み込みたい場合のフック先

ここまで、アクションフックは基本的に「wp_enqueue_scripts」アクションを利用してきましたが、これはフロント側（ユーザーが見ることのできるサイトの表示側）で実行されるアクションになります。

管理画面でのファイルの読み込みはこれとは別に、「admin_enqueue_scripts」というアクションがあります。
使い方は全く同じなので、説明は省きます。

また、ログイン画面でのファイルの読み込みも、「login_enqueue_scripts」という専用のアクションがるので、必要がある場合はこちらを利用してください。

クエリパラメータを工夫してブラウザキャッシュ対策する方法

第１引数または第４引数でファイルの更新日をクエリパラメータとして指定することで、ブラウザのキャッシュ対策ができます。

ファイル更新時にいちいちキャッシュクリアして更新する必要がなくなるので便利です。

詳しくは下記記事でまとめましたので、参考にしてみてください。

あわせて読みたい

WordPressで読み込むCSSやJSファイルにクエリパラメータを付与し、ブラウザキャッシュは有効のまま変更... CSSなどを変更してクライアントに確認してもらう時、「変わってませんよ？」と言われ、「すみません、キャッシュです。お手数ですが削除してから…」という不毛なやり取...