テクニック

WordPressオリジナルブロックパターンの作り方｜編集者が崩さず更新できる仕組み

この記事の対象: WordPress案件でクライアント更新を想定している制作者
読了時間: 約12分

ブロックエディタでページを自由に組めるのは便利だが、クライアントに渡した途端にレイアウトが崩れる——この経験がある人は多いはずだ。カラムの比率が変わる、余白が消える、見出しの階層がめちゃくちゃになる。自由度が高いほど崩れやすいのは、ブロックエディタの構造的な問題ではなく、運用設計の問題になる。

オリジナルのブロックパターンを登録し、触ってよい場所と触らせない場所を分けることで、「決まった型に沿って中身だけ入れ替える」運用が成立する。この記事では register_block_pattern を使ったパターン登録、カテゴリの整理、ブロックロックの設定までを、コピーして動くコードで一通り解説する。

前提条件と動作環境

前提条件と動作環境

この記事のコードは以下の環境を前提にしている。

項目 条件
WordPress 6.0 以降
テーマ形式 クラシックテーマ・ブロックテーマどちらでも可
編集権限 テーマファイルを編集できる権限（管理者）
PHP 7.4 以降
コードの配置場所 子テーマの functions.php、または自作プラグイン

ブロックパターンは WordPress 5.5 で導入されたが、content プロパティでブロックマークアップを直接渡す書き方は 6.0 以降で安定している。5.x 系を使っている場合は先にアップデートしてほしい。

コードはすべて子テーマの functions.php に書く前提で進める。本番のテーマファイルを直接編集すると、テーマ更新時に消えるため、必ず子テーマかプラグインを使うこと。

ブロックパターンを登録する基本の書き方

ブロックパターンを登録する基本の書き方

register_block_pattern の最小構成

まずは最もシンプルな形から。以下のコードを子テーマの functions.php に追加する。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    register_block_pattern(
        'mytheme/simple-cta',
        array(
            'title'       => 'CTA：お問い合わせ誘導',
            'description' => 'テキストとボタンのシンプルなCTAセクション',
            'categories'  => array( 'mytheme-cta' ),
            'content'     => '<!-- wp:group {"backgroundColor":"vivid-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background">
<!-- wp:heading {"level":3,"placeholder":"見出しを入力"} -->
<h3 class="wp-block-heading">お気軽にご相談ください</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>サービスに関するご質問やお見積もりのご依頼はこちらから。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"white","textColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-color has-white-background-color has-text-color has-background wp-element-button" href="/contact/">お問い合わせはこちら</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
        )
    );
});

content に渡しているのは、ブロックエディタが内部的に使っている HTML コメント付きのマークアップだ。このマークアップはエディタ上でブロックを組んだあと、「コードエディター」モードに切り替えると確認できる。

content のマークアップを取得する手順

自力でブロックマークアップを書くのは現実的ではない。以下の手順で取得する。

  1. 管理画面で固定ページや投稿の新規作成を開く
  2. パターンにしたいレイアウトをブロックで組む
  3. 右上の「︙」メニューから「コードエディター」を選ぶ
  4. 表示されたマークアップをすべてコピーする
  5. content の値としてそのまま貼り付ける

コピーしたマークアップ内のシングルクォート ' は PHP の文字列と干渉する。content を囲む引用符をシングルクォートにしている場合、マークアップ内のシングルクォートを \' にエスケープするか、ヒアドキュメント構文を使う。

ヒアドキュメントで可読性を上げる

マークアップが長くなると、文字列の中にHTMLを書くのは読みづらい。ヒアドキュメントを使うとエスケープが不要になる。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    $content = <<<'PATTERN'
<!-- wp:group {"backgroundColor":"vivid-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">お気軽にご相談ください</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>サービスに関するご質問やお見積もりのご依頼はこちらから。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"white","textColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-color has-white-background-color has-text-color has-background wp-element-button" href="/contact/">お問い合わせはこちら</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
PATTERN;

    register_block_pattern(
        'mytheme/simple-cta',
        array(
            'title'       => 'CTA：お問い合わせ誘導',
            'description' => 'テキストとボタンのシンプルなCTAセクション',
            'categories'  => array( 'mytheme-cta' ),
            'content'     => $content,
        )
    );
});

<<<'PATTERN' のようにシングルクォートで囲んだヒアドキュメント（Nowdoc）を使うと、中の変数展開もエスケープも不要になる。パターンのマークアップはそのまま貼り付ければよい。

パターンカテゴリを整理して編集者が迷わない導線にする

パターンカテゴリを整理して編集者が迷わない導線にする

カテゴリを自作する

パターンが増えてくると、挿入画面でどれを使えばいいか迷う。WordPress 標準のカテゴリ（「テキスト」「ギャラリー」など）に混ぜると埋もれるので、案件ごとにカテゴリを作る。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    register_block_pattern_category(
        'mytheme-cta',
        array( 'label' => '【案件名】CTA' )
    );
    register_block_pattern_category(
        'mytheme-section',
        array( 'label' => '【案件名】セクション' )
    );
    register_block_pattern_category(
        'mytheme-card',
        array( 'label' => '【案件名】カード' )
    );
});

ラベルの先頭に 【案件名】 を付けておくと、WordPress コアのパターンカテゴリと混在しても判別しやすい。クライアント名を入れる場合は、管理画面にしか表示されない点を伝えておくとよい。

読者が変更する箇所:
– mytheme-cta → 自分のテーマスラッグに合わせたプレフィックスに変更
– 【案件名】 → 実際のプロジェクト名に変更

不要な標準パターンを非表示にする

WordPressコアや使用テーマが登録しているパターンは、クライアントにとってノイズになることがある。特定のパターンを非表示にするには unregister_block_pattern を使う。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    // コアのパターンを削除する例
    unregister_block_pattern( 'core/query-standard-posts' );
    unregister_block_pattern( 'core/query-medium-posts' );
}, 20 );

add_action の第3引数（優先度）を 20 にしているのは、コアやテーマがパターンを登録するよりあとに実行する必要があるため。デフォルトの 10 では、まだ登録される前に削除しようとして何も起きない。

コアのリモートパターン（WordPress.org から取得されるパターン）をまとめて無効化したい場合は、should_load_remote_block_patterns フィルタを使う。

add_filter( 'should_load_remote_block_patterns', '__return_false' );
パターン整理の方針

案件専用パターンのみ表示

  • 編集者が迷わない
  • レイアウト崩れが起きにくい
  • 「どれを使えばいい？」の問い合わせが減る

標準パターンも全部表示

  • 選択肢が多すぎて混乱する
  • 意図しないレイアウトが使われる
  • デザインの統一感が保てない

クライアントが管理画面で操作する場面を想像すると、選択肢は少ないほうがよい。「使っていいパターンだけが並んでいる」状態を目指す。

実用的なパターンの実例3つ

実用的なパターンの実例3つ

実例1：2カラムの実績紹介セクション

画像とテキストを横並びにした、よく使う構成。カラムの比率を 40:60 に固定し、モバイルでは縦に積む。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    $content = <<<'PATTERN'
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"2rem"}}}} -->
<div class="wp-block-columns">
<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%">
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="" alt="実績画像の説明を入力"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"60%"} -->
<div class="wp-block-column" style="flex-basis:60%">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">プロジェクト名を入力</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>プロジェクトの概要をここに入力します。どんな課題があり、どう解決したかを2〜3文で。</p>
<!-- /wp:paragraph -->
<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>担当範囲：デザイン / コーディング</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>使用技術：WordPress / カスタム投稿タイプ</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>制作期間：約2ヶ月</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
PATTERN;

    register_block_pattern(
        'mytheme/works-two-column',
        array(
            'title'       => '実績紹介：2カラム（画像左）',
            'description' => '画像40%・テキスト60%の実績紹介セクション',
            'categories'  => array( 'mytheme-section' ),
            'content'     => $content,
        )
    );
});

読者が変更する箇所:
– カラム比率（40% / 60%）を案件に合わせて調整
– リストの項目名（担当範囲、使用技術など）
– blockGap の値（カラム間の余白）

実例2：料金表カード

3カラムの料金プラン表示。プラン名・価格・特徴リストを1枚のカードに収める。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    $content = <<<'PATTERN'
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">料金プラン</h2>
<!-- /wp:heading -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"1.5rem"}}}} -->
<div class="wp-block-columns">
<!-- wp:column {"style":{"border":{"width":"1px","color":"#e0e0e0"},"spacing":{"padding":{"top":"2rem","bottom":"2rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-column has-border-color" style="border-color:#e0e0e0;border-width:1px;padding-top:2rem;padding-right:1.5rem;padding-bottom:2rem;padding-left:1.5rem">
<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center">ライトプラン</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.5rem","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-center" style="font-size:1.5rem;font-style:normal;font-weight:700">月額 ¥XX,XXX</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>特徴1を入力</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>特徴2を入力</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>特徴3を入力</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"width":"2px","color":"#0073aa"},"spacing":{"padding":{"top":"2rem","bottom":"2rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-column has-border-color" style="border-color:#0073aa;border-width:2px;padding-top:2rem;padding-right:1.5rem;padding-bottom:2rem;padding-left:1.5rem">
<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center">スタンダードプラン</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.5rem","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-center" style="font-size:1.5rem;font-style:normal;font-weight:700">月額 ¥XX,XXX</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>特徴1を入力</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>特徴2を入力</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>特徴3を入力</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"width":"1px","color":"#e0e0e0"},"spacing":{"padding":{"top":"2rem","bottom":"2rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-column has-border-color" style="border-color:#e0e0e0;border-width:1px;padding-top:2rem;padding-right:1.5rem;padding-bottom:2rem;padding-left:1.5rem">
<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center">プレミアムプラン</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.5rem","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-center" style="font-size:1.5rem;font-style:normal;font-weight:700">月額 ¥XX,XXX</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>特徴1を入力</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>特徴2を入力</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>特徴3を入力</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
PATTERN;

    register_block_pattern(
        'mytheme/pricing-cards',
        array(
            'title'       => '料金表：3カラムカード',
            'description' => 'プラン名・価格・特徴リストの料金比較カード',
            'categories'  => array( 'mytheme-card' ),
            'content'     => $content,
        )
    );
});

中央のカードだけ border-width を 2px、border-color をアクセントカラーにして強調している。推しプランを視覚的に目立たせるよく使う手法だ。

読者が変更する箇所:
– #0073aa（強調カードのボーダー色）を案件のブランドカラーに
– ¥XX,XXX を実際の料金に
– 特徴のリスト項目

実例3：お知らせ一覧のリード部分

見出し・説明文・「一覧を見る」ボタンをセットにしたパターン。投稿一覧ページの上部に置く想定。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    $content = <<<'PATTERN'
<!-- wp:group {"style":{"spacing":{"padding":{"top":"3rem","bottom":"3rem"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:3rem;padding-bottom:3rem">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">お知らせ</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">最新の情報をお届けします。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/news/">お知らせ一覧を見る</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
PATTERN;

    register_block_pattern(
        'mytheme/news-lead',
        array(
            'title'       => 'お知らせ：リードセクション',
            'description' => '見出し・説明文・一覧リンクのセット',
            'categories'  => array( 'mytheme-section' ),
            'content'     => $content,
        )
    );
});

テクニック Shopifyオリジナルセクションの作り方｜schemaの書き方から実装まで Shopify の Online Store 2.0 テーマでは、管理画面の「カスタマイズ」からドラッグ＆ドロップでセクションを追加できます。既存セクション…

ブロックのロックで「触らせない箇所」を守る

ブロックのロックで「触らせない箇所」を守る

パターンは挿入した時点で普通のブロックに展開される。そのままだと編集者がカラムを削除したり、見出しの階層を変えたりできてしまう。ここを制御するのがブロックのロック機能だ。

ロックの種類

ロック種別 制御内容
"move" ブロックの移動を禁止
"remove" ブロックの削除を禁止
"all" 移動・削除の両方を禁止

ブロックの内容（テキストの編集）はロックされない。これが重要で、「構造は固定、中身は自由に書き換えられる」という運用に合致する。

ロック付きパターンのコード例

先ほどの CTA パターンに、ロックを追加したバージョン。各ブロックの JSON 属性に "lock" を追加する。

ファイル: wp-content/themes/your-child-theme/functions.php

add_action( 'init', function() {
    $content = <<<'PATTERN'
<!-- wp:group {"lock":{"move":true,"remove":true},"backgroundColor":"vivid-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background">
<!-- wp:heading {"lock":{"move":true,"remove":true},"level":3} -->
<h3 class="wp-block-heading">お気軽にご相談ください</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
<p>サービスに関するご質問やお見積もりのご依頼はこちらから。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"lock":{"move":true,"remove":true},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"lock":{"move":true,"remove":true},"backgroundColor":"white","textColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-color has-white-background-color has-text-color has-background wp-element-button" href="/contact/">お問い合わせはこちら</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
PATTERN;

    register_block_pattern(
        'mytheme/locked-cta',
        array(
            'title'       => 'CTA：お問い合わせ誘導（ロック付き）',
            'description' => '構造が固定されたCTA。テキストだけ変更可能',
            'categories'  => array( 'mytheme-cta' ),
            'content'     => $content,
        )
    );
});

"lock":{"move":true,"remove":true} を各ブロックのコメント内 JSON に追加している。ポイントは、親の group だけでなく子のブロックにも個別にロックを付ける点。親だけロックしても、子ブロックは自由に操作できてしまう。

templateLock との使い分け

templateLock という別の仕組みもある。こちらはグループブロックやカラムブロックの子要素すべてをまとめてロックできる。

<!-- wp:group {"templateLock":"all","layout":{"type":"constrained"}} -->
方式 向いている場面
個別の lock ブロックごとにロック/非ロックを使い分けたいとき
templateLock グループ内のブロック構成を丸ごと固定したいとき

templateLock に "all" を指定すると、その中のブロックの追加・削除・移動がすべて禁止される。"insert" を指定すると、移動は許可するがブロックの追加・削除を禁止する。

ブロックロックの適用フロー
パターン設計どの構造を固定するか決める
ロック方式の選択個別lock か templateLock を選ぶ
JSON属性に追記各ブロックコメントにlock設定を足す
編集者で動作確認編集者権限で操作を試す

ロックの設定は管理者権限のユーザーなら解除できる。クライアントのアカウントを「編集者」権限にしておけば、ロックを外される心配がない。権限設計とセットで考えること。

ブロックパターンの設計はテーマ選定と密接に関わる。有料テーマを使う場合と自作テーマの場合ではパターンの作り込み方が変わるため、テーマの方針が固まっていない場合はそちらから整理するのが先になる。






リニューアルガイド
WordPressテーマの選び方｜有料・無料・自作の判断基準【Web制作向け・2026年】
WordPress案件でテーマをどうするか。有料テーマを買うか、無料テーマで済ませるか、ゼロからオリジナルで組むか。案件のたびに迷う判断だが、「なんとなく」…

パターンをファイルベースで管理する（WordPress 6.0以降）

パターンをファイルベースで管理する（WordPress 6.0以降）

patterns ディレクトリに PHP ファイルを置く方法

WordPress 6.0 以降では、テーマの patterns/ ディレクトリに PHP ファイルを置くだけでパターンとして登録される。functions.php にコードを追加する必要がない。

ファイル: wp-content/themes/your-child-theme/patterns/cta-contact.php

<?php
/**
 * Title: CTA：お問い合わせ誘導
 * Slug: mytheme/cta-contact
 * Categories: mytheme-cta
 * Description: テキストとボタンのシンプルなCTAセクション
 */
?>
<!-- wp:group {"lock":{"move":true,"remove":true},"backgroundColor":"vivid-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background">
<!-- wp:heading {"lock":{"move":true,"remove":true},"level":3} -->
<h3 class="wp-block-heading">お気軽にご相談ください</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
<p>サービスに関するご質問やお見積もりのご依頼はこちらから。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"lock":{"move":true,"remove":true},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"lock":{"move":true,"remove":true},"backgroundColor":"white","textColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-color has-white-background-color has-text-color has-background wp-element-button" href="/contact/">お問い合わせはこちら</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->

ファイル冒頭の PHP コメントがメタ情報になる。Title と Slug は必須、Categories と Description は任意。

functions.php 方式とファイル方式の比較

比較項目 functions.php patterns/ ディレクトリ
対応バージョン WordPress 5.5 以降 WordPress 6.0 以降
テーマ形式 クラシック・ブロック両対応 クラシック・ブロック両対応
ファイル管理 functions.php が肥大化しやすい 1パターン1ファイルで見通しがよい
PHP の変数利用 可能 可能（PHPファイルなので）
Git管理 差分が見づらい ファイル単位で差分が追える

パターンが3つを超えたら、ファイル方式に切り替えるのが管理しやすい。functions.php が数百行になるとメンテナンスが辛くなる。

ファイル方式を使う場合でも、カテゴリの登録は functions.php（または別のPHPファイル）で register_block_pattern_category を呼ぶ必要がある。カテゴリだけは patterns/ ディレクトリでは定義できない。

パターンのファイル構成例

your-child-theme/

  • functions.php（カテゴリ登録のみ）
  • patterns/cta-contact.php
  • patterns/works-two-column.php
  • patterns/pricing-cards.php
  • patterns/news-lead.php

パターンが増えてきたら、このようにテーマディレクトリの中で役割を分離する。functions.php にはカテゴリ登録と不要パターンの削除だけを書き、パターン本体は patterns/ に分ける。

パターンファイルを含むテーマをGitで管理する場合、デプロイ先のサーバー環境やバックアップ体制もあわせて設計しておくと安心だ。






リニューアルガイド
WordPress保守とバックアップ｜制作者が選ぶツール構成【2026年】
サイトが壊れたとき、何分で元に戻せるか。バックアップ体制の良し悪しは、この一点で決まります。 WordPressのバックアップ手段は大きく3つ。プラグイン、…

うまくいかないとき

うまくいかないとき

パターンが挿入画面に表示されない

  • init フックで登録しているか確認する。after_setup_theme では早すぎてブロックパターン API が使えない場合がある
  • スラッグが重複していないか確認する。mytheme/cta と同じスラッグで2回登録すると、片方が無視される
  • キャッシュプラグインを無効にして確認する。管理画面のHTMLをキャッシュしているケースがある

ロックが効かない

  • ユーザーの権限を確認する。管理者はロックを解除できる。「編集者」権限でテストする
  • 子ブロックにもロックを設定しているか確認する。親の group だけロックしても、子ブロックは操作できる
  • templateLock と個別 lock を混在させていないか確認する。両方が設定されている場合の挙動はブロックによって異なる

コードエディターのマークアップを貼り付けたら構文エラーが出る

  • PHP のシングルクォートとの干渉。content をシングルクォートで囲んでいる場合、マークアップ内の ' がPHPの文字列終端と解釈される。ヒアドキュメント（<<<'PATTERN'）を使えば回避できる
  • HTMLのダブルクォートが閉じていない。ブロックコメント内のJSONでダブルクォートが入れ子になるとパースエラーになる。コードエディターからコピーしたマークアップをそのまま使えば問題ないが、手動で書き換えた場合は注意

パターンの変更が既存ページに反映されない

これは仕様。パターンは挿入した時点でブロックに展開されるため、あとからパターン定義を変えても既存のページには影響しない。すでに挿入済みのページは個別に修正するか、パターンを削除して挿入し直す必要がある。再利用ブロック（同期パターン）とは別の仕組みなので混同しないこと。

子テーマやパターンファイルの配置先となるサーバー選びも、運用の安定度に関わるポイントだ。






リニューアルガイド
WordPress向けレンタルサーバーの選び方｜制作会社が納品後に困らない判断基準
自分のブログなら、好きなサーバーを選んで好きに使えばいい。でも、クライアントに納品するサイトではそうはいかない。 「納品後にサーバーの管理をどうするか」を考…

よくある質問

よくある質問

ブロックパターンと再利用ブロック（同期パターン）は何が違う？

ブロックパターンは「テンプレート」で、挿入するたびに独立したブロックとして展開される。1箇所を変えても他のページには影響しない。再利用ブロック（WordPress 6.3 以降は「同期パターン」と呼ばれる）は、すべてのページで同じ内容が共有され、1箇所を変えると全ページに反映される。ヘッダーやフッターのように全ページ共通の要素は同期パターン、ページごとに内容が変わるセクションはブロックパターンが適している。

パターンは子テーマとプラグインのどちらに書くべき？

テーマ固有のレイアウト（そのデザインでしか使わない構成）なら子テーマ、テーマを変えても使いまわしたい汎用的なパターンならプラグインが向いている。クライアント案件で納品するなら、テーマ切り替え時にパターンが消えないようプラグインにしておくほうが安全だ。

パターンの中で動的なデータ（最新記事など）は表示できる？

ブロックパターン単体ではできない。ただし「クエリーループ」ブロックをパターンに含めることで、最新記事の一覧をパターンとして登録できる。PHP で動的にHTMLを生成したい場合は、カスタムブロックかショートコードの領域になる。

ロックしたブロックの中のテキストは編集できる？

できる。lock はブロックの移動と削除を制御するもので、テキストの入力や画像の差し替えは制限されない。編集者がテキストを自由に書き換えつつ、構造は崩さないという運用に合っている。

WordPress 6.0 より前のバージョンでも使える？

register_block_pattern 自体は WordPress 5.5 から使えるが、lock 属性によるロックは WordPress 5.9 以降、patterns/ ディレクトリによるファイルベース登録は WordPress 6.0 以降の機能。5.x 系で運用する場合はロックとファイルベース登録が使えないため、functions.php での登録のみになる。

まとめ

ブロックパターンの登録は、「自由に組めるブロックエディタ」を「決まった型に沿って運用するツール」に変える仕組みだ。この記事で扱った内容を整理する。

  • register_block_pattern でパターンを登録し、カテゴリで整理する
  • 不要な標準パターンは unregister_block_pattern やリモートパターンの無効化で非表示にする
  • lock 属性や templateLock で構造を固定し、編集者はテキストと画像だけ入れ替える運用にする
  • パターンが増えたら patterns/ ディレクトリでファイル管理に切り替える
  • クライアントのアカウントは「編集者」権限にし、ロック解除を防ぐ

パターンを作る手間はかかるが、納品後の「レイアウトが崩れた」という連絡が減る。運用コストまで含めて考えると、制作時にパターンを仕込んでおく価値は十分ある。

Soreiine!! Magazine

WEBサイトのリニューアルをご検討中ですか？
プロのWebディレクターが厳選した「リニューアル完全チェックリスト」を
無料でお届けします。

無料チェックリストをダウンロード 無料で相談する

この記事に関連する掲載事例

Soreiine!! に掲載した実際のWebサイトから、この記事の内容に近いものを紹介します。

ロッテのオーラルケアガム・オーラテクト ロッテのオーラルケアガム・オーラテクト 街づくりへの想いを伝える不動産デベロッパー 街づくりへの想いを伝える不動産デベロッパー 広告会社オリコムのコーポレートサイト 広告会社オリコムのコーポレートサイト 暮らしを彩るアパレルブランドkittoi 暮らしを彩るアパレルブランドkittoi 日暮里ゼミナールのラジオ風学習サイト 日暮里ゼミナールのラジオ風学習サイト ハイアールのStepNew Label家電シリーズ ハイアールのStepNew Label家電シリーズ

関連記事

Shopifyオリジナルセクションの作り方｜schemaの書き方から実装まで
テクニック Shopifyオリジナルセクションの作り方｜schemaの書き方から実装まで
Shopifyテーマの選び方｜無料・有料・オリジナルの判断基準【2026年】
リニューアルガイド Shopifyテーマの選び方｜無料・有料・オリジナルの判断基準【2026年】
ブログカードの作り方｜プラグインなしでWordPressに実装する手順
テクニック ブログカードの作り方｜プラグインなしでWordPressに実装する手順