theme.json バージョン2

Topics

  • スキーマ
  • settings
    • appearanceTools
    • useRootPaddingAwareAlignments
    • border
    • shadow
    • color
    • background
    • dimensions
    • layout
    • lightbox
    • position
    • spacing
    • typography
    • custom
  • styles
    • border
    • color
    • dimensions
    • spacing
    • typography
    • filter
    • shadow
    • outline
    • css
  • customTemplates
  • templateParts
  • Patterns

この文書は 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,
  ...
}

Top ↑

settings

Top ↑

appearanceTools

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

  • background: backgroundImage
  • border: color, radius, style, width
  • color: link
  • 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

Top ↑

background

背景関連の設定。

PropertyTypeDefaultProps
backgroundImagebooleanfalse

Top ↑

dimensions

寸法関連の設定。

PropertyTypeDefaultProps
aspectRatiobooleanfalse
minHeightbooleanfalse

Top ↑

layout

レイアウト関連の設定。

PropertyTypeDefaultProps
contentSizestring
wideSizestring
allowEditingbooleantrue
allowCustomContentAndWideSizebooleantrue

Top ↑

lightbox 関連の設定。

PropertyTypeDefaultProps
enabledboolean
allowEditingboolean

Top ↑

position

位置関連の設定。

PropertyTypeDefaultProps
stickybooleanfalse

Top ↑

spacing

スペース関連の設定。

PropertyTypeDefaultProps
blockGapundefinednull
marginbooleanfalse
paddingbooleanfalse
unitsarraypx,em,rem,vh,vw,%
customSpacingSizebooleantrue
spacingSizesarrayname, size, slug
spacingScaleobject

Top ↑

typography

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

PropertyTypeDefaultProps
defaultFontSizesbooleantrue
customFontSizebooleantrue
fontStylebooleantrue
fontWeightbooleantrue
fluidundefinedfalse
letterSpacingbooleantrue
lineHeightbooleanfalse
textColumnsbooleanfalse
textDecorationbooleantrue
writingModebooleanfalse
textTransformbooleantrue
dropCapbooleantrue
fontSizesarrayfluid, name, size, slug
fontFamiliesarrayfontFace, fontFamily, name, preview, slug

Top ↑

custom

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


Top ↑

styles

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
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

原文

最終更新日: