Spectra: ブロックエディタを拡張できるWordPressプラグイン

Spectra（旧名称：Ultimate Addons for Gutenberg）は、ブロックエディタのブロックを増やせるWordPressプラグインです。標準のブロックに加えて、新たに「30以上のブロック」を拡張できます。

「ブロックエディタ」のブロックを更に増やし、より高度なデザインテンプレート（雛形）を利用できます。

標準機能のブロックエディタだけでも、基本的な装飾やレイアウトを編集できるようになっていますが、このプラグインには、更に実用的なデザインテンプレート（雛形）が用意されています。

WordPressのブロックエディタの標準機能だけでは物足りなく感じる場合は、このプラグインを活用しましょう。プラグインの利用者も多く、信頼性の高いプラグインです。

はじめに
インストール方法
ブロックの使い方
- ブロックエディタの画面
- ブロックの設定
ブロックの見本
- ブロック一覧
まとめ

はじめに

このプラグインが優れていること

ブロックエディタのブロックを増やせる。新たに「30以上のブロック」を拡張できる。
実用的なデザインテンプレート（雛形）が多数用意されている。
それを基にすることで、デザイン性に優れた記事を書くことができる。
様々な内容のコンテンツを作成する際の雛形として利用できる。
不要なブロックの機能は無効化することもできる。

英語表記

このプラグインは管理画面・マニュアルなど、全てが英語表記になっています。

非常に高機能で実用性のあるプラグインですが、英語が苦手な方は言語の問題で使いにくいと感じるかもしれません。

信頼性

プラグインが定期的にアップデートされており、安定的に保守が行われています。
サポートフォーラムでも開発者が質問に回答しています。
プラグインの保守は適切に行われているようです。

確認日：2022.06.23

確認できた内容

定期的なアップデートの実績
サポートフォーラムの評判
プラグインの評価
プラグインの利用者数

インストール方法

管理画面から検索してインストールして下さい。
もしくは「wordpress.org」からダウンロードし、アップロードしてインストールして下さい。

WordPress管理画面＞プラグイン＞新規追加＞「Spectra」で検索
「wordpress.org」からダウンロードする

ブロックの使い方

プラグインを有効化すると、ブロックエディタに「Gutenberg Blocks」専用のブロックが追加されます。

もし、全く利用しない不要なブロックがあれば、プラグインの管理画面でブロックごとに機能を無効化することもできます。

ブロックエディタの画面

ブロックエディタの画面にある「ブロックの追加」ボタンをクリックします。
ブロック選択画面の下の方に「Gutenberg Blocks」専用のブロックが一覧表示され、追加したいブロックを選んで利用します。

ブロックの設定

ブロックの設定や装飾に関しては、ブロックの設定パネル（管理画面の右側）で調整できます。
必要に応じて設定を調整して利用します。

ブロックの見本

この記事では利用できるブロックの概要を説明しています。
機能の詳細に関しては「Gutenberg Blocks」の公式サイトの情報（英語）をご確認下さい。
実際に動作するデモサイトが公開されています。
ちなみに、プラグインの管理画面と公式サイトの情報は全て英語表記になります。

公式デモサイト

Gutenberg Blocks

ブロック一覧

ブロックの表示形式や装飾は、ブロックの設定パネル（管理画面の右側）で調整できます。

Advanced Heading	見出し・小見出しのブロックを追加できます。
Post Grid	記事一覧を「グリッド形状に並べる」レイアウトのブロックを追加できます。
Post Masonry	記事一覧を「積み重ねて並べる」レイアウトのブロックを追加できます。
Post Carousel	記事一覧を「横方向にスライド表示する」レイアウトのブロックを追加できます。
Sections	ブロックの「幅・余白・背景・境界線」などをカスタマイズすることにより、様々なデザインのコンテンツを作成できます。例えば、横幅が最大表示のブロック、背景画像付きのブロックなど、デザインに凝ったブロックを配置する際に利用します。
Multi Buttons	複数のボタンを並べて表示できるブロックを追加できます。ボタンのデザインは細かくカスタマイズできます。
Info Box	アイコン・見出し・説明文をセットにした雛形のブロックです。アイコンは画像に変更できます。様々な内容のコンテンツを作成する際の雛形として利用します。
Testimonials	「お客様の声」「スタッフの声」などの情報を表示するためのブロックを追加できます。人物の発言を掲載する際に利用します。
Team	チームを紹介するためのブロックを追加できます。「写真・名前・役職・説明文・SNS」などの情報を表示できます。
Social Share	「Facebook・Twitter」などのSNSのシェアボタンを配置するためのブロックを追加できます。
Google Map	「Google Map」を配置するためのブロックを追加できます。
Icon List	アイコン付きのリストを表示するためのブロックを追加できます。リンクを張ったり、アイコンを画像に変更することもできます。
Price List	価格表を表示するためのブロックを追加できます。
Content Timeline	コンテンツをタイムライン（時間軸）で表示するためのブロックを追加できます。
Post Timeline	記事をタイムライン（時間軸）で表示するためのブロックを追加できます。
Call To Action	CTA（コール・テゥ・アクション）のブロックを追加できます。 Webサイトの閲覧者を「資料請求」「注文」「お問い合わせ」などの行動（アクション）に誘導するために利用します。
Advanced Columns	記事のレイアウトを横方向に分割できる「カラム」のブロックを追加できます。記事のレイアウトを横方向に複数に分割して表示したい場合に利用します。
Blockquote	ブログやSNSの引用文を表示するためのブロックを追加できます。
Marketing Button	「今すぐ購読する」「有料プランを契約する」など、契約や注文が発生することを想定したボタンのブロックを追加できます。
Table Of Contents	「目次」を表示するためのブロックを追加できます。目次は自動生成されます。目次に表示したくない見出しの階層は、設定パネルで非表示にすることもできます。
How-to Schema	構造化データを利用した「How-to」コンテンツを作成するためのブロックを追加できます。解決方法（How-to）などの情報を掲載する際に利用します。
FAQ Schema	構造化データを利用した「FAQ」コンテンツを作成するためのブロックを追加できます。よくある質問（FAQ）などの情報を掲載する際に利用します。
Inline Notice	「お知らせ」などを表示するためのブロックを追加できます。
WP Search	「サイト内検索」の入力フィールドを表示するためのブロックを追加できます。
Taxonomy List	記事一覧を分類分けして表示できるブロックを追加できます。