Gutenberg(WordPress)のコードエディタの使い方

Gutenberg は、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやCSSの知識を必要としない、編集方法になっています。また旧ビジュアルエディタよりさらに機能が追加されテーマのデフォルト装飾に依存することなく装飾をすることも可能になっています。

Gutenbergは、「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor」 は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

Gutenberg のコードエディタ

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

Gutenberg のコードエディタ
Gutenberg のコードエディタ

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

Gutenberg のコードエディタ
Gutenberg のコードエディタ

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

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

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

Gutenberg ブロックエディタに変換

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

Gutenberg ブロックエディタに変換
Gutenberg ブロックエディタに変換

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

Gutenberg ブロックエディタに変換
Gutenberg ブロックエディタに変換

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

Gutenberg に関連する記事

Gutenberg に関連する記事
Gutenberg に関連する記事

Gutenberg はCSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。tableを使ったデザインは比較的容易に作ることができますが、レスポンシブに対応させる…

Gutenberg のタグはタグ名を直接入力する仕様になっていて、使いがっては少し不便です。カテゴリーのようにチェックボックスで入力出来れば操作性が向上します。タグは関連する記事を複数のカテゴリーに渡って紐づけできる機能で、サイトの内の回遊率アップにも貢献…

Gutenbergは、「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。Gutenbergは従来の「Classic Editor」から切り替えられるとアナウ…

Gutenberg は WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネームです。グーテンベルクが印刷業界に起こしたのと同じ大規模な革命をパブリッシング体験全体に起こすことを目的としています。現在、プロジェクトは Wor…

Gutenberg はWordPress Ver.5.0以上からのビジュアルエディターになりました。Gutenberg は、ブロックを利用して見出しや本文、画像等を作成し組み合わせていきます。ブロックや文章を入力するエリア以外は基本的に従来と同じ使い方がで…