17. プラグインで作るブロックパターン

この章では、プラグインでブロックパターンを登録する方法を学びます。

ブロックパターンは、ブロックエディターで使える定型レイアウトです。

この講座では、クラシックテーマを使いながら、パターンはプラグイン側で管理する方針で扱います。

ブロックパターンとは

ブロックパターンは、複数のブロックを組み合わせた定型レイアウトです。

たとえば、次のようなものをパターン化できます。

  • CTA
  • 2カラム紹介
  • FAQ導入
  • 料金表
  • お客様の声
  • セクション見出し

編集者は、毎回ゼロからブロックを組むのではなく、用意されたパターンを挿入して内容を差し替えられます。

なぜプラグインで作るか

ブロックパターンはテーマ側に置くこともできます。

ただし、この講座ではプラグインで登録する方法を扱います。

理由は次の通りです。

  • テーマ変更時にもパターンを残しやすい
  • サイト固有の編集体験として分離しやすい
  • 複数テーマで同じパターンを使い回しやすい
  • 機能と見た目の責務を分けて考えやすい

テーマに置く方法もありますが、ここでは「クライアントが使う定型入力UI」としてプラグイン化する考え方を学びます。

最小プラグインを作る

プラグインは、wp-content/plugins/の中にフォルダを作って配置します。

プラグイン構成
wp-content/
  plugins/
    my-patterns/
      my-patterns.php

my-patterns.phpにプラグインヘッダーを書きます。

my-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()で登録します。

CTAパターン
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を読み込むこともあります。

プラグイン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()でパターンを登録できる
  • パターンは、クライアントが迷わず使える設計にする