WordPressでページ毎に別のJavaScriptを読み込む方法

以前、ショートコードを使って自作のPHPやJavaScriptを動かす方法を紹介しましたが、今回は、ページ毎に別々のJavaScriptを読み込む方法をご紹介します。

ファイルのアップロード

まず、スクリプトファイルを用意します。

例えば、トップページ用のスクリプトを、
myscript_front.js

その他のページ用が、
myscript_other.js

すべてのページで共通して読み込みたいスクリプトを、
myscript_common.js

とします。

アップロード先は?
ルートディレクトリ>wp-content>themes>利用中のテーマ>任意のディレクトリ>ここ!

functions.phpファイルの編集

次に、「functions.php」ファイルへアップロードしたスクリプトファイルを読み込むための関数を書き込みます。
if文を使ってトップページとそれ以外のページを分岐しています。

functions.php

functions.phpファイルの場所は?
ルートディレクトリ>wp-content>themes>利用中のテーマ>ここ!

解説

分岐で使用しているis_front_page()関数

これは、トップページの場合にtrueを返します。他に、is_home()などがあります。これはブログページの場合にtrueを返しますが、トップページをブログページに設定している場合などは分岐方法が変わってきます。

読み込みに使用しているwp_enqueue_script()関数

この関数には、5つの引数があります。

1つ目の引数(名前) 好きな名前を付けられます。(他とかぶらない名前)
2つ目の引数(スクリプトURL) スクリプトのパスを指定します。
3つ目の引数(直前に読み込みたいスクリプト) 例えばjQuery依存のスクリプトを読み込み場合、array( 'jquery' )と書きます。(なければ省略できます)
4つ目の引数(パスの最後に付け足される文字列) 上のサンプルでは、キャッシュ対策で日付を付け加えています。(省略してもいいです)
5つ目の引数(挿入位置) スクリプト挿入位置を</body> 終了タグの前にしたい場合は、trueを。<head>内にしたい場合は、falseを指定。(省略するとfalse