WordPress ブロックテーマを作ってみよう その４
前回は、固定ページや投稿の個別テンプレートを作成してました。
いよいよ、theme.jsonを使って装飾を設定していきたいと思います。
01. theme.jsonとは
ブロックテーマのグローバルスタイルや、各ブロックのスタイルをまとめて管理できます。
CSSを直接書かずにデザインを整えたり、各ブロックやサイト全体のデザインを統一しやすくなります。
「JSON」は、キーと値の組み合わせであるオブジェクトで構成されるデータの記述形式です。
02. theme.jsonの基本
基本の書き方
波括弧{ }の中に、すべての設定を記述します。
プロパティ名と値をコロン:、設定ごとにカンマ,で区切ります。
文字列は二重引用符" "、配列は角括弧[ ]で囲みます。
{
"property-name-1": "value-1",
"property-name-2": "value-2"
}バージョン情報
まず、theme.jsonのバージョンを設定します。
ファイルの先頭にスキーマを記載しておくと、コードエディターで自動補完を使用したり、ファイルの検証を行ったりできます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3
}theme.jsonのキャッシュ対策
theme.jsonはサイト表示の高速化のためにキャッシュされています。
ブロックテーマ開発中はデバッグモードを有効にしておくと、theme.jsonのキャッシュをスキップして、変更内容をすぐ反映できます。
wp-config.php のWP_DEBUGの値をデフォルトの「false」から「true」に変更します。
define( 'WP_DEBUG', true );03. theme.jsonの設定
theme.jsonは「設定」と「スタイル」の2つのセクションに大きく分かれます。
- 設定：カラー・フォント・余白など、エディターの機能や初期値を定義
- スタイル：サイト全体や各ブロックにスタイルを適用
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
},
"styles": {
}
}まずは「設定」セクションから記述していきます。
カラー
カラーパレットやグラデーションにテーマカラーを定義します。
palette：カラーパレットgradients：グラデーションduotone：デュオトーン（2色のフィルターで画像を変換）
カラーに関する機能の有効・無効も設定できます。
custom：カラーピッカーでカスタムカラーの選択customGradient：カラーピッカーでカスタムグラデーションの選択customDuotone：デュオトーンのハイライトとシャドウのカスタマイズlink：リンクテキスト色の選択（デフォルトはfalse）background：背景色の選択text:テキスト色の選択
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{
"slug": "main",
"color": "#D0B4FF",
"name": "メインカラー"
},
{
"slug": "sub",
"color": "#F3EBFF",
"name": "サブカラー"
}
],
"gradients": [
{
"slug": "main-to-sub",
"gradient": "linear-gradient(160deg, var(--wp--preset--color--main), var(--wp--preset--color--sub))",
"name": "メイングラデーション"
}
],
"duotone": [
{
"colors": [ "#D0B4FF", "#F3EBFF" ],
"slug": "purple-and-light-purple",
"name": "紫と薄紫"
}
]
}
},
"styles": {
}
}CSSカスタムプロパティ（変数）
グラデーションには、パレットのメインカラーとサブカラーを使用しています。
カラーパレットやフォントサイズなどで定義したプリセットを、以下のように呼び出せます。
--wp--preset--{preset-category}--{preset-slug}
エディターでカラーを確認する
管理画面からエディターを確認すると、テーマカラーが表示されました。
タイポグラフィ
続いて、フォントファミリーやフォントサイズを定義します。
fontFamilies: フォントファミリーfontSizes：フォントサイズ
タイポグラフィに関する機能の有効・無効も設定できます。
customFontSize：カスタムフォントサイズの設定dropCap：先頭の文字を大きく表示fontWeight：フォントの太さletterSpacing：字間lineHeight：行間（デフォルトはfalse）textDecoration：下線や取り消し線writingMode：横書き、縦書き設定（デフォルトはfalse）
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": { 省略 },
"typography": {
"fontFamilies": [
{
"fontFamily": "'Noto Sans JP', sans-serif",
"slug": "noto-sans-jp",
"name": "Noto Sans JP",
"fontFace": [
{
"fontFamily": "'Noto Sans JP'",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/noto-sans-jp/NotoSansJP.woff2"
]
}
]
}
],
"fontSizes": [
{
"slug": "normal",
"size": "1rem",
"name": "本文"
},
{
"slug": "title",
"size": "2rem",
"name": "タイトル"
}
]
}
},
"styles": {
}
}エディターでタイポグラフィを確認する
設定したフォントファミリー、フォントサイズが反映されています。
また、タイポグラフィパネル右上の
をクリックすると、有効にした機能を表示できます。
レイアウト
グループブロック・カバーブロック・カラムブロックなどで設定できる、コンテンツ幅を定義します。
contentSize：デフォルトのブロック幅WideSize：ワイド配置設定が有効になっているブロックの幅
レイアウトに関する機能の有効・無効も設定できます。
allowEditing：レイアウトコントロールパネルの表示allowCustomContentAndWideSize：コンテンツ幅と幅広サイズの表示
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": { 省略 },
"typography": { 省略 },
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
}
},
"styles": {
}
}エディターでレイアウトを確認する
エディターでグループブロックを選択すると、レイアウトを設定することができます。
レイアウトのCSSカスタムプロパティ
指定したコンテンツ幅は、それぞれ変数として--wp--style--global--content-size、--wp--style--global--wide-sizeで利用できます。
テンプレートでレイアウトを指定する
header.htmlにコンテンツ幅を指定したい場合、グループブロックで囲み、以下のように記述します。
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group container">
<!-- wp:site-logo /-->
<!-- wp:site-title /-->
<!-- wp:site-tagline /-->
<!-- wp:navigation -->
<!-- wp:page-list /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
スペース
マージン（外）・パディング（内）・ギャップ（間）の余白はデフォルトでは無効になっているため、有効化するとエディターから設定できるようになります。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": { 省略 },
"typography": { 省略 },
"layout": { 省略 },
"spacing": {
"margin": true,
"padding": true,
"blockGap": true
}
},
"styles": {
}
}線
線の色・角丸・スタイル・幅もデフォルトでは無効なため、有効化すると自由に設定できます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": { 省略 },
"typography": { 省略 },
"layout": { 省略 },
"spacing": { 省略 },
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
}
},
"styles": {
}
}AppearanceTools
複数の機能をまとめて有効化することもできます。
{
"version": 3,
"settings": {
"appearanceTools": true
}
}上記のように記述した場合、以下の機能がまとめて有効化されます。
{
"version": 3,
"settings": {
"background" : {
"backgroundImage": true,
"backgroundSize": true
},
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
},
"color": {
"link": true
},
"dimensions": {
"aspectRatio" : true,
"minHeight": true
},
"position": {
"sticky": true
},
"spacing": {
"blockGap": true,
"margin": true,
"padding": true
},
"typography": {
"lineHeight": true
}
}
}カスタムプリセット
CSSカスタムプロパティ（変数）を作成することができます。
以下のように定義した場合は、--wp--custom--spacingで呼び出します。
{
"version": 3,
"settings": {
"custom": {
"spacing": "14px"
}
}
}ブロックプリセット
特定のブロックごとに、カラーやタイポグラフィなどの設定を行うことができます。
カバーブロックにカスタムカラーパレットを追加したい場合は、以下のように記述します。
{
"version": 3,
"settings": {
"blocks": {
"core/cover":{
"color": {
"palette": [
{
"slug": "cover",
"color": "#FFF4CD",
"name": "カバーカラー"
}
]
}
}
}
}
}おわりに
長くなってしまったので、残り半分の「スタイル」セクションは次回に持ち越します。
裏側で設定した内容が、いつもの編集画面に出てくると面白いですね。
まだまだ奥は深そうですが、少しずつ解読していきたいと思います。
この記事を書いた人
