1. ホーム
  2. WordPress

【WordPress】register_block_pattern の使い方|よく使うブロックの組み合わせをパターンとして登録する方法

Share

「見出し+リード文+ボタン」のような決まった組み合わせを毎回ゼロから組み立てるのは面倒です。ブロックパターンとして登録しておけば、挿入ツールから選ぶだけで一式が入り、あとは文字を差し替えるだけで済みます。この記事では register_block_pattern() でパターンを登録する方法、テーマの patterns フォルダを使うもっと簡単なやり方、パターンカテゴリーの追加、不要なパターンの削除までを解説します。WordPress 6 系を前提としています。

ブロックパターンと同期パターンの違い

まず紛らわしい2つを整理しておきます。ここで扱うブロックパターンは、挿入した瞬間に中身が投稿本文へコピーされる「ひな形」です。挿入後の編集は自由で、元のパターンを書き換えても既に挿入済みの箇所には影響しません。

一方、エディター上で作れる同期パターン(以前は「再利用ブロック」と呼ばれていたもの)は、元を編集すると使っている全ページに反映されます。共通のお知らせバナーのように「一箇所直したら全部直したい」ものは同期パターン、記事ごとに中身が変わるひな形は register_block_pattern() によるブロックパターン、という使い分けになります。

ブロックパターンはコードで管理できるので、テーマやプラグインに同梱して配布できるのが利点です。サイトを引っ越しても、テーマさえ入れればパターンも一緒についてきます。

register_block_pattern で登録する

登録は register_block_pattern()init フックで呼ぶだけです。第1引数がパターン名(名前空間付きのスラッグ)、第2引数が設定の配列になります。

functions.php
function webool_register_patterns() {
	register_block_pattern(
		'webool/cta-box',
		array(
			'title'       => 'お問い合わせ誘導ボックス',
			'description' => '見出し・説明文・ボタンをまとめた問い合わせ導線',
			'categories'  => array( 'call-to-action' ),
			'keywords'    => array( 'cta', 'ボタン', '問い合わせ' ),
			'content'     => '<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:heading {"level":3} -->
<h3>ご相談はお気軽に</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>サービスに関するご質問はこちらからどうぞ。</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/contact/">お問い合わせ</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
		)
	);
}
add_action( 'init', 'webool_register_patterns' );

content に入れるのはブロックエディターが保存するのと同じ形式の HTMLです。手で書くと必ずどこか間違えるので、実際にエディターで一度組み立ててから「コードエディター」表示(右上のオプションメニュー、または CtrlCmd + Shift + Alt + M)に切り替えて、出力されたマークアップをそのままコピーするのが確実です。

PHP のシングルクォート文字列に貼り付ける場合、マークアップの中にシングルクォートが含まれていると壊れます。ブロックの属性 JSON はダブルクォートを使うので通常は問題ありませんが、心配ならヒアドキュメント(<<<HTML ... HTML;)を使うと引用符を気にせず書けます。

設定できる項目

必須は titlecontent の2つだけです。残りは挿入ツールでの見せ方や、表示する場所を絞り込むためのものです。

キー役割
title挿入ツールに表示される名前(必須)
content挿入されるブロックマークアップ(必須)
descriptionスクリーンリーダー向けの説明。何をするパターンかを書く
categories所属するパターンカテゴリーのスラッグの配列
keywords検索用のキーワード。日本語も指定できる
viewportWidthプレビューを描画するときの想定幅(px)。既定は 1200
blockTypes指定したブロックの変換候補としてパターンを出す
postTypes表示する投稿タイプを限定する
inserterfalse にすると一覧に出さない(他から呼ぶ専用にできる)

viewportWidth は見落とされがちですが、プレビューの印象を大きく左右します。サイドバー用の縦長パターンを既定の 1200 で描くと極端に縮小されて何が何だか分からなくなるので、'viewportWidth' => 400 のように実際に使う幅を指定しておきます。

blockTypes は少し特殊で、たとえば array( 'core/query' ) を指定すると、クエリーループブロックを挿入したときのレイアウト選択肢としてそのパターンが現れます。カバーブロックの core/cover なども同様です。

patterns フォルダに置くだけで登録する

WordPress 6.0 以降のテーマでは、register_block_pattern() を書かずに済む方法があります。テーマ直下に patterns フォルダを作り、その中に PHP ファイルを置くと自動的に登録される仕組みです。設定はファイル先頭のコメントヘッダーに書きます。

patterns/cta-box.php
<?php
/**
 * Title: お問い合わせ誘導ボックス
 * Slug: webool/cta-box
 * Description: 見出し・説明文・ボタンをまとめた問い合わせ導線
 * Categories: call-to-action
 * Keywords: cta, ボタン, 問い合わせ
 * Viewport Width: 800
 */
?>
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:heading {"level":3} -->
<h3><?php echo esc_html__( 'ご相談はお気軽に', 'webool' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html__( 'サービスに関するご質問はこちらからどうぞ。', 'webool' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

必須のヘッダーは TitleSlug です。CategoriesKeywords はカンマ区切りで複数書けます。register_block_pattern() の配列キーとは表記が違う(viewportWidthViewport Width になるなど)点だけ注意してください。

この方式の利点は、PHP ファイルとして評価されるので翻訳関数や動的な値を埋め込めることと、マークアップを文字列に押し込めずそのまま書けることです。テーマを作るなら基本的にこちらを選んでおけばよいでしょう。逆にプラグインからパターンを提供する場合は、この自動登録が効かないので register_block_pattern() を使います。

パターンカテゴリーを追加する

categories に指定できるのは登録済みのカテゴリーだけです。コアには banner / buttons / columns / text / gallery / call-to-action などが用意されていますが、サイト独自の分類を作りたいときは register_block_pattern_category() で先に登録します。

functions.php
function webool_register_pattern_categories() {
	register_block_pattern_category(
		'webool-parts',
		array( 'label' => 'サイト共通パーツ' )
	);
}
// パターン登録より先に走るよう、優先度を早めておく
add_action( 'init', 'webool_register_pattern_categories', 9 );

あとはパターン側で 'categories' => array( 'webool-parts' )(ファイルヘッダーなら Categories: webool-parts)と指定すれば、挿入ツールのサイドバーに「サイト共通パーツ」という項目が現れます。

不要なパターンを表示しないようにする

クライアントサイトでは「用意したパターンだけを使ってほしい」ということがあります。既定で入ってくるパターンは出どころが3種類あるので、それぞれ止め方が違います。

functions.php
// 1. コアに同梱されたパターンを丸ごと無効化する
add_action( 'after_setup_theme', function () {
	remove_theme_support( 'core-block-patterns' );
} );

// 2. パターンディレクトリから取得するリモートパターンを止める
add_filter( 'should_load_remote_block_patterns', '__return_false' );

// 3. 個別のパターンだけを外す(登録より後で実行する)
add_action( 'init', function () {
	unregister_block_pattern( 'core/two-buttons' );
}, 20 );

2番目のリモートパターンは WordPress.org のパターンディレクトリから取得されるもので、数が多く管理下に置けません。日本語サイトでは英語のパターンが大量に並んで邪魔になりがちなので、止めてしまうケースが多いでしょう。外部への通信も減ります。

3番目の unregister_block_pattern()対象が登録された後に呼ぶ必要があります。init の既定の優先度(10)で登録されるものが多いので、上のように優先度 20 を指定して後回しにします。

パターンが挿入ツールに出てこないとき

登録したはずのパターンが見当たらない、あるいはプレビューが崩れている場合、原因は次のあたりに集中します。

init より前に登録している

register_block_pattern()functions.php の直書き(フックの外)で呼ぶと、パターン管理の仕組みが用意される前に実行されて登録に失敗します。必ず init フックの中で呼んでください。after_setup_theme でも早すぎます。

指定したカテゴリーが存在しない

categories に未登録のスラッグを書くと、パターン自体は登録されるものの、どのカテゴリーにも属さないため一覧で見つけにくくなります。自作カテゴリーを使うなら register_block_pattern_category() を先に、コアのカテゴリーを使うならスラッグの綴りを確認します。call-to-actioncta と書いてしまう類のミスがよくあります。

content のブロックマークアップが壊れている

プレビューが真っ白、あるいは挿入した途端にブロック検証エラーが出る場合は、content のマークアップに問題があります。開始コメントと終了コメントの対応、属性 JSON の書式、class 名がブロックの save と一致しているか。この3点を疑ってください。

結局のところ、手書きせずエディターの出力をコピーするのがいちばん早い解決策です。WordPress のバージョンが上がってブロックの出力形式が変わることもあるので、パターンが古いまま放置されていないかも定期的に見ておくとよいでしょう。

patterns フォルダのヘッダーが足りない

ファイル方式で登録されないときは、まず Slug があるかを確認します。TitleSlug のどちらかが欠けていると、そのファイルは無視されます。Slugテーマ名/パターン名 のように名前空間を付けた形にします。また、この自動登録はテーマ(および子テーマ)の patterns フォルダのみが対象で、プラグイン内に置いても読み込まれません。

まとめ

ブロックパターンは、決まったブロックの組み合わせをひな形として配れる仕組みです。プラグインから提供するなら init フックで register_block_pattern()、テーマなら patterns フォルダに PHP ファイルを置いてヘッダーを書くだけ。後者は翻訳関数も使えるので、テーマ開発では素直にこちらを選ぶのがおすすめです。

content のマークアップはエディターのコードエディター表示からコピーする、独自カテゴリーは register_block_pattern_category() で先に登録する、不要なパターンは remove_theme_support( 'core-block-patterns' )should_load_remote_block_patterns で整理する。この3つを押さえておけば、実務で困る場面はほとんどなくなります。

参考ページ