エディターで予期しないエラーが発生しました。でドハマりした件

やられました。ちくせう。

追記(2020/04/09)
WordPress5.4にアップデート後に同症状が多発しているようで、
こちらの記事に多数のアクセスを頂いています。
本記事の最後にも書いてありますが、ひとまずブラウザのキャッシュを
削除してみると良いかも知れません。

思い返せば初歩的なミスで、とてもお恥ずかしい話なのですが
誰かの役に立てば、また備忘録として事の発端から順を追って
記録しておきます。

解決までの道のりが長いので
さっと解決策を知りたい方は目次から飛んでくださいな。

事の発端

ネットショップっぽい物を作ろうぜ。
ということでひとり盛り上がり、四苦八苦しながらも
立ち上げました。

お試し用の商品(現在メルカリでのみ取扱中)を並べて
満足した感はありますが、もう少し手を加えれば運用可能なレベル・・・
(現在はメンテナンスモードのため非公開中です)

将来的には雑貨とか3Dプリンタで作った何かとか売れればいいなぁ(願望)

話が脱線しましたが、こちらのサイトは
WordPressのマルチサイト機能で作成されています。

沢山のサイトで紹介されているので詳細は省きますが
要するに、一つのドメインで複数のWordPressサイトを持てますよ
というもの。素晴らしい。

メリット、デメリットはそれぞれありますが
簡易的にやってみる分には良いかなぁ~と。

WordPressを立ち上げて、1ヶ月以上経っていると
選択肢がサブドメインしか無くなり、サブディレクトリでの
マルチサイトが作れなくなるとかいうトラップもありましたが
強引に回避する術もあったため、サブディレクトリにてショップサイトを
立ち上げました。いやぁ、Welcartは凄い。

ショップサイトの立ち上げ方の記事ではないので、この辺で

問題の発生

サイトの立ち上げが完了し、その日は就寝。

翌日、エックスサーバーのXアクセラレータVer2が使えます
という通知のメールが来たので、適応がてら紹介の記事を書こうとしたところ・・・

おう、なんだこれ。

新規投稿のエディタを開いて、ブロックにカーソルを合わせた瞬間に
クラッシュするらしく、上記画面が出てきました。

エラー文をコピーして読んでみると
core/graphicがなんたら・・・

エディターの表示に必要な何かが定義されて無いよ。的なエラーでした。

Chromeのデベロッパツールでも同じようなエラーを吐いています。

現状の整理
  • 記事の新規投稿が出来ない(Gutenbergのブロックにマウスオーバーするとクラッシュする)
  • もちろん過去記事も編集不能
  • ユーザー>個人設定>「ビジュアルリッチエディターを使用しない」で暫定回避可能
  • WordPress4時代に入れられたGutenbergのベータ版プラグインを有効にすると使える(記事編集画面が英語になるため扱いにくい&現在のレイアウトと若干異なる)
  • 上記からGutenbergが不調の可能性大
  • プラグインのClassicEditorは試していないが、WordPressを始めたときからGutenbergのため今更使えない。

暫定の解決策ならいくつかあったが、サポート終了が
明言されているため、ClassicEditorはあまり使いたくありません。
さてどうするか?

やってみたこと① とりあえずプラグインを全て無効化

【結果】今回は無関係でした。

個別サイト及びサイトネットワークのプラグインを全て停止しました。

現象は変わらず。残念。

やってみたこと② サイトキャッシュのクリア

【結果】今回は無関係でした。

サイト表示の高速化のために、キャッシュを保持しているため
プラグインから全て削除してみました。

結果変わらず。

やってみたこと③ Ctrl+F5キーで更新(スーパーリロード)

【結果】結果、失敗でした。

ダッシュボード上でCtrl+F5キーで更新してみました。
ブラウザのキャッシュを使わずにリロードしてくれます。

結果は変わらず。

MEMO
後々分かったのですが、スーパーリロードには弱点もあり、対象のページから直接参照されるキャッシュは破棄できるが、間接的に参照されるファイルは従来通り読み込まれるようです。
例えば、ページを表示して一緒に表示される画像やスクリプト(背景画像固定のcssとか)は破棄されますが、一定のアクション時に発動するJavascriptから参照されるファイルは読み込まれてしまうようです。

予想ですが、Gutenbergのブロックにマウスオーバーした際に発動するJavascriptが参照していたスクリプト(php?)がブラウザのキャッシュに残っていた事が原因と考えられます。

スーパーリロードの仕様が分かっていれば
ここまで悩まずに解決だった説・・・

参考 Chromeのキャッシュを「完全に」削除する方法、まとめ。<br /> 開発ブログ

やってみたこと④ 設定内のサイトURLを修正する

【結果】バグ修正にはなったようですが、目的とは違いました。

デベロッパツールでデバッグしていると、特定のページを開いた際に
http://temrer.comのディレクトリから画像を引っ張ろうとしているのを発見

このブログはSSL化しているため、本来であればhttps://temrer.comから持ってくるはず・・・
しかも赤エラー出てるし?

httpの表記がどこに残っているのか探してみたところ
サイトネットワーク管理>サイト>編集>設定

でhttpの生き残りを発見!

もうコレだろ!ということでsiteurlの変更について調べました。

補足
今のバージョンだからなのか、自分の環境だからかは分かりませんが
自分のWordPressは直接変更が出来ませんでした。

phpMyAdminでデータベースの書き換えを行いました。

データベースの仕組みとか正直よく分かりませんが
先人の知恵をお借りしつつ、サイトURLをhttpsにしました。

手順はだいぶ端折りましたが、とりあえずサイトURL変更完了です。

httpからデータ引っ張ろうとしてるぞエラーは直ったのですが
新規投稿のエラーは直りませんでした。残念。

やってみたこと⑤ WordPressのダウングレード

【結果】今回は無関係でした。

最新版って3月11日に弄られてる?

これって、WordPressがアップデートして悪さしてるんじゃ?

と思い、データ吹っ飛ぶリスクもありますが
5.1から5.03にWordPressのダウングレードを行いました。

ファイル数が多すぎてエックスサーバーのFTPではやりきれないので
FFFTPを導入しました。

wp-contentフォルダとwp-config.php以外は総取っ替えです。
.htaccessはWordPressのパッケージに含まれていませんが消さないようにしましょう!

結果は変わらず。そろそろネタが無いよ。

やってみたこと⑥ マルチサイトの解除

【結果】今回は無関係でした。

諸悪の根源マルチサイトを解除してみました。

wp-config.phpと.htaccessを元に戻し、データベースを弄る前に状況を確認・・・
変わらず。

引き返そうとしたところ.htaccessの中身を忘れて
復旧に手間取りました。

リダイレクトが効かず、サイトネットワークの管理画面に入れないため
.htaccessの書き換えコードも見れない始末。コレはさらにまずい・・・
なんてことになったので、中身を書き換える際はバックアップをしっかり取りましょう。

URLを直接叩いて事なきを得ました。

ここまで苦労したのに結果変わらず。
なおらない。現実は非情である。

そもそもマルチサイトを作ってこんなエラーに遭遇した人が居ない!

やってみたこと⑦ Microsoft Edgeでアクセスしてみる

最後の砦、Edgeさんです。
こういう時だけ出てきます。

期待と諦めを胸にログイン・・・

わああああああ、開いたあああああああああ

残念!原因はChromeさんでした。

Chromeさんは知らぬ間にアップデートが掛かるので
アップデートログを見ると8日前(2019.3.13現在)にアップデートされていた模様。

最後の記事は2日前に書けているのでアップデートのせいでは無さそう・・・

この二日間でやった事は全て試したので、残るは・・・

キャッシュか!?

やってみたこと⑧ ブラウザキャッシュを削除してみる【解決】

・・・ということでブラウザのキャッシュを削除します。

半分ヤケクソで片っ端から消してやりました。

そして無事復活。おかえりGutenberg!

WordPress側で大きな仕様変更がある場合は
キャッシュ(読み込み速度を速めるためによく使いそうなデータをブラウザ上に保存しておく機能)が邪魔をしてしまうようです。

憶測になりますが、WordPressが機能するために必要なファイルがいくつかキャッシュに残り、コアファイルはバージョンが新しいのに付随するファイルがキャッシュから読み込まれてエラーを起こしているのでしょう(?)

今回はキャッシュクリアという初歩的な方法で直りましたが
ちょっとの操作ミスでブログが表示不能になったりするので
改めてWordPressは慎重に扱わねばという気になりました。

いやぁ、直って良かった・・・。

とりあえず、何かおかしいと思ったらキャッシュを削除すること!

18 COMMENTS

匿名

wordpress 5.4に更新した際、同じ状況になりました。Chromeの履歴データ削除でアクセスできるようになりました。ありがとうございます。

返信する
ろけっと

WP5.4に更新後、アクセス不能になってしまいましたが、Chrome履歴データを削除して、回復しました。ありがとうございます!

返信する
鹿

全く同じ症状で困っていました。初心者なので初歩的方法すら自分では思い浮かばず、非常に助かりました!

返信する
匿名

WordPress5.4に更新したら、同様の症状になり、検索でたどり着きました。
キャッシュの削除で解決しました。
本当にたすかりました!ありがとうございます!

返信する
やまだ

WordPress5.4に更新をしたら、同じ症状になり、検索していたら、こちらのサイトにたどり着きました。
同じようにキャッシュの削除で解決し。
たすかりました、ありがとうございます!
こちらへのリンク貼っても良いですか?

返信する
てめれぇ

ご報告頂きありがとうございます!
無事解決して良かったです。
リンクフリーなので問題ないですよ!

返信する
たく

先ほど同じ状態になりまして、記事の通り進めて直りました!とても助かりました!ありがとうございます!

返信する
匿名

safariで同じ症状になりました。更新した日のブラウザ履歴を消すことで治りました。このページは多くの人の参考になると思います。ありがとうございました。

返信する
山猿

WordPress5.4へのアップデート後、同じ症状に陥りましたが、キャッシュの全削除で治りました…‼ 本当に助かりました。。ありがとうございます!

返信する

コメントを残す

メールアドレスが公開されることはありません。