はじめに
「テーマのフォントや色をCSSではなく一元管理したい」「エディターのカラーパレットをブランドカラーに制限したい」「ブロックごとにデフォルトスタイルを設定したい」——theme.jsonはWordPress 5.8で導入されたグローバルスタイルの設定ファイルです。
症状・原因
複数のCSSファイルに色やフォントが散らばっていると管理が困難です。theme.jsonを使うことで、デザイントークンを一元管理し、エディターのUI（カラーピッカー・フォントサイズ選択）とフロントエンドのCSSを同期できます。
解決手順
ステップ1：theme.jsonの基本構造を理解する
// theme.json: 基本構造（WordPress 6.0+ / version 3）
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
// エディターのUI設定とCSS変数の生成
},
"styles": {
// グローバルCSSの適用
},
"customTemplates": [
// カスタムテンプレートの登録
],
"templateParts": [
// テンプレートパーツの定義
],
"patterns": [
// パターンスラッグのリスト
]
}ステップ2：カラーパレットとタイポグラフィを設定する
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#0073aa",
"name": "プライマリ"
},
{
"slug": "secondary",
"color": "#1d2327",
"name": "セカンダリ"
},
{
"slug": "accent",
"color": "#d63638",
"name": "アクセント"
},
{
"slug": "background",
"color": "#f0f0f1",
"name": "背景"
},
{
"slug": "white",
"color": "#ffffff",
"name": "ホワイト"
}
],
"gradients": [
{
"slug": "primary-to-secondary",
"gradient": "linear-gradient(135deg, #0073aa 0%, #1d2327 100%)",
"name": "プライマリグラデーション"
}
],
"custom": false,
"customGradient": false,
"defaultPalette": false,
"defaultGradients": false
},
"typography": {
"fontFamilies": [
{
"fontFamily": "'Noto Sans JP', sans-serif",
"slug": "noto-sans-jp",
"name": "Noto Sans JP",
"fontFace": [
{
"fontFamily": "'Noto Sans JP'",
"fontWeight": "400",
"fontStyle": "normal",
"fontDisplay": "swap",
"src": [ "file:./assets/fonts/NotoSansJP-Regular.woff2" ]
},
{
"fontFamily": "'Noto Sans JP'",
"fontWeight": "700",
"fontStyle": "normal",
"fontDisplay": "swap",
"src": [ "file:./assets/fonts/NotoSansJP-Bold.woff2" ]
}
]
},
{
"fontFamily": "Georgia, serif",
"slug": "serif",
"name": "セリフ"
}
],
"fontSizes": [
{ "slug": "small", "size": "0.875rem", "name": "小" },
{ "slug": "medium", "size": "1rem", "name": "中" },
{ "slug": "large", "size": "1.25rem", "name": "大" },
{ "slug": "x-large", "size": "1.5rem", "name": "特大" },
{ "slug": "huge", "size": "2rem", "name": "巨大" }
],
"defaultFontSizes": false,
"customFontSize": false
},
"spacing": {
"spacingSizes": [
{ "slug": "10", "size": "0.5rem", "name": "XS" },
{ "slug": "20", "size": "1rem", "name": "S" },
{ "slug": "30", "size": "1.5rem", "name": "M" },
{ "slug": "40", "size": "2rem", "name": "L" },
{ "slug": "50", "size": "3rem", "name": "XL" },
{ "slug": "60", "size": "4rem", "name": "2XL" }
],
"units": [ "px", "rem", "%" ]
},
"layout": {
"contentSize": "760px",
"wideSize": "1200px"
}
}
}ステップ3：グローバルスタイルとブロック個別スタイルを設定する
{
"styles": {
"color": {
"background": "#ffffff",
"text": "#1d2327"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--noto-sans-jp)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.75"
},
"spacing": {
"blockGap": "1.5rem"
},
"elements": {
"h1": {
"typography": {
"fontSize": "var(--wp--preset--font-size--huge)",
"fontWeight": "700",
"lineHeight": "1.2"
}
},
"h2": {
"typography": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"fontWeight": "700"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--primary)"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--secondary)"
}
}
},
"button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "#ffffff"
},
"border": {
"radius": "4px"
},
"spacing": {
"padding": {
"top": "0.75rem",
"bottom": "0.75rem",
"left": "1.5rem",
"right": "1.5rem"
}
}
}
},
"blocks": {
"core/post-title": {
"typography": {
"fontSize": "var(--wp--preset--font-size--huge)",
"fontWeight": "700"
}
},
"core/quote": {
"border": {
"left": {
"color": "var(--wp--preset--color--primary)",
"width": "4px",
"style": "solid"
}
},
"spacing": {
"padding": {
"left": "1.5rem"
}
},
"color": {
"background": "var(--wp--preset--color--background)"
}
},
"core/code": {
"color": {
"background": "#1e1e2e",
"text": "#cdd6f4"
},
"typography": {
"fontFamily": "monospace"
},
"spacing": {
"padding": {
"all": "1rem"
}
}
}
}
}
}ステップ4：カスタムCSSプロパティを定義する
{
"settings": {
"custom": {
"border": {
"radius": "8px",
"width": "1px"
},
"transition": {
"duration": "0.2s",
"easing": "ease-in-out"
},
"shadow": {
"sm": "0 1px 3px rgba(0,0,0,0.12)",
"md": "0 4px 6px rgba(0,0,0,0.1)",
"lg": "0 10px 25px rgba(0,0,0,0.15)"
}
}
}
}/* 生成されるCSS変数（自動生成） */
/* --wp--preset--color--primary: #0073aa; */
/* --wp--preset--font-size--large: 1.25rem; */
/* --wp--custom--border--radius: 8px; */
/* --wp--custom--shadow--md: 0 4px 6px rgba(0,0,0,0.1); */
/* style.css でカスタム変数を利用 */
.my-card {
border-radius: var(--wp--custom--border--radius);
box-shadow: var(--wp--custom--shadow--md);
transition: all var(--wp--custom--transition--duration)
var(--wp--custom--transition--easing);
}ステップ5：子テーマのtheme.jsonで親テーマを上書きする
// child-theme/theme.json: 親テーマの設定を選択的に上書き
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#e91e63",
"name": "プライマリ（子テーマ）"
}
]
}
},
"styles": {
"elements": {
"button": {
"color": {
"background": "#e91e63"
}
}
}
}
}注意事項
"defaultPalette": falseと"defaultGradients": falseを設定しないと、WordPressのデフォルトカラーがエディターに表示されます。ブランドカラーのみ使用させたい場合は必ず設定してください。theme.jsonの変更は即座に反映されます。ただしブロックエディターのグローバルスタイルでユーザーが上書きした場合、データベースの設定が優先されます。version: 3はWordPress 6.6以降が必要です。古いバージョンではversion: 2を使用してください。
まとめ
theme.jsonの管理は「settings.color.paletteでブランドカラーを定義→settings.typography.fontFamiliesでフォントを設定→stylesでグローバルCSSを適用→styles.blocksでブロック個別スタイルを設定→settings.customでカスタムCSS変数を追加→子テーマのtheme.jsonで選択的に上書き」の流れで整備します。関連記事：WordPressのフルサイト編集テーマを作成する方法、WordPressにカスタムブロックを追加する方法。