WordPressにブロックパターンを作成・登録してコンテンツ制作を効率化する方法

はじめに

WordPressのブロックパターンは、よく使うレイアウトやコンテンツ構成を事前に定義して再利用できる機能です。コンテンツ制作者が毎回同じブロック構成を組み立てる手間を省き、デザインの一貫性を保てます。この記事では、ブロックパターンの作成から登録、管理まで5ステップで解説します。

症状・原因

• ブロックエディターで毎回同じレイアウトを作り直しており、作業時間が無駄になっている
• register_block_pattern() の content に渡すブロックマークアップの書き方がわからない
• コアパターンが多すぎて邪魔で、カスタムカテゴリーだけを表示したい
• 同期パターン（旧：再利用可能ブロック）をコードから登録・管理したい

解決手順

ステップ1：register_block_pattern() でパターンを登録する

init フックの中で register_block_pattern() を使ってパターンを登録します。content にはブロックエディターが使うHTMLコメント形式のマークアップを記述します。

function mytheme_register_block_patterns() {

    // ヒーローセクションのパターン
    register_block_pattern(
        'mytheme/hero-section',
        [
            'title'       => 'ヒーローセクション',
            'description' => '大きな見出しと説明文、CTAボタンを含むヒーローエリア',
            'categories'  => ['mytheme-patterns'],  // カスタムカテゴリー
            'keywords'    => ['hero', 'ヒーロー', 'トップ', 'CTA'],
            'content'     => '
<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"80px"}}},"backgroundColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-primary-background-color has-background"
     style="padding-top:80px;padding-bottom:80px">

    <!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"clamp(2rem, 5vw, 4rem)"}}} -->
    <h1 class="wp-block-heading has-text-align-center">
        あなたのキャッチコピーをここに
    </h1>
    <!-- /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 {"backgroundColor":"white","textColor":"primary"} -->
        <div class="wp-block-button">
            <a class="wp-block-button__link has-white-background-color has-primary-color has-text-color has-background wp-element-button"
               href="#">
                今すぐはじめる
            </a>
        </div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->

</div>
<!-- /wp:group -->
            ',
            'viewportWidth' => 1200,  // プレビューの幅
        ]
    );
}
add_action('init', 'mytheme_register_block_patterns');

ステップ2：/patterns/ ディレクトリにパターンファイルを配置する

WordPress 6.0以降では、テーマの /patterns/ ディレクトリにPHPファイルを配置するだけでパターンが自動登録されます。ファイルヘッダーにメタデータを記述します。

<?php
/**
 * ファイルパス: wp-content/themes/mytheme/patterns/card-grid.php
 *
 * Title: カードグリッドレイアウト
 * Slug: mytheme/card-grid
 * Description: 3列のカードグリッドレイアウト
 * Categories: mytheme-patterns, featured
 * Keywords: card, grid, カード
 * Viewport Width: 1200
 * Block Types: core/group
 * Post Types: post, page
 * Inserter: true
 */
?>

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">

    <!-- wp:columns {"columns":3} -->
    <div class="wp-block-columns">

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"border":{"radius":"8px"},"spacing":{"padding":{"top":"24px","bottom":"24px","left":"24px","right":"24px"}}},"backgroundColor":"base-2"} -->
            <div class="wp-block-group has-base-2-background-color has-background"
                 style="border-radius:8px;padding:24px">
                <!-- wp:heading {"level":3} -->
                <h3 class="wp-block-heading">カードタイトル 1</h3>
                <!-- /wp:heading -->
                <!-- wp:paragraph -->
                <p>カードの説明文をここに入力してください。</p>
                <!-- /wp:paragraph -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"border":{"radius":"8px"},"spacing":{"padding":{"top":"24px","bottom":"24px","left":"24px","right":"24px"}}},"backgroundColor":"base-2"} -->
            <div class="wp-block-group has-base-2-background-color has-background"
                 style="border-radius:8px;padding:24px">
                <!-- wp:heading {"level":3} -->
                <h3 class="wp-block-heading">カードタイトル 2</h3>
                <!-- /wp:heading -->
                <!-- wp:paragraph -->
                <p>カードの説明文をここに入力してください。</p>
                <!-- /wp:paragraph -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"border":{"radius":"8px"},"spacing":{"padding":{"top":"24px","bottom":"24px","left":"24px","right":"24px"}}},"backgroundColor":"base-2"} -->
            <div class="wp-block-group has-base-2-background-color has-background"
                 style="border-radius:8px;padding:24px">
                <!-- wp:heading {"level":3} -->
                <h3 class="wp-block-heading">カードタイトル 3</h3>
                <!-- /wp:heading -->
                <!-- wp:paragraph -->
                <p>カードの説明文をここに入力してください。</p>
                <!-- /wp:paragraph -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

    </div>
    <!-- /wp:columns -->

</div>
<!-- /wp:group -->

ステップ3：register_block_pattern_category() でカスタムカテゴリーを作成する

独自のパターンカテゴリーを作成して、オリジナルパターンをまとめて管理しやすくします。

function mytheme_register_block_pattern_categories() {

    // カスタムカテゴリーの登録
    register_block_pattern_category(
        'mytheme-patterns',
        [
            'label'       => 'My Theme パターン',
            'description' => 'My Theme 専用のブロックパターン集',
        ]
    );

    // セクション別カテゴリー
    register_block_pattern_category(
        'mytheme-hero',
        ['label' => 'ヒーロー・バナー']
    );

    register_block_pattern_category(
        'mytheme-testimonial',
        ['label' => '口コミ・評価']
    );

    register_block_pattern_category(
        'mytheme-cta',
        ['label' => 'CTA・行動喚起']
    );
}
// パターン登録より先に実行されるよう優先度を下げる
add_action('init', 'mytheme_register_block_pattern_categories', 9);

ステップ4：unregister_block_pattern() でコアパターンを削除する

コアのパターンが多すぎて使いにくい場合、不要なパターンを削除したり、リモートパターンの読み込みを無効化できます。

// コアのブロックパターンを一括で削除する
function mytheme_remove_core_patterns() {

    // 特定のパターンを削除
    unregister_block_pattern('core/query-standard-posts');
    unregister_block_pattern('core/query-medium-posts');
    unregister_block_pattern('core/social-links-shared-background-color');

    // WordPress.orgからのリモートパターンを無効化
    // （wp-config.php または functions.php で設定）
}
add_action('init', 'mytheme_remove_core_patterns', 9);

// リモートパターンの読み込みを無効化（wp-config.php または functions.php）
// define('PATTERN_DIRECTORY_POST_TYPE', false);  // 旧方法

// 推奨: フィルターで無効化
add_filter('should_load_remote_block_patterns', '__return_false');

// 特定のカテゴリーのパターンのみ表示する
function mytheme_filter_pattern_categories( $categories ) {
    // 'text', 'query', 'featured' など不要なコアカテゴリーを除外
    $allowed = ['mytheme-patterns', 'mytheme-hero', 'mytheme-cta'];

    return array_filter($categories, function( $category ) use ($allowed) {
        return in_array($category['name'], $allowed, true);
    });
}
// add_filter('block_categories_all', 'mytheme_filter_pattern_categories');

ステップ5：同期パターン（再利用ブロック）を REST API から登録する

同期パターン（すべての設置箇所に変更が反映される）は wp/v2/blocks REST APIエンドポイントや wp_insert_post() で登録できます。

// 同期パターンをプログラムから登録・更新する
function mytheme_create_synced_pattern() {
    // 既存の同期パターンを確認
    $existing = get_page_by_title('フッターCTA', OBJECT, 'wp_block');

    $pattern_content = '<!-- wp:group {"backgroundColor":"primary","textColor":"white"} -->
<div class="wp-block-group has-primary-background-color has-background">
    <!-- wp:heading {"textAlign":"center","textColor":"white"} -->
    <h2 class="wp-block-heading has-white-color has-text-color has-text-align-center">
        今すぐお問い合わせください
    </h2>
    <!-- /wp:heading -->
    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
        <!-- wp:button {"backgroundColor":"white","textColor":"primary"} -->
        <div class="wp-block-button">
            <a class="wp-block-button__link" href="/contact/">お問い合わせ</a>
        </div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
</div>
<!-- /wp:group -->';

    if ( $existing ) {
        // 既存のパターンを更新
        wp_update_post([
            'ID'           => $existing->ID,
            'post_content' => $pattern_content,
        ]);
    } else {
        // 新規作成
        wp_insert_post([
            'post_title'   => 'フッターCTA',
            'post_content' => $pattern_content,
            'post_status'  => 'publish',
            'post_type'    => 'wp_block',  // 同期パターンの投稿タイプ
        ]);
    }
}
// テーマ有効化時に実行
add_action('after_switch_theme', 'mytheme_create_synced_pattern');

注意事項

• ブロックパターンの content 内のHTMLは、エディターの「コードエディター」で確認できるブロックマークアップをそのまま使用できます。一度エディターで作成してからコピーペーストするのが最も簡単です。
• /patterns/ ディレクトリの自動登録機能はWordPress 6.0以降でのみ動作します。それ以前のバージョンをサポートする場合は register_block_pattern() を使用してください。
• 同期パターン（wp_block 投稿タイプ）を削除すると、そのパターンを使用しているすべてのページのコンテンツに影響します。削除前に使用箇所を確認してください。

まとめ

ブロックパターンは register_block_pattern() での登録、/patterns/ ディレクトリへのファイル配置、カスタムカテゴリーの作成の3つのアプローチで実装できます。コアパターンの不要な削除と同期パターンの活用を組み合わせることで、コンテンツ制作ワークフローを大幅に効率化できます。関連記事：WordPressフルサイトエディター（FSE）でサイトを構築する方法