ワードプレスで記事を書いているとき、
編集画面がおかしくなって、こんな症状が出ることはありませんか？
・大半の文章が勝手にブロック化して半透明になる。
・部分的な編集ができなくなる。
（ブロック追加や装飾ができなくなる。）
・クラシックエディターでしか編集できなくなる。
・「このブロックには、想定されていないか無効なコンテンツが含まれています。」という文字が出る。
・上記の文字の横の「ブロックのリカバリーを試行」を押すと大半の文章が消えてしまう。
私も、最近ワードプレスを触っていると編集画面が頻繁におかしくなります。
一番困るのは、編集不可になったり、部分的に消そうとすると大部分が同時に消えてしまう状態です。
こんな感じです。
この状態が、記事の最後まで続くと嫌になりますよね。
しかし今回、コードエディターを操作してなんとかエラーの解除ができました。
この記事では、ワードプレスが編集できなくなった場合のコードの編集方法をまとめました。
私は今回けっこう悩み、時間をとられたので、
同じように困っている方の助けになればと思い書きました。
私のような、ワードプレスの操作やコードがほぼ分からない方の参考になると幸いです。
ぜひご覧ください。
ワードプレスが編集できなくなったときの対処手順
たとえばこんな画面になり編集できなくなった場合の対処法の手順はこちらです。
①コードエディターに切り替える
②コードを修正
③コードエディターを終了して、直っているか確認
④直っていなければ①にもどる
以下に詳しくご説明します。
①コードエディターに切り替える
コードエディターに切り替える方法はこちらです。
①ワードプレスの編集画面右上にある、縦三つに並んだ点を押す。
②コードエディターを選んで押す。
するとコード編集できる画面が出てくるので、
編集できなくなった部分から、コードを1つずつ確認していきます。
②ワードプレスの記事のコードを修正する
コードを修正するには、正しいコードを知っておかなければいけません。
以下に、基本のコードや修正のポイントをまとめましたのでご覧ください。
HTMLコードの基本
コードは＜＞で囲まれています。
コードの効果がある範囲は、2つで1つのセットになっていて、
／なしで始まり、文章をはさんで／ありで終わります。
例
＜P＞文章＜／P＞
こんな感じです。
ときどき例外がありますが、ややこしいのでとりあえずここでは気にせず進みましょう。
編集するときにチェックするポイント
難しいコードが分からなくても、最低限このポイントを知っておけば
なんとかなる場合もあります。
このポイントに注意して修正してください。
コードが壊れていないかどうかを見る
例えば、<p>のコードが<p
のように、>が抜けている場合があります。
その場合エラーが出るので＞を足してやります。
コードの順番がおかしくないか見る
ほんとは<p>文章<p>と囲まないといけないのに、
</p>文章<p>
など順番がおかしいとエラーが出ます。
このときは順番を直してやります。
以下にワードプレスのコード一覧を書いているので、
そちらを見て修正してみてください。
ワードプレスのコード一覧
ここではよく使うコードをまとめました。
基本的なものを覚えていると、自分で修正できて便利です。
※ワードプレスは5.0バージョンから「Gutenberg（グーテンベルグ）」というブロックで編集するエディターになっています。
ここでご紹介するコードは、ワードプレス5.0のGutenbergのコードです。
文章を入力するブロック<!– wp:paragraph –>
文章を入力するブロックです。
以下のセットで使います。
※あいうえおは文章例です。
<!– wp:paragraph –>
<p>あいうえお</p>
<!– /wp:heading –>
表示されるとこんな感じです。↓
あいうえお
見出しのブロック<!– wp:heading –>
見出しのブロックです。
以下のようにセットで使います。
この場合はh2の見出しです。
※あいうえおは文章例です。
<!– wp:heading –>
<h2 class=”wp-block-heading”>あいうえお</h2>
<!– /wp:heading –>
こちらはh4の見出しです。
<!– wp:heading {“level”:4} –>
<h4 class=”wp-block-heading”>あいうえお</h4>
<!– /wp:heading –>
ワクの中に文章を入れるブロック(赤)<div class=”blank-box bb-red”>
ワク内に文字を入れるブロックです。
いろんな種類がありますが、
こちらは白抜きの赤枠の中に文字を入れるブロックです。
※あいうえおは文章例です。
<!– wp:paragraph –><!– /wp:heading –>の囲みはいりません。
表示されるとこんな感じです。↓
下線をつける(赤)<span class=”marker-under-red”>
下線をつけるコードです。
文章中の下線をつける部分だけに使います。
表示されるとこんな感じです。↓
あいうえお
太字にする<strong>
太字にするコードです。
文章中の太字にする部分だけに使います。
表示されるとこんな感じです。↓
あいうえお
私が実際にやったコードの修正例
実際に私がどんな感じで修正したのかご紹介します。
コードエディターにしてコードを確認すると、
なぜかこんな風に、Pが大量にあり、順番が乱れていました。
この場合の修正後のコードはこちらです。
修正していく中で、画像やリンクのコードなど分かりにくい箇所はその部分をごそっと消します。
画像挿入などはコードが難しいので、通常の編集画面で編集し直した方が早いからです。
とりあえず全体的なエラーを直すために、分かりやすいコードやコードのきまりのみ修正します。
コードの配置の順番や、＜＞の抜けがないかなどをチェックしましょう。
おかしくなった位置から数ブロック直したら、
右上の「コードエディターを終了」を押して、編集できる状態に直っているか確認します。
何行か直しただけでも、コードエディターを終了すると編集可能になっている場合があります。
直っていなければ、再びコードエディターにして部分的な修正をしてみましょう。
まとめ
今回は、ワードプレスの記事編集画面で編集できなくなった場合の対処法をご紹介しました。
コードがあまり分からない場合、コードエディターですべて直すのは難しいです。
分かる部分だけ少しずつ修正していけば、
全体が一気に消える事態からは逃れられる確率が高いです。
ワードプレスの記事が編集できなくなったら、
コードエディターに切り替えて、分かるコードを直していくのが復旧の近道です。
ぜひこの方法を試してみてください。
HTMLをもっと学びたい人はこちらもどうぞ！
コメント