AI要約
WordPressサイトの所有者であれば、サイトが正常に機能しなくなるエラーに時折遭遇するでしょう。これらのJavaScriptの問題は、特にオンライン初心者にとっては、トラブルシューティングが困難な場合があります。
JavaScriptはWordPressのテーマやプラグインの重要な部分です。これは、JavaScriptに関連する問題がコア機能をすぐに壊したり、サイトを遅くしたり、ユーザーエクスペリエンスに影響を与えたりする可能性があることを意味します。
このガイドでは、ブラウザコンソールでエラーを見つけることから、プラグインやテーマの競合を特定し、WordPressをセーフデバッグモードで実行することまで、WordPressでJavaScriptエラーを見つけて修正する方法を説明します。
WordPressでJavaScriptエラーを修正する方法
どこを見ればよいか分かれば、通常は数分でJavaScriptエラーの原因を見つけることができます。以下に、私が最初に確認する5つの場所と、今後これらのエラーを防ぐのに役立つ習慣をいくつか紹介します。
JavaScriptの問題を特定してトラブルシューティングする方法
JavaScriptエラーはさまざまな理由で発生する可能性があります。サイトで問題を引き起こしている原因を発見するための最良の場所をいくつか紹介します。
1. ブラウザの開発者ツールを使用する
ブラウザのコンソールは、JavaScriptエラーを特定する際に最も役立ちます。アクセス方法は次のとおりです。
まず、JavaScriptエラーが発生しているページを開きます。次に、ページ上の任意の場所を右クリックし、検証をクリックしてブラウザの開発者メニューを開きます。
キーボードショートカットを使用したい場合は、ChromeではMacでCmd+Option+J（WindowsではCtrl+Shift+J）を押します。Firefoxでは、Cmd+Option+KまたはCtrl+Shift+Kが相当します。
ここに表示されたら、コンソールタブに移動してJavaScript関連の警告を表示します。エラーが表示されない場合は、ページを再読み込みする必要がある場合があります。
JavaScriptの問題は通常、コンソールで赤色のテキストで表示されます。トラブルシューティング中は、問題を引き起こしているスクリプト、ファイル、または関数に関する手がかりを提供するメッセージを探してください。
コンソールでJavaScriptエラーを特定したら、その発生元を追跡できます。ここでは、ブラウザのコンソールで表示される可能性のある最も一般的なエラーのいくつかを説明します。
- Uncaught ReferenceError: jQuery is not defined: スクリプトが読み込まれる前にjQueryを使用しようとしたか、まったく読み込まれませんでした。サイトエディターを基盤とするブロックテーマは、プラグインが要求しない限りjQueryをエンキューしません。
- Uncaught TypeError: $ is not a function: jQueryがnoConflictモードで読み込まれ、スクリプトがそれでも「$」ショートカットを使用しました。通常、スニペットを「jQuery(function($) { })」ブロックで囲むと解決します。
- Uncaught SyntaxError: カスタムコードのタイプミスまたは余分な文字。コンソールにファイル名と行番号が表示されるため、通常は見つけるのに十分です。
- Uncaught TypeError: Cannot read properties of undefined: スクリプトが、ターゲットとする要素がページに存在する前に実行されました。これは、スニペットがフッターではなくヘッダーで読み込まれる場合に一般的です。
- .jsファイルで404またはnet::ERR_ABORTEDが発生： ファイルがまったく読み込まれませんでした。CDN、キャッシュプラグイン、または更新中に名前が変更されたファイルを確認してください。
ほとんどの場合、問題はエラーが発生したファイル/場所を示します。そこから、プラグインまたはテーマに関連しているかどうかを判断できます。
2. プラグインまたはテーマの競合を特定する
WordPressのJavaScriptエラーのほとんどは、プラグインまたはテーマの競合が原因であることがよくあります。複数のプラグインまたはテーマが互換性のないJavaScriptライブラリまたは重複する関数を使用している場合、問題が発生する可能性があります。
競合のトラブルシューティング方法は次のとおりです。
テーマの競合
WordPressのデフォルトテーマに一時的に切り替えることをお勧めします。これらのテーマの少なくとも1つは、通常、WordPressサイトにプリインストールされています。常に年で名前が付けられています（例：Twenty Twenty-Six）。
WordPressのデフォルトテーマのいずれかを有効にするには、WordPressダッシュボードから外観 » テーマに移動します。次に、デフォルトのテーマにカーソルを合わせ、有効化をクリックします。
テーマを切り替えた後に問題が消える場合は、WordPressテーマに問題がある可能性が高いです。
すぐにできる解決策は、アップデートを確認することです。新しいバージョンが利用可能な場合は、今すぐ更新リンクをクリックしてテーマを更新してください。
多くの場合、テーマのアップデートで重大なJavaScriptの問題が修正されている可能性があります。問題が続く場合は、テーマ開発者に連絡し、一時的に新しいテーマに切り替えることをお勧めします。
WPFormsは、最も頻繁に発生する一般的なテーマの競合についても文書化しています。
プラグインの競合
デフォルトテーマに切り替えてもエラーが解決しない場合は、次にプラグインの競合を確認します。
これを行うには、サイト上のすべてのプラグインを無効化し、JavaScriptエラーが引き続き発生するかどうかを確認する必要があります。より詳細な手順については、テーマまたはプラグインの競合をテストする方法ガイドを参照してください。
これを行うには、プラグイン » インストール済みプラグインに移動し、チェックボックスをクリックしてすべてのプラグインを選択します。
その後、一括操作ドロップダウンをクリックし、無効化を選択します。
次に、適用をクリックして、WordPressサイトのすべてのプラグインを無効化します。
エラーが解消された場合、WordPressプラグインのいずれかが問題の原因である可能性が高いです。問題のあるプラグインを見つけるには、プラグインを1つずつ再度有効化します。これを行うには、プラグイン名の下の有効化をクリックします。
プラグインを有効化した後、エラーが再度発生するかどうかを確認します。エラーが再度表示される前に有効化したプラグインが、おそらく原因です。
問題のあるプラグインを特定した後、利用可能なアップデートがないか確認することをお勧めします。もしあれば、プラグインを必ずアップデートしてください。
プラグインの開発者が問題を解決するアップデートをリリースした可能性があります。しかし、アップデートが利用できない場合は、問題のあるプラグインを削除して代替プラグインに切り替えることを検討してください。
3. WordPressのデバッグツールを使用する
WordPressには、JavaScriptの問題を明らかにするのに役立つ組み込みのデバッグツールが含まれています。サイトでデバッグモードを有効にすると、WordPressはサイトのフロントエンドで発生したエラーを表示します。
デバッグモードを有効にするには、サーバー上のWordPressファイルにアクセスする必要があります。アクセス方法は、 FTP、 cPanel、または FTPファイルマネージャープラグインのいずれかを使用します。
サイトファイルを開いたら、編集のために「wp-config.php」を開く必要があります。これはサイトのルートフォルダにあります。「wp-config.php」ファイルで、「WP_DEBUG」を「true」に設定します。これにより、WordPressのデバッグモードがオンになり、エラーがログに記録されます。
define( 'WP_DEBUG', true );
WPFormsには、利用可能な定数についてさらに詳しく知りたい場合のために、WordPressでデバッグを有効にする方法に関する完全なチュートリアルがあります。
WordPress には、コアソフトウェアの他の領域をトラブルシューティングするための追加の定数も含まれています。たとえば、WordPress コアスクリプトの非圧縮バージョンを表示したい場合は、次のスニペットを wp-config.php コードエディターに追加します。
define('SCRIPT_DEBUG', true);
SCRIPT_DEBUG が有効になっている場合、WordPress は wp-includes/js/script.min.js の代わりに wp-includes/js/script.js のようなファイルを読み込みます。これは、サイトの開発やデバッグ中に非常に役立ちます。コードに完全にアクセスして、検査や変更を容易にすることができるためです。
エラーログをサイトのフロントエンドに表示する代わりにファイルに保存したい場合は、WP_DEBUG_LOG 定数を有効にする必要があります。これを行うには、wp-config.php ファイルに次のコード行を追加します。
define('WP_DEBUG_LOG', true);
WP_DEBUG_LOG が有効になっている場合、エラーは wp-content/debug.log にあるファイルに記録されます。このログには、どのスクリプトが誤動作しているかに関する貴重な情報が含まれていることがよくあります。
4. トラブルシューティングモードを有効にする
プラグインを無効にしたりテーマを切り替えたりしてもウェブサイトが正常に動作しない場合は、Health Check & Troubleshooting のようなツールを使用してトラブルシューティングモードを検討してください。これを行うには、サイトに Health Check & Troubleshooting プラグインを インストールして有効化 する必要があります。
このプラグインを使用すると、サイトの訪問者に影響を与えることなくトラブルシューティングモードを有効にできます。このアプローチは、ダウンタイムを許容できないライブサイトで特に役立ちます。
プラグインを有効にした後、WordPress 管理エリアから Tools » Site Health に移動します。次に、Troubleshooting タブに移動します。
次に、Enable Troubleshooting Mode ボタンをクリックして続行します。
これにより、サイトのすべてのプラグインが無効になり、サイトはデフォルトのテーマに設定されます。トラブルシューティングモードの画面にリダイレクトされます。
ここでは、管理された環境でテーマとプラグインを管理できます。サイトに問題がある場合は、Notices セクションに表示されます。
トラブルシューティングモードを有効にすると、サイトはネイティブ WordPress テーマにデフォルト設定されます。
デフォルトのテーマを使用することでサイトのエラーが解決するかどうか、サイトを確認することをお勧めします。もしそうであれば、問題はおそらく WordPress テーマに関連しているでしょう。
Available plugins ドロップダウンをクリックすると、サイト上のすべてのプラグインが表示されます。ここで、プラグインを 1 つずつ有効にして、プラグインの競合を確認できます。プラグインを有効にするには、プラグイン名の横にある Enable をクリックします。
詳細については、このガイドの トラブルシューティングプラグインの競合 セクションの手順に従ってください。サイトのトラブルシューティングが完了したら、Disable Troubleshooting Mode ボタンをクリックして、元の状態に戻します。
5. パフォーマンスプラグインの競合を確認する
エラーがライブサイトでのみ表示される場合、ログアウトした訪問者のみに表示される場合、またはキャッシュをオフにした瞬間に消える場合は、パフォーマンスプラグインが原因である可能性が高いです。
Defer JavaScript、Delay JavaScript、Minify、Combineのような設定はすべて、スクリプトの実行順序を変更します。jQueryは、他のスクリプトが準備完了であることを期待している場合に安全に遅延させることができないため、その順序は重要です。
WP Rocket、LiteSpeed Cache、Autoptimize、Perfmattersなどのプラグインにはすべてこれらのオプションが搭載されており、意図的というよりはワンクリック最適化プリセットによって有効にされることがよくあります。
サイトエディターを基盤とするブロックテーマは、明示的に要求されない限りjQueryをまったくエンキューしないため、古いテーマで正常に機能したスニペットがTwenty Twenty-Sixに切り替えた後に破損する可能性があります。
CDNの停止は同様のことを行い、プラグインがWordPress自体からではなくCDNからjQueryをロードするたびにスクリプトを一緒にダウンさせます。
- これをテストするには、パフォーマンスプラグインですべてのJavaScript最適化をオフにし、すべてのキャッシュをクリアして、ページを再読み込みしてください。
- エラーが解消された場合は、エラーが再表示されるまで設定を1つずつ再度有効にしてください。次に、破損したスクリプトをその設定の除外リストに追加します。
- jQuery自体については、除外するパスは
/wp-includes/js/jquery/jquery.min.jsです。
WP Rocketがキャッシュプラグインの場合は、WPFormsに最適化設定の構成に関するドキュメントがあります。ドキュメントのJavaScriptが正しく読み込まれないは、より広範なチェックリストをカバーしています。
JavaScriptエラーを回避するためのベストプラクティス
以下に、WordPressサイトを保護し、JavaScript関連の問題の発生を防ぐためのヒントをいくつかご紹介します。
- サイトを最新の状態に保つ： WordPress、テーマ、その他のプラグインを定期的に更新することで、競合やバグを回避できます。多くの場合、発生した問題は、プラグインまたはテーマの最近の更新によって解決されている可能性が高いです。更新を積み重ねることは、私が遭遇するより一般的なWordPressのミスの1つです。
- カスタマイズには子テーマを使用する: テーマやプラグインを更新すると、サイトに追加したカスタムコードスニペットが上書きされることがあります。これにより、JavaScript機能が破損する可能性があります。子テーマを使用すると、カスタムスニペットが変更されないことが保証されます。
- カスタムJavaScriptスニペットを再確認する: WordPressテーマまたはプラグインにカスタムJavaScriptを追加した場合は、正しくフォーマットされていることを確認してください。また、サイトの他のスクリプトと互換性があるかどうかも確認してください。競合を回避するために、インラインJavaScriptを関数でラップするか、
jQueryを使用することをお勧めします。 - スクリプトを適切にエンキューする: カスタムスクリプトを追加する場合は、WordPress関数を使用して適切にエンキューし、読み込みの問題を防ぐ必要があります。以下に例を示します。
function my_custom_scripts() {
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
- 複数のブラウザでテストする: 最新のブラウザはJavaScriptの実装をほぼ標準化しています。ただし、古いバージョンのInternet Explorerを含むさまざまなブラウザでサイトをテストすることは依然として重要です。これにより、Web開発プロセスの早い段階でブラウザ固有の問題を特定できます。
- 適切なエラーハンドリングを実装する: カスタムJSスニペットでの適切なエラーハンドリングの実践は、多くの問題が大きな混乱を引き起こすのを防ぐことができます。これには、try-catchブロックの使用や、可能な場合のフォールバックオプションの提供が含まれます。
WordPressでJavaScriptエラーを修正するためのFAQ
これらは、WordPressでJavaScriptエラーを修正することに関する最も一般的な質問への回答です。
WordPressでJavaScriptをデバッグするにはどうすればよいですか？
WordPressでJavaScriptエラーをデバッグするには、さまざまな方法があります。最も簡単な方法は、組み込みのブラウザツールを使用してコンソールでJavaScriptの警告を確認することです。
または、サイトのwp-config.phpファイルを編集してSCRIPT_DEBUGモードを有効にすることもできます。trueに設定すると、WordPressは、読み取りやデバッグが難しいミニファイされたバージョンではなく、CSSおよびJSファイルの元の非ミニファイされたバージョンを読み込むようになります。
WordPressでJavaScriptエラーが発生する原因は何ですか？
互換性の問題、およびテーマとプラグインの競合が、WordPressでJavaScriptエラーを引き起こすことがよくあります。さらに、サイトに追加したカスタムJavaScriptスニペットが正しくない場合にも発生する可能性があります。
JavaScriptコンソールエラーを読み取るにはどうすればよいですか？
これを行うには、まずブラウザの開発者ツールを開く必要があります。次に、コンソールタブをクリックして、そこでエラーメッセージを確認します。警告やエラーが表示されない場合は、ページを更新する必要がある場合があります。
JavaScriptでコンソールエラーをキャッチするにはどうすればよいですか？
ブラウザの開発者ツールメニューのコンソールタブに移動することで、それを行うことができます。多くの場合、一般的なJavaScriptエラーが赤色のテキストで強調表示されているのがわかります。
WordPressサイトでJavaScriptが機能しないのはなぜですか？
ブラウザコンソールから始めてください。エラーが発生したファイルと行の名前が記載されています。
完全にクリーンなコンソールは、通常、スクリプトがまったく読み込まれていないことを意味し、コードの問題ではなく、キャッシュまたはCDNの問題を示しています。
そこから、競合が原因であるかどうかを調べるためにプラグインを一括非アクティブ化し、パフォーマンスプラグインがスクリプトを遅延または最小化しているかどうかを確認します。
次に、WordPressで使用するのに最適なプラグインを探る
この記事では、WordPressでJavaScriptエラーを特定して修正する方法を説明しました。経験則として、プラグインとテーマを最新の状態に保ち、カスタムJavaScriptを追加する際にはベストプラクティスに従うことを忘れないでください。
また、WordPressサイトで推奨プラグインを使用し、WPForms Proのnulledプラグインのようなプラグインのnulledバージョンを使用しないようにしてください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
