ソリッドシード株式会社

WordPressの新しいエディタ『Gutenberg』について

2020年10月21日

Gutenberg(グーテンベルグ)はWordPress5.0から採用された新しい標準エディタです。

以前のエディタと比較して仕様が大幅に変更された事で、使い辛いと感じている方は多く、
以前のエディタに戻すプラグイン(Classic Editor)を利用されている方も多いかと思います。

しかし、現在(WordPress5.5.1)では最初期とは違い、多数の機能追加が行われており、
仕様を覚えてしまえば以前よりも効率的な作成と編集ができます。

今回はそんなGutenbergのブロック機能と使い分けをご紹介します。

便利なブロック機能

Gutenbergは通常のエディタとしては使い辛い反面、
初めから数多くのブロックが用意されており、製作をサポートしてくれます。
今回は私が便利だと感じているブロック機能をご紹介します。

■カスタムHTMLブロック
直接HTMLを記述できるブロックです。
Classic Editorプラグインを利用して旧エディタを利用されている方
もこのブロックを使用すればGutenbergで直接HTMLを書く事が出来ます。

尚、このカスタムHTMLブロックは投稿画面上でブロック毎にプレビューする事もできます。
後述のブロックパターンを設定する際にもよく使用する便利なブロックです。
■再利用ブロック
再利用ブロックはブロックを複製して保存する事ができます。
管理画面上でユーザ自身が作成できる独自テンプレートのようなものです。

ただし、この再利用ブロックはすべての記事、固定ページで共有しているデータの為、
再利用ブロックの編集を行なった場合、同じ再利用ブロックを追加しているすべての記事で変更が反映されます。
その為、編集頻度が低いコンテンツに用いると使い勝手が良いです(SNSボタンなど)
■ブロックパターン(独自)
ブロックパターンはプログラムに直接設定する事で作成できるテンプレートのようなものです。
元々用意されたブロックパターンもありますが、今回は用途に合わせて自作した独自ブロックパターンを指しています。

こちらは管理画面上でユーザ自身が作成する事はできませんが、
プログラムで直接設定ができる為、 非常に自由度の高いテンプレートが作成できます。

また、再利用ブロックの様に追加しているすべての記事で変更が反映されるという事は無く、使い勝手が良いです。
その為、プログラムが理解できる場合は ブロックパターンを利用する事で自由に、効率的に製作を行う事ができます。

ブロック機能の使い分け一覧

使用者と用途によって適切なブロック機能は異なります。
例えば、最も自由度が高く様々な事ができる独自ブロックパターンですが、
プログラムの知識をお持ちでない方が作成する事は難しいケースが多々あります。

そこで使用者と用途毎にオススメの使い分けを表にしました。
ブロック機能でお悩みの方は参考にしてみてください。

利用者
プログラムが分かる方 HTML,CSSが書ける方 HTML,CSSが書けない方
用途 固定ページ ・ブロックパターン(独自)
・ショートコード
・カスタムHTMLブロック → 再利用ブロック化
・ブロックパターン(独自)
・ブロック
※詳しい方、または、制作会社に依頼する事をおすすめします。
記事投稿 ・ブロックパターン(独自)
・ショートコード
・マークダウン
・ブロックパターン(独自)
・ブロック
・ブロックパターン(独自)
まとめ 固定ページは独自ブロックパターン + ショートコードの組み合わせで作成するとその後の編集や並び替えもシンプルになります。

記事投稿は記事内容が変動的な場合は独自ブロックパターンを、ほぼ固定のレイアウトの場合はマークダウンを選択すると作成が楽です。
Gutenbergには標準でマークダウンをHTMLに変換する機能が搭載されています。
HTML, CSSを直接書きたい方については、カスタムHTMLブロックでコーディングを行い、再利用ブロックでテンプレート化して使い回す事で自由度を上げるのがオススメです。

ブロックやコーディングでは賄えない部分があれば、独自ブロックパターンを製作会社などに作成してもらうのが良いかと思います。
コーディング知識はないが記事投稿を行いたい方については、 独自ブロックパターンのテンプレートを製作会社などに作成してもらい、それで大半を賄える形にしておくと作成、編集作業を簡素化できます。
プログラムが分かる方
用途 固定ページ ・ブロックパターン(独自)
・ショートコード
記事投稿 ・ブロックパターン(独自)
・ショートコード
・マークダウン
まとめ 固定ページは独自ブロックパターン + ショートコードの組み合わせで作成するとその後の編集や並び替えもシンプルになります。

記事投稿は記事内容が変動的な場合は独自ブロックパターンを、ほぼ固定のレイアウトの場合はマークダウンを選択すると作成が楽です。
Gutenbergには標準でマークダウンをHTMLに変換する機能が搭載されています。
HTML,CSSが書ける方
用途 固定ページ ・カスタムHTMLブロック → 再利用ブロック化
・ブロックパターン(独自)
・ブロック
記事投稿 ・ブロックパターン(独自)
・ブロック
まとめ HTML, CSSを直接書きたい方については、カスタムHTMLブロックでコーディングを行い、再利用ブロックでテンプレート化して使い回す事で自由度を上げるのがオススメです。

ブロックやコーディングでは賄えない部分があれば、独自ブロックパターンを製作会社などに作成してもらうのが良いかと思います。
HTML,CSSが書けない方
用途 固定ページ ※詳しい方、または、制作会社に依頼する事をおすすめします。
記事投稿 ・ブロックパターン(独自)
まとめ コーディング知識はないが記事投稿を行いたい方については、 独自ブロックパターンのテンプレートを製作会社などに作成してもらい、それで大半を賄える形にしておくと作成、編集作業を簡素化できます。

投稿者:Komine