【グーテンベルク】クラシックエディタからブロックエディタへ移行するとデザインが崩れる対策【wordpress】

こんな内容になっています。

クラシックエディタとブロックエディタを共存させる

結論からいうと、

今のうちにブロックエディタでの記事作成に慣れておくと、クラシックエディタのサポートが終了しても特に困る事なく記事を書いていけます。

サポート終了後でも”クラシックエディタを継続させる”という活動もある様ですが、突然の終了というリスクへの対処はしておきましょう。

共存方法

プラグイン【クラシックエディタ】の設定 or 【設定】→【投稿設定】でブロックエディタとクラシックエディタの両方を使える様になります。

この画像の様に【ユーザーにエディターの切り替えを許可】を【はい】にしておけばOK

それではテキストエディタで作った下の画像の記事をブロック化していきます。

ブロック化の失敗例

①クラシックエディタで書いた記事を【ブロックエディタで編集】しようとするとこんな画面が出てきます。

この時点でデザインは完全に崩れちゃってますね。

②ここから【解決】【HTMLに変換】もしくは下画像の様に【ブロックへ変換】を選んでみます。

③デザインの崩れた状態でブロック化が完成

こんな感じで崩れた状態で保存してしまうと、ここからの手直しはかなり大変で、記事をもう１度作成するくらいの修正が必要になるので、できれば避けたいですよね。

ちなみにミスクリックでデザインが崩れてしまったら保存をせずに【戻る】をクリックして前のページに戻りましょう。
自動保存などがされていない状態だと、ブロック化されていない編集前の状態まで戻れるのでやり直しがききます。

ブロック化の成功例

それではどの様にブロック化すればデザイン崩れが起きないのか紹介します。

①クラシックエディタで書いた記事を【ブロックエディタで編集】をはじめると下の画面になります。

②右上の【 ⋮ 】マークをクリックすると

• クラシックブロックに変換
• ブロックのリカバリーを試行

のメニューが出てきます。
この2つのメニューのどちらを選択しても、ブロック化によるデザイン崩れを防ぐことができます。

なんて簡単なのでしょう。

これでブロック化が完了しました。

すごく簡単なのですが、設定を間違えると修正にとてつもない作業量が必要になるのでこの方法は絶対におさえておきましょう。

過去に「ブロックエディタ」→「クラシックエディタ」→「ブロックエディタ」と変更し、デザインが崩れまくった僕が言うのですから間違いありません。

グーテンベルクに慣れておこう

クラシックエディタは公式でサポートを終了すると明言しているので、対策は必須ですね。
今からグーテンベルクに慣れておけば、どちらに転んでしまっても大丈夫なのでぜひ慣れておきましょう。

ブロックエディタを使うとYouTubeやTwitterを埋め込んだりする【iframe】タグや、コードを記述する【Highlight Code Block】などのプラグインが不要になります。

つまり使用するプラグインの数を減らせるのです。

知っている人も多いと思いますが、使っているプラグインが多くなるとサイトの表示スピードが遅くなりますよね。

サイトの表示スピードが遅くなるとGoogleからの評価が悪くなるので、検索順位に悪影響が出ます。

今後サイトの表示スピードをさらに重視するとGoogleが明言しているのでこちらも対策は必須です。

エディタをグーテンベルクにする事はこういった事への対策にもなります。

今回は以上になります。