これは
theme.jsonバージョン 2の仕様です。このバージョンは WordPress 5.9以降で動作します。
theme.json バージョン 3が WordPress 6.6でリリースされました。WordPress は 引き続き theme.json version 2をサポートしますが、新機能は 新しいバージョン にのみ追加されます。
アップグレードの準備ができたら、theme.json 移行ガイド で最新版へのアップデートの詳細を参照してください。
このリファレンスガイドでは theme.json スキーマで定義されている設定とスタイルのプロパティを列挙します。テーマで theme.json ファイルを使用する方法については、theme.json 利用ガイドを参照してください。
JSON スキーマ
バージョン2の最後のスキーマは https://schemas.wp.org/wp/6.5/theme.json にあります。
各 WordPress バージョンの theme.json スキーマは、https://schemas.wp.org/wp/{{version}}/theme.json から利用できます。例えば、WordPress 5.9用のスキーマは https://schemas.wp.org/wp/5.9/theme.json にあります。
お使いのエディターで JSON スキーマを使用する方法については theme.json を使用した開発を参照してください。
settings
appearanceTools
以下のUIツールを有効にする設定。
- background: backgroundImage, backgroundSize
- border: color, radius, style, width
- color: link
- dimensions: aspectRatio, minHeight
- position: sticky
- spacing: blockGap, margin, padding
- typography: lineHeight
useRootPaddingAwareAlignments
ルートブロックの代わりに全幅ブロックの内容に、ルートパディング (styles.spacing.padding の値) を適用することを可能にします。
注意: この設定を使用する場合、styles.spacing.padding は常にオブジェクトとして設定し、top, right, bottom, leftの値は別々に宣言する必要があります。
border
ボーダー関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| color | boolean | false | |
| radius | boolean | false | |
| style | boolean | false | |
| width | boolean | false |
shadow
シャドー関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| defaultPresets | boolean | true | |
| presets | array | name, shadow, slug |
color
色関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| background | boolean | true | |
| custom | boolean | true | |
| customDuotone | boolean | true | |
| customGradient | boolean | true | |
| defaultDuotone | boolean | true | |
| defaultGradients | boolean | true | |
| defaultPalette | boolean | true | |
| duotone | array | colors, name, slug | |
| gradients | array | gradient, name, slug | |
| link | boolean | false | |
| palette | array | color, name, slug | |
| text | boolean | true | |
| heading | boolean | true | |
| button | boolean | true |
background
背景関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| backgroundImage | boolean | false |
dimensions
寸法関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| aspectRatio | boolean | false | |
| minHeight | boolean | false |
layout
レイアウト関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| contentSize | string | ||
| wideSize | string | ||
| allowEditing | boolean | true | |
| allowCustomContentAndWideSize | boolean | true |
lightbox
lightbox 関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| enabled | boolean | ||
| allowEditing | boolean |
position
位置関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| sticky | boolean | false |
spacing
スペース関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| blockGap | boolean, null | null | |
| margin | boolean | false | |
| padding | boolean | false | |
| units | array | px,em,rem,vh,vw,% | |
| customSpacingSize | boolean | true | |
| spacingSizes | array | name, size, slug | |
| spacingScale | object |
typography
タイポグラフィ関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| customFontSize | boolean | true | |
| fontStyle | boolean | true | |
| fontWeight | boolean | true | |
| fluid | object, boolean | false | {maxViewportWidth, minFontSize, minViewportWidth} |
| letterSpacing | boolean | true | |
| lineHeight | boolean | false | |
| textColumns | boolean | false | |
| textDecoration | boolean | true | |
| writingMode | boolean | false | |
| textTransform | boolean | true | |
| dropCap | boolean | true | |
| fontSizes | array | fluid, name, size, slug | |
| fontFamilies | array | fontFace, fontFamily, name, slug |
custom
「--wp--custom--{key}--{nested-key}: {value};」形式のカスタム CSS カスタムプロパティを生成します。camelCased のキーは、CSSプロパティ命名スキーマに従うために、 kebab-case に変換されます。異なる深さのレベルのキーは -- で区切られるため、キーの名前に -- を含めないでください。
Styles
border
ボーダーのスタイル。
| Property | Type | Props |
|---|---|---|
| color | string, object | |
| radius | string, object | |
| style | string, object | |
| width | string, object | |
| top | object | color, style, width |
| right | object | color, style, width |
| bottom | object | color, style, width |
| left | object | color, style, width |
color
色のスタイル。
| Property | Type | Props |
|---|---|---|
| background | string, object | |
| gradient | string, object | |
| text | string, object |
dimensions
寸法のスタイル
| Property | Type | Props |
|---|---|---|
| aspectRatio | string, object | |
| minHeight | string, object |
spacing
スペースのスタイル。
| Property | Type | Props |
|---|---|---|
| blockGap | string, object | |
| margin | object | bottom, left, right, top |
| padding | object | bottom, left, right, top |
typography
タイポグラフィのスタイル。
| Property | Type | Props |
|---|---|---|
| fontFamily | string, object | |
| fontSize | string, object | |
| fontStyle | string, object | |
| fontWeight | string, object | |
| letterSpacing | string, object | |
| lineHeight | string, object | |
| textColumns | string | |
| textDecoration | string, object | |
| writingMode | string, object | |
| textTransform | string, object |
filter
CSS と SVG フィルターのスタイル。
| Property | Type | Props |
|---|---|---|
| duotone | string, object |
shadow
ボックスシャドーのスタイル。
outline
アウトラインのスタイル。
| Property | Type | Props |
|---|---|---|
| color | string, object | |
| offset | string, object | |
| style | string, object | |
| width | string, object |
css
カスタム CSS を設定します。他の theme.json プロパティではカバーされないスタイルを適用できます。
customTemplates
テンプレートフォルダで定義されるカスタムテンプレートの追加メタデータ
Type: object.
| Property | 説明 | Type |
|---|---|---|
| name | テンプレートフォルダ内のテンプレートのファイル名。拡張子なし。 | string |
| title | テンプレートのタイトル。翻訳可。 | string |
| postTypes | このカスタムテンプレートを使える投稿タイプのリスト。 | array |
templateParts
パーツフォルダで定義されるテンプレートパーツの追加メタデータ。
Type: object.
| Property | 説明 | Type |
|---|---|---|
| name | パーツフォルダ内のテンプレートのファイル名。拡張子なし。 | string |
| title | テンプレートのタイトル。翻訳可。 | string |
| area | テンプレートパーツが使用されるエリア。header 値と footer 値のブロックバリエーションが存在し、エリアがそのどちらかと設定された際に使用される。 | string |
Patterns
パターンディレクトリから登録されるパターンのスラッグの配列。
Type: array.