WordPress 5.9 よりベータ版で実装された、サイト全体をブロックで構築する「フルサイト編集（FSE）」機能に対応するテーマでは、ルートディレクトリに theme.json ファイルを作成し、そこにカラーやタイポグラフィ、余白などの様々なプリセットスタイルやカスタムスタイルを定義できます。
その中で、特定のブロックや一部の要素、サイト全体に共通のスタイルを定義する "styles" プロパティ内で任意の要素を指定するための "elements" プロパティがありますが、このプロパティで指定できる要素は何があるのかメモしておきます。
theme.json : version 2時点 (WordPress 6.0.1)
“elements” プロパティで指定できる要素
WordPress 6.0.1 時点では、"link" (<a>タグ), "h1" , "h2", "h3", "h4", "h5", "h6" のみしか指定できませんが、Gutenberg プラグインを有効にすると、さらに "heading" (<h1>〜<h6>), "button", "caption" 要素が追加で指定可能になります。
| パラメータ | 対象要素/セレクタ | サポート元 |
|---|---|---|
| “link” | <a> タグ | WordPress 6.0.1 時点 |
| “h1”, “h2”, “h3”, “h4”, “h5”, “h6” | <h1> 〜 <h6> タグごと | WordPress 6.0.1 時点 |
| “heading” | <h1> 〜 <h6> タグ共通で一括 | Gutenberg 13.8.0 時点 |
| “button” | .wp-element-button, .wp-block-button__link | Gutenberg 13.8.0 時点 |
| “caption” | .wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption | Gutenberg 13.8.0 時点 |
実際にこれらのパラメータを使ってサイト全体とブロック単位でスタイルを設定した theme.json ファイルの例が以下です。
指定例
{
"version": 2,
"styles": {
// body 要素へ背景カラーとテキストカラーを指定
"color": {
"background": "var(--wp--preset--color--body-background)",
"text": "var(--wp--preset--color--body-text)"
},
// サイト全体で特定の要素に対して共通のスタイルを指定
"elements": {
"link": {
"color": {
"text" : "var(--wp--preset--color--link-color)"
}
},
"h1": {
"typography": {
"fontSize": "var(--wp--preset--font-size--fluid-huge)"
}
},
"h2": {
"typography": {
"fontSize": "var(--wp--preset--font-size--fluid-xlarge)"
}
},
"h3": {
"typography": {
"fontSize": "var(--wp--preset--font-size--fluid-large)"
}
},
"h4": {
"typography": {
"fontSize": "var(--wp--preset--font-size--fluid-medium)"
}
},
"h5": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
},
"h6": {
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)"
}
},
"heading": {
"typography": {
"fontWeight": "700"
}
},
"button": {
"color": {
"text": "var(--wp--preset--color--body-text)",
"background": "var(--wp--preset--color--primary)"
}
},
"caption": {
"color": {
"text": "var(--wp--custom--color--caption)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
}
},
// ブロック別でスタイルを変更する場合
"blocks": {
"core/site-title": {
// サイトタイトル(h1)のスタイル
"typography": {
"fontWeight": "400"
},
"elements": {
// サイトのタイトル(h1)内の a タグ(リンク)のスタイル
"link": {
"color": {
// リンクカラーをヘッダーバー用のテキストカラーにする
"text" : "var(--wp--preset--color--header-bar-text)"
},
"typography": {
// リンクに下線がつかないようにする(装飾無効)
"textDecoration": "none"
}
}
}
}
}
}
}
WordPress のコアブロックを指定する場合は、"blocks" プロパティ内に "core/[slug]" の形式で指定します。
上記指定例の場合は、サイトタイトルブロックのスラッグ 「site-title」で "core/site-title" となります。
コアブロックの一覧はこちら。
この指定例の場合、フロントエンド側には以下のインライン CSS に変換された style 要素 が head セクションに自動で挿入されます。
変換されるインライン CSS
"styles" プロパティ直下に定義した "color"(文字色、背景色) や "elements"(a, h1〜h6, button, caption) は、グローバルインライン CSS (#global-styles-inline-css) として挿入されます。
一方、"blocks" プロパティ内にブロック別で定義したスタイルは、ブロック別のインライン CSS (#wp-block-[slug]-inline-css) がまとめられた style 要素に挿入されます。
<style id='global-styles-inline-css'>
body{
background-color: var(--wp--preset--color--body-background);
color: var(--wp--preset--color--body-text);
}
a:where(:not(.wp-element-button)){
color: var(--wp--preset--color-bodylinkcolor);
}
h1{
font-size: var(--wp--preset--font-size--fluidhuge);
}
h2{
font-size: var(--wp--preset--font-size--fluidxlarge);
}
h3{
font-size: var(--wp--preset--font-size--fluidlarge);
}
h4{
font-size: var(--wp--preset--font-size--fluidmedium);
}
h5{
font-size: var(--wp--preset--font-size--medium);
}
h6{
font-size: var(--wp--preset--font-size--normal);
}
h1, h2, h3, h4, h5, h6{
font-weight: 700;
}
.wp-element-button, .wp-block-button__link{
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--body-text);
}
.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption{
color: var(--wp--custom--color--caption);
font-size: var(--wp--preset--font-size--small);
}
</style>
<style id='wp-block-site-title-inline-css'>
.wp-block-site-title{
font-weight: 400;
}
.wp-block-site-title a{
color: var(--wp--preset--color--header-bar-text);
text-decoration: none;
}
</style>
バックエンド(フルサイト編集画面)側の CSS は、上記のセレクタの先頭に .editor-styles-wrapper が付いたインライン CSS が挿入されます。
現時点では利用できる要素や範囲がかなり限定されており、今後の WordPress や Gutenberg のアップデートでもっと増えていくと、自前の CSS を用意してコアブロックをスタイリングせずに theme.json だけで補完できるので、その点では便利かもしれません。
ただ、theme.json はその名の通り JSON ファイルであるため、上記指定例ではコメント的な記述がありますが、実際利用するには開発者用にコメントを付けれなかったり、theme.json に任せることが多くなるほどステップ数がえらいことになり、逆に開発効率が悪くなる恐れもあるため、何をどこまで theme.json に預けるか線引きが必要になるかもしれません。