TREND最新トピック
WEBサイト 2021年3月29日
こんにちは、エンジニアの渡邊です。
前回は、ブロックエディターの基本要素である「ブロック」、「ブロックパターン」、「再利用ブロック」について紹介しました。
今回は、自作のブロックやブロックパターン、再利用ブロックを作る際のおすすめプラグインを紹介したいと思います。
前回紹介したのとおり、ブロックやブロックパターンは、標準では管理画面から登録することができませんが、次に紹介するプラグインを利用することで、管理画面から追加・変更ができるようになります。
なお、紹介する3つのプラグインは執筆時点ではすべて無料で使用することができます(2021/3 現在)。
URL: https://ja.wordpress.org/plugins/blockmeister/
対象: 初級者・中級者向け
このプラグインをインストールすると、ブロックエディターと、管理画面メニュー一覧から、独自のブロックパターンを追加・編集できるようになります(図1、図2)。
注意点として、「Block Pattern Builder」という似た名前のプラグインがあり、そちらではカテゴリー追加はできませんが、BlockMeisterでは任意のカテゴリーが追加・編集できます。
URL: https://wordpress.org/plugins/reusable-blocks-extended/
対象: 初級者・中級者向け
WordPress標準の再利用ブロック管理画面を拡張するプラグインです。このプラグインをインストールすると、管理画面メニュー一覧から、独自の再利用ブロックを追加・編集できるようになります(図3)。
管理画面から再利用ブロックを利用箇所が確認できるようになるほか、再利用ブロックをショートコードとして呼び出すことも可能です。
再利用ブロックをブロックパターンに変換する機能もありますが、必ず再利用ブロックとして登録したあとに変換しなければならず、1つ多く手順がかかってしまうため、ブロックパターンは先に紹介したBlockMeisterを利用して登録することをおすすめします。
URL: https://ja.wordpress.org/plugins/lazy-blocks/
対象: 中級者・上級者向け
これまで紹介した2つのプラグインとは違い、このプラグインではオリジナルのブロックを作ることができます。 既存のブロックの組み合わせだけでは作れないデザインのパーツでも、このプラグインを使えは管理画面の操作だけで作成することが可能です。
ブロックは、任意の情報に変更可能なフィールドを持ちますが、Lazy Blocksでもこのようなブロックを作成することができます。
例として、企業のサイトで自社のサービスを紹介するコンテンツがあり、これをLazy Blocksでブロックとして登録する場合を考えてみます。サービス紹介では、1つのサービス毎に、「サービス名」、「サービスのイメージ」、「サービスの詳細」を持っており、 サービスが複数あるような場合にも対応できるようにしたい場合、Lazy BlocksのRepeater(繰り返し)ブロックを利用すると簡単に実装できます(図4)。
Lazy Blockで作成したブロックを投稿や固定ページに挿入すると図5のようになります。
また、あまり知られていませんが、ブロックエディターには「ブロックテンプレート※」と呼ばれる、投稿内で使用するブロックを制限し、決められたフォーマットに従った執筆を強制する機能があります(詳細はBlock Editor Handbook – Templates参照)。Lazy Blocksは、この「ブロックテンプレート」も管理画面で作成することができます(図6)。
この機能を使えば、例えばクライアントが自由に投稿や固定ページを作れる状況でも、ページに設置可能なブロックを「テンプレート」で定義しておくことで、投稿や固定ページを新規作成したときに、そのブロックが設置された状態になり、決まったフォーマットを維持することができます。 テンプレートに、「Free Content」を含めておけば、その部分には任意のブロックを設置できるため、柔軟性を持った制限もできます。
※WordPressでテンプレートというと、多くの方がテーマのテンプレートを想像しますが、ここでは「ブロックテンプレート」を指しています。 ご注意ください。
自作のブロックやブロックパターン、再利用ブロックを作る際のおすすめプラグインを紹介しました。 今回ご紹介したプラグインは、「管理画面で完結させる」場合に便利なプラグインを選んでみましたが、他にも魅力的なプラグインがありますので、次の機会にご紹介したいと思います。
渡邊賢二
新卒で技術派遣会社に就職。そこから大手メーカー系情報システム会社に常駐しUnix/Linuxシステム開発のノウハウを習得。その後SIerに転職し、Androidの研究開発やオープンソース技術を活用したシステム開発に従事。 Web系を極めたいという気持ちから2014年にメンバーズ入社。メンバーズではWebサービス開発やWebサイトリニューアル案件に携わり、フロントエンドとバックエンドの両方に対応できるエンジニアとして案件を支える。自動化やWebサイト高速化が得意。