2026年5月20日
2026年5月20日
WordPressのブロックエディターがクラッシュする・真っ白になるときの対処法
投稿の編集画面を開くと、ブロックエディターが真っ白のまま表示されない、「エディターで予期しないエラーが発生しました。」と表示される、特定のブロックだけ「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示される。こうした症状の多くは、ブラウザー上で動くJavaScriptのエラーが原因です。この記事では、エラーの見つけ方、原因のプラグインやテーマの特定、壊れたブロックの直し方を順に説明します。画面の文言は2026年10月時点の日本語版WordPressのものです。
症状と主な原因
| 症状 | 主な原因 |
|---|---|
| 編集画面が真っ白、またはずっと読み込み中 | プラグイン・テーマのJavaScriptエラー、ブラウザー拡張機能による読み込みの妨害 |
| 「エディターで予期しないエラーが発生しました。」と表示される | ブロックやサイドバーを追加するプラグインのJavaScriptエラー |
| 特定のブロックに「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示される | 保存済みのHTMLが、現在のブロックの定義と一致しない(プラグインの更新、HTMLの手作業での編集など) |
手順1:ブラウザーのコンソールでエラーを確認する
まず、どのファイルがエラーを出しているかを確認します。
- 編集画面を開いたまま、F12キー(Macは Option + Command + I)で開発者ツールを開く
- 「コンソール」(Console)タブを開き、ページを再読み込みする
- 赤く表示されたエラーの行を見て、右端のファイル名(URL)を確認する
URLに /wp-content/plugins/プラグイン名/ が含まれていればそのプラグイン、/wp-content/themes/テーマ名/ が含まれていればそのテーマが疑わしいと判断できます。/wp-includes/ のファイルでエラーが出ている場合も、そのファイルを呼び出した別のスクリプトが原因のことがあるため、次の切り分けに進みます。
「エディターで予期しないエラーが発生しました。」の画面には「エラー文をコピー」ボタンがあり、エラーの内容をコピーできます。プラグインの作者に報告するときに使えます。
圧縮されていないスクリプトで原因を読みやすくする
WordPress本体のスクリプトは圧縮(minify)されているため、エラーの行番号から原因を追いにくいことがあります。wp-config.php の /* That's all, stop editing! */ の行より前に次を書くと、圧縮前のスクリプトが読み込まれます。
<?php
// wp-config.php:調査の間だけ有効にする
define( 'SCRIPT_DEBUG', true );
調査が終わったら削除するか false に戻してください。
手順2:ブラウザー側の原因を除外する
広告ブロッカーやスクリプトを止める拡張機能が、エディターのスクリプトを読み込ませないことがあります。シークレットウィンドウ(拡張機能が無効の状態)や別のブラウザーで編集画面を開き、症状が出るかを確認してください。別のブラウザーで正常に動くなら、元のブラウザーの拡張機能かキャッシュが原因です。
手順3:プラグインを無効化して原因を特定する
本番サイトでいきなり全プラグインを止めると、訪問者にも影響します。次のどちらかで切り分けます。
方法A:Health Check & Troubleshooting プラグインを使う
wordpress.org で配布されている「Health Check & Troubleshooting」プラグインのトラブルシューティング機能を使うと、ログイン中の自分にだけプラグインを無効化した状態とデフォルトテーマを適用できます。訪問者に見えるサイトは変わらないため、本番サイトでも切り分けができます。
方法B:WP-CLIで無効化する(ステージング環境向け)
ステージング環境や、サーバーにSSHで入れる場合はWP-CLIが速いです。元に戻せるよう、有効なプラグインの一覧を先に保存しておきます。
# 現在有効なプラグインの一覧を保存
wp plugin list --status=active --field=name > active-plugins.txt
# すべて無効化して、編集画面が開くか確認
wp plugin deactivate --all
# 1つずつ有効化して、症状が戻ったものが原因
wp plugin activate プラグインのスラッグ
# 確認が終わったら、元の状態にまとめて戻す
wp plugin activate $(cat active-plugins.txt)
管理画面の「プラグイン」→「インストール済みプラグイン」で、一括操作の「無効化」を使っても同じことができます。
手順4:テーマを切り替えて確認する
プラグインが原因でなければ、テーマをWordPressのデフォルトテーマに切り替えて確認します。インストール済みのデフォルトテーマのスラッグは wp theme list で確認できます。
wp theme list
wp theme activate twentytwentyfive
デフォルトテーマで正常に動けば、使っていたテーマのスクリプトが原因です。
手順5:テーマ・自作コードのスクリプト読み込みを直す
ブロックエディターの画面では、フロント用の wp_enqueue_scripts アクションは実行されません。そのため、フロント用のスクリプトを wp_enqueue_scripts で読み込んでいる限り、そのスクリプトがエディターを壊すことはありません。エディターに影響するのは、次のフックで読み込んだスクリプトです。
| フック | 読み込まれる場所 |
|---|---|
enqueue_block_editor_assets |
ブロックエディターの画面(エディター本体の側) |
enqueue_block_assets |
フロントとエディターの両方(エディターのコンテンツ部分を含む) |
admin_enqueue_scripts |
管理画面のすべてのページ(編集画面を含む) |
フロント専用のスクリプトを enqueue_block_assets や admin_enqueue_scripts で読み込んでいると、エディターでも実行されてエラーになることがあります。フロント用は wp_enqueue_scripts に移し、エディター用のスクリプトだけを enqueue_block_editor_assets で読み込みます。
<?php
// functions.php:フロント用とエディター用を分けて読み込む
// フロント(公開ページ)だけで読み込む。管理画面・エディターでは実行されない
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script(
'my-theme-main',
get_template_directory_uri() . '/js/main.js',
array(),
'1.0.0',
true
);
} );
// ブロックエディター用のスクリプトだけを読み込む
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-theme-editor',
get_template_directory_uri() . '/js/editor.js',
array( 'wp-blocks', 'wp-dom-ready' ),
'1.0.0',
true
);
} );
エディター用のスクリプトが wp.blocks などのWordPressのスクリプトを使う場合は、上のように依存関係(第3引数)に wp-blocks などを指定します。指定がないと、WordPressのスクリプトより先に実行されて Cannot read properties of undefined のエラーになることがあります。
他のプラグインのスクリプトを編集画面でだけ外す
管理画面全体で読み込まれる他のプラグインのスクリプトが原因で、プラグインそのものは使い続けたい場合は、投稿の編集画面(post.php と post-new.php)でだけ読み込みを外します。conflicting-script の部分は、原因のスクリプトのハンドル名に置き換えます。ハンドル名はプラグインのソースの wp_enqueue_script() の第1引数で確認できます。
<?php
// functions.php:投稿の編集画面でだけ、指定したスクリプトを外す
add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
if ( in_array( $hook_suffix, array( 'post.php', 'post-new.php' ), true ) ) {
wp_dequeue_script( 'conflicting-script' );
}
}, 100 );
優先度を 100 にしているのは、プラグインが標準の優先度(10)で読み込みを登録した後に外すためです。外したスクリプトに頼っていた機能は、編集画面では動かなくなります。根本的にはプラグインの更新や作者への報告で解決してください。
手順6:「無効なコンテンツ」と表示されたブロックを直す
ブロックに「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合は、次の順に試します。
- 表示されている「復旧を試みる」ボタンを押す。多くの場合、現在のブロックの形式で作り直されます
- 直らない場合は、警告の「復旧を試みる」ボタンの横にあるオプション(︙)メニューから「HTML に変換」を選ぶ。中身はカスタムHTMLブロックとして残ります
- 内容を確認し、必要なら新しいブロックで作り直す
作業の前に、記事の内容を控えておくと安心です。WP-CLIでは次のコマンドで本文のHTMLを確認・保存できます(123 は投稿ID)。
wp post get 123 --field=post_content > post-123.html
投稿のリビジョンが残っていれば、編集画面の右サイドバーの「リビジョン」から、ブロックが壊れる前の状態に戻すこともできます。
手順7:どうしても直らないときはクラシックエディターで回避する
原因の特定に時間がかかり、すぐに記事を更新したい場合は、WordPress公式の「Classic Editor」プラグインで一時的に旧エディターに切り替えられます。
wp plugin install classic-editor --activate
ただし、ブロックで作った記事をクラシックエディターで編集すると、ブロックの区切りが失われることがあります。あくまで一時的な回避策として使い、原因を直したら無効化してください。
まとめ
- まずブラウザーのコンソールでエラーを出しているファイルを確認する。
SCRIPT_DEBUGを一時的に有効にすると読みやすくなる - シークレットウィンドウや別のブラウザーで、拡張機能が原因でないかを確かめる
- プラグインは Health Check & Troubleshooting か WP-CLI で切り分ける。WP-CLI では有効なプラグインの一覧を先に保存する
- エディターに影響するのは
enqueue_block_editor_assets・enqueue_block_assets・admin_enqueue_scriptsで読み込んだスクリプト。wp_enqueue_scriptsはエディターでは実行されない - 他のプラグインのスクリプトを外すときは、
post.phpとpost-new.phpのときだけwp_dequeue_script()する - 「無効なコンテンツ」のブロックは「復旧を試みる」か「HTML に変換」で直す
関連記事: