WordPressのブロックパターンを作成する方法

はじめに

「ヘッダーやCTAセクションのレイアウトを使い回したい」「クライアントが誤って崩さないようにデザインを固定したい」「よく使うブロックの組み合わせをパターンとして登録したい」——ブロックパターンを使えば、複雑なブロック構成を1クリックで挿入できます。

症状・原因

ブロックエディターで同じレイアウトを繰り返し作成するのは非効率で、担当者によって品質にばらつきが出ます。ブロックパターンとして登録することで、デザインの一貫性を保ちながら編集作業を効率化できます。

解決手順

ステップ1：PHPでブロックパターンを登録する

// functions.php: ブロックパターンを登録
add_action( 'init', function(): void {

    // カスタムカテゴリーを登録
    register_block_pattern_category( 'myplugin', [
        'label' => __( 'マイサイト', 'mytheme' ),
        'icon'  => 'layout',
    ] );

    // CTAセクションパターン
    register_block_pattern(
        'mytheme/cta-section',
        [
            'title'       => __( 'CTAセクション', 'mytheme' ),
            'description' => __( '行動喚起ボタン付きのセクション', 'mytheme' ),
            'categories'  => [ 'myplugin', 'featured' ],
            'keywords'    => [ 'CTA', 'ボタン', '行動喚起' ],
            'content'     => '<!-- wp:group {"style":{"color":{"background":"#1d2327"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#1d2327">
<!-- wp:heading {"textAlign":"center","style":{"color":{"text":"#ffffff"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="color:#ffffff">今すぐ始めよう</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#a7aaad"}}} -->
<p class="has-text-align-center" style="color:#a7aaad">無料トライアルで全機能をお試しください</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-background-color has-background wp-element-button">無料で始める</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" style="color:#fff">詳細を見る</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
        ]
    );

    // 価格テーブルパターン
    register_block_pattern(
        'mytheme/pricing-table',
        [
            'title'      => __( '料金プランテーブル', 'mytheme' ),
            'categories' => [ 'myplugin' ],
            'content'    => '<!-- wp:columns {"isStackedOnMobile":true} -->
<div class="wp-block-columns">
<!-- wp:column {"style":{"border":{"width":"2px","style":"solid","color":"#e0e0e0"},"spacing":{"padding":{"all":"24px"}}}} -->
<div class="wp-block-column" style="border-color:#e0e0e0;border-style:solid;border-width:2px;padding:24px">
<!-- wp:heading {"level":3,"textAlign":"center"} -->
<h3 class="wp-block-heading has-text-align-center">スタータープラン</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"2rem","fontWeight":"700"}}} -->
<p class="has-text-align-center" style="font-size:2rem;font-weight:700">¥980<span style="font-size:1rem;font-weight:400">/月</span></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"width":"2px","style":"solid","color":"#0073aa"},"spacing":{"padding":{"all":"24px"}},"color":{"background":"#f0f6fc"}}} -->
<div class="wp-block-column has-background" style="border-color:#0073aa;border-style:solid;border-width:2px;padding:24px;background-color:#f0f6fc">
<!-- wp:heading {"level":3,"textAlign":"center","style":{"color":{"text":"#0073aa"}}} -->
<h3 class="wp-block-heading has-text-align-center" style="color:#0073aa">プロプラン</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"2rem","fontWeight":"700"}}} -->
<p class="has-text-align-center" style="font-size:2rem;font-weight:700">¥2,980<span style="font-size:1rem;font-weight:400">/月</span></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->',
        ]
    );
} );

ステップ2：テーマのpatterns/ディレクトリからパターンを登録する

// テーマのディレクトリ構成（WordPress 6.0以降）
mytheme/
├── patterns/
│   ├── cta-section.php       # CTAセクション
│   ├── hero-image.php        # ヒーロー画像
│   └── contact-form.php      # お問い合わせ
└── functions.php

<?php
// patterns/cta-section.php: ファイルベースのパターン登録
/**
 * Title: CTAセクション
 * Slug: mytheme/cta-section
 * Categories: featured, myplugin
 * Keywords: CTA, ボタン
 * Block Types: core/group
 * Viewport Width: 1280
 * Description: 行動喚起ボタン付きのダークセクション
 */
?>
<!-- wp:group {"style":{"color":{"background":"#1d2327"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#1d2327">
<!-- wp:heading {"textAlign":"center","style":{"color":{"text":"#ffffff"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="color:#ffffff">今すぐ始めよう</h2>
<!-- /wp:heading -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">無料で始める</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->

ステップ3：コアのデフォルトパターンを無効化する

// functions.php: コアのデフォルトパターンを無効化
add_action( 'init', function(): void {
    // WordPress組み込みのリモートパターンを無効化
    remove_theme_support( 'core-block-patterns' );
} );

// 特定のパターンのみ除外
add_filter( 'should_load_remote_block_patterns', '__return_false' );

// コアパターンカテゴリーを非表示にする
add_filter( 'block_editor_settings_all', function( array $settings ): array {
    // パターンディレクトリへのアクセスを無効化
    $settings['__experimentalBlockPatterns'] = array_filter(
        $settings['__experimentalBlockPatterns'] ?? [],
        fn( $pattern ) => str_starts_with( $pattern['name'], 'mytheme/' )
    );
    return $settings;
} );

ステップ4：同期パターン（再利用ブロック）をプログラムで作成する

// functions.php: 同期パターン（旧:再利用ブロック）をコードで管理
add_action( 'init', function(): void {
    // wp_block 投稿タイプに同期パターンを追加
    if ( ! get_page_by_path( 'site-footer-cta', OBJECT, 'wp_block' ) ) {
        wp_insert_post( [
            'post_type'    => 'wp_block',
            'post_title'   => 'サイト共通CTA',
            'post_status'  => 'publish',
            'post_content' => '<!-- wp:paragraph -->
<p>どのページでも使える共通CTAコンテンツ</p>
<!-- /wp:paragraph -->',
            'meta_input'   => [
                'wp_pattern_sync_status' => '',  // 空文字 = 同期（synced）
            ],
        ] );
    }
} );

ステップ5：パターンの内容をブロックマークアップから取得する

// functions.php: エディターで作成したパターンのシリアライズを取得
// デバッグ用: 現在のページのブロック構造を確認
add_action( 'save_post', function( int $post_id ): void {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }
    $post = get_post( $post_id );
    if ( 'page' !== $post->post_type ) {
        return;
    }
    // post_content をそのままパターンの content として使用できる
    // error_log( $post->post_content );
} );

// パターンの content 文字列を整形して functions.php に貼り付ける手順：
// 1. エディターでブロックを作成
// 2. ︙メニュー → 「コードエディター」に切り替え
// 3. HTMLをコピー → register_block_pattern() の content に貼り付け
// 4. PHP文字列内ではシングルクォートをエスケープ（' → \'）

注意事項

• patterns/ディレクトリのPHPファイルはWordPress 6.0以降でサポートされています。旧バージョンではregister_block_pattern()をPHPで呼び出してください。
• ブロックパターンのcontentはシリアライズされたブロックマークアップです。エディターのコードビューからコピーして使用するのが最も確実です。
• 同期パターン（Synced Patterns）はwp_block投稿タイプとして保存されます。更新すると全ての使用箇所に反映されます。

まとめ

ブロックパターンの実装は「register_block_pattern_category()でカテゴリーを作成→register_block_pattern()またはpatterns/ディレクトリのPHPファイルでパターンを登録→コードエディターからブロックマークアップをコピーしてcontentに設定→必要に応じてコアパターンを無効化→同期パターンで複数ページ共通コンテンツを管理」の流れで整備します。関連記事：WordPressにカスタムブロックを追加する方法、WordPressのフルサイト編集テーマを作成する方法。