今回はワードプレスのエディタがバグってしまい正常に更新作業ができなくなってしまった場合の緊急対処法を紹介します。
先日、WordPressのバージョンを5.5にアップデートしたら、私が使用しているテーマのルクセリタスではブロックツールバーのプログラムと最新バージョンのWordPressの相互性が崩れ、エディタがエラーを出し更新作業が全く出来ない状態になってしまいました。
下記の記事を見て頂ければ分かるのだが、今回のバグは非常に簡単に原因がわかりましたし、最終的にはテーマのアップデートファイルも配信され無事解決たので良かったが、、、
もし、テーマのアップデートが行われなかったら。ある程度の知識を持っていないとブログ更新は続ける事が出来なかったことになります。
それは非常にリスキーな態勢だと思ったので、今回の記事で緊急時の対策をご紹介します。
WordPressのアップデートでエディタがバグった時の緊急対処法
WordPressのアップデートでエディタがバグった時の緊急対処法は、以下の2パターンがあります。
- Gutenberg（グーテンベルク）のコードエディタを利用して更新作業をする。
- クラシックエディタプラグインをインストールして利用する
何らかの原因でエディタ上で下記の様にエラーが起きてしまった場合、Gutenberg（グーテンベルク）の投稿画面右上にある「・・・」をクリックして表示されるメニューから「コードエディタ」をクリックしてコードエディタモードにして直接HTMLを入力して更新作業を行います。
基本的な使い方は以下です。
<!-- wp:paragraph -->
<p>
ここに入力したテキスト
</p>
<!-- /wp:paragraph -->「wp:paragraph」で挟まれた箇所がGutenberg（グーテンベルク）の1ブロックです。
ここに表示させたい要素をマークアップで記述していきます。
（wp:paragraphはコメントなので実際は無くてもOK）
もう一つの方法はプラグインの「クラシックエディタ」をワードプレスにインストールして、これを使用する方法です。
古いエディタに戻ってしまいますが、恐らくバグは解消されます。
＊ただクラシックエディタの場合、いつか完全にサポートされなくなるかと思います。
バグった状態でも今までと同じ要素を使いたい場合
またバグが起こる前には使用出来ていたエディタの機能をどうしても使いたい場合は、下記の方法を使えば完璧に再現出来ます。
まずは使用したい要素を使った事がある過去の記事を見て下さい。
正常に表示されているなら、バグった状態でも完璧に再現出来ます。
使用したい要素に向かって右クリックをして下さい。
そして「検証」or「要素の詳細を確認」を押してデベロッパーツールを開きます。
次に、デベロッパーツールのコード上で使用したい要素を選択して右クリックして下さい。そこの「編集」→「HTML」をクリックします。すると該当部分のHTMLを選択出来ます。そのコードをコピーしておきす。
コピーしたコードを、実際に再現したいページのコードエディタ上に丸々ペーストします。
（技術的な知識があれば、画像の差し替えや、要素の大きさの調整もここで可能です。ただ今回はその説明は省かせて頂きます。）
するとコピー元と全く同じ見た目で完全に表現できます。
エディタがバグっていてもこの様に全く同じ要素をしようする事は出来ます。
（クラシックエディタの場合はテキストエディタに同じ様にコードをコピペすれば再現出来ます。）
コードを理解するのが難しい方へ
今回は技術をあまり持っていないブロガーさん達にも、同じ様に緊急の対応ができる様に最低限の要素のコピペ用コードを用意しました。
どうしてもデベロッパーツールが扱えない方や、HTMLの書き方が分からない方は、下記のコードをコピーして、コードエディタにペーストしてから「ここにテキスト」の部分に好きな文章を打ち込んで下さい。
テキストの入力
<!-- wp:paragraph -->
<p>ここにテキスト</p>
<!-- /wp:paragraph -->見出し(h2)
<!-- wp:heading -->
<h2>見出し大(h2)</h2>
<!-- /wp:heading -->見出し(h3)
<!-- wp:heading {"level":3} -->
<h3>見出し中(h3)</h3>
<!-- /wp:heading -->見出し(h4)
<!-- wp:heading {"level":4} -->
<h4>見出し小(h4)</h4>
<!-- /wp:heading -->リスト(通常)
<!-- wp:list -->
<ul>
<li>ここにリスト</li>
<li>ここにリスト</li>
<li>ここにリスト</li>
</ul>
<!-- /wp:list -->リスト(数字付き)
<!-- wp:list {"ordered":true} -->
<ol>
<li>ここに数字付きリスト</li>
<li>ここに数字付きリスト</li>
<li>ここに数字付きリスト</li>
</ol>
<!-- /wp:list -->表
<!-- wp:table -->
<figure class="wp-block-table">
<table><tbody>
<tr>
<td>表1-1</td><td>表1-2</td><td>表1-3</td><td>表1-4</td>
</tr>
<tr>
<td>表2-1</td><td>表2-2</td><td>表2-3</td><td>表2-4</td>
</tr>
<tr>
<td>表3-1</td><td>表3-2</td><td>表3-3</td><td>表3-4</td>
</tr>
<tr>
<td>表4-1</td><td>表4-2</td><td>表4-3</td><td>表4-4</td>
</tr>
</tbody></table>
</figure>
<!-- /wp:table -->画像
<!-- wp:html -->
<img src="ここに画像のURL" alt="" class="wp-image-525 imgstyle">
<!-- /wp:html --> 上記のコードはWordPressのコードエディタ上で表示されているコードをただコピペしてきただけです。
なので、ご自身がよく利用している要素も、同じ様にコードエディタでコードを抜き取っておけば、何かあった際にコピペのみで再現でき、しっかりリスクに備えられます。
以上が「WordPressのアプデ後にエディタがバグった時の緊急対処法」でした。
ワードプレスはいつもリスクが付き纏うので、それに対応出来る予備知識と事前のリスクヘッジは非常に大事になります。
今回のアップデートは大丈夫だったかもしれませんが、生半可な気持ちでいるといつか大きなバグと遭遇して絶望することになるので、今からでも多少の知識UPと備えはしておきましょう。
