theme.jsonとはなんなのか？
theme.jsonではテーマのスタイル設定とブロックの設定を行います。
WordPress5.8で実装され、それより前のバージョンでは使うことができません(ただし、Gutenberg pluginを有効にしていれば使える。)。
WordPress version 5.8 (theme.jsonのversion 1), WordPress 5.9 (theme.jsonのversion 2), and the Gutenberg plugin (experimental features)などバージョンなどによってtheme.jsonができることが異なりますので注意してください。
theme.jsonでできること
theme.jsonでできることの一部紹介です。
- drop cap、padding、margin、line-heightなどの有効・無効の設定
- カラーパレット、グラデーション、デュオトーンの追加
- フォントサイズの追加
- コンテンツのデフォルトの幅やwideコンテンツの追加
- カスタムCSSプロパティの追加
- テンプレートパーツの割り当て
theme.jsonの作成方法・書き方の基本
theme.jsonファイルをテーマのルートディレクトリに設置します。
開発の補助
以下のコードをjsonファイルの先頭に記述することで、ツールチップやオートコンプリート、エディタ内でのスキーマ検証などの支援機能を使用することができます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
}バージョン設定
中括弧の中にバージョンを記述します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
}settingとstylesセクション
theme.json内には2つの主要なセクションがあります。それがsettingセクションとstylesセクションです。
以下のように記述します。
{
"version": 2,
"settings": { ... },
"styles":{...},
}適用範囲
設定の適用範囲についてですが、
- グローバル設定にする場合はrootレベルに記述
- それぞれのブロックに設定する場合はblocksレベル内にblock nameと共に記述（ブロックの種類ごとに設定が可能ということになりますね！）
{
"version": 2,
"settings": {
"color": { ... }, // rootレベル
"blocks": { //ブロックレベル
"core/group": { //ブロック名
"color": { ... }, // Groupブロックのcolor設定
}
}
}
}block nameについてはCore Blocks Referenceに一覧があります。
settingセクションの書き方
初期値
WordPressは、エディタのブロック設定をコントロールやCSSカスタムプロパティを生成するためにtheme.jsonのデータを使用します。
以下のコードはカラーパレットの例です。
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
}
]
}
}
}上記記述によって、bodyに以下のCSSが適用されます。
--wp--preset--color--black: #000000;カスタム値
setting.customエリア（またはsettings.blocks.BLOCKNAME.customエリア)の設定はtheme.json内またはテーマのCSS内のどこかで使用するCSSプロパティを生成します。
{
"version": 2,
"settings": {
"custom": {
"who": "ningen"
},
"blocks": {
"core/paragraph": {
"custom": {
"who": "usagi"
}
}
}
}
}
}上記コードではCSS変数–wp–custom–whoの値がningenになります。しかし、core/paragraphエレメントではusagiになります。
theme.jsonをテーマに加えるときの注意点
もし既存のテーマにtheme.jsonを追加する場合、正しくWordPressが動作するようにテーマのCSSの調整や重複したスタイルを取り除く必要があるかもしれません。
有効・無効の設定
デフォルトで有効になっている設定は
- カスタムカラー
- カスタムデュオトーン
- カスタムグラデーション
- カスタムフォントサイズ
- ドロップキャップ
もし、無効にしたい場合は値をfalseにします。以下はカラーパレットのカスタムカラーピッカーを無効にする例です。
{
"version": 2,
"settings": {
"color": {
"custom": false,
}
}
}デフォルトで無効になっている設定は
- リンクカラー
- paddingとmargin
- カスタムline-height
有効にしたい場合は値をtrueにします。以下の例はリンクカラーを有効にする例です。
{
"version": 2,
"settings": {
"color": {
"link": true
},
}
}AppearanceToolsを使えば以下設定を一度に全て有効にすることもできます。
- border: color, radius, style, width
- color: link
- spacing: blockGap, margin, padding
- typography: lineHeight
{
"version": 2,
"settings": {
"appearanceTools": true,
}
}stylesセクションの書き方
settingsセクションと同様に、bodyに適用するスタイルはstylesセクションのrootレベルに記述します。
{
"version": 2,
"settings": { ... },
"styles":{
//rootレベル
"color":{
"background":"var(--wp--preset--color--white)",
"text":"var(--wp--preset--color--black)"
},
}
}ブロックにスタイルを適用するにはstyles.blocks.BLOCKNAMEに記述します。
{
"version": 2,
"settings": { ... },
"styles": {
"blocks": { //blockレベル
"core/post-title": { //styles.blocks.BLOCKNAMEはここ！！
"typography": {
"fontSize":"var(--wp--preset--font-size--extra-large)"
}
},
}
}
}styleセクションのelements
ブロックのHTMLが複数階層だった場合、elementsを使うとブロックの下層要素にもスタイリングができます。
{
"version": 2,
"settings": { ... },
"styles": {
"blocks": {
"core/post-excerpt": {
"elements": {
"link": {
"color": {
"background": "var(--wp--preset--color--light-grey)"
},
}
}
}
}
}
}テンプレートパーツの割り当て
templatePartsセクションにはテンプレートエリアにデフォルトのテンプレートパーツを割り当てます。
theme.jsonの書き方ですが、3種類のキーを追加します。
| name | 拡張子を除いたテンプレートパーツファイル名 |
| title | エディタ内で表示される名前 |
| area | テンプレートエリア名 |
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]カスタムテンプレート
カスタムテンプレートファイルの作り方
ブロックテーマのカスタムテンプレートはtheme.jsonファイルに記述することで認識させることができます。
theme.jsonのcustomTemplatesセクションに並べられたすべてのテンプレートはSite Editor(サイトエディタ)内で選択できます。
テンプレートのファイル名をつけるときはファイル名の先頭にpost typeをつける必要があります。
（例）post-{name}、page-{name}
theme.jsonでの書き方
"customTemplates": [
{
"name": "page-contact",
"title": "Contact",
"postTypes": [ "page" ]
}
]nameにはテンプレート名(ファイルの拡張子をつけない)、
titleにはエディタ内で表示される名前を記述します。
また、postTypesは任意で指定することができます。postTypesはどの投稿タイプ(post type)でそのテンプレートを使うことができるか決めることができます。postTypesの値にはpost typeを記述します。
参考URL
コメント