HTMLでJavaScriptを読み込む時、一般的には</head>前や</body>前に直接記述することが多いが、Wordpressで読み込みたい場合は、関数を用いてfunctions.phpに記述することが推奨されている。今回はその方法を記載。
関数を使うメリット
- プラグインで使用しているjQueryとJavaScriptの重複読み込みを避けることができる
- ヘッダー・フッターどちらに表示するか選択でき、読み込み速度対策ができる
- 適切な順番で読み込むように制御できる など
関数の書き方
wp_enqueue_script関数を用いてfunctions.phpに記述していく。
wp_enqueue_script関数とは
スクリプトファイルの重複を回避し、適切な順番で読み込む制御を行う関数。
準備
wp_enqueue_script関数はwp_head()またはwp_footer() の中で処理されて出力される。
そのため、header.phpの</head>前に<?php wp_head(); ?>、footer.phpの</body>前に<?php wp_footer(); がなければ、記載しておく必要がある。
※テンプレートを自作している場合などは特に記載もれに注意。
【header.php】
【footer.php】
functions.phpへの基本の書き方
| 引数 | 説明 | 必須 |
| $handle | スクリプトを区別する名前。 ※すでに登録済みの名前を入れると追加されないので注意。 初期値はなし | ◯ |
| $src | スクリプトのURLを指定。 初期値はfalse 親テーマから呼び出したいときはget_template_directory_uri()、 子テーマから呼び出したいときはget_stylesheet_directory_uri()を使う。 | |
| $deps | このスクリプトの前に読み込むスクリプトを指定。 この引数で読み込み順の制御ができる。 初期値はarray() | |
| $ver | スクリプトのバージョン。任意で指定できる。 ブラウザキャッシュ対策に使える。 初期値はfalse | |
| $in_footer | スクリプトの読み込み位置の指定。 trueは</body>前、falseは</head>前。 初期値はfalse |
書き方例
【当初htmlで</body>前に書いたJSのコード↓】
【functions.phpに書き直したもの↓】
【最終的にhtmlの</body>前に出力されたコード↓】
これで読み込みが完了。</head>前や</body>前に当初記載していたJSコードは削除しておきましょう。
