WordPress5.0以上になるとGutenberg(グーテンベルグ)という新エディターが標準で搭載される仕様に変更されました。以前のエディターを使い慣れていた方からすると、全く新しいビジュアルに変更されていて、使い勝手が大きく異なり、不便に感じる方も少なくないでしょう。弊社カスタマーサポートにもエディターの仕様の変更に伴い数多くのお問い合わせをいただきます。

少し前までは、以前のエディターに戻したいというお問い合わせが多かったのですが、グーテンベルグがリリースされてから半年以上が経過した今、その使い方についてのご質問をいただくことが増えたように感じます。ということで、本項では、グーテンベルグの基本的な仕様や使い方を説明いたします。

※元のエディターに戻したい場合は下記のプラグインを導入してください。
Classic Editor

Gutenberg(グーテンベルグ)とは

2018年12月6日にリリースされたWordPress5.0以降に搭載されているビジュアルエディターです。ビジュアルエディターですので、HTMLを記述しなくても、直感的にページを構築できる仕様になります。基本的に「ブロック」を活用し見出しや、本文、挿入画像などをブロックごとに作成し組み合わせていく感覚です。

Gutenberg(グーテンベルグ)の仕様とページ作成の流れ

編集画面

従来のエディターとは全く異なる編集画面になりますが、ブロックや文章を入力するエリア以外は、基本的に従来と同じ使い方が可能です。

※こちらの画面はTCDのテーマを例にしておりますので、その他のテーマを適用している場合、一部表示が異なる場合があります。なおGutenberg(グーテンベルグ)の仕様上、TCDオリジナルのクイックタグ機能は、ブロックエディターではご利用いただけなくなります。ご活用いただく場合は、Classic Editorを適用いただくか、ページビルダー内にてご利用くださいませ。

便利な設定

いくつか実用的な機能をご紹介いたします。

編集画面右上の図の箇所をクリックすると、メニューが表示されます。

ページビルダー機能

TCDオリジナルのページビルダーに切り替える際は、上記赤枠のエディターの箇所から変更いただけます。

スポットライトモード

編集しているブロックのみを目立たせることができる機能です。

フルスクリーンモード

テキストエディターの集中執筆モードのような機能で、余分なエリアを非表示にし、フルスクリーンで表示できる機能です。

1.ブロックの追加

Gutenberg(グーテンベルグ)では、ブロックを追加し、ブロックの種類を選び、作成したコンテンツを装飾するという流れを繰り返して一つのページを組み立てていきます。

編集画面の+のマークをクリックし、新しいブロックを追加すると下記の6種類から任意の形式を選択可能です。各項目の説明は後述します。

  • インライン要素
  • 一般ブロック
  • フォーマット
  • レイアウト要素
  • ウィジェット
  • 埋め込み

2.ブロックの編集

デフォルトの画面に文章を入力すると、編集画面右側の項目が文書からブロックに変更されます。

新たな文章を別ブロックで作成する場合や、画像や見出しなどを挿入したい場合は、+ボタンをクリックし新規のブロックを追加します。必要な項目があれば、その都度新しいブロックを追加していくイメージです。

また記事をしばらく書き進めた後に、箇条書きに変更したいときや、見出しに変更したい場合があると思います。Gutenberg(グーテンベルグ)では、後からでも互換性の高いブロックに関しては、ワンタッチで切り替えることが可能です。

3.ブロックの装飾

ブロックを選択するとそのブロックごとに文字サイズや文字色、背景色を任意に変更することが可能です。

基本的にブロックごとにしか装飾はできませんが、段落内では、太文字、イタリック、リンク、打ち消し線のみインラインで装飾可能です。

ブロックの種類と用途

インライン要素

インライン要素の項目には、インライン画像が唯一用意されています。文中に画像を挿入したい時に使います。

一般ブロック

一般ブロック内には10種類の項目が用意されています。

段落

文章を書く時に使用します。デフォルトの状態で、タイトルの下に文章を打つと自動的に段落ブロックが適用されます。

見出し

見出しタイトルをつける時に使用します。ブロックを選択した後に、H2〜H6から選択できます。テキストの配置も左右、中央から選択可能です。

リスト

箇条書きを作成できます。黒丸か数字を表示するかを選択可能です

画像

画像を挿入するためのブロックで、表示されている青い丸をドラッグするとリサイズすることができます。キャプションも入力可能です。

ギャラリー

複数の画像ギャラリーを直感的に作成できます。画像ごとにキャプションを入力可能で、レスポンシブ対応です。

カバー

背景画像を設定できます。テキストを入力可能で、画像自体に文字を入力するのではなく、テキストの背景に別で画像を設定できます。

引用

引用元を記載できます。引用内容と引用元のURLを入力できるエリアがデフォルトで用意されています。

音声

音声ファイルを挿入できるブロックです。自動再生や、ループ再生を設定可能です。

ファイル

メディアファイルをダウンロードするためのリンクを挿入できます。別ウィンドウで開く設定や、ダウンロードボタンの設置の有無、ボタンの文言の変更など自由に設定可能です。

動画

サーバーにアップロードされている動画を埋め込むことができます。キャプション、自動再生、ループ再生、ミュートに加えて、動画を再生するまで表示されるポスター画像を設定することも可能です。

フォーマット

フォーマットには7種類の項目が用意されています。

クラシック

以前のエディターを使用できるブロックです。

ソースコード

コードをテキストとして読み込んで表示するブロックです。コードをそのまま表示できるので、チュートリアル系の記事作成などに便利です。

カスタムHTML

HTMLを直接入力する際に使用します。

整形済みテキスト

改行や特殊文字をそのまま表示できるブロックです。

プルクオート

テキストの引用に視覚的強調を施すスタイルが自動で適用されているブロックです。通常の引用より目立たせる仕様になっています。

テーブル

テーブルを作成できるブロックです。通常の枠で囲うタイプと、行ごとに色分けするタイプが選択できます。

文章を入力できるブロックです。verse(詩)というクラスが適用されます。

レイアウト要素

レイアウトを設定できる項目が7種類用意されています。

ボタン

ボタンを設置できるブロックです。丸型、四角、縁取りボタンの3種類から選択できます。

カラム

カラム数を設定できるブロックです。ブロックを選択した後に、編集画面右側で6カラムまで設定できます。

メディアと文章

画像と文章を並べて表示できるブロックです。左右変更可能。

改ページ

改ページするためのブロックです。

続きを読む

「続きを読む」のリンクを表示させるブロックです。

区切り

区切り線を表示するためのブロックです。短い線、カラム全体を区切る線、ドットで区切るタイプの3種類から設定可能です。

スペーサー

空白を入力するためのブロックです。空白の高さは直感的にも操作可能で、数値を入力して微調整することもできます。

ウィジェット

ウィジェットのブロックには下記5つの項目が用意されています。

ショートコード

ショートコードを挿入できます。

アーカイブ

投稿のアーカイブリストを表示できます。

カテゴリー

カテゴリー一覧リストを表示できます。

最新のコメント

最新のコメントを表示します。

最新の記事

最新の記事リストを表示できます。

埋め込み

外部リソースのコンテンツを埋め込むことができます。Twitter, Facebook, Instagram, Youtubeなど主要SNS以外にも、WordPressはもちろん、計34種類用意されています。

まとめ

以前のエディターで記事を書いていた方にとっては、慣れるのに少し時間がかかりそうですね。しかし、WordPress公式によるとClassic Editorのプラグインのサポートは2021年で終了するようです。ブロックごとの編集をうまく使いこなせば、より直感的に効率よくコンテンツ作成できるともいえますので、今からでも慣れておくことが大切でしょう。

最後に

TCDテーマでは、現状Gutenberg(グーテンベルグ)に対応していないテーマもあります。誠に恐れ入りますが、今しばらくアップデートまでお待ちいただけますと幸いです。こちらの記事も参考にご覧くださいませ。