タグアーカイブ 301 Redirects

Bricksページ編集時にYoast SEOがエラーになる原因と直し方

Bricksページ編集時にYoast SEOがエラーになる原因と直し方

Bricksで作成したページの編集画面でYoast SEOメタボックスにエラーが表示され操作できない場合、301 Redirects PRO(5.75)のJavaScriptがwp.dataストアを安全確認なしに参照して例外を投げているのが原因だ。同プラグインを一時停止すればYoast SEOパネルは復帰し、恒久対応はwp.data.selectの呼び出し前にストアの存在を確認する修正になる。

BricksページでYoast SEOメタボックスがエラーになる原因

BricksページでYoast SEOメタボックスがエラーになる原因

BricksはWordPress用の有料ページビルダーで、ドラッグ&ドロップでレイアウトを作成できる。Bricksで作ったページを編集すると、WordPressのクラシック編集画面が読み込まれる。ところがBricksは独自の編集フローを持つため、クラシックエディタで使われるcore/editorストアがWordPressのwp.dataに登録されない。

この状態で301 Redirects PROのスクリプトがcore/editorを参照すると、undefinedに対してisSavingPostを呼ぼうとしてTypeErrorが発生する。具体的にはwp.data.selectの戻り値がundefinedのまま、その上でisSavingPostメソッドを呼んでいる。

この例外は共有のwp.dataレジストリへ伝播する。結果として同じ画面で動作しているYoast SEOのclassic-editor.jsまで処理が中断し、メタボックスに「問題が発生しました。予期しないエラーが発生しました」というエラー(英語表示ではSomething went wrong. An unexpected error occurred.)が表示される。

エラー発生時 301 RedirectsのJS → select(‘core/editor’) がundefined → isSavingPost() でTypeError
↓
共有wp.dataレジストリに例外が伝播する
↓
Yoast classic-editor.jsも実行停止
↓
Yoast SEOメタボックスにエラー表示
修正後 ストアの存在チェック → undefinedならreturn
↓
例外が発生せず、Yoastのスクリプトが正常に読み込まれる

上のデモは、301 Redirects PROのスクリプトが例外を投げ、その影響がYoast SEOまで波及する流れと、ストア存在チェックを入れた修正後の挙動を示している。

ブラウザコンソールで原因を切り分ける手順

ブラウザコンソールで原因を切り分ける手順

開発ツールを開いてエラーを確認する

ChromeやEdgeで問題の編集画面を開き、F12キーを押してデベロッパーツールを表示する。Console(コンソール)タブを選ぶと、UndefinedのプロパティisSavingPostを読み取れないというUncaught TypeErrorが記録されている。発生元ファイルは301-redirects-global.jsだ。

Uncaught TypeError: Cannot read properties of undefined (reading 'isSavingPost')
  at 301-redirects-global.js?ver=5.75:94:57

エラーがwp.data.subscribeから繰り返される理由

問題のスクリプトはwp.data.subscribeのコールバック内でwp.data.selectを呼んでいる。wp.data.subscribeは投稿編集画面の状態が変わるたびに発火するため、保存状態の更新などで何度も同じ例外が起こる。最初の例外で止まらず、Yoast側の初期化処理にも繰り返し影響するのが特徴だ。

301 Redirects PROを一時停止してすぐに復旧する

301 Redirects PROを一時停止してすぐに復旧する

プラグイン一覧から301 Redirects PROを無効化する

管理画面のプラグインから301 Redirects PROを無効化する。これでエラーは消え、Yoast SEOメタボックスが通常どおり表示される。301 Redirects PROが作るリダイレクト設定はデータベースには残るため、無効化中も設定自体は失われない。

無効化中はリダイレクトが停止する点に注意する

プラグインを無効化すると、公開サイトのリダイレクト処理も止まる。301 Redirects PROで旧URLから新URLへ転送している場合は、無効化中だけ転送が機能しなくなる。緊急で編集画面を使うため一時的に無効化し、用が済んだら再有効化する運用が現実的だ。

恒久的な修正コードとプラグイン更新の見通し

恒久的な修正コードとプラグイン更新の見通し

根本的には301 Redirects PROのJavaScriptを、core/editorストアが存在する場合だけ処理するように修正する必要がある。具体的にはwp.data.selectの戻り値を確認してからisSavingPostを呼ぶ形だ。

const editor = wp.data.select('core/editor');
if (!editor) {
  return;
}
const saving = editor.isSavingPost();

この修正はプラグイン提供元が配布する更新で反映されるのが望ましい。開発元にフォーラムやサポートを通じて報告し、修正版のリリースを待つ。自分でファイルを直接編集するとプラグイン更新時に上書きされるため、恒久策としては推奨しない。

なおBricksは有料のプレミアムプラグインであるため、無料プラグインの開発者と同じようには検証環境を整えにくい。報告の際はBricksのバージョンと、Bricksの編集画面ではcore/editorストアが存在しないことを添えると対応がスムーズになる。

同じタイプのJavaScript競合を未然に防ぐ

同じタイプのJavaScript競合を未然に防ぐ

wp.data.selectでストアを取得する際に存在確認をしないコードは、他のプラグインでも同様のエラーを起こす。特にBricksのようにクラシックエディタのストアを読み込まないビルダーを使う場合、エディタ依存のスクリプトは衝突しやすい。

新しくプラグインを導入するときは、同じ編集画面に別のJavaScriptを読み込む組み合わせでテストする。ステージング環境でコンソールエラーが出ないか確認しておくと、本番サイトでYoast SEOのような重要機能が突然動かなくなる事故を防げる。

よくある質問

このエラーはYoast SEOのバグではないのか?

Yoast SEO側のスクリプトが例外を出しているように見えるが、実際には301 Redirects PROの301-redirects-global.jsが例外を投げ、その影響でYoastの処理が止まっている。エラーの発生源をコンソールで確認すると、301-redirects-global.jsが最初にTypeErrorを出していることが分かる。

301 Redirects PROを停止すると、リダイレクト設定は消えてしまう?

プラグインを無効化しても、保存されたリダイレクト設定はデータベースに残る。ただし無効化中はリダイレクト処理自体が実行されないため、公開サイトでは旧URLから新URLへ転送されなくなる。編集作業が済んだら再有効化すればよい。

Bricks以外のページでも同じエラーは起こる?

可能性はある。core/editorストアが登録されない画面、例えばフロントエンドやカスタム投稿タイプの特殊な編集画面でも同じ条件が揃えば発生する。問題はBricksに限らず、編集画面にcore/editorが存在しない状態でこのスクリプトが動く場合すべてに当てはまる。

プラグインのJavaScriptを自分で編集して直すのは安全?

応急処置としては可能だが、プラグインが更新されると変更が上書きされる。動作保証もなく、修正ミスで別のエラーを呼ぶ可能性もある。恒久対策は提供元の更新を待つのが安全だ。

エラーが改善されたかどうかはどうやって確認すればいい?

301 Redirects PROを無効化した状態で編集画面をリロードし、Yoast SEOメタボックスが正常に表示されるか確認する。さらにコンソールタブを開き、新しいTypeErrorが記録されていないかを確認する。保存状態の変化でもエラーが出ないことを確かめれば、競合が解消していると判断できる。

この記事のポイント

  • 301 Redirects PRO 5.75のJSがwp.dataストア参照を誤り、Yoast SEOを巻き込む
  • Bricksではcore/editorストアが登録されないため条件がそろう
  • 一時復旧は301 Redirects PROの無効化が確実
  • 恒久修正はwp.data.selectの戻り値チェックが必要
  • ステージング環境でコンソールエラーを確認する運用が再発防止になる