2021年7月20日にリリースされた WordPress 5.8 で「theme.json」という機能が追加されました。
この記事ではtheme.jsonでどういう事が出来るのか、また、使い方を解説していきます。
theme.jsonとは？
WordPress は「フルサイト編集」と呼ばれる、PHPなどの知識がなくてもサイトのテーマカラーなどを簡単に変更できる仕組みづくりを進めています。
theme.jsonとは「フルサイト編集」の根幹となる機能で、ブロックエディタの導入により増加した設定項目（CSSカスタムプロパティー）を、テーマから簡単に制御する為のファイルです。
公式の解説ページ
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/
https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/
theme.jsonを活用する為には、テーマがブロックで構成されている必要があります。
因みに、完全にブロックで構成されたWordPressテーマのことを「ブロックテーマ」と言います。
WordPress.org: ブロックテーマ
https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overview/
例えば、WP5.9と同時にリリースされるデフォルトテーマ「Twenty Twenty-Two」にはサイト全体の色調を変更することができる「カラースキーマ」というプロパティを持つようになるらしいです。
※2021/9現在の情報
theme.jsonを利用するメリット
公式はtheme.jsonを利用するメリットとして以下の二つを挙げています。
- エンキューされる CSS の量を減らす。
- CSS の詳細度の戦いを抑止する。
ブロックエディターは従来では、異なるCSSソース (ユーザー・テーマ・コア）を全て読み込んでいました。
つまりテーマの詳細度の高いスタイルがユーザーのスタイルを期待外れに上書きしてしまう、といった事が起こり得ていました。
また、詳細度の低いスタイルを無駄に読み込んでいました。
theme.jsonの導入により以下の様になります。
テーマとユーザーのスタイルが設定されている場合、ユーザーによって変更されたスタイルのみがエンキュー（出力）される為効率的で、プロパティが単一なので詳細度による期待外れの上書きも防止されます。
theme.jsonの使い方
基本的な使い方としてはテーマの直下に設定を記述した「theme.json」ファイルを置くだけです。
下記の環境を例として解説してきます。
環境
コア：WordPress 5.8
テーマ：Twenty Twenty-One 1.4
プラグイン：なし
#global-styles-inline-cssとは
この環境のHomeで出力されたソースを見ると、headタグの中に #global-styles-inline-css というスタイルタグが出力されています。
/wp-content/theme/twentytwentyone/ 配下に「theme.json」を配置することで、このスタイルタグの中身を上書き・変更することが出来ます。
Twenty Twenty-One 1.4 では「theme.json」ファイルは存在しませんが、WP5.8なのでコアが出力する為「theme.json」がなくてもこのスタイルタグは表示されるようです。
↓ 実際にこの環境で表示された #global-styles-inline-css
使用例
ブロックエディタで「テキスト色」を押すと表示されるテキストの文字色カラーパレットを変更したい場合を例とします。
↑ デフォルトのカラーパレットです。これを変更します。
theme.jsonを下記のように変更します。
{
"version": 1,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "White",
"slug": "white",
"color": "#ffffff"
}
]
}
}
}
↑ カラーパレットが設定した黒、白のものになっています。
カスタムプロパティの追加
カスタムプロパティを作成することもできます。
例として、line-heightを追加してみましょう。
{
"version": 1,
"settings": {
"custom": {
"line-height": {
"body": 2,
"heading": 1.3
}
}
}
}
出力
長くて分かりにくいですが、bodyの中に「–wp–custom–line-height–body: 2;–wp–custom–line-height–heading: 1.3;」のスタイルが追加されています。
theme.jsonの注意点
WPは5.8から段階的にIEのサポートを終了する取り組みが導入されており、このtheme.jsonもその前提で作成されています。
気づいた方もいるかもしれませんが、この#global-styles-inline-css はカスタムプロパティ、いわゆる「CSS変数」を利用しています。
そしてIEは最新のIE11でさえ、このCSS変数に対応していません。
引用：caniuse.com
theme.jsonの注意点というよりはWP5.8系以上の注意点かもしれませんが、IEに対応したいサイトでは要注意です。
まとめ
WordPerss 5.8 から登場した「theme.json」について解説しました。
IE11の完全サポート終了までまだ１年近くあるこの時期に、WPがIEを切った機能をリリースしたのには少し驚きました。
しかし theme.json 自体は素晴らしい機能なので、今後はこの機能を利用したテーマが作成されるようになりそうです。
