theme.json バージョン2
Topics
この文書は
theme.jsonバージョン2の現在の仕様です。このバージョンは、WordPress 5.9以降と最新の Gutenberg プラグインで動作します。関連する興味深いドキュメントとして以下があります。
このリファレンスガイドは、theme.json スキーマで定義された設定 (settings) とスタイル (styles) プロパティの一覧です。テーマ内での theme.json で使用する例や指針については、theme.json ガイド を参照してください。
スキーマ
開発中に theme.json の設定やプロパティを覚えておくのは難しいため、JSON スキーマ が作成されました。
コードエディターはスキーマを読み込み、エディター内でツールチップ、オートコンプリート、スキーマ検証などの有用なヒントや推奨を提供します。Visual Studio Code でスキーマを使用するには、theme.json ファイルの先頭に、$schema: “https://schemas.wp.org/trunk/theme.json” を追加し、使用するバージョンを version に記述します。例:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
...
}
settings
appearanceTools
以下のUIツールを有効にする設定。
- border: color, radius, style, width
- color: link
- dimensions: minHeight
- position: sticky
- spacing: blockGap, margin, padding
- typography: lineHeight
useRootPaddingAwareAlignments
注意: WordPress 6.1以降
ルートブロックの代わりに全幅ブロックの内容に、ルートパディング (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 |
dimensions
寸法関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| minHeight | boolean | false |
layout
レイアウト関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| contentSize | string | ||
| wideSize | string |
position
位置関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| sticky | boolean | false |
spacing
スペース関連の設定。
| Property | Type | Default | Props |
|---|---|---|---|
| blockGap | undefined | 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 | undefined | false | |
| letterSpacing | boolean | true | |
| lineHeight | boolean | false | |
| textColumns | boolean | false | |
| textDecoration | boolean | true | |
| 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 |
|---|---|---|
| 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 | |
| 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
テンプレートフォルダで定義されるカスタムテンプレートの追加メタデータ
タイプ: object
| Property | 説明 | Type |
|---|---|---|
| name | テンプレートフォルダ内のテンプレートのファイル名。拡張子なし。 | string |
| title | テンプレートのタイトル。翻訳可。 | string |
| postTypes | このカスタムテンプレートを使える投稿タイプのリスト。 | array |
templateParts
パーツフォルダで定義されるテンプレートパーツの追加メタデータ。
タイプ: object
| Property | 説明 | Type |
|---|---|---|
| name | パーツフォルダ内のテンプレートのファイル名。拡張子なし。 | string |
| title | テンプレートのタイトル。翻訳可。 | string |
| area | テンプレートパーツが使用されるエリア。header 値と footer 値のブロックバリエーションが存在し、エリアがそのどちらかと設定された際に使用される。 | string |
Patterns
パターンディレクトリから登録されるパターンのスラッグの配列。
タイプ: array
最終更新日: