SWELL│Uncaught ReferenceError: jQuery is not definedの解決方法

jQuery is not definedは、実行時点でjQueryが利用できないエラーです。ファイルの未読み込み・取得失敗・実行順序を確認します。jQuery(document).ready()で囲むだけでは直りません。readyを呼ぶ時点でもjQuery本体が必要だからです。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

原因を切り分ける

ブラウザの開発者ツールで、Consoleのエラーが指すファイルと行を確認します。Networkでjqueryを含むリクエストが成功しているか調べ、404やブロックがあれば先に解消します。取得できていても、独自スクリプトが先に実行されていれば順序の問題です。

$ is not definedは別の問題です。WordPressのjQueryはnoConflictモードで使われるため、以下のコールバック内の$を使います。Unexpected tokenなどは構文エラーなので、閉じ括弧や波括弧を確認します。

WordPressに依存関係を指定する

以下は子テーマを使用する場合の最小例です。既存ファイルをバックアップしてから、子テーマのfunctions.phpのPHP開始タグの内側へ追加します。親テーマを直接変更せず、既存の同名関数や登録と重複させないでください。

function waza_enqueue_button_script() {
    wp_enqueue_script(
        'waza-button',
        get_stylesheet_directory_uri() . '/js/waza-button.js',
        array('jquery'),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'waza_enqueue_button_script');

子テーマの直下にjsフォルダーを作り、waza-button.jsという名前で次の内容を保存します。PHPのURLと実際の保存先を一致させてください。サンプルは全フロント画面でファイルを読み込み、myButtonがある画面だけでイベントを登録します。不要な画面での読み込みを避ける場合は用途に合わせてPHP側に条件を追加します。

jQuery(function ($) {
    $('#myButton').on('click', function () {
        $('#waza-button-result').text('ボタンがクリックされました。');
    });
});

投稿のカスタムHTMLブロックへ次の確認用HTMLを貼り付けます。同じページに同じidを複数置かないでください。

<button type="button" id="myButton">動作を確認する</button>
<p id="waza-button-result" role="status"></p>

依存配列のjqueryにより、WordPressが管理するjQueryを先に読み込みます。trueは独自ファイルをフッターへ出力する指定です。readyはDOMの準備を待つ役割で、ライブラリのダウンロードを待つ仕組みではありません。WordPress公式のwp_enqueue_script()仕様も参照してください。

動く見本：ボタンの反応を確認する

次のボタンは、クリックすると結果文を表示します。Tabで選択した後のEnter・Spaceでも試せます。このページでは既存のWordPressのjQueryを使っています。追加のjQueryは読み込みません。

見本は、ページ内の既存スクリプトが読み込まれた後に初期化しています。自分のサイトへ設置する際は、上のwp_enqueue_scriptの依存指定とJSファイルを使ってください。DOMContentLoadedやreadyで囲むだけでは、jQueryが未取得の状態を解消できません。

SWELLや高速化設定が関係する場合

遅延・結合・async付与などの処理が依存関係を崩していないか確認します。検証環境で該当機能だけを一時的に外し、原因が確認できたらjQueryと依存スクリプトの除外設定を検討します。管理画面の項目名はテーマやプラグインの版で異なります。この記事の例だけを理由にサイト全体の高速化設定を変更する必要はありません。

CDNなどから別のjQueryを重ねて読み込む方法は、既存プラグインとの競合原因になるため、この例では使いません。

公開前の確認と戻し方

キャッシュを更新し、Networkで独自JSとjQueryの取得成功を確認します。ボタンをクリックし、さらにTabで選択してEnterまたはSpaceを押し、結果文が出ることを確認します。ボタンがないページでもエラーがないことを調べてください。

戻す場合は追加した関数とadd_action行、確認用HTMLを外して変更前のファイルへ戻します。JSファイルを変更したときはバージョン文字列も更新し、古いキャッシュと混同しないようにします。

以前のGitHub掲載例と本ページの依存関係を指定する例は異なります。

ボタンが反応しないときは取得結果から確認する

ボタンの見た目が表示されても、自作JSの取得に成功しているとは限りません。

開発者ツールのNetworkを開いてページを再読込し、waza-button.jsの応答と読み込み順を確認します。

取得先が404なら、jQueryを追加する前に、有効な子テーマのjsフォルダーにファイルがあるかを調べます。

2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0で自作JSだけが404になる条件を用意しました。

ボタンをEnterで押しても結果欄は空のままで、通常のページ表示は残りました。

同じJSを正常に読み込むボタンなしのページでは、対象要素がない状態で余計な表示は発生しませんでした。

導入先では取得失敗を直した後に再読込し、クリック・Enter・Spaceで結果が1回ずつ変わることを確認してください。

この写真は取得失敗を切り分けるための隔離環境で、本番WAZAの障害画面ではありません。

ファイル登録と読込先を確認する手順はjQueryの読込条件を指定する記事も参照してください。

変更したJSのURLやバージョンが反映されない場合

実際のWordPressの登録情報とscriptタグで、jQueryが独自JSより前に出力されることを再確認しました。

今回は、同じ登録名で異なるURLやバージョンを後から渡しても、既存の登録情報が残ることを追加で確認しました。

掲載例を使う場合は、別のコードを追記して上書きしようとせず、元のwaza_enqueue_button_script内のURLやバージョンを変更します。

同名関数や登録を二箇所に残さないでください。

他のプラグインの登録を解除するための手順ではありません。

登録情報を変えても、古いページHTMLや最適化製品のキャッシュが残れば、実際に配信されるURLは別です。

公開ページのscriptのsrcとNetworkの取得先を照合し、変えたversionとファイル内容が反映されているか確認します。

今回確認したのはWordPressの登録と出力です。

WP Rocketなどによる結合・遅延後の実行順序は未検証です。

登録済みの名前を後から変更した場合の扱いはwp_enqueue_scriptの公式資料でも確認できます。