WordPress5.8から導入されたTheme.jsonとは？

2022/02/16

Theme.jsonとは
Theme.jsonの使い方
これからのWordPressのアップデート

WordPressはバージョン5からGutenbergと呼ばれるブロックエディタを利用した記事の作成ができるようになりました。

ブロックエディタでは、画像や見出し文章などをブロックという単位で挿入し、コンテンツ（記事）を作成できるようになりました。
このブロックエディタの導入によって、文字や画像の位置調整など、レイアウト変更がHTMLやCSSの知識がなくても設定できるようになり、より柔軟なコンテンツ作成が出来るようになりました。

そして、WordPressのバージョン5.8からさらにTheme.jsonというテーマを理想的に正しく管理できる仕組み（ファイル）が新しく追加されました。

このTheme.jsonで何が出来るのか、またテーマに適用する方法を紹介したいと思います。

Theme.jsonとは

WordPressは、PHPなどの知識がなくてもサイトのテーマカラーやフォントなどのデザインシステムを簡単に変更できる「フルサイト編集（FSE）」と呼ばれる仕組みを開発しており、theme.jsonはその根幹となる機能です。

Theme.jsonはテーマで使用するブロックエディターの設定をJSONファイルで定義することができます。
これまでadd_theme_support関数で設定していたカスタマイズをtheme.jsonに移行し、より管理しやすくなります。

theme.jsonで設定した項目はCSSカスタムプロパティーとしてスタイルシート内に生成され、テーマ内のブロックの見た目を簡単に制御することができるようになります。

具体的には、以下のような設定を予め設定しておくことができます。

特定のブロック（例えば見出しなど）に対して、カスタマイズオプションを追加する。
デフォルトのテーマカラー、フォントサイズなどのスタイル。
ブロックエディターのデフォルトのレイアウト。（エディタの幅）

注意点として、theme.jsonを使用するためにはテーマが完全にブロックで構成されたテーマでなければなりません。完全にブロックで構成されたテーマを「ブロックテーマ」と呼び、そうでないテーマを「クラシックテーマ」と呼びます。ブロックエディタを使用しているテーマでも条件を満たしていなければ「クラシックテーマ」の扱いになるので、注意が必要です。

ブロックテーマであるための条件については、WordPress公式のブロックテーマーの作成が参考になります。

またtheme.jsonではCSSカスタムプロパティを使用するため、CSSカスタムプロパティ（CSS変数）に対応していないブラウザ（IE11など）では正しく機能しません。

Theme.jsonの使い方

theme.jsonの機能は、使用しているテーマディレクトリの直下にtheme.jsonファイルを追加することで有効化されます。

theme.jsonで設定できる一番大きなフィールドは下記の５つがあります。
version以外はさらに細かく値を指定していきます。

この内customTemplatesとtemplatePartsを利用するためには、GutenBergプラグインをインストール／有効化する必要があります。
今回はこの２つを省いたフィールドの内容を書きたいと思います。

{
    "version": 1,
    "settings": {},
    "styles": {},
    "customTemplates": {},
    "templateParts": {}
}

version

versionはtheme.jsonのフォーマットバージョンです。
現在はまだ1しかありません。

settings

settingsではブロックエディター自体や各ブロックの機能の有効化や無効化などの設定、またカスタムカラーやカスタムフォントサイズを設定できます。

大きく以下のプロパティがあります。

color… 色に関する設定
spacing… スペース（余白）に関する設定
typography…文字に関する設定
border… ボーダーに関する設定
custom… CSSカスタムプロパティの生成
blocks… ブロック個別の機能の有効／無効の設定
layout… コンテンツ幅の設定

入力例

{
    "version": 1,
    "settings": {
        "color": {
            "duotone": [
                {
                    "colors": [ "#000", "#FFF" ],
                    "slug": "black-and-white",
                    "name": "Black and White"
                }
            ],
            "gradients": [
                {
                    "slug": "blush-bordeaux",
                    "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
                    "name": "Blush bordeaux"
                },
                {
                    "slug": "blush-light-purple",
                    "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
                    "name": "Blush light purple"
                }
            ],
            "palette": [
                {
                    "slug": "strong-magenta",
                    "color": "#a156b4",
                    "name": "Strong magenta"
                },
                {
                    "slug": "very-dark-grey",
                    "color": "rgb(131, 12, 8)",
                    "name": "Very dark grey"
                }
            ]
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell, \"Helvetica Neue\",sans-serif",
                    "slug": "system-font",
                    "name": "System Font"
                },
                {
                    "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
                    "slug": "helvetica-arial",
                    "name": "Helvetica or Arial"
                }
            ],
            "fontSizes": [
                {
                    "slug": "normal",
                    "size": 16,
                    "name": "Normal"
                },
                {
                    "slug": "big",
                    "size": 32,
                    "name": "Big"
                }
            ]
        },
        "blocks": {
            "core/group": {
                "color": {
                    "palette": [
                        {
                            "slug": "black",
                            "color": "#000000",
                            "name": "Black"
                        },
                        {
                            "slug": "white",
                            "color": "#ffffff",
                            "name": "White"
                        },
                    ]
                }
            }
        }
    }
}