WordPress で何かが壊れると、特にエラーメッセージがほとんど意味をなさない場合、壁にぶつかったように感じることがあります。そのような不可解な問題の 1 つに、忌まわしい「jQuery が定義されていません」エラーがあります。
コンタクトフォームから画像スライダーまで、さまざまなものが突然機能しなくなるという問題に遭遇しました。特にブラウザコンソールを積極的に確認していない場合、通常はユーザーを驚かせます。
私たちは数え切れないほどのサイトオーナーがこの正確な問題を解決するのを助けてきました。そして一番良いところは？それに従うために開発者である必要はありません。
このガイドでは、このエラーの意味、発生原因、そしてコードに触れたことがない方でも実際に機能する段階的な修正方法を説明します。
「jQuery is not defined」エラーの原因は何ですか？
jQuery は WordPress で広く使用されている JavaScript ライブラリで、多くのインタラクティブな機能を実行するのに役立ちます。しかし、時々正しく読み込まれないことがあり、ウェブサイトの機能に影響を与える可能性があります。
エラーは開発者ツールのコンソールタブの下に表示されるため、多くのユーザーはサイトで何かが壊れるまでそれに気づかないかもしれません。
「jQuery が定義されていません」というエラーが表示される場合、WordPress が jQuery を正しく読み込めていないことを意味します。長年にわたり、数え切れないほどのユーザーがこの問題を解決するのを支援してきましたが、通常はいくつかの一般的な原因に起因することがわかりました。
- 古いテーマまたはプラグイン：多くのユーザーは、テーマまたはプラグインがWordPressの最新バージョンと一致するように更新されていない場合に、このエラーに遭遇します。WordPressのメジャーアップデートの後によく発生するのを目にします。
- スクリプトの読み込みが不適切: jQueryは、他のJavaScriptファイルよりも前に読み込まれる必要があります。そうでない場合、jQueryに依存するスクリプトは壊れます。これは、テーマやプラグインがスクリプトをエンキューするように正しくコーディングされていない場合に発生することがよくあります。
- JavaScript の競合: サイトで実行されている他のスクリプトは、特に正しく読み込まれていない場合、jQuery と競合する可能性があります。この競合により jQuery が破損し、エラーが発生する可能性があります。
- CDN の障害: 一部のサイトでは、コンテンツ配信ネットワーク (CDN) でホストされている jQuery に依存しています。CDN が利用できないかブロックされている場合、サイトは jQuery を読み込むことができず、エラーが発生します。
これらの問題はすべて、jQueryがスムーズに実行されるのを妨げる可能性があります。しかし、心配しないでください。私たちの経験があれば、問題の解決策をガイドできます。
「jQuery is not defined」エラーの修正方法
このエラーが発生した場合、いくつかの解決方法があります。以下に、この問題を解決するために最も効果的だとわかった方法をいくつかご紹介します。
これらの戦略は順番に試すことをお勧めしますが、特定の戦略から始めたい場合は、以下のジャンプリンクを使用できます。
- WordPress、テーマ、プラグインを更新する
- jQuery が正しく読み込まれているか確認する
- jQuery のフォールバックを追加する
- スクリプトの読み込み順序を修正する（上級）
- jQuery の読み込み問題を修正するために wp-config.php を編集する
- 「jQuery が定義されていません」エラーに関する FAQ
- 追加リソース：WordPress エラーのトラブルシューティング
これらの各方法について説明し、WordPress エラーのトラブルシューティングに関する追加リソースを提供します。始めましょう！
1. WordPress、テーマ、プラグインの更新
ソフトウェアの古いバージョンは、「jQueryが定義されていません」というエラーの最も一般的な原因の1つです。古いテーマやプラグインは、WordPressの最新バージョンと互換性がない場合があり、スクリプトの競合を引き起こす可能性があります。これを修正するには、次の手順を実行します。
まず、WordPress のコアが更新されていることを確認してください。ダッシュボード » 更新 に移動し、アップデートが利用可能な場合は「バージョン X.X.X にアップデート」をクリックしてください。
詳細については、WordPress を新しいバージョンに安全にアップデートする方法に関する完全ガイドをご覧ください。
WordPress プラグインのアップデートは、コアアップデートの下にリストされます。
すべてを選択して「プラグインを更新」をクリックできます。
最後に、WordPress テーマのアップデートが表示されます。
すべてを選択して「テーマを更新」をクリックするだけです。
テーマに加えた変更について懸念がある場合は、カスタマイズを失うことなく WordPress テーマを更新する方法に関するガイドに従ってください。
2. jQueryが正しく読み込まれているか確認する
より高度なソリューションを検討する前に、jQueryが実際にサイトで読み込まれているかどうかを確認することが重要です。この手順により、jQueryが利用可能で、期待どおりに機能しているかを確認できます。
WordPress サイトの任意の場所を右クリックし、「ページのソースを表示」を選択するだけです。
ヒント: または、Windowsの場合はCtrl + U、Macの場合はCmd + Option + Uを押すと、ページソースにアクセスできます。
これにより、ページの生の HTML と JavaScript が表示されます。
次に、Ctrl + F (Mac の場合は Cmd + F) を押して検索バーを表示し、「jquery.min.js」と入力します。
jQuery が正しく読み込まれている場合、コード内にその参照が表示されるはずです。
jQueryを探す別の方法は、ブラウザのインスペクトツールを使用することです。単に「ネットワーク」タブに移動してページを再読み込みしてください。
ヒント: Windows デバイスでは、キーボードの F12 キーを押すとインスペクトツールにアクセスできます。Mac では、Option + Cmd + I を押してください。
検索バーに「jquery」と入力してネットワークアクティビティをフィルタリングします。jQueryが読み込まれている場合、ここにリストされているのが表示されます。
どちらの方法でも jQuery が読み込まれていない場合は、WordPress での jQuery のエンキュー方法に問題がある可能性があります。次のステップで、この問題を修正する方法を説明します。
3. jQueryフォールバックを追加する
場合によっては、サイト上のスクリプトがCDNを使用してjQueryを読み込んでいるが、そのCDNに接続の問題が発生していることがあります。その場合、jQueryが読み込まれず、エラーが発生します。
この問題を解決するには、WordPress サイトに jQuery のフォールバックを追加できます。これにより、jQuery が常に読み込まれるようになります。
最初に読み込まれるように、サイトのheadセクションに追加する必要があります。ただし、テーマファイルを直接編集することは推奨しません。テーマを更新したときに、追加したコードが失われたという話をよく聞きます。
WordPressにカスタムコードを追加する最良の方法は、WPCodeプラグインを使用することです。これは、サイトを壊すことなくカスタムコードを安全に追加できるコードスニペットマネージャーです。
まず、WPCodeプラグインをインストールして有効化します。詳細は、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。
注: WPCode Lite という無料版も利用可能です。
有効化したら、コードスニペット » + スニペットを追加に移動します。「カスタムコードを追加（新規スニペット）」の下にある「スニペットを使用」ボタンをクリックします。
コードエディタで、「jQuery Fallback」のようなスニペットに名前を付けます。
その後、「コードタイプ」で「HTMLスニペット」を選択します。
次に、次のコードを「コードプレビュー」ボックスに貼り付けます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/wp-includes/js/jquery/jquery.js"><\/script>')
</script>
次に、「挿入」セクションまでスクロールします。
ここで、WPCodeにこのコードをどこに読み込ませるかを指定できます。「サイト全体ヘッダー」を選択してください。
最後に、上部にある「スニペットを保存」ボタンをクリックして、カスタムコードを保存します。
その後、トグルを「アクティブ」に切り替えて、スニペットをアクティブ化することを忘れないでください。
4. スクリプト読み込み順序の修正（上級者向け）
「jQueryが未定義」エラーのもう1つの一般的な原因は、jQueryがそれに依存する他のスクリプトよりも後に読み込まれていることです。スクリプトの読み込み順序を修正することで、jQueryが常に最初に読み込まれるようになり、競合を防ぐことができます。
jQuery に依存しているスクリプトがどれかわかっている場合は、jQuery を依存関係として追加することで、そのスクリプトを適切にエンキューできます。
「jQueryが定義されていません」というエラーが、他のスクリプトに依存するスクリプトよりも後にjQueryが読み込まれることが原因である場合、WPCodeを使用してスクリプトの読み込み順序を修正できます。
まず、WPCode プラグインをインストールして有効化するか、無料版の WPCode Lite を使用してください。
有効化したら、Code Snippets » + Add Snippetに移動し、「カスタムコードを追加（新規スニペット）」の下にある「スニペットを使用」ボタンをクリックします。
コードエディターで、スニペットに「Fix Script Loading Order」のような名前を付け、「PHPスニペット」をコードタイプとして選択します。
次に、カスタムスクリプトの依存関係としてjQueryがエンキューされるように、以下のコードを追加します。
wp_enqueue_script( 'your-script-handle', get_template_directory_uri() . '/js/your-script.js', array( 'jquery' ), null, true );
スクリプトを識別するためのわかりやすい名前に「your-script-handle」を置き換えることを忘れないでください。また、「/js/your-script.js」をテーマの /js/ フォルダ内の実際のスクリプトファイル名に置き換えてください。
コード内の array('jquery') の部分は、jQuery が最初に読み込まれることを保証します。
コードを追加したら、 ‘挿入’ オプションまでスクロールし、「サイト全体ヘッダー」を選択して、スクリプトがサイトの HTML の正しい部分に読み込まれるようにします。
最後に、上部にある「スニペットを保存」ボタンをクリックして、カスタムコードを保存します。
その後、トグルを「アクティブ」に切り替えて、スニペットをアクティブ化することを忘れないでください。
WPCodeを使用してスクリプトを適切にエンキューすると、jQueryが正しい順序で読み込まれることが保証されます。これが問題の根本原因であった場合、これによりエラーが解決されるはずです。
5. wp-config.php を編集して jQuery の読み込み問題を修正する
他の方法がうまくいかなかった場合は、WordPressがスクリプトの読み込みをどのように処理するかを制御することで、wp-config.phpファイルを編集することが役立ちます。
この方法は、スクリプトの連結やファイルパスの問題が「jQuery が定義されていません」エラーを引き起こしている場合に役立ちます。
この方法を適用する方法は次のとおりです。
まず、wp-config.php ファイルにアクセスします。これは、FileZilla のような FTP クライアントを使用するか、ホスティングコントロールパネルのファイルマネージャーにアクセスすることで行えます。
wp-config.php ファイルは、WordPress インストールのルートディレクトリ（通常は public_html フォルダ内）にあります。
ファイルを見つけたら、編集のために開き、/* That’s all, stop editing! Happy blogging. */ という行の直前に次のコードを追加します。
/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(FILE) . '/');
define('CONCATENATE_SCRIPTS', false);
このコードの機能は次のとおりです。
ABSPATHの定義は、WordPress がコアファイルへの正しいパスを認識していることを保証し、jQuery の読み込み問題を回避できます。CONCATENATE_SCRIPTS行は、スクリプトの連結を無効にします。これにより、WordPress は各スクリプトを個別に読み込むようになり、スクリプトがマージされたときに発生する競合を防ぎます。
このコードを追加した後、変更を保存してサイトをリロードし、エラーが解決したかどうかを確認してください。
スクリプトの連結を無効にすることは、特に他の方法が機能しない場合に、jQuery の問題をシンプルかつ効果的に修正できます。
「jQueryが定義されていません」というエラーに関するFAQ
WordPressで「jQueryが定義されていません」とはどういう意味ですか？
このエラーは、お使いのサイトでjQueryが正しく読み込まれていないことを意味します。その結果、スライダー、フォーム、メニューなど、jQueryに依存する機能が動作しない可能性があります。
これを修正するために wp-config.php を編集しても安全ですか？
はい、指示に注意深く従う限り可能です。私たちはこの方法を自分でテストしており、サイトを壊すことなくスクリプトの読み込み問題を解決するための一般的な方法です。
プラグインとテーマをアップデートすると、このエラーは本当に修正されますか？
多くの場合、はい。古いテーマやプラグインがjQueryを正しく読み込めない、または現在のWordPressバージョンと互換性がないためにこのエラーが発生することがあります。
これを自分で修正するのに気が進まない場合はどうなりますか？
プロのWordPressエージェンシーを利用すれば、すべて任せることができます。おすすめをお探しなら、ここではおすすめのWordPressサポートエージェンシーをご紹介します。
追加リソース：WordPress エラーのトラブルシューティング
上記のすべての手順で解決しない場合、またはさらに詳しく読みたい場合は、以下のリソースが良い出発点になる可能性があります。
- WordPressエラーのトラブルシューティング初心者ガイド（ステップバイステップ）
- WordPressでJavaScriptとスタイルを適切に追加する方法
- WordPressで最も一般的なエラーとその修正方法
- WordPressでレンダリングをブロックするJavaScriptとCSSを修正する方法
この記事がWordPressで「jQueryが定義されていません」というエラーを解決するのに役立ったことを願っています。また、WordPressでjQueryを最新バージョンにアップグレードする方法や、WordPress初心者向けの最高のjQueryチュートリアルの選び方に関するガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。