WordPressのテーマのJavascriptファイルパスを指定する（ルートパス）

WordPressのテーマのJavascriptファイルに対して、get_template_directory_uri() の値を取得して、正しくパスを指定する方法を紹介します。

特に、Service Worker (sw.js) のようなルートパスでの指定に関する問題を解決する方法です。

wp_localize_script を使用する方法

前述の通り、wp_localize_script 関数を使用してテーマフォルダまでのURLをJavascriptに渡す方法を利用します。

テーマの functions.php ファイル内で以下のようにコードを記述します。

<script>
var path = "<?php echo get_template_directory_uri();?>";
</script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/resources/scripts/sample.js"></script>

custom.js ファイル内で、themeData.themeUrl を使用してテーマフォルダまでのURLにアクセスし、それを元にService Workerのパスを指定します。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register(themeData.themeUrl + '/sw.js')
        .then(function(registration) {
            console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch(function(error) {
            console.log('Service Worker registration failed:', error);
        });
}

テーマフォルダの絶対URLを直接指定する方法

もしwp_localize_script を使用することが難しい場合、JSファイル内で直接テーマフォルダの絶対URLを指定する方法もあります。

custom.js ファイル内で、テーマフォルダの絶対URLを指定してService Workerのパスを指定します。

if ('serviceWorker' in navigator) {
    var themeUrl = 'テーマフォルダの絶対URLをここに入力';
    navigator.serviceWorker.register(themeUrl + '/sw.js')
        .then(function(registration) {
            console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch(function(error) {
            console.log('Service Worker registration failed:', error);
        });
}

まとめ

どちらの方法も、Service Workerなどルートパスでの指定が必要な場合に、テーマフォルダの絶対URLを正しく取得して使用するための手段です。

後者の方法は手間がかかるかもしれませんが、前者のようなWordPressの機能を利用することなく、特定のパスを直接指定することができる利点があります。