WordPress│指定ページでjQueryを読み込む方法

2023.04.012026.10.21

WordPress同梱のjQueryを指定投稿とサイトのトップ・ブログ投稿一覧で読み込む例です。wp_enqueue_scriptsから1つの関数を登録します。カテゴリーやタグのアーカイブ一覧は、下の条件には含まれません。

条件をまとめて登録

変更前のfunctions.phpを保存してから子テーマへ追加し、既存PHP内では開始タグを省きます。旧motoki_add_scriptsは削除または停止してから置き換えます。23と35を対象投稿IDへ変更してください。トップ・投稿一覧が不要ならis_homeとis_front_pageの条件を外します。

function waza_enqueue_selected_jquery() {
    $post_ids = array(23, 35);
    if (($post_ids && is_single($post_ids)) || is_home() || is_front_page()) {
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'waza_enqueue_selected_jquery');

このコードで保証する範囲

対象ページでjQueryをキューへ登録します。他のテーマ・プラグインが対象外ページで必要としているjQueryを解除するコードではありません。「このページ以外では必ず読み込まれない」という意味にはなりません。

自作JSがjQueryに依存する場合は、自作スクリプトをwp_enqueue_scriptで登録するときに依存配列array("jquery")を指定する方法も使えます。jQueryはnoConflictモードなので、コード内ではjQueryを使うか、引数で受け取った$を使います。

対象外でも依存関係から読み込まれる

スクロールできます

条件	期待する状態	確認すること
指定投稿やトップページ	掲載例がjqueryを登録する	jquery.min.jsなどの要求
対象外で他の依存コードがない	掲載例からは登録しない	他のテーマ・プラグイン由来の要求は別に確認
対象外で別のJSがjqueryに依存する	WordPressが依存ファイルを先に出力する	依存JSが動き、Consoleに未定義エラーがない

別のJSをwp_enqueue_scriptで登録するときは、依存配列にarray('jquery')を指定してください。

2026年10月2日にWordPress 7.1.2の隔離環境で、対象投稿・対象外投稿・トップページの読み込みを比較しました。

対象外投稿でも依存指定したJSからjQueryが読み込まれ、jQuery(function($){ … })内の処理とボタンのEnter操作が動作しました。

この結果は依存指定の例についての確認であり、使用中のプラグインすべての動作を保証するものではありません。

確認と戻し方

対象投稿・対象外投稿・トップ・投稿一覧で、ブラウザーのNetworkとコンソールを確認します。自作JSの読み込み順も確認してください。登録方法はwp_enqueue_script()の公式資料も参照できます。戻す場合はこの関数とフックを外します。WordPressの登録処理はローカルで確認し、各サイトの依存プラグインとの組み合わせは未検証です。

WordPressの標準登録では、Networkでjquery.min.jsとjquery-migrate.min.jsの有無を対象と対象外で比べます。

対象外のタグ一覧で依存関係による読込を確認する

一覧に追加するJS	jQueryの出力	確認する操作
なし	今回の隔離環境では出力なし	一覧が表示されることを確認
依存配列にjqueryを指定した自作JS	jquery-core-jsを出力	そのJSが実行した結果表示を確認

上表はタグ一覧での比較です。is_home()が真になるブログ投稿一覧では、掲載コード自体がjQueryを登録するため「追加JSなしなら出力なし」という結果にはなりません。条件の区別はis_home()の公式資料を参照してください。対象外のタグ一覧でも、別のスクリプトがjqueryを依存配列に指定すると必要なjQueryを読み込みます。

したがって、この関数の条件だけでサイト全体のjQueryを停止できるとは判断しません。

確認用JSには実行後の結果表示を用意し、Networkにファイルがあることと、処理が完了したことを別々に確認します。

2026年10月3日、通常投稿のタグ一覧で、依存JSを追加しない条件と、jqueryを依存関係に持つJSを追加する条件を比較しました。

前者ではjQueryのscriptタグがなく、後者ではjquery-core-jsが出力されて「依存JSが実行されました」と表示されました。

下の写真では画面下端に実行結果が表示されています。

導入先の投稿一覧・カテゴリー・タグ一覧でも、条件判定だけでなく、実際に出力されたscriptと自作JSの結果を確認してください。

戻す場合は本例の関数とフックを停止し、通常の読み込み状態で必要な機能が動くことを確認します。

全プラグインの組み合わせと、この追加確認のスマホ操作は未検証です。