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つまで指定できます。それぞれの意味は以下の通りです。
引数 | 説明 | 初期値 |
---|---|---|
$handle | スタイルシートのハンドル名を指定。 文字列に '?' という記号を含むと、それより後の部分はクエリパラメータとしてURL に追加されます。 |
なし |
$src | スタイルシートへのパスを指定。 | false |
$deps | 依存する(このスタイルシートより前に読み込まれる必要がある)他のスタイルシートのハンドル名を配列で指定する。 依存関係がない場合は falseを指定する。 |
array() |
$ver | 任意のバージョンを指定。 ファイル名にクエリパラメータとして追加され、ブラウザキャッシュ対策にもなる。 |
false |
$media | media属性に関する指定。 | all |
wp_enqueue_script
先ほど出てきたスクリプトを読み込むためのwp_enqueue_script()は、引数でwp_head()かwp_footerのどちらで読み込むかを指定できます。
使用形式
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);
引数はこちらも5つ。それぞれの意味は以下の通りです。
引数 | 説明 | 初期値 |
---|---|---|
$handle | スクリプトを区別するハンドル名を指定。
文字列に '?' という記号を含むと、それより後の部分はクエリパラメータとしてURL に追加されます。 |
なし |
$src | スクリプトへのパスを指定。 | false |
$deps | 依存する(このスクリプトより前に読み込まれる必要がある)他のスクリプトのハンドル名を配列で指定する。 依存関係がない場合は falseを指定する。 |
array() |
$ver | 任意のバージョンを指定。 ファイル名にクエリパラメータとして追加され、ブラウザキャッシュ対策になる。 |
false |
$in_footer | スクリプトの読み込み位置を指定。trueにするとwp_footer()で読み込める。 | false |
第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」という専用のアクションがるので、必要がある場合はこちらを利用してください。
クエリパラメータを工夫してブラウザキャッシュ対策する方法
第1引数または第4引数でファイルの更新日をクエリパラメータとして指定することで、ブラウザのキャッシュ対策ができます。
ファイル更新時にいちいちキャッシュクリアして更新する必要がなくなるので便利です。
詳しくは下記記事でまとめましたので、参考にしてみてください。