WordPressのフルサイト編集テーマを作成する方法（FSE）

はじめに

「PHPのテンプレートを使わずにブロックエディターだけでサイト全体をデザインしたい」「フルサイト編集対応のオリジナルテーマを一から作りたい」「theme.jsonでグローバルスタイルを管理したい」——ブロックテーマ（FSEテーマ）はHTMLテンプレートとJSONで構成されます。

症状・原因

クラシックテーマではPHPの知識が必要で、デザイン変更のたびにコード編集が必要です。ブロックテーマはエディターからヘッダー・フッター・テンプレートを視覚的に編集でき、開発コストを大幅に削減できます。

解決手順

ステップ1：ブロックテーマの最小構成を作成する

// ブロックテーマの必須ファイル構成
mytheme/
├── style.css          # テーマ情報ヘッダー（必須）
├── theme.json         # グローバルスタイルとセッティング
├── functions.php      # テーマサポートとスクリプト登録
├── templates/
│   ├── index.html     # デフォルトテンプレート（必須）
│   ├── single.html    # 投稿個別ページ
│   ├── page.html      # 固定ページ
│   ├── archive.html   # アーカイブページ
│   ├── search.html    # 検索結果
│   └── 404.html       # 404ページ
├── parts/
│   ├── header.html    # ヘッダーパーツ
│   └── footer.html    # フッターパーツ
└── patterns/
    └── hero.php       # ブロックパターン

/* style.css: テーマ情報ヘッダー */
/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: シンプルなフルサイト編集テーマ
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: mytheme
*/

// functions.php: ブロックテーマのサポート設定
add_action( 'after_setup_theme', function(): void {
    add_theme_support( 'wp-block-styles' );      // ブロックのデフォルトスタイル
    add_theme_support( 'editor-styles' );
    add_editor_style( 'style.css' );

    // ナビゲーションメニューを登録
    register_nav_menus( [
        'primary' => __( 'メインメニュー', 'mytheme' ),
        'footer'  => __( 'フッターメニュー', 'mytheme' ),
    ] );
} );

ステップ2：templates/index.html でデフォルトテンプレートを定義する

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

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

<!-- wp:query {"queryId":0,"query":{"perPage":10,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<div class="wp-block-query">

<!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"2rem"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:post-title {"isLink":true,"level":2} /-->
<!-- wp:post-excerpt /-->
<!-- wp:post-date /-->
</div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

<!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p>投稿が見つかりませんでした。</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->

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

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

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

ステップ3：parts/header.html でヘッダーパーツを定義する

<!-- parts/header.html -->
<!-- wp:group {"style":{"color":{"background":"#1d2327"}},"layout":{"type":"flex","justifyContent":"space-between","alignItems":"center"},"tagName":"div","className":"site-header-inner"} -->
<div class="wp-block-group site-header-inner has-background" style="background-color:#1d2327">

<!-- wp:site-logo {"width":120} /-->

<!-- wp:navigation {"textColor":"white","overlayMenu":"mobile","layout":{"type":"flex","justifyContent":"right"}} /-->

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

<!-- parts/footer.html -->
<!-- wp:group {"style":{"color":{"background":"#1d2327"},"spacing":{"padding":{"top":"2rem","bottom":"2rem"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#1d2327;padding-top:2rem;padding-bottom:2rem">

<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:site-title {"style":{"color":{"text":"#ffffff"}}} /-->
<!-- wp:site-tagline {"style":{"color":{"text":"#a7aaad"}}} /-->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:navigation {"ref":0,"textColor":"white"} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#a7aaad"},"typography":{"fontSize":"0.875rem"}}} -->
<p class="has-text-align-center" style="color:#a7aaad;font-size:0.875rem">&copy; 2024 My Block Theme. All rights reserved.</p>
<!-- /wp:paragraph -->

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

ステップ4：スタイルバリエーションを追加する

// styles/dark.json: ダークモードのスタイルバリエーション
{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "title": "ダークモード",
    "settings": {},
    "styles": {
        "color": {
            "background": "#1d2327",
            "text": "#ffffff"
        },
        "elements": {
            "link": {
                "color": {
                    "text": "#72aee6"
                }
            }
        },
        "blocks": {
            "core/post-title": {
                "color": {
                    "text": "#ffffff"
                }
            }
        }
    }
}

ステップ5：create-block-themeプラグインでエクスポートする

// エディターで作成したテーマをファイルにエクスポートする手順：
// 1. 外観 → エディター → スタイル でデザインをカスタマイズ
// 2. Create Block Theme プラグインをインストール
// 3. 外観 → Create Block Theme → 「テーマを保存」
// 4. templates/ と parts/ に変更が書き出される
// 5. styles/ にスタイルバリエーションが保存される

// WP CLI でブロックテーマを操作
wp theme list
wp post list --post_type=wp_template
wp post list --post_type=wp_template_part

// テンプレートの内容を確認
wp post get <ID> --field=post_content

注意事項

• ブロックテーマはtemplates/index.htmlが必須です。このファイルがない場合はブロックテーマとして認識されません。
• functions.phpのadd_theme_support('block-templates')は不要です（WordPress 5.9以降は自動検出）。
• クラシックテーマとブロックテーマは共存できません。子テーマはどちらも親テーマと同じタイプにする必要があります。

まとめ

FSEテーマの作成は「style.cssにテーマ情報を記載→theme.jsonでグローバルスタイルを定義→templates/index.htmlにブロックテンプレートを作成→parts/header.htmlとparts/footer.htmlでパーツを分離→styles/ディレクトリでスタイルバリエーションを追加→Create Block Themeプラグインでエディターの変更をファイルにエクスポート」の流れで整備します。関連記事：WordPressのtheme.jsonでスタイルを管理する方法、WordPressのブロックパターンを作成する方法。