theme.json Version 3 リファレンス (最新)

この文書は theme.json バージョン3の現在の仕様です。このバージョンは、WordPress 6.6以降と最新の 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 に記述します。例:

Top ↑

JSON スキーマ

このドキュメントは theme.json の JSON スキーマから生成されました。

Gutenberg プラグインの最新の変更を含むバージョン3の最新のスキーマは、https://schemas.wp.org/trunk/theme.json にあります。

各 WordPress バージョンの theme.json スキーマは、https://schemas.wp.org/wp/{{version}}/theme.json から利用できます。例えば、WordPress 5.8用のスキーマは https://schemas.wp.org/wp/5.8/theme.json にあります。

お使いのエディターで JSON スキーマを使用する方法については theme.json を使用した開発を参照してください。

Top ↑

settings

Top ↑

appearanceTools

以下のUIツールを有効にする設定。

  • background: backgroundImage, backgroundSize
  • border: color, radius, style, width
  • color: link, heading, button, caption
  • dimensions: aspectRatio, minHeight
  • position: sticky
  • spacing: blockGap, margin, padding
  • typography: lineHeight

Top ↑

useRootPaddingAwareAlignments

注意: WordPress 6.1以降

ルートブロックの代わりに全幅ブロックの内容に、ルートパディング (styles.spacing.padding の値) を適用することを可能にします。

注意: この設定を使用する場合、styles.spacing.padding は常にオブジェクトとして設定し、toprightbottomleftの値は別々に宣言する必要があります。


Top ↑

border

ボーダー関連の設定。

PropertyTypeDefaultProps
colorbooleanfalse
radiusbooleanfalse
stylebooleanfalse
widthbooleanfalse

Top ↑

shadow

シャドー関連の設定。

PropertyTypeDefaultProps
defaultPresetsbooleantrue
presetsarrayname, shadow, slug

Top ↑

color

色関連の設定。

PropertyTypeDefaultProps
backgroundbooleantrue
custombooleantrue
customDuotonebooleantrue
customGradientbooleantrue
defaultDuotonebooleantrue
defaultGradientsbooleantrue
defaultPalettebooleantrue
duotonearraycolors, name, slug
gradientsarraygradient, name, slug
linkbooleanfalse
palettearraycolor, name, slug
textbooleantrue
headingbooleantrue
buttonbooleantrue
captionbooleantrue

Top ↑

background

背景関連の設定。

PropertyTypeDefaultProps
backgroundImagebooleanfalse
backgroundSizebooleanfalse

Top ↑

dimensions

寸法関連の設定。

PropertyTypeDefaultProps
aspectRatiobooleanfalse
defaultAspectRatiosbooleantrue
aspectRatiosarrayname, ratio, slug
minHeightbooleanfalse

Top ↑

layout

レイアウト関連の設定。

PropertyTypeDefaultProps
contentSizestring
wideSizestring
allowEditingbooleantrue
allowCustomContentAndWideSizebooleantrue

Top ↑

lightbox 関連の設定。

PropertyTypeDefaultProps
enabledboolean
allowEditingboolean

Top ↑

position

位置関連の設定。

PropertyTypeDefaultProps
stickybooleanfalse

Top ↑

spacing

スペース関連の設定。

PropertyTypeDefaultProps
blockGapboolean, nullnull
marginbooleanfalse
paddingbooleanfalse
unitsarraypx,em,rem,vh,vw,%
customSpacingSizebooleantrue
defaultSpacingSizesbooleantrue
spacingSizesarrayname, size, slug
spacingScaleobject

Top ↑

typography

タイポグラフィ関連の設定。

PropertyTypeDefaultProps
defaultFontSizesbooleantrue
customFontSizebooleantrue
fontStylebooleantrue
fontWeightbooleantrue
fluidobject, booleanfalse{maxViewportWidth, minFontSize, minViewportWidth}
letterSpacingbooleantrue
lineHeightbooleanfalse
textAlignbooleantrue
textColumnsbooleanfalse
textDecorationbooleantrue
writingModebooleanfalse
textTransformbooleantrue
dropCapbooleantrue
fontSizesarrayfluid, name, size, slug
fontFamiliesarrayfontFace, fontFamily, name, slug

Top ↑

custom

--wp--custom--{key}--{nested-key}: {value};」形式のカスタム CSS カスタムプロパティを生成します。camelCased のキーは、CSSプロパティ命名スキーマに従うために、 kebab-case に変換されます。異なる深さのレベルのキーは -- で区切られるため、キーの名前に -- を含めないでください。


Top ↑

styles

Top ↑

background

背景のスタイル。

PropertyTypeProps
backgroundImagestring, object
backgroundPositionstring, object
backgroundRepeatstring, object
backgroundSizestring, object

Top ↑

border

ボーダーのスタイル。

PropertyTypeProps
colorstring, object
radiusstring, object
stylestring, object
widthstring, object
topobjectcolor, style, width
rightobjectcolor, style, width
bottomobjectcolor, style, width
leftobjectcolor, style, width

Top ↑

color

色のスタイル。

PropertyTypeProps
backgroundstring, object
gradientstring, object
textstring, object

Top ↑

dimensions

寸法のスタイル

PropertyTypeProps
aspectRatiostring, object
minHeightstring, object

Top ↑

spacing

スペースのスタイル。

PropertyTypeProps
blockGapstring, object
marginobjectbottom, left, right, top
paddingobjectbottom, left, right, top

Top ↑

typography

タイポグラフィのスタイル。

PropertyTypeProps
fontFamilystring, object
fontSizestring, object
fontStylestring, object
fontWeightstring, object
letterSpacingstring, object
lineHeightstring, object
textAlignstring
textColumnsstring
textDecorationstring, object
writingModestring, object
textTransformstring, object

Top ↑

filter

CSS と SVG フィルターのスタイル。

PropertyTypeProps
duotonestring, object

Top ↑

shadow

ボックスシャドーのスタイル。


Top ↑

outline

アウトラインのスタイル。

PropertyTypeProps
colorstring, object
offsetstring, object
stylestring, object
widthstring, object

Top ↑

css

カスタム CSS を設定します。他の theme.json プロパティではカバーされないスタイルを適用できます。


Top ↑

customTemplates

テンプレートフォルダで定義されるカスタムテンプレートの追加メタデータ

タイプ: object

Property説明Type
nameテンプレートフォルダ内のテンプレートのファイル名。拡張子なし。string
titleテンプレートのタイトル。翻訳可。string
postTypesこのカスタムテンプレートを使える投稿タイプのリスト。array

Top ↑

templateParts

パーツフォルダで定義されるテンプレートパーツの追加メタデータ。

タイプ: object

Property説明Type
nameパーツフォルダ内のテンプレートのファイル名。拡張子なし。string
titleテンプレートのタイトル。翻訳可。string
areaテンプレートパーツが使用されるエリア。header 値と footer 値のブロックバリエーションが存在し、エリアがそのどちらかと設定された際に使用される。string

Top ↑

Patterns

パターンディレクトリから登録されるパターンのスラッグの配列。 タイプ: array

原文

最終更新日: