2026年5月20日

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

カスタマイズ

はじめに

WordPressのブロックパターンは、あらかじめデザインされたブロックの組み合わせを素早く挿入できる機能です。register_block_pattern() でカスタムパターンを作成し、テーマに合ったデザインテンプレートを提供できます。

症状・原因

よく使うセクションレイアウトを簡単に挿入したい
クライアントが使いやすいパターンを用意したい
パターンディレクトリのパターンを無効化したい
テーマ専用のブロックパターンを配布したい

解決手順

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

// functions.php
add_action('init', function(): void {

    // パターンカテゴリーを登録
    register_block_pattern_category(
        'my-theme',
        ['label' => 'マイテーマ']
    );

    // ヒーローセクションパターン
    register_block_pattern('my-theme/hero', [
        'title'       => 'ヒーローセクション',
        'description' => '大きな見出しとCTAボタンのヒーロー',
        'categories'  => ['my-theme', 'featured'],
        'keywords'    => ['ヒーロー', 'CTA', 'トップ'],
        'content'     => '<!-- wp:cover {"url":"","dimRatio":50,"minHeight":500} -->
<div class="wp-block-cover" style="min-height:500px">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"level":1,"textAlign":"center","style":{"color":{"text":"#ffffff"}}} -->
<h1 class="has-text-align-center" style="color:#ffffff">魅力的なキャッチコピーをここに</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-center" style="color:#ffffff">サブテキストで補足説明を入れてください。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"primary"} --><div class="wp-block-button"><a class="wp-block-button__link has-primary-background-color has-background" href="#">詳しく見る</a></div><!-- /wp:button -->
</div><!-- /wp:buttons -->
</div></div><!-- /wp:cover -->',
    ]);
});

ステップ2：パターンをPHPファイルで管理する（テーマ推奨）

テーマのディレクトリ構成:
themes/my-theme/
├── patterns/
│   ├── hero.php
│   ├── cta-section.php
│   ├── feature-grid.php
│   └── footer-columns.php
└── functions.php

<?php
// patterns/hero.php — WordPress 6.0以降は自動読み込み
/**
 * Title: ヒーローセクション
 * Slug: my-theme/hero
 * Categories: my-theme, featured
 * Keywords: ヒーロー, CTA
 */
?>
<!-- wp:group {"backgroundColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-primary-background-color has-background">
<!-- wp:heading {"level":1,"textAlign":"center","textColor":"white"} -->
<h1 class="has-text-align-center has-white-color has-text-color">見出しをここに入力</h1>
<!-- /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" href="#">ボタンテキスト</a></div><!-- /wp:button -->
</div><!-- /wp:buttons -->
</div><!-- /wp:group -->

ステップ3：パターンディレクトリのパターンを無効化する

// functions.php — パターンディレクトリからのパターンを無効化
add_action('after_setup_theme', function(): void {
    remove_theme_support('core-block-patterns');
});

// theme.json — 特定コアパターンを無効化
{
    "version": 2,
    "settings": {
        "blocks": {
            "core/query": {
                "patterns": []
            }
        }
    },
    "__experimentalFeatures": {
        "useRootPaddingAwareAlignments": true
    }
}

ステップ4：既存パターンの上書きと削除

// functions.php — コアパターンを削除
add_action('init', function(): void {
    // 特定のコアパターンを削除
    unregister_block_pattern('core/query-standard-posts');
    unregister_block_pattern('core/query-medium-posts');

    // カテゴリーを削除
    unregister_block_pattern_category('featured');
}, 20); // 優先度20でコア登録後に実行

ステップ5：WP-CLIでパターンを管理する

# 登録済みパターンを確認
wp eval "
foreach (WP_Block_Patterns_Registry::get_instance()->get_all_registered() as \$p) {
    echo \$p['name'] . ' | ' . \$p['title'] . PHP_EOL;
}
"

# パターンカテゴリーを確認
wp eval "
foreach (WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered() as \$c) {
    echo \$c['name'] . ' | ' . \$c['label'] . PHP_EOL;
}
"

注意事項

WordPress 6.0以降、テーマの patterns/ ディレクトリに *.php ファイルを置くと自動的にパターンとして登録されます。PHPファイルのコメントヘッダーで Title・Slug・Categories を指定します
パターンのブロックマークアップ（HTMLコメント形式）は、Gutenbergエディタで対象ブロックを選択し「コードエディタ（Ctrl+Shift+Alt+M）」で確認できます
remove_theme_support('core-block-patterns') を設定すると、WordPress.orgのパターンディレクトリからのインポートも無効化されます

まとめ

カスタムブロックパターンは patterns/ ディレクトリのPHPファイルで管理するのが最もシンプルです（WordPress 6.0以降）。PHPヘッダーコメントに Title・Slug・Categories を書くだけで自動登録されます。不要なコアパターンは unregister_block_pattern() で削除できます。

Post Views: 10