2021年7月20日にリリースされた WordPress 5.8 で「theme.json」という機能が追加されました。
この記事ではtheme.jsonでどういう事が出来るのかや、使い方を説明していきます。

theme.jsonとは?

ブロックエディタの導入により増加した設定項目を、テーマから簡単に制御する為の仕組みです。

設定項目とは公式曰く、フォントサイズのプリセット・カスタムカラーやマージンとパディングのコントロールが有効かどうか、デュオトーンプリセットかどうかなどを挙げています。

公式の解説ページ

グローバル設定とスタイル (theme.json)

Introducing theme.json in WordPress 5.8

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について

出力されたソースを見ると、headタグの中に #global-styles-inline-css が出力されています。

Twenty Twenty-One 1.4 では「theme.json」ファイルは存在しませんが、デフォルトでコアが出力しているからです。
/wp-content/theme/twentytwentyone/ 配下に「theme.json」を配置することで、この #global-styles-inline-css の中身を上書き・変更することが出来ます。

使用例

ブロックエディタで「テキスト色」を押すと表示されるテキストの文字色カラーパレットを変更したい場合を例とします。


↑ デフォルトのカラーパレットです。これを変更します。

theme.jsonを下記のように変更します。


↑ カラーパレットが設定した黒、白のものになっています。

カスタムプロパティの追加

カスタムプロパティを作成することもできます。
例として、line-heightを追加してみましょう。

出力

長くて分かりにくいですが、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に対応したいサイトでは要注意です。

まとめ

IE11の完全サポート終了までまだ1年近くあるこの時期に、WPがIEを切った機能をリリースしたのには少し驚きました。
しかし theme.json 自体は素晴らしい機能なので、今後はこの機能を利用したテーマが作成されるようになりそうです。

サイト内検索

新着ニュース

新着記事

カテゴリーリスト

アクセス

当社所在地
エファタ株式会社
〒169-0075
東京都新宿区高田馬場4-40-12
ユニゾ高田馬場ビル8階
TEL:03-5937-4471
FAX:03-5937-4472
受付時間 9:00〜18:00(平日)

お問い合わせボタン

こちらよりお気軽にお問い合わせください。
TEL
03-5937-4471
03-5937-4471
Webよりお問い合わせのかたはこちらから