【WordPress】新しいブロックエディタ「Gutenberg」の使い方

WordPress5.0から新エディタの「Gutenberg（グーテンベルグ）」が適用されましたね。旧エディタ用のプラグインで対応している方、使い手のことを考えてバージョンアップをしない方もいるかもしれません。

ただ、現在提供されている「Classic Editor（クラシックエディタ）」のプラグインは「2022年までのサポート」と告知されています。必要な限りとの記載もありますが、いつまで使えるのかという不安を残したままでは落ち着きませんよね。

Classic Editor is an official WordPress plugin, and will be fully supported and maintained until at least 2022, or as long as is necessary.

WORDPRESS.ORG ― https://ja.wordpress.org/plugins/classic-editor/

バージョンアップしない場合も、セキュリティ面、サポート面を考えるといずれ切り替えのタイミングが来そうです。

そこで、これをきっかけにグーテンベルグをはじめよう！という方向けに使い方をまとめました。すぐに使える知識や用語、旧エディタとの違いをわかりやすくご紹介していきます。

2022年になる前にマスターしてしまいましょう！

Gutenbergの基本画面

投稿、もしくは固定ページで新規追加すると、下記編集画面が開きます。ＡからＥまでの各メニューをそれぞれ解説していきますね。

【A】ブロックの追加

コンテンツを入力、挿入する場合は、基本的にブロックの追加をしていきます。 追加の仕方は、Ａのプラスマーク、もしくは各ブロックのメニューからできます。

また追加時のメニューは、よく使うもの、一般ブロック、フォーマット、レイアウト要素、ウィジェット、埋め込みとカテゴリ別に分かれており、その中にある各要素を選んで配置していきます。

見出し、段落

まずは見出し、段落を入れてみましょう。ブロックメニューから見出しを選択。

カーソルのある枠内に文字を入力します。同時に出てくるメニューからH2、H3、H4までの見出しタグを選ぶことができます。

入力を終え、Enterキーを押すと自動で段落ブロックが挿入されます。

画像

次に画像を挿入していきます。アップロード、メディアライブラリ、URLからの挿入の3つのボタンから選びます。こちらは旧エディタと同じ機能のため割愛しますね。

リスト

よく使うものカテゴリからリストを選択します。

リスト用のブロックの中に入力していきます。これで一括りです。
旧エディタのようにEnterキーで次のリストを入力、Enterキー2回でリストの編集が終わります。

テーブル

フォーマットカテゴリからテーブルを選択します。

新エディタは作成がとても簡単ですね。旧エディタの場合は、TinyMCE Advancedが必要でしたが、こちらは列数と行数を入力するシンプルなつくりになっています。

縦2列、横2列のテーブルを生成します。

テーブルが生成され、表示されるメニューから配置、行や列の追加・削除ができます。

また、テーブルのスタイルと背景色をサイドバーから選択できます。
スタイルはデフォルトとストライプの2種類。1行おきに色を変えたい場合はストライプを選びましょう。

クラシック

気になっていた方も多い機能かもしれません！フォーマットからクラシックを選択します。

使い慣れたクラシックエディタですね。使える機能は限られていますが基本ツールは揃っています。見出しや段落とは別に一括りとして扱うことができます。使い方は旧エディタと同じため割愛します。

カスタムHTML

フォーマットカテゴリからカスタムHTMLを選択します。

複数のブロックを追加してこのように使うことができます。ブロックの横に表示される矢印で、簡単にブロックを入れ替えることができますよ！

【B】サイドバーの設定

サイドバーにはタブが2種類あります。文書タブでは計7項目あり、使い方はこれまでと同じです。

ブロックタブは新エディタから追加されました。例えば、先ほどテーブルを挿入したときはスタイルを選ぶことができました。このように追加したブロックの内容により適用可能なスタイルが変わってきます。
他の例として、見出しは表示メニューからはH4タグまでしか選べませんでしたが、H6までの設定ができるようになります。

【C】画面の切り替え①

画面右上にある歯車マークの設定ボタンでサイドバーを隠すことができます。

【D】画面の切り替え②

画面右上、設定の横にあるボタンをクリックすると画面表示、エディタの切り替え、メニューやショートカットキーなどツールの設定ができます。

このなかでよく使うものとしてはエディタの切り替えが挙げられるでしょう。旧エディタと同様、編集方法をビジュアルもしくはコード（テキスト）のどちらかで選びます。

グーテンベルグはブロックの追加という特徴がありますが、コードエディタには継承されないため従来通りコードを枠内に入力していく形となります。

【E】公開

大きく変わった点はありませんが、優秀な機能を2つご紹介します。

一つ目は、公開する際に動作がワンクッション増えました。一見手間が増えただけのように見えます。しかし、次に必要なアクションが尋ねられ、再確認の時間が設けられたことで、誰もが使いやすい、ミスを防ぐ設計となりました。

二つ目は、編集がリアルタイムで反映されることです。従来は公開、更新したとしても、別タブで開いている内容は手動で最新の状態にする必要がありました。今回のバージョンアップではそれが改善され、手待ち時間が減る結果となりました。

考え方は人それぞれあるかもしれませんが、時間をかけるところ、短縮すべきところのメリハリがついたように見受けられます。

今回は新エディタ、「Gutenberg（グーテンベルグ）」の使い方をご紹介しました。

バージョンアップが入ると見た目もツールも変わって、制作と並行して取り入れていくのはなかなか難しいところもあります。エディタだけでなくプラグインも日々更新され、サポートが終了する場合もあるので、今から少しずつ備えていきましょう。