theme.jsonを使用したカスタムWordPressブロックテーマの構築方法：ステップバイステップガイド

概要

Full Site Editing（FSE）を備えたカスタムWordPressブロックテーマの構築は困難に感じるかもしれませんが、theme.jsonがプロセスを簡素化します。このガイドでは、最小限のブロックテーマのセットアップ、theme.jsonでの色やタイポグラフィなどのグローバルスタイルの定義、ブロックマークアップを使用したカスタムテンプレートの作成について説明します。ブロックパターンやスタイルバリエーションを追加して、PHPテンプレートファイルなしで完全にデザイン可能なサイトを実現する方法を学びます。クラシックテーマとブロックテーマの機能を混在させるなどの一般的な間違いを取り上げ、テーマのテスト方法も紹介します。最後には、本番環境に対応したモダンで拡張可能なブロックテーマが完成します。このアプローチは、WordPressの最新機能を活用し、より高速で視覚的な開発を実現します。

はじめに

Full Site Editing（FSE）はWordPressのテーマ開発に革命をもたらし、サイトのあらゆる部分を視覚的にデザインできるようにしました。しかし、多くの開発者は依然としてクラシックテーマに依存しているか、ブロックテーマをゼロから作成するのに苦労しています。FSEの力を引き出す鍵は、グローバルスタイル、設定、テンプレートを制御する設定ファイルであるtheme.jsonです。この記事では、theme.jsonを使用してカスタムブロックテーマを構築するための実践的なステップバイステップガイドを提供します。フォルダ構造のセットアップ、カラーパレットとタイポグラフィプリセットの定義、ブロックマークアップを使用したカスタムテンプレートの作成、スタイルバリエーションの追加までを学びます。最後には、保守と拡張が容易な本番環境対応のブロックテーマが完成します。さっそくFSE開発の謎を解き明かしましょう。

FSEがWordPressデザインの未来をどのように形作っているかについての詳細は、Gutenberg FSE: 2026年のWordPressデザインの未来をご覧ください。

1. 最小限のブロックテーマのセットアップ

ブロックテーマには、最低限style.cssとindex.htmlの2つのファイルが必要です。これらを作成しましょう。

フォルダ構造

wp-content/themes/ディレクトリにmy-block-themeというフォルダを作成します。中に以下のファイルを配置します。

• style.css
• index.html
• （オプション）theme.json

style.css

ブロックテーマはCSSへの依存度が低いものの、テーマを識別するためにstyle.cssは依然として必要です。

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom block theme built with theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

Requires at least: 5.9の行により、テーマがFSE機能と動作することが保証されます。

index.html

これはフォールバックテンプレートです。ブロックマークアップで始める必要があります。シンプルなレイアウトを作成します。

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

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

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

これはブロック構文を使用してヘッダーとフッターのテンプレートパーツを含み、投稿タイトルとコンテンツを表示します。

注意: ブロックテーマにはheader.phpやfooter.phpのようなPHPテンプレートファイルを含めてはいけません。クラシックテンプレートとブロックテンプレートを混在させるとFSEが破損します。

テーマの有効化

フォルダをFTP経由でアップロードするか、zipインストールして有効化します。最小限の構造で空白のサイトが表示されるはずです。次に、theme.jsonでスタイルを設定します。

2. theme.jsonの習得：グローバルスタイルと設定

theme.jsonはすべてのデザインコントロールを一元管理します。テーマフォルダのルートに配置します。色とタイポグラフィの設定を含むものを作成しましょう。

基本構造

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

これはカラーパレット、フォントファミリー、フォントサイズ、グローバルスタイルを定義します。var()関数はWordPressが自動生成するCSSカスタムプロパティを参照します。ユーザーはサイトエディターでこれらを変更できます。

ヒント: 一貫性のためにCSSカスタムプロパティを使用します。CSSファイルに値をハードコーディングせず、theme.jsonを唯一の情報源にします。

3. カスタムテンプレートの作成

ブロックテンプレートはブロックマークアップを含むHTMLファイルです。クラシックテンプレートファイルと同様の階層に従います。たとえば、単一投稿用にsingle.htmlを作成します。

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

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

同様に、page.html、archive.htmlなどを作成します。また、クエリループ内にwp:post-templateブロックを追加してカスタムテンプレートを作成することもできます。

高度なカスタマイズについては、カスタムブロックの構築を検討してください。詳細は基本を超えたブロック：カスタムGutenbergブロックでWordPress機能を強化をご覧ください。

テンプレートパーツ

再利用可能なパーツ用にparts/フォルダを作成します。たとえば、header.html：

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

そしてfooter.html：

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. ブロックパターンとスタイルバリエーションの追加

ブロックパターンは事前デザインされたレイアウトです。patterns/フォルダに定義します。patterns/hero.phpを作成します。

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">ようこそ</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">これはカスタムヒーローセクションです</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

スタイルバリエーションを使用すると、ユーザーは外観全体を切り替えられます。styles/default.jsonとstyles/dark.jsonを作成し、テーマ設定を上書きします。

5. 注意点とベストプラクティス

• パフォーマンス: theme.jsonはキャッシュされます。変更後はキャッシュをクリアしてください。必要に応じてwp_register_theme_jsonフックを使用します。
• 後方互換性: ブロックテーマはWordPress 5.9以降でのみ動作します。サイトが古いバージョンをサポートする必要がある場合は、ハイブリッドアプローチを検討してください。ただし、テンプレートファイルの混在は避けてください。
• 子テーマ: ブロックテーマはクラシック子テーマの親テーマとして使用できますが、その逆はできません。親ブロックテーマを宣言するには、style.cssのtemplateを使用します。
• 国際化: PHPテンプレートパーツ内で翻訳可能な文字列には__()関数を使用します。ブロックマークアップでは、textDomain属性でテキストドメインを指定します。

プラグイン開発のベストプラクティスについては、堅牢なWordPressプラグインの構築：ベストプラクティスの実践ガイドをご覧ください。

結論

theme.jsonを使用してカスタムブロックテーマを構築することで、PHPに触れることなく完全にデザイン可能なサイトを作成できます。このガイドに従って、最小限のテーマのセットアップ、グローバルスタイルの定義、カスタムテンプレートの作成、パターンの追加を行いました。特にアーカイブページやカスタム投稿タイプなどのエッジケースについて、徹底的にテストすることを忘れないでください。WordPressが進化するにつれて、ブロックテーマが標準になります。今すぐFSEを活用してワークフローを効率化し、クライアントに比類のない柔軟性を提供しましょう。

テーマ作成をさらに高速化したい場合は、説明から完全なサイトを生成するツールの使用を検討してください。たとえば、希望のレイアウトを記述するだけで、数分で使用可能なブロックテーマを取得できます。

ブロックテーマをライブで公開する準備はできましたか？プレーンテキストの説明だけで、完全に機能するランディングページやWebサイトを生成できます。コードは不要です。