WordPressはバージョン5からGutenbergと呼ばれるブロックエディタを利用した記事の作成ができるようになりました。
ブロックエディタでは、画像や見出し文章などをブロックという単位で挿入し、コンテンツ（記事）を作成できるようになりました。
このブロックエディタの導入によって、文字や画像の位置調整など、レイアウト変更がHTMLやCSSの知識がなくても設定できるようになり、より柔軟なコンテンツ作成が出来るようになりました。
そして、WordPressのバージョン5.8からさらに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で設定できる一番大きなフィールドは下記の５つがあります。
version以外はさらに細かく値を指定していきます。
この内customTemplatesとtemplatePartsを利用するためには、GutenBergプラグインをインストール／有効化する必要があります。
今回はこの２つを省いたフィールドの内容を書きたいと思います。
|
1 2 3 4 5 6 7 |
{ "version": 1, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} } |
versionはtheme.jsonのフォーマットバージョンです。
現在はまだ1しかありません。
settingsではブロックエディター自体や各ブロックの機能の有効化や無効化などの設定、またカスタムカラーやカスタムフォントサイズを設定できます。
大きく以下のプロパティがあります。
入力例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
{ "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" }, ] } } } } } |
サイト全体やブロックに対してインラインCSSを出力します。
サイト全体のスタイルは、stylesフィールドの直下にborder, color, spacing, typographyのプロパティを設定することで定義できます。
例えばcolor.backgroundの値をredに設定すると、サイト全体（body要素）の背景色がredになります。
また、個別のブロックに対してスタイルを適用したい場合はstylesフィールドの直下にblocksフィールドを追加し、下層にborderなどのプロパティを設定することで定義できます。
elementフィールドだと、ブロックではなく特定の要素（h1タグやaタグなど）に対してもスタイルを定義できます。
現在WordPress5.9では、今回紹介したtheme.jsonのバージョン２が組み込まれているようです。
今後はtheme.jsonでテーマ全体のデザインやレイアウトの管理を強化できるようになっていきそうですね。
