WordPressテーマにJavaScriptを読み込む際、footer.phpなどのテンプレートファイルに直接書き込むのではなく、functions.phpで制御する方法が推奨されています。
functions.phpで管理する場合は、”wp_enqueue_script関数”を使ってJavaScriptファイルの読み込みを制御します。
外部JavaScriptを読み込む
wp_enqueue_script()には, 、スクリプトの重複読み込みを回避し、最適な順番で読み込んむよう制御してくれます。また、wp_enqueue_script()には下記のパラメーターがあります。内容を理解して正しく設定しましょう。
- ①$handle
- $handle部分にはハンドルネームを指定します。jsファイルの名前をそのまま使うと分かりやすいかと思います。この名前を使ってスクリプトを判別します。
- ②$src
- $src部分にはスクリプトのURLを指定します。
- ③$deps
- $deps部分でスクリプトの読み込み順を制御できます。array( ‘jquery’ )と指定すれば、ハンドルネーム jquery のスクリプトの後に読み込みます。
- ④$ver
- $ver部分では任意のバージョンを指定できます。スクリプトURLにクエリパラメーターとして追加されるので、ブラウザキャッシュ対策に効果的です。
- ⑤$in_footer
- $in_footer部分では、スクリプトの読み込み位置を指定できます。trueで</body>終了タグの前に、falseで<body>タグの前、出力します。
上記の内容を踏まえた上での利用例
下の利用例では、!is_admin()で管理画面以外の部分で適用するように指定しています。
wp_deregister_script(‘jquery‘); で公開サイトではWordPress同封のjQueryは読み込ませないという設定にまります。CDNのjQueryを使用しますという設定です。
wp_enqueue_script()の部分で読み込むスクリプトの指定をしています。
wp_enqueue_script()のハンドルネーム「config」の記載方法は以下のページを参考に作成しました。WordPressでJavaScriptやCSSを更新した時、ブラウザキャッシュを有効にしたまま更新をすぐに反映させる方法