WordPress【Gutenberg】のコードエディタの使い方

コードエディタ

ソースコードで直接編集をしたいときには画面右端のオプションボタンをクリックします。少し下部にビジュアルエディターとコードエディターが上下に表示されているので、コードエディタをクリックします。

ブロックエディタで編集すると各ブロックがコメントアウトによって囲まれていることを確認できます。コメントアウトを削除してしまうとビジュアルエディタに表示されなくなったり、カラムレイアウトを使っている場合などはレイアウトが崩れてしまったりするので注意が必要です。

※Crayon Syntax Highlighter　でソースを色分け表示しています。

上記図のように意図しないところに空タグが作られてしまうことがあります。このことによって悪影響が出ることはないといえますが、あまり多いようなら削除しておきましょう。無駄にファイル容量を多くしてしまうと、表示スピードに影響を与えてしまうこともあります。

HTMLタグを手打ち編集される方も多いのではないかと思いますが、ブロックエディタで作成したページに追加もしくは挿入でコードを編集するとコメントアウトで囲むことはされませんので注意が必要です。保存時にWordPressが修正してくれることがありますが、正確でないこともまだあります。ブロックエディタで編集、コードエディタで確認と微調整程度の使い方がいいかもしれません。

ブロックエディタに変換

グーテンベルグ以前に作成したページをブロックエディタに変換するには、ブロックに変換機能を使います。まず、ページを編集モードで読み込みます。ブロックが設定されていないのでページ先頭部に下図のように　クラシック　と表示されているので、ここをクリックします。

すると　ブロックへ変換　と表示されるのでこちらをクリック、これでページ全体がブロック化され、各ブロックがコメントアウトで囲まれます。

なお、ページ全体をブロック化せず、部分的にブロック化した部分をコピー挿入しても表示には問題ないようです。

※

メリットとデメリット

「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。」

サポート終了が近くなっていますが、「Gutenberg」への移行率が低くしばらくは「Classic Editor」も利用できそうです。

メリット	デメリット
ブロックの種類が多い、カラムを分割することができる、ギャラリーやボタン、ウイジェットなども挿入できる。高度なデザインのページ編集ができる	高度なデザインの記事を作るには便利ですが、高機能なことで操作が難しく感じられる
コンテンツの色やサイズを細かく設定できる	ブロックの生成作業が面倒、記事を書き進めるたびにブロックを選択して生成する手間が発生する
ブロックごとに簡単にコピーしたり入れ替えたりできる	クラッシックブロックがビジュアルエディタにしか対応していない

Gutenberg への移行

「Gutenberg」はいづれWordPressのデフォルトエディタになることは間違いないでしょう。当初の予定では2021年12月31日で「Classic Editor」のサポートを終了するはずでした。しかし、その後思ったほど「Gutenberg」の使用率が高くないため、2022年以降、必要ならばサポート保守される方針に変更されました。

WordPress導入時から「Gutenberg」を利用しているサイトは問題ありませんが、「Classic Editor」でサイトを構築している場合はそれなりに準備をされることが推奨されます。エディタを切り替えることで表示されない等はありませんが、編集に戸惑ってしまう、編集に関するプラグインが利用できないといったことは発生します。（「Add Quick Tag」は機能しなくなります。）この際徐々に変更されるのがお勧めかもしれません。

WordPressのブロックエディタ（Gutenberg）は直感的に編集できる優れたエディタですが、記事を装飾したり、レイアウトデザインをしたいときには少し戸惑うこともあるかもしれません。編集機能がサポートされているテーマを利用すと悩みを解決できるかも。凝ったデザインや複雑なレイアウトを提供してくれる業者やフリーターを探すサービスも利用価値があるのでは？