2026年9月9日

WordPress管理画面でJavaScriptエラーが出るときのデバッグ手順

エラー・白い画面

管理画面のボタンが反応しない、ブロックエディターが真っ白になる、メディアライブラリが読み込まれないといった症状の多くは、ブラウザ側でJavaScriptがエラーを起こして処理が止まっていることが原因です。ブラウザの開発者ツールでエラー文と発生元のファイルを読めば、どのプラグインやテーマが関係しているかはかなりの確率で分かります。この記事では、コンソールの読み方、WordPressのデバッグ用定数、競合の切り分け、原因別の直し方を順に説明します。

管理画面のJavaScriptエラーで起きる症状

次のような症状は、JavaScriptのエラーを疑う目安になります。

「更新」「公開」などのボタンを押しても何も起きない
ブロックエディターが表示されない、または「エディターで予期しないエラーが発生しました」のような表示が出る
メディアライブラリのグリッドが読み込み中のまま止まる
メニュー画面やウィジェット画面で、ドラッグ操作や開閉ができない
プラグインの設定画面でタブ切り替えや保存が効かない

PHPのエラーと違い、JavaScriptのエラーは画面に何も表示されないことが多く、サーバーのログにも残りません。手がかりはブラウザの中にあります。

ステップ1：ブラウザのコンソールでエラーを読む

コンソールを開く

問題の起きる管理画面を開いた状態で、開発者ツール（Chrome・Edgeなら F12、Macなら Command+Option+I）を開き、「Console（コンソール）」タブを選びます。赤く表示されている行がエラーです。表示が多い場合は、ページを再読み込みしてから問題の操作をもう一度行い、その直後に出た行に注目します。

エラー文の読み方

よく見るエラーと、その意味は次のとおりです。

**Uncaught TypeError: ... is not a function**：存在しない関数を呼んでいます。読み込み順の問題や、古い書き方（jQueryの廃止されたメソッドなど）が原因であることが多いです。
**Uncaught ReferenceError: jQuery is not defined**：jQueryより先にそのスクリプトが実行されています。依存関係の指定漏れや、最適化系プラグインによる読み込み順の変更が疑われます。
**SyntaxError: Unexpected token '<' や JSON.parse のエラー**：JSONが返るはずの通信に、HTMLが混ざっています。多くはPHPの警告やエラーメッセージが出力されているか、エラーページが返っています。
**Refused to execute script ... MIME type**：JavaScriptのファイルを読みに行ったら、HTML（404ページなど）が返ってきています。

エラー行の右側には、発生元のファイル名と行番号が表示されます。クリックするとソースが開くので、URLに /wp-content/plugins/プラグイン名/ や /wp-content/themes/テーマ名/ が含まれていれば、それが第一候補です。

発生元が load-scripts.php になっている場合

管理画面では、WordPressコアのスクリプトが load-scripts.php で1つにまとめて配信されることがあり、その場合は発生元が分かりにくくなります。次の定数を wp-config.php に追加すると、まとめずに個別のファイルとして読み込まれ、さらに圧縮していない読みやすい版が使われます。

define( 'SCRIPT_DEBUG', true );
define( 'CONCATENATE_SCRIPTS', false );

SCRIPT_DEBUG はコアの .min.js の代わりに圧縮前の .js を読み込ませる定数で、エラーの行番号が実際のコードと対応するようになります。調査が終わったら、どちらも削除するか false に戻します。wp-config.php を編集する前には、ファイルのバックアップを取っておいてください。

ステップ2：ネットワークタブで通信を確認する

JavaScriptのエラーが通信の失敗から来ている場合は、「Network（ネットワーク）」タブも確認します。問題の操作を行い、赤く表示されたリクエストや、ステータスが 4xx・5xx のリクエストを探します。

admin-ajax.php や /wp-json/ へのリクエストが500になっている場合は、サーバー側のPHPエラーです。wp-config.php で WP_DEBUG と WP_DEBUG_LOG を true、WP_DEBUG_DISPLAY を false にして、wp-content/debug.log を確認します。
応答（Response）の先頭に Warning: や Notice: などのPHPのメッセージが入っている場合は、それがJSONを壊しています。WP_DEBUG_DISPLAY が true になっていないか、サーバーのPHP設定で display_errors が有効になっていないかを確認します。
.js ファイルが404になっている場合は、プラグインの更新失敗でファイルが欠けているか、キャッシュや最適化プラグインが作ったファイルが削除されています。

ステップ3：競合を切り分ける

ブラウザ側の要因を除く

まず、ブラウザ拡張機能（広告ブロッカー、翻訳、パスワード管理など）が管理画面のスクリプトを妨げていないかを確かめます。拡張機能が無効になるシークレットウィンドウやゲストプロファイルで管理画面にログインし、症状が出なければ拡張機能が原因です。あわせて、強制再読み込み（Ctrl+Shift+R など）で古いキャッシュの影響も除いておきます。

プラグイン・テーマの競合を調べる

ブラウザ側に問題が無ければ、プラグインとテーマの競合を調べます。本番サイトでは、プラグイン「Health Check & Troubleshooting」のトラブルシューティングモードを使うと、ログイン中の自分だけ、すべてのプラグインを無効にしデフォルトテーマに切り替えた状態を再現できます。訪問者の表示には影響しません。

トラブルシューティングモードで症状が消えたら、プラグインを1つずつ有効にして、エラーが再発するものを探します。コンソールに出ていたファイル名から候補がある程度絞れているなら、そのプラグインから試すと早く済みます。

WP-CLIが使える場合は、プラグインの一覧と状態をまとめて確認できます。

wp plugin list --status=active
wp plugin deactivate plugin-slug

plugin-slug は一覧に表示されたプラグインのフォルダ名に置き換えます。本番サイトで無効化する場合は、事前にバックアップを取り、影響の少ない時間帯に行ってください。

原因別の直し方

プラグイン・テーマが古い

WordPressコアは、管理画面で使うライブラリ（jQueryやReactなど）を更新することがあります。古いプラグインがその変更に追いついていないと、is not a function 系のエラーになります。まずプラグインとテーマを最新版に更新し、それでも直らない場合は、プラグインのサポートフォーラムにコンソールのエラー文を添えて報告するか、代替プラグインを検討します。

最適化・キャッシュ系の機能が管理画面に影響している

JavaScriptの結合・遅延読み込み・圧縮を行うプラグインや、CDNのスクリプト最適化機能が、管理画面やログイン後の画面にまで適用されていると、読み込み順が変わってエラーになることがあります。設定で管理画面やログインユーザーを対象外にするか、該当機能を一時的に止めて症状が消えるかを確認します。

自作コードでのスクリプト読み込みの誤り

テーマやプラグインを自作している場合は、管理画面用のスクリプトを admin_enqueue_scripts フックで読み込み、依存関係を正しく指定します。対象画面を限定しておくと、ほかの画面との競合も防げます。

add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
	if ( 'settings_page_my-plugin' !== $hook_suffix ) {
		return;
	}
	wp_enqueue_script(
		'my-plugin-admin',
		plugins_url( 'js/admin.js', __FILE__ ),
		array( 'jquery' ),
		'1.0.0',
		true
	);
} );

settings_page_my-plugin は、自分の設定ページのフック名に合わせて変更します。依存配列に jquery を入れておけば、jQueryの読み込み後に実行されます。スクリプトの中で $ を使う場合は、jQuery( function ( $ ) { ... } ); のように包んで使います。

直ったあとの確認

修正後は、コンソールを開いたまま問題の画面を再読み込みし、赤いエラーが出ないこと、元の操作（保存、公開、メディアの読み込みなど）ができることを確認します。SCRIPT_DEBUG と CONCATENATE_SCRIPTS、WP_DEBUG などの調査用の設定は元に戻します。開発者ツールのタブ名や表示はブラウザのバージョンによって異なる場合があります（2026年10月現在）。

まとめ

管理画面の「ボタンが効かない」「真っ白」は、まず開発者ツールのコンソールで赤いエラーと発生元ファイルを確認する
発生元が分かりにくいときは SCRIPT_DEBUG と CONCATENATE_SCRIPTS で個別・非圧縮の読み込みに切り替える
Unexpected token '<' などは通信にPHPのエラーが混ざっている合図なので、ネットワークタブと debug.log をあわせて見る
拡張機能の影響を除いたうえで、Health Check & Troubleshooting でプラグイン・テーマの競合を切り分ける
自作コードは admin_enqueue_scripts で依存関係を指定して読み込む