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ツールを有効にする設定。
- background: backgroundImage
- 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 |
background
背景関連の設定。
Property | Type | Default | Props |
---|---|---|---|
backgroundImage | boolean | false |
dimensions
寸法関連の設定。
Property | Type | Default | Props |
---|---|---|---|
minHeight | boolean | false |
layout
レイアウト関連の設定。
Property | Type | Default | Props |
---|---|---|---|
contentSize | string | ||
wideSize | string | ||
allowEditing | 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 | 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 | |
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 |
---|---|---|
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
テンプレートフォルダで定義されるカスタムテンプレートの追加メタデータ
タイプ: object
Property | 説明 | Type |
---|---|---|
name | テンプレートフォルダ内のテンプレートのファイル名。拡張子なし。 | string |
title | テンプレートのタイトル。翻訳可。 | string |
postTypes | このカスタムテンプレートを使える投稿タイプのリスト。 | array |
templateParts
パーツフォルダで定義されるテンプレートパーツの追加メタデータ。
タイプ: object
Property | 説明 | Type |
---|---|---|
name | パーツフォルダ内のテンプレートのファイル名。拡張子なし。 | string |
title | テンプレートのタイトル。翻訳可。 | string |
area | テンプレートパーツが使用されるエリア。header 値と footer 値のブロックバリエーションが存在し、エリアがそのどちらかと設定された際に使用される。 | string |
Patterns
パターンディレクトリから登録されるパターンのスラッグの配列。
タイプ: array
最終更新日: