WordPress│特定のページだけJavaScriptを読み込む方法

2023.04.162024.03.05

上書きできて便利なJavaScriptですが、特手のページだけ読み込みさせたい時がありますよね。

そんな時はfunctions.phpをうまく使って条件を付けてあげると良いです。

本記事ではそのやり方を紹介します。

WordPressで特定のページだけJavaScriptを読み込む方法

WordPressで特定のページだけjQueryを読み込む方法は簡単です。

外観＞テーマエディタ＞ funtions.phpに下記のコードを挿入するだけです。

特定の投稿記事にJavaScriptを読み込む

特定の記事ページを指定した場合は下記のコードを参考にしてください。

function motoki_test_script() {
    if (is_single(array('23',35)) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                console.log("テストメッセージです: このスクリプトは、特定の記事で実行されています。");
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'motoki_test_script');

トップページにJavaScriptを読み込む

トップページにだけJavaScriptを読み込みたい場合は以下になります。

function motoki_test_script() {
    if (is_home() || is_front_page()) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                console.log("テストメッセージです: このスクリプトは、トップページまたはフロントページで実行されています。");
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'motoki_test_script');