TREND最新トピック

MEMBERS ROOTS

ブロック・ブロックパターン・再利用ブロックを 活用しよう②(プラグイン紹介編)

ブロック・ブロックパターン・再利用ブロックを-活用しよう②アイキャッチ

こんにちは、エンジニアの渡邊です。 

前回は、ブロックエディターの基本要素である「ブロック」、「ブロックパターン」、「再利用ブロック」について紹介しました。

今回は、自作のブロックやブロックパターン、再利用ブロックを作る際のおすすめプラグインを紹介したいと思います。

前回のおさらい

前回紹介したのとおり、ブロックやブロックパターンは、標準では管理画面から登録することができませんが、次に紹介するプラグインを利用することで、管理画面から追加・変更ができるようになります。

なお、紹介する3つのプラグインは執筆時点ではすべて無料で使用することができます(2021/3 現在)。

BlockMeister

ブロックパターンとそのカテゴリーを追加できるプラグイン
BlockMeisterのイメージ

URLhttps://ja.wordpress.org/plugins/blockmeister/

対象: 初級者・中級者向け 

このプラグインをインストールすると、ブロックエディターと、管理画面メニュー一覧から、独自のブロックパターンを追加・編集できるようになります(図1、図2)。

注意点として、「Block Pattern Builder」という似た名前のプラグインがあり、そちらではカテゴリー追加はできませんが、BlockMeisterでは任意のカテゴリーが追加・編集できます。

 図1. BlockMeister導入後のブロックエディターからのブロックパターン登録手順
図1. BlockMeister導入後のブロックエディターからのブロックパターン登録手順

 図2. BlockMeisterのメニュー
図2. BlockMeisterのメニュー

Gutenberg Reusable Blocks Extended

再利用ブロックとブロックパターンを追加・編集できるプラグイン
 Gutenberg Reusable Blocks Extendedのイメージ

URLhttps://wordpress.org/plugins/reusable-blocks-extended/

対象: 初級者・中級者向け 

WordPress標準の再利用ブロック管理画面を拡張するプラグインです。このプラグインをインストールすると、管理画面メニュー一覧から、独自の再利用ブロックを追加・編集できるようになります(図3)。 

管理画面から再利用ブロックを利用箇所が確認できるようになるほか、再利用ブロックをショートコードとして呼び出すことも可能です。

再利用ブロックをブロックパターンに変換する機能もありますが、必ず再利用ブロックとして登録したあとに変換しなければならず、1つ多く手順がかかってしまうため、ブロックパターンは先に紹介したBlockMeisterを利用して登録することをおすすめします。

 図3. Gutenberg Reusable Blocks Extendedの管理画面
図3. Gutenberg Reusable Blocks Extendedの管理画面

Lazy Blocks

オリジナルのブロックを追加・編集できるプラグイン
Lazy Blocks のイメージ

URLhttps://ja.wordpress.org/plugins/lazy-blocks/

対象: 中級者・上級者向け 

これまで紹介した2つのプラグインとは違い、このプラグインではオリジナルのブロックを作ることができます。 既存のブロックの組み合わせだけでは作れないデザインのパーツでも、このプラグインを使えは管理画面の操作だけで作成することが可能です。 

ブロックは、任意の情報に変更可能なフィールドを持ちますが、Lazy Blocksでもこのようなブロックを作成することができます。

例として、企業のサイトで自社のサービスを紹介するコンテンツがあり、これをLazy Blocksでブロックとして登録する場合を考えてみます。サービス紹介では、1つのサービス毎に、「サービス名」、「サービスのイメージ」、「サービスの詳細」を持っており、 サービスが複数あるような場合にも対応できるようにしたい場合、Lazy BlocksのRepeater(繰り返し)ブロックを利用すると簡単に実装できます(図4)。

 図4. Lazy Blocksのブロック編集画面
図4. Lazy Blocksのブロック編集画面

Lazy Blockで作成したブロックを投稿や固定ページに挿入すると図5のようになります。

 図5. Lazy Blocksで作成したブロックを挿入した状態
図5. Lazy Blocksで作成したブロックを挿入した状態

また、あまり知られていませんが、ブロックエディターには「ブロックテンプレート※」と呼ばれる、投稿内で使用するブロックを制限し、決められたフォーマットに従った執筆を強制する機能があります(詳細はBlock Editor Handbook – Templates参照)。Lazy Blocksは、この「ブロックテンプレート」も管理画面で作成することができます(図6)。

 図6. Lazy Blocksのブロックテンプレート編集画面
図6. Lazy Blocksのブロックテンプレート編集画面

この機能を使えば、例えばクライアントが自由に投稿や固定ページを作れる状況でも、ページに設置可能なブロックを「テンプレート」で定義しておくことで、投稿や固定ページを新規作成したときに、そのブロックが設置された状態になり、決まったフォーマットを維持することができます。  テンプレートに、「Free Content」を含めておけば、その部分には任意のブロックを設置できるため、柔軟性を持った制限もできます。

※WordPressでテンプレートというと、多くの方がテーマのテンプレートを想像しますが、ここでは「ブロックテンプレート」を指しています。 ご注意ください。

まとめ

自作のブロックやブロックパターン、再利用ブロックを作る際のおすすめプラグインを紹介しました。 今回ご紹介したプラグインは、「管理画面で完結させる」場合に便利なプラグインを選んでみましたが、他にも魅力的なプラグインがありますので、次の機会にご紹介したいと思います。

SHARE
渡邊賢二

Profile

渡邊賢二

新卒で技術派遣会社に就職。そこから大手メーカー系情報システム会社に常駐しUnix/Linuxシステム開発のノウハウを習得。その後SIerに転職し、Androidの研究開発やオープンソース技術を活用したシステム開発に従事。 Web系を極めたいという気持ちから2014年にメンバーズ入社。メンバーズではWebサービス開発やWebサイトリニューアル案件に携わり、フロントエンドとバックエンドの両方に対応できるエンジニアとして案件を支える。自動化やWebサイト高速化が得意。

NEW POSTこのライターの最新記事

CONTACTお問い合わせ

お問い合わせ