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

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

ファイルのアップロード

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

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

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

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

とします。

functions.phpファイルの編集

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

functions.php

function my_scripts_method() {
    // 条件分岐してスクリプトのパスを定義
    if (is_front_page()){
        $scriptPath = '/任意のディレクトリ/myscript_front.js';
    } else {
        $scriptPath = '/任意のディレクトリ/myscript_other.js';
    }

    // 定義したパスを使ってスクリプトファイルを読み込む
    wp_enqueue_script(
        'custom_script',
        get_template_directory_uri() . $scriptPath,
        '',
        date("His"),
    );

    // 同様に共通スクリプトを読み込む
    wp_enqueue_script(
        'custom_script_common',
        get_template_directory_uri() . '/任意のディレクトリ/myscript_common.js',
        '',
        date("His"),
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

解説

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

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

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

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