バージョン 2 (現在のリファレンス)
Topics
これは、theme.json バージョン2の現在の仕様です。このバージョンは、WordPress 5.9以降と最新のGutenberg プラグインで動作します。
関連するドキュメントとして、theme.json v1 仕様と theme.json v1 から v2 への移行リファレンス があります。
このリファレンスガイドは、theme.json スキーマで定義された設定 (settings) とスタイル (styles) プロパティの一覧です。theme.jsonの使用方法については、theme.json ガイド を参照してください。
スキーマ
開発中に theme.json の設定やプロパティを覚えておくのは難しいため、JSON スキーマが作成されました。スキーマは https://schemas.wp.org/trunk/theme.json で公開されています。
コードエディターはスキーマを読み込み、エディター内でツールチップ、オートコンプリート、スキーマ検証のような支援を提供できます。Visual Studio Code でスキーマを使用するには、theme.json ファイルの先頭に、”$schema”: “https://schemas.wp.org/trunk/theme.json” を追加してください。
settings
appearanceTools
以下のUIツールを有効にする設定です。
- border: color, radius, style, width
- color: link
- spacing: blockGap, margin, padding
- typography: lineHeight
border
ボーダー関連の設定です。
Property | Type | Default | Props |
---|---|---|---|
color | boolean | false | |
radius | boolean | false | |
style | boolean | false | |
width | boolean | false |
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 |
layout
レイアウト関連の設定です。
Property | Type | Default | Props |
---|---|---|---|
contentSize | string | ||
wideSize | string |
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 | |
letterSpacing | boolean | true | |
lineHeight | boolean | false | |
textDecoration | boolean | true | |
textTransform | boolean | true | |
dropCap | boolean | true | |
fontSizes | array | 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 | |
radius | undefined | |
style | string | |
width | string | |
top | undefined | |
right | undefined | |
bottom | undefined | |
left | undefined |
color
色のスタイル。
Property | Type | Props |
---|---|---|
background | string | |
gradient | string | |
text | string |
spacing
スペースのスタイル。
Property | Type | Props |
---|---|---|
blockGap | string | |
margin | object | bottom, left, right, top |
padding | object | bottom, left, right, top |
typography
タイポグラフィのスタイル。
Property | Type | Props |
---|---|---|
fontFamily | string | |
fontSize | string | |
fontStyle | string | |
fontWeight | string | |
letterSpacing | string | |
lineHeight | string | |
textDecoration | string | |
textTransform | string |
filter
CSS and SVG filter styles.
Property | Type | Props |
---|---|---|
duotone | string |
最終更新日: