theme.json を使ったテーマデザインの設定

以下は、Jeff Ong が書いた WordPress.org 公式ブログの記事「Configuring Theme Design with theme.json」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください。

WordPress 5.8以降、新しいツールである “theme.json” をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。

当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。

theme.json とは

技術的に言えば、theme.json はテーマのディレクトリのトップレベルにある単なるファイルです。

しかし、概念的に言えば、テーマの開発方法に大きな変化をもたらすものです。テーマの作成者は、サイトの作成者と訪問者に合わせて WordPress での体験を調整するための一元的なメカニズムを利用できるようになりました。theme.json は、テーマ作者がグローバルスタイル、ブロックスタイル、ブロックエディターの設定をきめ細かく制御できる方法を提供します。

これらの設定と制御を単一のファイルで提供することにより、theme.json は、テーマのデザインと開発の多くの側面をまとめる強力なフレームワークとなります。そして、ブロックエディターが成熟し、より多くの機能が追加されていくにつれ、theme.json は、テーマとエディターが連携するためのバックボーンとして活躍するでしょう 💪 。

これを使う理由

なぜ theme.json を使うのか – その理由は、テーマの未来がこの方向に進んでいるからです。しかし、私も最初はそうでしたが、皆さんも納得するためにもっと具体的な何かが必要かもしれません。現在 theme.json を使用する理由はいくつかあります。

• 色、タイポグラフィ、間隔、レイアウトなどのエディター設定を制御し、設定を管理する場所を一元化します。
• スタイルがサイト全体のブロックと要素に正しく適用されることを保証します。
• テーマが提供していた土台となる CSS の量を減らします。theme.json は、スタイルシートを完全に置き換えるわけではありません。テーマに追加の特殊効果や装飾 (トランジション、アニメーションなど) を与えるために CSS が必要になる場合もあるでしょう。ですが、テーマに必要な基本 CSS を大幅に減らすことができます。

使い方

この記事の残りの部分では、試すことができる theme.json 設定をいくつかご紹介します。例では、今年のデフォルトテーマをベースとしたブロック版のテーマである tt1-blocks の theme.json を使用します。

既存のテーマから始める場合は、WordPress/theme-experiments リポジトリから theme.json をコピーし (例えば、@poena 作の fse-tutorial)、ご自分のテーマのディレクトリのルートに追加します。

サイトのタイポグラフィ設定をグローバル (全体的) に変更する

"settings": {
	"typography": {
		"fontSize": "30px",
		...

上記の theme.json に変更を加えると、テーマの body タイポグラフィスタイル (前と後) が次のように更新されます。

サイトの基本色設定をグローバル (全体的) に変更する

"styles": {
	"color": {
		"background": "#ffc0cb",
		"text": "#6A1515"
	},
	...
}

特定のブロックのスペースとパディングの設定を変更する

"styles": {
	"blocks": {
		"core/code": {
			"spacing": {
				"padding": {
					"top": "3em",
					"bottom": "3em",
					"left": "3em",
					"right": "3em"
				}
			}
		}
	}
}

エディター内でボタンなどの特定のブロックにカスタムカラーパレットを設定する

"settings": {
    "blocks": {
		"core/button": {
			"color": {
				"palette": [ 
					{
						"name": "Maroon",
						"color": "#6A1515",
						"slug": "maroon"
					},
					{
						"name": "Strawberry Ice Cream",
						"color": "#FFC0CB",
						"slug": "strawberry-ice-cream"
					}
				]
			}
		}
	}
}

タイポグラフィ制御の有効化と無効化

次の例では、すべての見出しブロックにカスタムフォントサイズと行の高さを指定する機能を無効化しています。

	"settings": {
		"blocks": {
			"core/heading": {
				"typography": {
					"customFontSize": false,
					"customLineHeight": false
				}
			}
		}
	}

これからについて

この記事を通じて、何が可能で、テーマがどこに向かっているのかが伝わっていることを祈ります。ここで紹介したのはテーマのデザイン設定でできることのほんの一例であり、テーマ作者の皆さんがこれからどのような作品を生み出すのか、とても楽しみにしています。

詳細については、 theme.json に関する開発者向けのメモ (英語) と、ハンドブックにある theme.jsonのドキュメントをご覧ください。

この投稿をレビューしてくれた @kjellr、@chanthaboune、@priethor、@annezazu に感謝します。【訳者追記】また、翻訳レビューに協力してくださった @nukaga さんと @atachibana さん、ありがとうございました。