How to Build WordPress Block Patterns — The Complete 2026 Guide

WordPress 6.x以降、ブロックパターンは制作者にとって欠かせない機能になりました。繰り返し使うレイアウトをパターンとして登録しておけば、クライアントも数クリックでプロ品質のセクションを追加できます。本記事では、2026年時点での最新の作成方法を、block.jsonからtheme.json連携まで体系的に解説します。

ブロックパターンとは何か

ブロックパターンは、複数のブロックを組み合わせて1つのテンプレートとして登録する仕組みです。たとえば「ヒーローセクション(見出し+段落+ボタン+背景画像)」「料金テーブル(3カラム+価格+CTA)」のようなよく使う構成を、再利用可能な形で保存できます。

テンプレートパーツとの違いは、パターンが「挿入時にコピーされる」点です。テンプレートパーツは参照型で、元を変更するとすべての使用箇所に反映されますが、パターンは挿入後に独立したブロックになるため、個別にカスタマイズできます。この柔軟性が受託案件で重宝する理由です。

パターンの登録方法:PHPとblock.json

パターンの登録にはいくつかの方法があります。もっとも基本的なのはPHPでregister_block_pattern()関数を使う方法です。functions.phpまたはプラグインファイルに記述します。

register_block_pattern()の第一引数にはユニークな名前空間付きの名前(例:mytheme/hero-section)を指定し、第二引数の配列にtitle、description、content、categoriesなどのプロパティを設定します。contentにはブロックマークアップを文字列で記述します。

WordPress 6.0以降では、テーマの/patternsディレクトリにPHPファイルを配置するだけで自動登録される仕組みも利用できます。ファイルの先頭にPHPコメントでTitle、Slug、Categories等のメタ情報を記述すると、WordPressが自動的にパターンとして認識します。この方法はコードの見通しが良く、パターンの管理が容易なため推奨されています。

theme.jsonとの連携でデザインを統一する

パターンの真価はtheme.jsonとの連携で発揮されます。theme.jsonで定義したカラーパレット、フォントサイズ、スペーシングの値をパターン内で参照することで、テーマ全体との一貫性を自動的に保てます。

具体的には、パターンのブロックマークアップ内でvar(–wp–preset–color–primary)やvar(–wp–preset–spacing–40)のようなCSS変数を使用します。こうすることで、theme.jsonでカラーを変更した場合にパターン内の色も自動で追従します。ハードコードされた値を使わず、常にプリセット値を参照するのがベストプラクティスです。

また、theme.jsonのcustomTemplates設定と組み合わせると、特定のページテンプレートにパターンを初期配置することもできます。たとえばLPテンプレートを選択すると、自動的にヒーロー、特徴、料金、CTAのパターンが挿入された状態でエディタが開く、という体験を実現できます。

実例:ヒーローセクションパターンの作成

実際にヒーローセクションのパターンを作成してみましょう。テーマの/patternsディレクトリにhero-section.phpを作成します。ファイル先頭のPHPコメントには、Title(表示名)、Slug(内部名)、Categories(パターンカテゴリ)を記載します。

コンテンツ部分では、wp:groupブロックでセクション全体をラップし、alignfull属性を付与して全幅表示にします。内部にwp:headingとwp:paragraph、wp:buttonsを配置します。背景色にはtheme.jsonで定義されたカスタムカラーのCSS変数を参照し、テキスト色もプリセット値を使用します。

スペーシングはtheme.jsonのspacingScaleで定義した値をblockGap属性やpadding属性で参照します。こうすることで、サイト全体の余白ルールとパターン内の余白が統一され、デザインの一貫性を維持できます。余白をpx値でハードコードすると、テーマ変更時に全パターンを修正する必要が生じるため避けてください。

パターンの管理と運用のベストプラクティス

パターンが増えてくると管理が煩雑になりがちです。効率的に運用するためのポイントをまとめます。

  • 命名規則を統一する:パターン名はmytheme/section-hero、mytheme/section-pricing のようにセクション種別を含めた命名規則を決めておきます。これによりエディタの検索で素早く目的のパターンを見つけられます。
  • カテゴリを適切に分類する:register_block_pattern_category()で独自のカテゴリを作成し、パターンを用途別に整理します。「ヘッダー」「コンテンツ」「CTA」「フッター」のような分類が一般的です。
  • ロック機能を活用する:パターン内のブロックにtemplateLock属性を設定すると、クライアントが誤ってレイアウト構造を崩すのを防げます。contentOnlyロックを使えば、テキストと画像だけ編集可能にし、構造は固定できます。
  • バージョン管理に含める:/patternsディレクトリのPHPファイルはGitで管理し、変更履歴を追跡します。データベースに保存されるパターン(管理画面で作成したもの)はエクスポート用のWP-CLIコマンドを活用してバックアップします。

ブロックパターンはWordPressの制作効率を大幅に向上させる機能です。特にFSE(フルサイト編集)への移行期にある今、theme.jsonと連携したパターン設計をマスターしておくことは、制作者にとって大きなアドバンテージになります。まずは自分のテーマでよく使うセクションを1つパターン化するところから始めてみてください。

Build WordPress sites faster.

An investment that pays for itself in a single project.

Get started now

One-time ¥7,800 (tax incl.) · Unlimited sites · Client work OK