このグーテンベルグとは、WordPress5.0から新しく搭載された新エディタです。過去のエディータとはまるで別物です。
このエディタの特徴は、従来のエディタには無かった「ブロック」という新機能を搭載していることで、段落、画像、見出しなどがひとつのブロックとして扱われています。
文章や見出しも直感的に操作できるし、画像、Twitter、YouTube、ブログカードなどの埋め込みも簡単にできるので初心者の方にも安心です。
では、早速基本的な使い方から見ていきましょう。
コンテンツ
編集画面の見方
左メニュー＞投稿＞「新規追加」をクリックすると編集画面が表示されますのでここにタイトル、見出し、文章を書いて記事を作っていくことができます。
ブロックの追加や一つ前の作業へ
まずは、編集画面の左上をご覧ください。
ここでブロックの追加やひとつ前の作業に戻ったりすることができます。また、ページ内の見出しやブロックの構成も一目でわかるようになっています。この辺りは実際に触ってみればすぐに分かると思います。
それでは記事作りの基本となるタイトル、見出し、文章の入力方法を見ていきましょう。
タイトル入力方法
それではタイトルにGutenbergと入力してみますね。タイトルを入力するとタイトル上にパーマリンクの入力箇所が表示されます。
パーマリンクが決まっていれば入力しておきましょう。決まっていなければ後回しで構いません。（文書タブからでも設定できる）
見出し入力方法
各ブロックを選択するには下図にあるブロック追加ボタン、（＋）マークをクリックします。
各ブロックを追加するときには＋ボタンを押すと覚えておきましょう！
ブロック選択ボックスの中の「見出し」をクリックすると見出しブロックが追加されるのでそこに見出しを書いていきます。
見出しボックスが表示されると右サイドバーに 見出しレベルや色、追加CSSなどの詳細設定ができます。
見出しレベル
見出しレベルはSEOにも重要な要素になるので必ず設定しておくようにします。
見出しレベルはH1～H6からなり、数字が小さいものほど重要度も大きいです。例えば、記事タイトルはとても重要なのでレベルH1を使うということになります。
基本的にH1はタイトルに使うのでH2からH6を記事内（文章中）に使うのが普通です。
最近では特に見出しレベルは必要なくすべて段落（ｐタグ）でも問題ないと言われていますが、レベルを設定しておくと検索結果の説明文に見出し項目が表示される可能性があるので設定しておきましょう。
追加CSSの使い方
右サイドバーの高度な設定から追加CSSクラスを設定することができます。
例えば、見出しやボックスのデザインを変更するためclass名を使っている場合にこの欄にclass名を入力します。
見出し位置変更
ページに表示される見出しの位置も「左寄せ」「中央寄せ」「右寄せ」の好きな位置に移動させることができます。
文章の入力方法
文章の入力も見出しブロックの使い方と同じです。ブロックの追加ボタン（＋マーク）から今度は段落ブロックを選択することで文章を入力していくことができます。
段落はひとまとまりの文章のことでHTML言語でpタグといいます。
また、各ブロックを新たに作ると操作を楽にする追加オプションが表示されるようになっています。
それでは次に追加オプションの役割を見ていきましょう。
ブロック追加オプション
この追加オプションで「ブロックタイプの変更」「テキストの配置」「太字」「イタリック」「リンク」「打ち消し」などができます。
また、左側の矢印の箇所からブロックの上下や移動が自由自在にできるのでかなり使える機能です。
6つの便利な機能
上図の左側から順に見ていきます。
ブロックタイプを変更：「見出し」「段落」「リスト」「引用」などのブロックを変更できます。
テキストの配置：左寄せ、中央寄せ、右寄せに配置することができます。
B：テキストを選択して太字にすることができます。
イタリック：選択したテキストをやや右方向に傾けることができます。
リンク：URLを入力してリンクを貼ることができます。
打ち消し：打ち消し線を引くことができます。
詳細設定（縦に３つの点）
縦に3つの点をクリックすると「HTMLとして編集」や「再利用ブロックに追加」での機能を使うことができます。
その前にざっくりとどんな設定ができるのか見ておきましょう。
複製： ブロックを複製したいときに使います。
前に挿入・後に挿入： ブロックを前後に挿入することができます。
HTMLとして編集
以前はHTML言語を使って書くときにはビジュアルエディタからテキストエディタに切り替えて書く必要がありました。しかし、グーテンベルクでは切り替え不要でHTMLを編集することができます。
その機能が「HTMLとして編集」です。
再利用ブロックに追加する方法
文章や画像を使いまわしたいときに便利な機能です。例えば、頻繁に使うボックスやショートコードなどは保存しておくと便利です。
保存方法
吹き出しのショートコードを再利用ブロックに保存してみます。
ブロック追加ボタン（＋アイコン）からショートコードブロックを選択して保存するショートコードを入力します。（ショートコードはSANGOに使われている吹き出しボックスです）。
保存するショートコードを入力します。
つぎに縦に3つの点をクリックして「再利用ブロックに追加」をクリックします。
保存名をつけて保存ボタンをクリックしまう。
以上です。とても簡単ですね。
再利用ブロック使用方法
保存したショートコードを使用するには下図の「再利用可能」をクリックします。
下図のように再利用できるショートコードが表示されるのでその中からさっき保存したショートコードを選択します。
プレビューも表示されるので間違いがないか確認しておきましょう。
下図のよう選択したショートコードが表示されます。
吹き出しの文章をその都度変える場合には、縦に3つの点から「通常のブロックへ変換」をクリックします。変換しておかないと以前に保存したものに全て書き換わってしまいます。
下図の吹き出しのように頻繁に使うものであれば、保存しておくと便利です。
再利用ブロック削除方法
再利用ブロックを削除するときには、「再利用ブロックから削除」をクリックすればOKです。
「すべての再利用ブロックを管理」から編集やごみ箱に移動もできます。
文書
つぎに「文書」「ブロック」タブを使ってみましょう。
歯車マークから右サイドバーを「表示」「非表示」にすることができます。
「文書」タブをクリックするとページの全体の設定ができるようになり、「パーマリンク」「カテゴリー」「タグ」「アイキャッチ画像」「抜粋」「ディスカッション」などの設定ができます。
パーマリンクの設定
上から順にみていきます。
パーマリンクは投稿ぺージなどに与えられている固有のURLのことです。このパーマリンクは投稿ページごとに設定する必要があり、運用していく中でとても重要な設定になります。
パーマリンクは何度も変更するものではなく、一度決めたものは基本的に永続的に使用するのが理想です。
初心者の人でパーマリンクの設定方法がよくわからないという人はこちらの記事を参考にしてみてください！
カテゴリーの設定
サイト内で関連性のある記事を分類しておく事ができます。何のためにするのかというと…
例えば、多くのページ数があるのにカテゴリーがバラバラでどこにどんな記事があるのかわからなかったら、ユーザーにとって使い勝手はよくありません。
ユーザーにとって使いにくい、わかりにくいでは駄目なわけでSEOの観点から見てもよくありません。したがってカテゴリーを分類することは必須となります。
タグの設定
また、タグでも同じですね。カテゴリーやタグの設定をしておけば、サイト内もスッキリ、SEO的にもよし、回遊率もアップ、滞在時間もアップですよ！
アイキャッチ画像の設定
アイキャッチ画像とは記事一覧（サムネイル）などに使われている画像のことです。
右サイドバーの「アイキャッチ画像を設定」をクリックして新規にアップロードするかメディアライブラリから設定することができます。
グーテンベルクでは画像の挿入方法も以前よりも直感的に操作できるようになりました。以前は画面を切り替える必要があり面倒でしたが、グーテンベルグではアップロードの際、投稿ページ内で完結させることができます。
編集ボタンから編集作業を行った場合には最後に「選択」をクリックします。
※ 画像の代替テキストの入力はSEO的観点から見ても必須です。何のことか分からない人はこちらの記事をご覧ください。
抜粋
抜粋とは投稿記事の要約文のことです。抜粋文が必要な場合こちらの入力欄に書くようにしてください。
ディスカッション
コメント・ピンバック、トラックバックに関しての設定になります。ここで個別記事ごとに設定することができます。尚、左メニュー＞設定＞ディスカッションからサイト全体での設定が可能です。
コメントを許可
投稿記事へのコメントを受け付けるか受け付けないかの設定になります。コメントを許可するときにはチェックを入れておきます。
スパムコメント対策として名前とメ―ルアドレスの入力を必須にしたり、コメントの手動承認（コメントを確認してから表示）を必須にしたりすることができます。
Akismetでのスパムコメント対策はこちらの記事をご覧ください。
ピンバック・トラックバックを許可
ピンバックとトラックバックを許可するかしないかの設定ができます。
ピンバックとは、自分のサイトから他サイトのリンクを貼ったとします。その際に、相手の管理者に対して「リンクを貼らせてもらいました」という通知が自動で送信されます。
逆に相手サイトからリンクが貼られた時には、あなたに通知メールが送信されてきます。これがピンバックです。
ディスカッションの設定方法に関してはこちらの記事をご覧ください。
テキスト文字や背景色の変更
次に「ブロック」タブをクリックしてください。
こちらは、選択しているブロックにより表示される内容が変わります。
段落時にはテキスト文字の色や背景色、追加CSSクラスなどの高度な設定もできます。
先頭文字を大きくしたり・・・
背景色や文字色の変更も・・・
コードエディタへの切り替え方法
グーテンベルクでは旧エディタでのテキストエディタがコードエディタという名称に変更されています。
上述した「HTMLの編集」からはブロックごとに編集ができるのに対し、コードエディタではページ全体での編集も可能です。
ページ全体のHTMLコードを確認したい場合、コードエディタに切り替えると確認することができます。
縦に3つの点をクリックしてビジュアルエディタからコードエディタへ切り替えましょう。
グーテンベルク専用コードで書かれている
コードエディタに切り替えてみると今までに見たことのないコードで記述されていると思いますが、このコードはグーテンベルグ専用のコードになります。
<!-- wp:paragraph -->グーテンベルグ専用のコード<-- /wp:paragraph -->従来のエディタを使用したいとき
「グーテンベルクは使いにくい！」という方は、「Classic Editor」というプラグインを使うといいです。このクラシックエディタを使えば従来の投稿画面で編集することもできるようになります。
プラグイン（Classic Editor）を使えばで過去記事をブロックエディタや旧エディタに切り替えて編集できるようになります。
クラシックエディタのインストール方法
検索窓にClassic Editorと入力すると画面左上に表示されるはずなので「今すぐインストール」をクリックして有効化してください。
プラグインのインストール方法についてはこちらをご覧ください。
左メニュー＞設定＞投稿設定に進んでもらいすべての「ユーザーのデフォルトエディタ」を「クラシックエディタ」にしてください。
つぎに「ユーザーにエディタの切り替えを許可します」を「はい」に切り替えてください。これで準備完了です。
投稿一覧画面に移動してみてください。ブロックエディタと旧エディタで切り替えられるようになっているのが確認できると思います。
Classic Editorがサポートされる期間は2022年頃までのようなので早めにグーテンベルグになれておく必要がありますね。
