この章では、プラグインでブロックパターンを登録する方法を学びます。
ブロックパターンは、ブロックエディターで使える定型レイアウトです。
この講座では、クラシックテーマを使いながら、パターンはプラグイン側で管理する方針で扱います。
ブロックパターンとは
ブロックパターンは、複数のブロックを組み合わせた定型レイアウトです。
たとえば、次のようなものをパターン化できます。
- CTA
- 2カラム紹介
- FAQ導入
- 料金表
- お客様の声
- セクション見出し
編集者は、毎回ゼロからブロックを組むのではなく、用意されたパターンを挿入して内容を差し替えられます。
なぜプラグインで作るか
ブロックパターンはテーマ側に置くこともできます。
ただし、この講座ではプラグインで登録する方法を扱います。
理由は次の通りです。
- テーマ変更時にもパターンを残しやすい
- サイト固有の編集体験として分離しやすい
- 複数テーマで同じパターンを使い回しやすい
- 機能と見た目の責務を分けて考えやすい
テーマに置く方法もありますが、ここでは「クライアントが使う定型入力UI」としてプラグイン化する考え方を学びます。
最小プラグインを作る
プラグインは、wp-content/plugins/の中にフォルダを作って配置します。
wp-content/
plugins/
my-patterns/
my-patterns.phpmy-patterns.phpにプラグインヘッダーを書きます。
<?php
/**
* Plugin Name: My Patterns
* Description: サイト用のブロックパターンを登録します。
* Version: 1.0.0
* Author: Your Name
*/この状態で管理画面のプラグイン一覧に表示されます。
パターンカテゴリーを登録する
独自のカテゴリーを作る場合は、register_block_pattern_category()を使います。
function my_patterns_register_category() {
register_block_pattern_category(
'my-patterns',
array( 'label' => 'サイト用パターン' )
);
}
add_action( 'init', 'my_patterns_register_category' );既存のカテゴリーを使うこともできます。
独自カテゴリーを作ると、クライアントが探しやすくなります。
パターンを登録する
パターンは、register_block_pattern()で登録します。
function my_patterns_register_patterns() {
register_block_pattern(
'my-patterns/cta',
array(
'title' => 'お問い合わせCTA',
'description' => 'お問い合わせへの導線を作るCTAです。',
'categories' => array( 'my-patterns' ),
'content' => '<!-- wp:group {"className":"pattern-cta"} -->
<div class="wp-block-group pattern-cta">
<!-- wp:heading {"level":2} -->
<h2>まずはお気軽にご相談ください</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Webサイト制作や更新について、お困りのことがあればお問い合わせください。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">お問い合わせする</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
)
);
}
add_action( 'init', 'my_patterns_register_patterns' );パターン名は、namespace/nameの形にします。
この例では、my-patterns/ctaです。
ブロックコメント
ブロックパターンのcontentには、ブロックエディターが理解できるブロックコメントを含めます。
<!-- wp:paragraph -->
<p>本文です。</p>
<!-- /wp:paragraph -->通常のHTMLだけでも見た目は出る場合がありますが、ブロックとして編集しやすくするには、ブロックコメントの構造が重要です。
実務では、管理画面でブロックを作り、コードエディター表示からブロックHTMLを取得してパターンに使うことがあります。
パターン用CSS
パターンの見た目は、テーマ側のCSSまたはプラグイン側のCSSで整えます。
パターンの見た目がテーマデザインに強く依存するなら、テーマ側のCSSに書くことがあります。
複数テーマで使う前提なら、プラグイン側でCSSを読み込むこともあります。
function my_patterns_enqueue_assets() {
wp_enqueue_style(
'my-patterns-style',
plugin_dir_url( __FILE__ ) . 'assets/patterns.css',
array(),
'1.0.0'
);
}
add_action( 'wp_enqueue_scripts', 'my_patterns_enqueue_assets' );どこにCSSを書くかは、パターンをどれくらいテーマから独立させたいかで判断します。
クライアント向けパターン設計
クライアント向けのパターンは、使いやすさが大切です。
意識したいことは次の通りです。
- 名前をわかりやすくする
- 用途ごとに分ける
- 編集する場所を少なくする
- 崩れやすい複雑な構造にしない
- 余白や色を自由に変えさせすぎない
- 使い方をマニュアルに書く
パターンは、制作者の都合だけで作るものではありません。
更新する人が迷わず使えることが重要です。
この章のまとめ
- ブロックパターンは、ブロックエディターで使える定型レイアウト
- この講座では、プラグインでパターンを登録する方法を扱う
register_block_pattern_category()でカテゴリーを登録できるregister_block_pattern()でパターンを登録できる- パターンは、クライアントが迷わず使える設計にする