【WordPress6.8】theme.json の変更点

はじめに

この記事は、WordPress テーマの機能・レイアウト・スタイルなどの多くを一元的に管理出来る JSON ファイルである theme.json について、WordPress 6.8での変更点をまとめたものです。

theme.json 自体の全体図については、「【WordPress5.9 / 6.0版】theme.json 全解説」という記事にまとめていますので、そもそも theme.json とは何か分からない方、各セクション (プロパティ) の役割が分からない方は、ぜひ先にこちら記事を見ていただければ幸いです。

【WordPress5.9 / 6.0版】theme.json 全解説

また、WordPress 6.1から WordPress 6.7までの変更点については、それぞれ以下の記事でまとめています。

備考・注意点

この記事は、2025年3月25日にリリースされた WordPress6.8 RC1の検証結果に基づいています。正式リリースは2025年4月16日の予定ですが、それまでのあいだに仕様が若干変わる可能性があります。最新の仕様は、WordPress のgitリポジトリまたは WordPress.org のリリースニュース (Make WordPress Core) などで確認してください。

前準備

この記事の内容を実践するためのオリジナルテーマを用意したいという方は、作成したテーマフォルダに以下ファイルを用意してください。ブロックテーマとして認識させ、フロントエンドでコンテンツを確認出来るようにするために必要な最低限のファイルです。

/*
Theme Name: My Theme
Text Domain: mytheme
*/

<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
<div class="wp-block-query">
	<!-- wp:post-template -->
	<!-- wp:post-title {"isLink":true} /-->
	<!-- wp:post-excerpt /-->
	<!-- /wp:post-template -->
</div>
<!-- /wp:query -->

<!-- wp:post-title /-->
<!-- wp:post-content {"layout":{"inherit":true}} /-->

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	}
}

styles

styles.blocks

styles.blocks.{blockName}.elements.{link | button}.{:focus-visible}

疑似クラスとして、 ボタン・リンク要素に新たに :focus-visibleが指定出来るようになりました。

これを含めると、サポートされている疑似クラスは :active、:any-link、:focus、:focus-visible、:hover、:link、:visited の7つとなります。

詳細については、styles.elements.{link | button}.{:focus-visible} セクションを参照して下さい。

styles.elements.{link | button}.{:link | :any-link}

疑似クラスとして、 ボタン・リンク要素に新たに :focus-visible が指定出来るようになりました。

これを含めると、サポートされている疑似クラスは :active、:any-link、:focus、:focus-visible、:hover、:link、:visited の7つとなります。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"elements": {
			"button": {
				":hover": {
					"color": {
						"text": "#ff0000"
					}
				},
				":active": {
					"color": {
						"text": "#00ff00"
					}
				},
				":focus": {
					"color": {
						"text": "#0000ff"
						}
				},
				":focus-visible": {
					"color": {
						"text": "#00ffff"
					}
				},
				":visited": {
					"color": {
						"text": "#ff00ff"
					}
				},
				":link": {
					"color": {
						"text": "#ffff00"
					}
				},
				":any-link": {
					"color": {
						"text": "#ffffff"
					}
				}
			}
		}
	}
}

この定義から、以下のようなインライン CSS が出力されます。

:root :where(.wp-element-button:link, .wp-block-button__link:link) {
	color: #ffff00;
}

:root :where(.wp-element-button:any-link,
.wp-block-button__link:any-link) {
	color: #ffffff;
}

:root :where(.wp-element-button:visited, .wp-block-button__link:visited) {
	color: #ff00ff;
}

:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
	color: #ff0000;
}

:root :where(.wp-element-button:focus, .wp-block-button__link:focus) {
	color: #0000ff;
}

:root :where(.wp-element-button:focus-visible, .wp-block-button__link:focus-visible) {
	color: #00ffff;
}

:root :where(.wp-element-button:active, .wp-block-button__link:active) {
	color: #00ff00;
}

#62906 (Allow :focus-visible pseudo-selector to be set in theme.json) – WordPress Trac