WordPressで編集ボタンで特定ページが真っ白になる【グーテンベルク】

グーテンベルクや投稿画面のトラブルに関する覚書です。

WordPressで編集ボタンで特定ページが真っ白になる【グーテンベルク】

特定ページのみ、繰り返して表示される症状に悩まされました。編集ボタンを押しても真っ白になるため何もできません、結論からいうとPタグの重複が原因でした。

<p><p>Pタグの重複</p></p>

繰り返しはh2タグの後にアドセンスを挟んでいること原因だと思われますが、おそらくブロックの中におかしなhtmlが混入しているのが原因だと察しをつけました。

次の段取りで解決しました。

1. 編集できないため、phpmyadminにログイン(MYSQLのユーザー名とパスワード)
2. wp_posts > データベース > 検索
3. 記事のidを入れて検索する
4. 編集
5. htmlでおかしなところを探す

htmlでおかしなところを探すのは次のようなことをやりました。

• その記事のバックアップを取ります(テキストエディタに張り付ける&WordPressの管理画面で複製する)。
• 手動で切り貼りしてどこまでなら問題なく表示できるかざっくりとあたりをつける
• AIクロード君と協力しながらおかしなところを探す

WordPressのGutenberg（グーテンベルク）のメリットデメリット

メリットはイメージがつかみ易いです。ただ、クラッシックエディタでも慣れていると想像力で補えるため、そこまでメリットを感じませんでした。クラッシックでもただ更新してみるだけですし。

デメリット：開発者泣かせ

開発者の負担になる。やったことないのでわかりませんが、想像するにWordPressのテーマ開発者の負担になるような気がしました。購入する側もグーテンベルク を使うならしっかりとコードブロックに対応したテーマしか買えないような気がしました。

デメリット：一括置換が面倒い!search regexに注意

ブログ運営が長くなると一括置換ってめちゃくちゃ使います。しかし、グーテンベルクは注意が必要です。。

テーマやプラグイン移行時に問題が複雑化するかもです。

テーマ変更する人でグーテンベルク使ってる人は注意してくださいね。

テーマ専用ブロックの中身は、テーマ変更後にその記事を更新すると消えます。

例えば「search regex」のような一括変換プラグインを使うと記事を更新した扱いになり、ブロック内が全て消滅するので最新の注意を

— マスティ (@masty_blog) September 20, 2019

【悲報】
Search Regexで、Gutenbergのスペーサーの幅を一括置換したら、置換を行ったスペーサーに全てエラーが発生しているのが判明。

Search Regexは基本Gutenbergには使わない方が良いのか…仕事がまた一つ増えました…

沼です…底なし沼です… pic.twitter.com/qaRsNC2F9k

— ツヨシ｜Tsuyoshi Mizoguchi (@24shi_web) April 17, 2020

affinger4→Cocoon
◎Search Regexでadsenceをadに置換。
(私はCocoonの場所一括指定の機能使おうと思って空白に置換)

◎Cocoonの装飾コード(マーカーとか)に置換。

✖Gutenbergで記事開いたら改行すべて消滅。チーン。(これはテーマ替え関係なしかも)
旧エディタに戻した←消えた改行は戻らない模様

— lisa (@lisa_chi_ba) December 23, 2019

じゃあ安全に1ページだけ置換しようと考える人はいるかもしれません。今回はそうだったので。クラシックエディタならテキストエディタに貼り付けて置換後に元に戻す方法でも楽勝ですよね。

Find & Replace for Text Editingというページを一括で変更するChromeのアドオンがあります。→(追記 Chromeストアから消えたようです)

ちなみに解決方法は次のとおり。他にあるのかな(?)

Gutenberg（グーテンベルク)の記事一括置換わかった

１、縦3点のアイコン > コードエディタ
２、そのコードをVsCode(他のエディタでも大丈夫)にコピペ
３、一括置換して元に戻す

ChromeのアドオンFind & Replace for Text Editingではうまくいかず#WordPress #フリーランスと繋がりたい

— 個人開発作家 まったりんneru (@neruplan) January 14, 2022

最近、Twitterでもテクニカルな情報をつぶやきはじめました。

使いにくいWordPressのグーテンベルクブロックエディターを克服する方法

コードブロックが融通が効かない

クラッシックエディタからグーテンベルクに変換すると、多くのコードは「整形済みテキスト」になる。たぶん何らかの問題があるからこうなっているんだけど、ここが１つの問題点。修正するのは大変なので、記事をリライトしない限り放置することを決定。

また、個人的にファイル名がつけられるようにカスタマイズしていました。これが災いしました。

• [コードブロック](filenameの指定ができない。。)
• [カスタムHtml](この方法を採用しました)
• プラグイン[Highlighting Code Block]

本来なら[コードブロック]を使うのが正統派という気がしますが、class以外の特殊のデータをセットしようとするとはじかれます。融通が効かないですね…。自分でカスタマイズしていない人は[Highlighting Code Block]を利用すると楽です。行数やコピー、ダーク& ライトに対応していますので、良プラグインだと思います。

Twitterの貼り付けに注意

クラシックエディタからグーテンベルクに、コピペで貼り付けた場合、引用になってしまいます。引用になった場合、Html編集してあれこれソースをいじらないといけません。しかも引用のまま使えませんからソースを修正したのち、カスタムHtmlで埋め込むことになります。これなら１からやり直した方が早いですね。。

クラシックエディタからクラシックエディタに、コピペで貼り付けたのち、ブロックに変換するとうまくいきます。

落とし穴でしたね。。

長文のコピペが解除される

長文になるとドラック&ドロップではコピペがうまくいかない症状がありました。

command+Aを2回で全文コピーはいけました。

画像を拡大、リンク化する

画像選択 > リンクの挿入のアイコン > メディアファイル

三角の下向きアイコン > 新しいタブで開く

WordPressのグーテンベルク・ブロックエディターのエラー

更新に失敗しました。データベース内の投稿を更新できませんでした。

更新に失敗しました。データベース内の投稿を更新できませんでした。

どこかのブロックでエラーがでていますね。グーテンベルクの場合はそのページだけ対応すると、大丈夫になることがあります。WordPressがすべて真っ白になるグーテンベルク以前と比べると、よくなったと言えます。

対応方法はエラーがでているブロックを探します。新規記事にコピペする、記事を複製する等の方法によりバックアップを取り、原因を突き止めます。原因となるコードが外れれば記事は普通に更新されるはずです。

このサイトで重大なエラーが発生しました。対応手順については、サイト管理者のメール受信ボックスを確認してください。

このサイトで重大なエラーが発生しました。対応手順については、サイト管理者のメール受信ボックスを確認してください

グーテンベルクの場合、このエラーがでると記事を開くことはできませんが、複製することはできました。複製して修正した方が早いことがあります。複製元で原因を突き止める必要があります。

WordPressの投稿画面のエラーやトラブル解消

投稿画面が編集中に勝手にスクロールするバグ

表示オプション > [ 最大行表示エディターと集中執筆モード機能を有効化します ]をオフ

1記事だけWordPressのリビジョンを削除するプラグイン

WordPressのリビジョンを削除するプラグインはいろいろとありますが、1記事だけお手軽に削除したい場合はどうすればいいのか？でした。管理画面にこのメッセージが表示されたときです。

以下のバージョンよりも新しい自動保存された投稿があります。
自動保存を表示

もっと新しいリビジョンがある場合、このメッセージが表示されますが、「いや、新しいのは古いのなんだってうざい！」という画面があるかもしれません。今のが正しいからもうこのメッセージは不要！と消すのですが、毎回表示されます。WordPressのこの仕様はui的に困ったものです。。

ローテクですが新規記事を作成してすべてコピペするのが早いですね。古い記事のurlに変更することも忘れないでください。日付やカテゴリなどの再指定が必要です。リビジョンが表示される記事はゴミ箱にポイ捨てです。ちなみに記事を複製するプラグインはリビジョンまでコピーされてしまうためうまくいきません。

数分で終わりますが、もっと楽な方法があれば知りたいところです。