テック

コピペで完了！WordPressでスクリプトにdefer・async・moduleを付ける方法

こうじ

2024.10.04

どうも久しぶりに自分のサイト（WordPress）をいじくり始めたこうじです。

さて、最近のフロントエンドでは、JavaScriptをbodyの最後で読み込む時代ではなくなりました。（多分）

スクリプトはできるだけ早く読み込みを開始し、asyncやdeferを使って非同期で処理を終わらせるのが基本です。

さらにES Modulesを使うのであれば、type="module"も必要になります。

しかし、WordPressで開発していると、

エンキューしたスクリプトに”module”を付けたい・・・

なんて思ったことありますよね。きっとあるはずです。

・・・あるよね？＾＾；

で、いざ「やろう！」って思っても、意外と方法が分かりにくいんですよね。

この記事では、そんな紳士淑女の皆様方に、WordPressの正しいスクリプト読み込み方法と
defer / async / module を付与する方法を紹介します。

コピペで使えるよ！（たぶん）

よくやりがちなNGコード

時間がない時とか、納期5分前とかによくやってしまいがちなやり方がこれ。

<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

テンプレートに直接<script />タグを書く方法です。

もちろんこれでもスクリプトは読み込めます。
しかしこの方法には問題があります。

WordPress側でスクリプトの依存関係を管理できない
読み込み順序の制御ができない
プラグインとの競合が起きやすい

そのため、WordPressでは必ず「スクリプトはエンキューして読み込む」のが基本になります。

正しいスクリプトファイルの読み込み方

まずはWordPress標準の方法でスクリプトをエンキューします。
ファイルはどこでもいいんですが、とりあえずfunctions.phpにでも書いておきますか。

function theme_enqueue_scripts() {
    wp_enqueue_script(
        'theme-script',
        get_template_directory_uri() . '/js/script.js',
        [],
        null,
        true
    );
}

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

各パラメーターの意味

パラメーター	意味
theme-script	スクリプトのハンドル名（ユニーク名称）
URL	読み込むJSファイルのパス
[]	依存スクリプト。入れたハンドル名の後に追加されるようになります。
null	バージョン
true	trueにするとフッターで読み込みされます

WordPressでは この方法で読み込むのが基本です。

async / defer を付ける方法

WordPress6.3以降では、Script Loading Strategies（スクリプト戦略） が使用できます。

例えば次のようにするとエンキューしたスクリプトファイルにdeferが付きます。
asyncにしたい場合はdeferの部分を書き換えてください。

function theme_enqueue_scripts() {
    wp_enqueue_script(
        'theme-script',
        get_template_directory_uri() . '/js/script.js',
        [],
        null,
        [
            'strategy' => 'defer',
            'in_footer' => false, // <head />でさっさと読み込む。省略可
        ]
    );
}

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

出力例

<script defer src="/path/to/scripts.js" id="theme-script-js"></script>

module を付ける方法

ES Modules を使う場合はtype="module"を付ける必要があります。

しかし、先ほどのstrategyの方法は使えないので、moduleをつける場合はscript_loader_tagフィルターを使用してゴリ押しします。

function theme_enqueue_scripts() {
    wp_enqueue_script(
        'theme-script',
        get_template_directory_uri() . '/js/script.js',
        [],
        null,
        false,
    );

    // スクリプトタグを直接書き換える
    add_filter('script_loader_tag', function ( $tag, $handle, $src) {
        if ('theme-script' !== $handle) {
            return $tag;
        }

        // type="module" を注入する
        return str_replace('<script ', '<script type="module" ', $tag);
    }, 10, 3 );
}

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

出力されるHTMLはこうなります。

<script type="module" src="/path/to/script.js" id="theme-script-js"></script>

WordPress 6.5以上の場合はもっとシンプル

6.5以上の場合はwp_enqueue_script_moduleが使えるので、置き換え処理をすることなく追加できます。コードもシンプル！

function theme_enqueue_module_scripts(): void {
    wp_enqueue_script_module(
        'theme-script',
        get_template_directory_uri() . '/js/script.js',
        [],
        null,
    );
}

add_action('wp_enqueue_scripts', 'theme_enqueue_module_scripts');