WordPressのtheme.jsonでデザインを設定する方法

はじめに

theme.json はWordPress 5.8以降で導入されたテーマ設定ファイルです。カラーパレット・フォントサイズ・スペーシング等のデザイントークンを一元管理し、Gutenbergエディタと連携したCSS変数を自動生成します。

症状・原因

• エディタのカラーパレットをテーマカラーに合わせたい
• ブロックに余白のプリセットを追加したい
• フォントサイズのプリセットをカスタマイズしたい
• ブロックごとにスタイルを設定したい

解決手順

ステップ1：基本構造とカラーパレット

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "プライマリ",
                    "slug": "primary",
                    "color": "#2271b1"
                },
                {
                    "name": "セカンダリ",
                    "slug": "secondary",
                    "color": "#135e96"
                },
                {
                    "name": "アクセント",
                    "slug": "accent",
                    "color": "#d63638"
                },
                {
                    "name": "ダーク",
                    "slug": "dark",
                    "color": "#1d2327"
                },
                {
                    "name": "ライト",
                    "slug": "light",
                    "color": "#f0f0f1"
                }
            ],
            "custom": true,
            "customDuotone": false,
            "customGradient": false,
            "defaultPalette": false
        }
    }
}

自動生成されるCSS変数（テンプレートで使用可能）:

/* theme.jsonのpaletteから自動生成 */
--wp--preset--color--primary:   #2271b1;
--wp--preset--color--secondary: #135e96;
--wp--preset--color--accent:    #d63638;

ステップ2：タイポグラフィとフォントサイズ

{
    "version": 2,
    "settings": {
        "typography": {
            "fontSizes": [
                { "name": "小", "slug": "small",   "size": "0.875rem" },
                { "name": "標準", "slug": "medium", "size": "1rem" },
                { "name": "大", "slug": "large",   "size": "1.25rem" },
                { "name": "特大", "slug": "x-large", "size": "1.5rem" },
                { "name": "見出し", "slug": "heading", "size": "clamp(1.75rem, 4vw, 2.5rem)" }
            ],
            "fontFamilies": [
                {
                    "name": "システムフォント",
                    "slug": "system",
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif"
                },
                {
                    "name": "等幅",
                    "slug": "monospace",
                    "fontFamily": "'SFMono-Regular', Consolas, monospace"
                }
            ],
            "customFontSize": false,
            "dropCap": false
        }
    }
}

ステップ3：スペーシングとレイアウト

{
    "version": 2,
    "settings": {
        "spacing": {
            "spacingSizes": [
                { "name": "XS", "slug": "xs",  "size": "8px" },
                { "name": "S",  "slug": "sm",  "size": "16px" },
                { "name": "M",  "slug": "md",  "size": "24px" },
                { "name": "L",  "slug": "lg",  "size": "48px" },
                { "name": "XL", "slug": "xl",  "size": "80px" }
            ],
            "padding": true,
            "margin": true,
            "blockGap": true,
            "defaultSpacingSizes": false
        },
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    }
}

ステップ4：ブロックごとのデフォルトスタイル

{
    "version": 2,
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--light)",
            "text": "var(--wp--preset--color--dark)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)",
            "lineHeight": "1.7"
        },
        "blocks": {
            "core/heading": {
                "typography": {
                    "lineHeight": "1.3",
                    "fontWeight": "700"
                }
            },
            "core/button": {
                "color": {
                    "background": "var(--wp--preset--color--primary)",
                    "text": "#ffffff"
                },
                "border": {
                    "radius": "4px"
                }
            },
            "core/code": {
                "color": {
                    "background": "#1e1e2e"
                },
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--monospace)"
                }
            }
        }
    }
}

ステップ5：エディタ機能の制限

{
    "version": 2,
    "settings": {
        "color": {
            "defaultPalette": false,
            "defaultGradients": false,
            "custom": false
        },
        "typography": {
            "customFontSize": false,
            "dropCap": false
        },
        "blocks": {
            "core/paragraph": {
                "color": {
                    "custom": false
                }
            }
        }
    }
}

注意事項

• "version": 2 は必須です。version: 1 は非推奨です
• "defaultPalette": false でWordPressデフォルトカラーを非表示にできます。テーマカラーのみ表示したい場合に使用します
• theme.json の変更は即座に反映されます。キャッシュプラグインがある場合はキャッシュをクリアしてください

まとめ

theme.json でカラーパレットを定義すると --wp--preset--color--{slug} というCSS変数が自動生成されます。settings.layout.contentSize でコンテンツ幅、styles.blocks でブロックごとのデフォルトスタイルを設定できます。defaultPalette: false でWordPressデフォルトカラーを非表示にしてテーマカラーのみ表示できます。