2026年9月6日

2026年9月6日

WordPressのブロックパターンの作成方法|エディタ・テーマ・PHPの3通り

ブロックパターンは、見出し・段落・ボタンなど複数のブロックを組み合わせたレイアウトを登録しておき、ワンクリックで挿入できるようにする機能です。作り方は、エディタの画面で作る方法、テーマの patterns フォルダにファイルを置く方法、PHP の register_block_pattern() で登録する方法の3通りがあります。この記事では、それぞれの手順と向いている場面、パターンが表示されない・崩れるときの確認方法を解説します。

3つの作り方と選び方

どの方法でも挿入後の見た目は同じですが、パターンの保存場所と管理のしやすさが違います。

  • エディタで作る:コードを書かずに作れます。パターンはデータベースに保存され、そのサイトだけで使えます。運用担当者が自分で定型レイアウトを増やしたい場合に向いています。
  • テーマの patterns フォルダに置く:パターンがファイルとしてテーマに含まれるので、Git で管理でき、別のサイトにもテーマごと持っていけます。テーマ制作者や、制作会社が納品するサイトに向いています。
  • PHP で登録する:プラグインからでも登録でき、条件によって登録する・しないを切り替えられます。テーマに依存させたくないパターンや、複数のサイトに共通で配布したい場合に向いています。

テーマのファイルを編集する場合は、親テーマを直接変えると更新で消えるので、子テーマで作業してください。

方法1:エディタでパターンを作る

投稿やページの編集画面でブロックを組み合わせ、レイアウトを作ります。対象のブロックをすべて選択し(グループブロックで囲んでおくと扱いやすくなります)、ブロックツールバーのオプションメニューから「パターンを作成」を選びます。名前とカテゴリーを付けて保存すると、ブロック挿入画面の「パターン」に表示されます。メニューの表記はバージョンによって異なるため、見当たらない場合は近い名前の項目を探してください(2026年10月現在)。

保存するときに「同期」するかどうかを選べます。

  • 同期パターン:どこに挿入しても中身は1つで、パターンを編集すると、挿入済みのすべての場所が変わります。以前の「再利用ブロック」はこれに統合されました。会社概要の住所や共通の注意書きなど、全ページで同じ内容にしたいものに使います。
  • 同期しないパターン:挿入した時点でただのブロックの集まりになり、ページごとに自由に書き換えられます。記事のテンプレートや CTA のレイアウトなど、「形は同じで中身は変える」ものに使います。

あとから同期の有無を変えたいときに困らないよう、作る前にどちらの使い方をするかを決めておきます。作ったパターンは管理画面の「パターン」の一覧(ブロックテーマならサイトエディター内)から編集・削除できます。

方法2:テーマの patterns フォルダにファイルを置く

WordPress 6.0 以降は、テーマの patterns フォルダに PHP ファイルを置くだけで、パターンが自動で登録されます。register_block_pattern() を書く必要はありません。

パターンのマークアップを用意する

パターンの中身は、ブロックのコメント区切りを含む HTML(ブロックマークアップ)です。手で書くよりも、エディタで実際にレイアウトを作り、右上のオプションメニューから「コードエディター」に切り替えて、表示されたマークアップをコピーするのが失敗しにくい方法です。手で書いたマークアップは、ブロックが保存時に出力する HTML と少しでも違うと、挿入後に「ブロックの検証エラー」になります。

ファイルを作る

子テーマに patterns/cta-box.php を作ります。

<?php
/**
 * Title: お問い合わせ導線(CTA)
 * Slug: my-child-theme/cta-box
 * Categories: call-to-action
 * Keywords: お問い合わせ, CTA, ボタン
 * Description: 記事の最後に置く、問い合わせボタン付きのボックスです。
 * Viewport Width: 1200
 */
?>
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php echo esc_html__( 'お困りのことはありませんか?', 'my-child-theme' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html__( 'WordPressの設定や移行について、お気軽にご相談ください。', 'my-child-theme' ); ?></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="<?php echo esc_url( home_url( '/contact/' ) ); ?>"><?php echo esc_html__( 'お問い合わせはこちら', 'my-child-theme' ); ?></a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->

ファイル先頭のコメントがパターンの設定です。

  • Title(必須):挿入画面に表示される名前
  • Slug(必須):テーマ名/パターン名 の形で、他と重ならない名前を付けます
  • Categories:分類。call-to-action、text、header、footer などのコアのカテゴリーか、自分で登録したカテゴリーを指定します
  • Keywords:挿入画面での検索に使われる語
  • Viewport Width:プレビューを描画するときの幅
  • Block Types:特定のブロック(例:core/template-part/header)の置き換え候補として出したいときに指定します
  • Post Types:特定の投稿タイプだけで使わせたいときに指定します
  • Inserter:no にすると挿入画面に表示されません(テンプレートの中からだけ使うパターン向け)

PHP ファイルなので、文字列を翻訳関数で囲んだり、home_url() で URL を組み立てたりできます。出力する値は esc_html__() や esc_url() でエスケープします。画像を入れる場合は、テーマ内の画像を get_theme_file_uri( 'assets/images/sample.jpg' ) で参照し、esc_url() を通して出力します。メディアライブラリの画像 ID をマークアップに埋め込むと、別のサイトでは画像が見つからなくなるので注意してください。

方法3:PHP の register_block_pattern() で登録する

プラグインや functions.php から登録する場合は、init フックで register_block_pattern() を呼びます。独自のカテゴリーも register_block_pattern_category() で追加できます。

<?php
// プラグイン、または子テーマの functions.php
add_action( 'init', function () {
	register_block_pattern_category(
		'my-site',
		array( 'label' => __( '自社用', 'my-site' ) )
	);

	register_block_pattern(
		'my-site/faq-item',
		array(
			'title'       => __( 'よくある質問(1問)', 'my-site' ),
			'description' => __( '質問をクリックすると回答が開く形式です。', 'my-site' ),
			'categories'  => array( 'my-site' ),
			'keywords'    => array( 'FAQ', '質問' ),
			'content'     => '<!-- wp:details --><details class="wp-block-details"><summary>' . esc_html__( 'ここに質問を入力します', 'my-site' ) . '</summary><!-- wp:paragraph --><p>' . esc_html__( 'ここに回答を入力します。', 'my-site' ) . '</p><!-- /wp:paragraph --></details><!-- /wp:details -->',
		)
	);
} );

content には、方法2と同じくブロックマークアップを文字列で渡します。長いマークアップを PHP の文字列に入れると読みにくくなるので、量が多い場合は方法2のファイル形式のほうが管理しやすくなります。パターンを削除したいときは、unregister_block_pattern( 'my-site/faq-item' ) で登録を解除できます。

コアのパターンを整理する

自作のパターンを増やすと、コアや WordPress.org のパターンディレクトリから読み込まれるパターンが挿入画面で邪魔になることがあります。次のようにして非表示にできます。

<?php
// 子テーマの functions.php
add_action( 'after_setup_theme', function () {
	// コアに同梱されたパターンを使わない
	remove_theme_support( 'core-block-patterns' );
} );

// パターンディレクトリからのリモート読み込みを止める
add_filter( 'should_load_remote_block_patterns', '__return_false' );

ブロックテーマでは、逆に theme.json の patterns に WordPress.org のパターンディレクトリのスラッグを並べて、使いたいパターンだけを読み込む方法もあります。

パターンが表示されない・崩れるときの確認方法

挿入画面に出てこない:patterns フォルダのファイルなら、ファイル先頭の Title と Slug が書かれているか、フォルダ名が patterns になっているか(pattern などの綴り違いがないか)を確認します。WordPress 6.4 以降はテーマのパターンファイルの一覧をキャッシュするため、ファイルを追加しても反映されないことがあります。開発環境では wp-config.php に define( 'WP_DEVELOPMENT_MODE', 'theme' ); を書いてキャッシュを使わないようにするか、テーマ(style.css)のバージョン番号を変えて再読み込みしてみます。本番環境ではこの開発モードの設定を外しておきます。Inserter: no や Post Types の指定で表示対象から外れていないかも見ておきます。

挿入するとエラーになる:マークアップが手書きか、古いバージョンのエディタからコピーしたものだと、ブロックの検証エラーになることがあります。エディタでもう一度レイアウトを作り直し、コードエディターから最新のマークアップをコピーし直すのが早道です。

見た目がテーマと合わない:色や余白をインラインの値(#1e73be や 20px)で固定していると、テーマを変えたときに浮いてしまいます。エディタでテーマのパレットやスペーシングのプリセットから選んで作ると、マークアップには theme.json のプリセット名が入り、テーマに合わせて見た目が変わります。

まとめ

  • ブロックパターンの作り方は、エディタ、テーマの patterns フォルダ、register_block_pattern() の3通り
  • 全ページで同じ内容にしたいなら同期パターン、形だけを使い回すなら同期しないパターンを選ぶ
  • patterns フォルダのファイルは先頭コメントの Title と Slug が必須で、出力する値はエスケープする
  • マークアップは手書きせず、エディタのコードエディターからコピーすると検証エラーを避けられる
  • 色や余白は theme.json のプリセットを使い、テーマのファイルを編集するときは子テーマで作業する

お気軽にご相談ください

お見積りへ お問い合わせへ
▲