応用編: ブロックテーマ・FSE開発 - WordPressオリジナルテーマ作成

ブロックテーマとは？「ハイブリッドテーマ」との違い

ブロックテーマ（Block Theme）は、WordPress 5.9で導入されたフルサイト編集（FSE）に対応したテーマ形式です。ヘッダー・フッター・投稿一覧といったサイト全体のレイアウトを、PHPテンプレートファイルではなく、theme.jsonとHTML形式のテンプレートファイルだけで構成します。

ブロックテーマの特徴

header.php・footer.phpの代わりにHTMLテンプレートを使用
サイトエディタ上でヘッダーからフッターまで直接編集可能
theme.jsonでカラー・タイポグラフィ・余白などを一元管理
PHPの知識がなくても基本的なテーマ制作が可能
従来型テーマに比べてカスタマイズの自由度が高い一方、複雑な条件分岐にはPHP（functions.php）の併用が必要

なお、既存のPHPベースの従来型テーマに、theme.jsonやブロックエディタ対応機能だけを部分的に組み込む手法は「ハイブリッドテーマ」と呼ばれ、本ページで扱う「ブロックテーマ（ゼロから作る完全FSE構成）」とは作り方が異なります。すでに運用中のテーマを活かしたい場合はハイブリッドテーマ、新規にFSE前提のテーマを作りたい場合は本ページの方法を選んでください。

ブロックテーマの基本ディレクトリ構成

ブロックテーマは、以下のようなファイル構成が基本になります。従来型テーマのようなsingle.phpやheader.phpは登場しません。

ディレクトリ構成my-block-theme/
├── style.css              テーマ情報のヘッダーコメント
├── theme.json              グローバル設定・スタイルの定義
├── functions.php           必要に応じたPHP処理（任意）
├── templates/
│   ├── index.html          必須：デフォルトテンプレート
│   ├── single.html         個別投稿ページ
│   ├── archive.html        アーカイブページ
│   └── page.html           固定ページ
├── parts/
│   ├── header.html         ヘッダーのテンプレートパーツ
│   └── footer.html         フッターのテンプレートパーツ
└── patterns/
    └── hero.php            登録用パターン（任意）

STEP 1: 最小構成のブロックテーマを作る

まずは動作する最小限のブロックテーマを作成します。必要なのはstyle.css・theme.json・templates/index.htmlの3点です。

style.cssのヘッダーコメント

style.css/*
Theme Name: My Block Theme
Theme URI: https://example.com/
Author: Your Name
Description: フルサイト編集に対応したオリジナルブロックテーマ
Version: 1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: my-block-theme
*/

最小構成のtheme.json

theme.json{
    "$schema": "https://schemas.wp.org/wp/6.6/theme.json",
    "version": 3,
    "settings": {
        "color": {
            "palette": []
        }
    },
    "templateParts": [
        {
            "name": "header",
            "title": "ヘッダー",
            "area": "header"
        },
        {
            "name": "footer",
            "title": "フッター",
            "area": "footer"
        }
    ]
}

templates/index.htmlの作成

templates/index.html<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
    <!-- wp:query -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

これだけで動作するテーマになります

この3ファイルを配置するだけで、WordPressの管理画面から「外観 > エディター（サイトエディター）」にアクセスできるブロックテーマとして認識されます。

実務では「Create Block Theme」プラグインも活用されています

本ページでは仕組み理解のために手書きでの作成手順を解説していますが、実際の制作現場では、WordPress公式プラグイン「Create Block Theme」を使い、サイトエディター上で作ったデザインをそのままテーマファイル一式（theme.json・templates・parts）としてエクスポートする方法もよく使われます。ゼロからコードを書く前に、まずこのプラグインで土台を生成し、細部を手動調整していく進め方も検討してみてください。

STEP 2: theme.json（version 3）でグローバル設定を管理する

WordPress 6.6以降ではtheme.jsonのversionが3に更新され、カラーパレットやフォントサイズの上書き挙動がより明示的になりました。新規にブロックテーマを作る場合は、version 3を使うのが推奨です。

theme.json（詳細版）{
    "$schema": "https://schemas.wp.org/wp/6.6/theme.json",
    "version": 3,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "メインブルー",
                    "slug": "main-blue",
                    "color": "#1976D2"
                },
                {
                    "name": "アクセントオレンジ",
                    "slug": "accent-orange",
                    "color": "#FF6B35"
                }
            ],
            "defaultPalette": false
        },
        "typography": {
            "fontSizes": [
                { "name": "標準", "slug": "normal", "size": "16px" },
                { "name": "大", "slug": "large", "size": "28px" }
            ],
            "defaultFontSizes": false
        },
        "spacing": {
            "spacingSizes": [
                { "name": "S", "slug": "small", "size": "1rem" },
                { "name": "M", "slug": "medium", "size": "2rem" }
            ],
            "defaultSpacingSizes": false
        },
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    },
    "styles": {
        "color": {
            "background": "#ffffff",
            "text": "#333333"
        },
        "typography": {
            "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
            "lineHeight": "1.8"
        },
        "elements": {
            "link": {
                "color": { "text": "var(--wp--preset--color--main-blue)" }
            }
        }
    }
}

version 3で変わったポイント

デフォルトのカラー・フォントサイズ・余白プリセットを、明示的に defaultPalette: false 等で無効化しないと、自作のプリセットと標準プリセットが両方表示される
最小対応WordPressバージョンが6.6以上の場合に使用可能
既存テーマをversion 2から3へ上げる際は、上書き挙動の変化に注意が必要

STEP 3: テンプレートパーツ（header・footer）を作る

ヘッダーとフッターは、parts/フォルダにHTML形式で用意します。サイトエディター上でブロックとして直接編集できるようになります。

parts/header.html<!-- wp:group {"tagName":"header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

parts/footer.html<!-- wp:group {"tagName":"footer","layout":{"type":"constrained"}} -->
<footer class="wp-block-group">
    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">© My Block Theme</p>
    <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

STEP 4: 用途別テンプレートを追加する

従来型テーマのsingle.php・archive.phpに相当するテンプレートも、HTML形式でtemplates/に追加していきます。

templates/single.html<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

テンプレート階層のルール

ブロックテーマでも、優先順位のルール自体は従来型テーマのテンプレート階層とほぼ同じです。single-{post_type}.htmlのように、より詳細なファイル名があれば優先的に読み込まれます。

STEP 5: パターン（Patterns）を登録する

よく使うブロックの組み合わせをパターンとして登録しておくと、サイトエディターの「パターン」タブから呼び出せるようになります。

patterns/hero.php<?php
/**
 * Title: ヒーローセクション
 * Slug: my-block-theme/hero
 * Categories: featured
 */
?>
<!-- wp:cover {"dimRatio":30} -->
<div class="wp-block-cover">
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"level":1,"textAlign":"center"} -->
        <h1 class="has-text-align-center">サイトタイトル</h1>
        <!-- /wp:heading -->
    </div>
</div>
<!-- /wp:cover -->

WordPress 6.0以降は、このようにpatterns/フォルダにPHPファイルを置くだけでパターンが自動登録されます（従来型テーマのregister_block_pattern()を使う方法も併用可能です）。

ブロックテーマの子テーマ（Child Theme）

ブロックテーマにも、従来型テーマと同様に子テーマの仕組みが用意されています。基本的な考え方は共通していますが、上書きの対象がPHPテンプレートではなく、theme.jsonやHTMLテンプレートになる点が異なります。

子テーマの基本構成

style.css（子テーマ）/*
Theme Name: My Block Theme Child
Template: my-block-theme
Version: 1.0
*/

Template行に親テーマのフォルダ名を指定するだけで子テーマとして認識される点は、従来型テーマと同じです。

theme.jsonの上書き

子テーマに独自のtheme.jsonを配置すると、親テーマの設定に対して差分がマージされます。カラーパレットなど一部の設定だけを変更したい場合に便利です。

テンプレートファイルの上書き

子テーマのtemplates/やparts/に同名のファイルを置くと、親テーマのテンプレートより優先して読み込まれます。たとえば親テーマのtemplates/single.htmlはそのままに、子テーマ側だけにsingle.htmlを追加すれば、そのページの表示だけを変更できます。

スタイルバリエーション（style variations）という選択肢も

子テーマを作らなくても、テーマ内にstyles/フォルダを用意し、JSON形式のスタイルバリエーションファイルを配置すると、サイトエディターの「スタイル」画面から配色パターンを切り替えられるようになります。デザインのバリエーションだけを用意したい場合は、こちらの方が手軽です。

従来型テーマ・ハイブリッドテーマとの比較

3つの制作方式には、それぞれ向き不向きがあります。用途に応じて使い分けましょう。

方式	編集単位	主な設定ファイル	向いているケース
従来型テーマ	PHPテンプレート単位	header.php／functions.php	複雑な条件分岐や独自ロジックが多いサイト
ハイブリッドテーマ	PHP＋一部ブロック機能	functions.php＋theme.json	既存テーマを活かしつつ編集性を高めたい場合
ブロックテーマ（本ページ）	サイト全体をブロックで管理	theme.json＋HTMLテンプレート	新規サイトでFSEの編集体験を最大限活かしたい場合

従来型テーマの基礎を先に学びたい方はオリジナルテーマの作り方（基本編）を、既存テーマへの部分導入を検討している方はハイブリッドテーマの作り方をあわせてご覧ください。

ブロックテーマ開発の注意点

制作前に知っておきたいポイント

複雑な条件分岐やDBクエリを多用する場合は、functions.phpとの併用が前提になる
従来型テーマ専用に作られたプラグインの中には、ブロックテーマ環境で正しく動作しないものがある
国内では従来型テーマに比べて日本語の解説記事やサンプルがまだ少ない
クライアントワークの場合は、納品先の運用担当者がサイトエディターの操作に慣れているか事前に確認する

まとめ

ブロックテーマ開発の基本ステップは以下の通りです。

style.css・theme.json・templates/index.htmlで最小構成を作る
theme.json（version 3）でカラー・タイポグラフィ・余白を一元管理する
parts/にヘッダー・フッターを、templates/に用途別テンプレートを配置する
patterns/でよく使うレイアウトを再利用可能にする

次のステップ

ブロックテーマの基礎を理解したら、カスタムポストタイプやパフォーマンス最適化と組み合わせて、より実践的なテーマ開発に挑戦しましょう。

ブロックテーマ・FSE開発