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

はじめに

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

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

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

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

備考・注意点

この記事は、2025年11月11日にリリースされた WordPress6.9 RC1の検証結果に基づいています。正式リリースは2025年12月2日の予定ですが、それまでのあいだに仕様が若干変わる可能性があります。最新の仕様は、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"
		}
	}
}

settings

settings.border

settings.border.radiusSizes

border-radius のプリセットを定義します。

name / slug / value プロパティを持ったオブジェクトを配列内に指定します。

• name：プリセットの名前
• slug：一意の識別子。ケバブケース(単語をハイフンでつなげる)で定義する
• value：border-radius プロパティの値

以下のような定義で、新しいプリセットを追加出来ます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "900px"
		},
		"border": {
			"radiusSizes": [
				{
					"name": "Small",
					"slug": "small",
					"size": "2px"
				},
				{
					"name": "Medium",
					"slug": "medium",
					"size": "4px"
				},
				{
					"name": "Large",
					"slug": "large",
					"size": "6px"
				}
			]
		}
	}
}

なお、プリセット数が9以上の場合、以下のように UI がドロップダウンに変化します。

styles

styles.elements

styles.elements.{textInput | select}

指定出来る要素として、textInput / select の2つが追加されました。これまで指定出来たプロパティと合わせると、以下の要素を指定出来る事になります。

• button
• caption
• heading
• cite
• h1 / h2 / h3 / h4 / h5 / h6
• link
• select
• textInput

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"elements": {
			"textInput": {
				"color": {
					"background": "#ff0000"
				}
			},
			"select": {
				"color": {
					"background": "#00ff00"
				}
			}
		}
	}
}

この定義から、以下のようなインライン CSS が出力されます。プロパティが textInput の場合、textarea 要素、およびテキスト入力とみなされる name 属性をもった input 要素がセレクターとなります。

textarea,
input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel],[type=url]) {
    background-color: #ff0000;
}

select {
    background-color: #00ff00;
}