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

2023.04.162026.10.13

特定の投稿やフロントページだけでJavaScriptを実行するには、WordPressの条件分岐とスクリプトAPIを組み合わせます。

ここでは、対象ページのConsoleへメッセージを出す最小の例を紹介します。

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

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

例は素のJavaScriptで、jQueryの読み込みは必要ありません。

対象ページでのみWordPressのスクリプトAPIへ登録します。

変更前にバックアップし、子テーマのfunctions.phpへ必要な例を追加します。

以前のmotoki_test_script関数とフックは削除してください。

Code SnippetsではPHP開始タグを付けず登録します。

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

投稿IDの23・35を、実行対象にしたい自分の記事IDへ変更します。

固定ページを対象にする場合は条件式のis_singleをis_pageへ置き換え、対象外で処理を終える先頭の!とreturnは残してください。

add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_single( array( 23, 35 ) ) ) return;
    wp_register_script( 'waza-specific-example', false, array(), null, true );
    wp_enqueue_script( 'waza-specific-example' );
    wp_add_inline_script( 'waza-specific-example', "(() => { const run = () => console.log('対象ページで実行しました'); if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, { once: true }); else run(); })();", 'after' );
} );

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

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

add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_front_page() ) return;
    wp_register_script( 'waza-front-example', false, array(), null, true );
    wp_enqueue_script( 'waza-front-example' );
    wp_add_inline_script( 'waza-front-example', "(() => { const run = () => console.log('対象ページで実行しました'); if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, { once: true }); else run(); })();", 'after' );
} );

読み込みと実行を分けて確認する

スクロールできます

ページ	ページソース	Console
指定した投稿	waza-specific-example-js-afterがある	「対象ページで実行しました」が出る
対象外の投稿	この例のscript要素がない	再読み込み後にこの例の新しいログが出ない
フロントページ用の例	waza-front-example-js-afterがある	フロントページを開いてログを確認

外部JSのURLを登録していないため、この例のコードはHTML内のscript要素に出力されます。

Networkに独立したJSファイルが見つからなくても、読み込み失敗とは限りません。

Consoleの過去ログを消してからページを開き直し、今回の実行結果を確認してください。

2026年10月2日にWordPress 7.1.2の隔離環境で、指定投稿とフロントページ用の例が実行され、対象外投稿にはこの例のscript要素がないことを確認しました。

jQueryを使う処理では依存関係を指定する方法も確認してください。