バージョン 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 |
最終更新日: