Gutenberg(WordPress)は何時から使用(移行)すべきか

Gutenberg はWordPress Ver.5.0以上からのビジュアルエディターになりました。Gutenberg は、ブロックを利用して見出しや本文、画像等を作成し組み合わせていきます。ブロックや文章を入力するエリア以外は基本的に従来と同じ使い方ができます。Gutenberg は WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネームです。

Gutenberg の概要

グーテンベルクが印刷業界に起こしたのと同じ大規模な革命をパブリッシング体験全体に起こすことを目的としています。現在、プロジェクトは WordPress のあらゆる部分と関連する4フェーズのプロセス、編集、カスタマイズ、コラボレーション、多言語対応の最初のフェーズにあり、新しい編集体験「ブロックエディター」にフォーカスしています。

Gutenberg の概要
Gutenberg の概要

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

Gutenbergのブロック
グーテンベルグのブロック

グーテンベルグはブロック単位で記事を作成します

  • 見出しブロックは<H>タグで囲まれ
  • 段落は<p>タグで囲まれ
  • 画像は<img>タグで囲まれる

HTMLの知識が不十分でも記事を作り上げることが可能、特にレイアウトに関する「カラム」ブロックもありCSSを利用しなくでも柔軟なデザインができます。

Gutenberg のメリットとデメリット

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

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

メリット

  1. ブロックの種類が多い、カラムを分割することができる、ギャラリーやボタン、ウイジェットなども挿入できる。高度なデザインのページ編集ができる。
  2. コンテンツの色やサイズを細かく設定できる。
  3. ブロックごとに簡単にコピーしたり入れ替えたりできる。

デメリット

  1. 高度なデザインの記事を作るには便利ですが、高機能なことで操作が難しく感じられる。
  2. ブロックの生成作業が面倒、記事を書き進めるたびにブロックを選択して生成する手間が発生する。
  3. クラッシックブロックがビジュアルエディタにしか対応していない。

Gutenberg への移行

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

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

Gutenberg と Classic Editor 切り替えながら使う

「Classic Editor」はGutenbergと旧エディタを切り替えながら利用できるプラグインを利用すると記事一覧で「Gutenberg」と「Classic Editor」のどちらを使うのか指定して編集することが可能になります。「Gutenberg」で編集し保存したページを「Classic Editor」で修正することも問題ありません。但し注意しておきたいのは、「Gutenberg」はコメントアウトによってブロックの管理をしていますので削除してしまうとレイアウトが崩れたりすることです。

「Gutenberg」と「Classic Editor」切り替えながら使う

切り替えて使うには、「Classic Editor」の設定にユーザーにエディタの切り替えを許可にチェックを入れておきます。

「Gutenberg」と「Classic Editor」切り替えながら使う

Gutenberg に関連する記事

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

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

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

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

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