予定より若干遅れたものの、ついに新たなWordPressのデフォルトテーマが登場しました。その名もTwenty Twenty-Twoです!

WordPress 5.9のリリースに伴い、こちらの新しいWordPressデフォルトテーマが追加されます。このテーマを深く知るために、WordPress 5.9で動作するローカル開発環境にTwenty Twenty-Twoをインストールし実際に使用してみました。

まずはその結果をご報告してから、Twenty Twenty-Twoのあらゆる機能の概要をお分かり頂けるよう、私たちの見解をまとめてお伝えします。

新たなWordPressのデフォルトテーマ「Twenty Twenty-Two」のプレビュー
新たなWordPressのデフォルトテーマ「Twenty Twenty-Two」のプレビュー(画像参照元:WordPress.org

Twenty Twenty-Twoはこれまでになく柔軟かつ軽量で、カスタマイズ性の高いデフォルトテーマです。ブロックやパターン、テンプレートを自由に試すことができるのが特徴です。

ブロックテーマなので、WordPress 5.9の待望の新機能であるフルサイト編集、グローバルスタイル、ナビゲーションブロック、新しい画像ギャラリーを確認、使用しやすいようになっています。

最初に強調しておきたい点として、Twenty Twenty-Twoは初めてのデフォルトのブロックテーマです。

この新たなテーマの最大の目的はユーザーの自由度を高めることです。標準でこれだけ多くのパターンやテンプレートが用意されているため、ほんの数クリックで複雑なレイアウトを構築することができます。あとはスタイルをカスタマイズするだけでOKです。

技術的な観点では、Twenty Twenty-Twoについてご紹介することはWordPress 5.9の最新の便利な機能についてご説明することと、ほぼ同義です。Twenty Twenty-Twoというテーマを通して、新しいサイト編集機能や、プラットフォーム自体の将来性について、より良く理解することができるでしょう。

そんなわけで、今回この新しいテーマをご紹介します。

はじめに、WordPress 5.9とTwenty Twenty-Twoの新たなサイト編集フローを扱います。

その後、Twenty Twenty-Twoで実装される主要なブロックテーマの機能を深掘りします。ここでは、グローバルスタイル、ブロックパターン、テンプレート、テンプレートパーツについて解説します。

しかし、Twenty Twenty-TwoとWordPressはそれだけでは語り尽くせません。そのため、最後の章ではtheme.jsonファイルを利用してTwenty Twenty-Twoの機能を拡張する方法を簡単にご説明します。

それでは、WordPressの最新のデフォルトテーマ「Twenty Twenty-Two」を詳しく見ていきましょう。

Twenty Twenty-Twoの新たなサイト編集フロー

WordPress 5.9には、いくつかのフルサイト編集機能が備わっています。WordPress 5.9でTwenty Twenty-Twoなどのブロックテーマをインストールした場合、次のことができるようになります。

  • より多くのブロックとパターンを用いた投稿や固定ページの作成、編集
  • jsonファイルで定義された設定とスタイルをグローバルスタイルインターフェースから編集
  • 固定ページや投稿用のテンプレートの作成と編集
  • ヘッダー、フッターなどのテンプレートの特定のエリア用のテンプレートパーツの作成、編集

これら全ての機能がWordPressそのものに統合されたことをうけ、WordPressコアコントリビューターの面々は、情報アーキテクチャ改良について議論し、サイト編集フロー全体を見直しました。

Twenty Twenty-Twoを利用し始めてまず気がつくことは、サイトエディタへのアクセス方法が、WordPressダッシュボードのメインメニューではなく、「外観」メニュー内に移動していることでしょう。

 WordPress 5.9の新しくなった「外観」メニュー
WordPress 5.9の新しくなった「外観」メニュー

テンプレートとスタイルの編集機能を同じ「外観」メニューに配置することで編集作業がより効率的になっています。また、利用している機能がページの表示に関するものであることが分かりやすくなりました。

最新のTwenty Twenty-Twoテーマを徹底解説🚀 👀Click to Tweet

「Editor」をクリックすると、サイトのトップページのテンプレートが表示されます。表示設定によって、最新の投稿もしくは固定ページのいずれかになっています。

 Twenty Twenty-Twoを利用したWordPress 5.9のサイトエディタ
Twenty Twenty-Twoを利用したWordPress 5.9のサイトエディタ

次に、左上のWordPressのアイコンをクリックすると、新しいサイトエディタのナビゲーションメニューが表示されます。その中に、「サイト」、「Templates」、「Template Parts」が表示されます。

さらに詳しく見ていきましょう。

 エディタのナビゲーションメニュー
エディタのナビゲーションメニュー

サイト」のメニューをクリックすると、トップページのテンプレート(最新の投稿または固定ページ)が開きます。

Templates」メニューをクリックすると、テンプレートの一覧が表示されます。お好きなテンプレートをクリックすると、エディタに適用されます。

本稿執筆時点では11種類のテンプレートから選べます。

 Twenty Twenty-Twoのテンプレート
Twenty Twenty-Twoのテンプレート

右側の3点リーダー(縦)をクリックすると初期化することができます。

 テンプレートを初期化
テンプレートを初期化

テーマテンプレートと違い、カスタムテンプレートは名前の変更または削除のいずれかしかできません(ただし、投稿のエディタでカスタムテンプレートを編集することができます)。

 カスタムテンプレートの名前を変更/削除
カスタムテンプレートの名前を変更/削除

Template Parts」メニューをクリックすると、エディタで開きカスタマイズできるテンプレートパーツの一覧が表示されます。

Twenty Twenty-Twoにはデフォルトで、4つのテンプレートパーツがあります。変更を加えたテンプレートにカーソルを合わせると、テンプレートがカスタマイズされていることを示すメッセージが表示されます。

 Twenty Twenty-Twoのテンプレートパーツ
Twenty Twenty-Twoのテンプレートパーツ

右側の3点リーダー(縦)をクリックすると加えた変更を初期化することができます。

 テンプレートパーツを初期化
テンプレートパーツを初期化

テンプレートとテンプレートパーツの編集

エディタテンプレートとテンプレートパーツを編集するためのインターフェースです。

ここからブロックやパターンを簡単に追加、編集でき、加えた変更はテンプレートを使用している全てのページに自動で適用されます。

 個別ページのテンプレートを編集
個別ページのテンプレートを編集

次のスクリーンショットはエディタの404エラー画面のテンプレートです。見出しとテキストと検索ボックスのみで構成されたシンプルなテンプレートですが、UIの仕組みがよく分かります。

 テンプレートエディタ内のTwenty Twenty-Twoの404ブロックテンプレート
テンプレートエディタ内のTwenty Twenty-Twoの404ブロックテンプレート

これを好みに合わせてカスタマイズすることができます。例えば、画像投稿のグリッドを追加してサイト訪問者の注意をひき、サイトの別のコンテンツへと誘導することなどができます。

 Twenty Twenty-Twoの404ブロックテンプレートをカスタマイズ
Twenty Twenty-Twoの404ブロックテンプレートをカスタマイズ

テンプレートエディタの上部にあるヘッダーのドロップダウンメニューには、テンプレートのエリアの一覧が表示されます。サイドバーの設定メニューの「Template」タブにも表示されます。

 Twenty Twenty-Twoのテンプレートのエリア
Twenty Twenty-Twoのテンプレートのエリア

任意のテンプレートのエリア(ヘッダーなど)をクリックすると、編集したいテンプレートパーツに直接移動できます。

右側の3点リーダー(縦)をクリックすると独立したテンプレートパーツエディタが開きます。

 3点リーダー(縦)をクリックすると独立したテンプレートパーツエディタが表示される
3点リーダー(縦)をクリックすると独立したテンプレートパーツエディタが表示される

テンプレートパーツエディタではドラッグできる箇所が2つあり、異なる画面解像度でのテンプレートの挙動を確認することができます。

 テンプレートパーツのプレビューサイズを調整
テンプレートパーツのプレビューサイズを調整

変更内容に満足したら、編集を保存し、メインのテンプレートエディタへ戻って結果を確認しましょう。

新たな情報アーキテクチャについてもっと詳しく知りたい方は、次の記事をご覧下さい。

Twenty Twenty-Twoの核心:theme.jsonの概要

Twenty Twenty-Twoとブロックテーマの仕組みをしっかりと理解するために、theme.jsonファイルを利用した新たなテーマの設定とスタイルの仕組みを見てみましょう。

WordPress 5.8で導入されたこの新しい仕組みにより、テーマ開発者は一元的にエディタの設定や機能を追加できるようになりました。

Twenty Twenty-Twoではtheme.jsonファイルは次の構造になっています。

{
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {}
}

それぞれのセクションを簡単に見ていきましょう。

Version

version は仕様のバージョンを示しており、現在は2になっています。

Settings

settings では共通、もしくはブロックレベルでの設定を定義します。上位の階層で定義された設定は全てのブロックに適用されますが、ブロックの個別の設定で共通の設定を上書きすることもできます。Twenty Twenty-Twoでは次のように設定されています。

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"duotone": [...],
			"gradients": [...],
			"palette": [...]
		},
		"custom": {...},
		"spacing": {...},
		"typography": {
			"dropCap": false,
			"fontFamilies": [...],
			"fontSizes": [...]
		},
		"layout": {...}
	}
}

デフォルト設定プリセットと呼ばれ、特定の命名規則に基づいてCSSカスタムプロパティとクラス名を生成するのに使用します。

  • CSSカスタムプロパティ:--wp--preset--{preset-category}--{preset-slug}
  • CSSクラス名:.has-{preset-slug}-{preset-category}

テーマでプリセットを定義すると、対応するCSSカスタムプロパティを使ってstylesのセクションでブロックや要素をスタイリングすることができます。

Styles

styles では、テーマのブロックと要素のデフォルトスタイルを定義します。例えば、次のTwenty Twenty-Twoの例では、コアのボタンブロックのスタイルが定義されています。

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--primary)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--typography--font-size--normal)"
				}
			}
		}
	}
}

CSSカスタムプロパティがプロパティの宣言で使用されていることが分かります。

Custom Templates

The customTemplates では、カスタムテンプレートを定義します。nametitleは必須です。他にもpostTypesプロパティを設定することで、どの投稿タイプでテンプレートが使用できるかを定義できます。

Twenty Twenty-Twoでは4つのカスタムテンプレートが用意されています。

{
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-large-header",
			"title": "Page (Large Header)",
			"postTypes": [
				"page"
			]
		},
		{
			"name": "single-no-separators",
			"title": "Single Post (No Separators)",
			"postTypes": [
				"post"
			]
		},
		{
			"name": "page-no-separators",
			"title": "Page (No Separators)",
			"postTypes": [
				"page"
			]
		}
	]
}

対応する.htmlファイルはblock-templatesフォルダにあります。

 Twenty Twenty-Twoのblock-templatesフォルダ
Twenty Twenty-Twoの block-templates フォルダ

Template Parts

templateParts ではテンプレートパーツを定義します。

{
	"version": 2,
	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "header-large-dark",
			"title": "Header (Dark, large)",
			"area": "header"
		},
		{
			"name": "header-small-dark",
			"title": "Header (Dark, small)",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]
}

nametitle は必須です。他にも、area を定義して、エディタ内でテンプレートパーツがレンダリングされる箇所を指定できます。

 Twenty Twenty-Twoのテンプレートパーツ
Twenty Twenty-Twoのテンプレートパーツ

テンプレートパーツの.htmlファイルはtemplate-partsフォルダにあります。

Twenty Twenty-Twoのtheme.jsonについて学んだことで、テーマの機能や新たな編集インターフェースについての理解が深まったのではないでしょうか。

続いてTwenty Twenty-Twoのグローバルスタイルを見ていきましょう。

Twenty Twenty-Twoのグローバルスタイル

Twenty Twenty-Twoのstyle.cssを見ると、CSSの宣言の数が非常に少ないことがわかります。これは、ブロックベースのテーマではスタイルはtheme.jsonファイルで定義されるからです。

WordPress 5.9ではさらに、グローバルスタイルと呼ばれるインターフェースからサイト要素の外観を編集できる新機能が実装されています。

グローバルスタイルインターフェースはエディタの右上に位置する新しい「Styles」アイコンをクリックして利用できます(こちらも合わせてご覧下さい:The Global Styles Interface)。

アイコンをクリックすると新しく追加された「Styles」サイドバーが表示されます。そこには次の3つのパネルがあります。

  • 編集内容のプレビューが表示される「Preview」パネル
  • フォント、色、レイアウトの編集が可能な「Global Styles」パネル
  • ブロック毎のスタイルの設定ができる「Blocks
 Twenty Twenty-Twoのスタイルサイドバー
Twenty Twenty-Twoのスタイルサイドバー

Twenty Twenty-Twoのカラーパレット

Colors」パネルでは、パレットを編集し、背景テキストリンクの色を指定、変更することができます。

Palette」パネルでは「Theme」パレットや「Default」パレットのカスタマイズができます。また、独自のパレットを作成することも可能です。

 Twenty Twenty-Twoのカラーの設定
Twenty Twenty-Twoのカラーの設定

色の設定を生成しているコードがある場所は既にご存じでしょうか?

お好きなコードエディタでTwenty Twenty-Twoのtheme.jsonを開いてみてください。次のカラーパレットの宣言を探しましょう。

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#000000",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#ffffff",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#1a4548",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#ffe2c7",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F6F6",
					"name": "Tertiary"
				}
			]
		}
	}
}

以下の画像を見ると、上記のコードがTwenty Twenty-Twoのカラーパレットと一致していることが分かります。

 Twenty Twenty-Twoのカラーパレット
Twenty Twenty-Twoのカラーパレット

ここで、特定のブロックのデフォルト背景色を変更したいとします。ブロックの背景に別の色を選択すると、その要素のbackground-colorプロパティに対応するCSSの変数が割り当てられます。以下の画像はその一例です。

 Twenty Twenty-Twoで背景色として使われている色
Twenty Twenty-Twoで背景色として使われている色

これだけで完了です。カスタマイザーにカスタムCSSを追加したり、子テーマを作成したりする必要は一切ありません。

さらにいくつかの例を用いて、Twenty Twenty-Twoのグローバルスタイルについてもう少し学んでいきましょう。

フォントの設定

Typography」パネルでは、サイトのテキストリンクのフォントスタイルの共通設定ができます。

各アイテムにつき、フォントファミリー、サイズ、行の高さを調整できます。

 Twenty Twenty-Twoのフォント設定
Twenty Twenty-Twoのフォント設定

これらの設定を生成するコードはどこにあるのでしょうか?

Twenty Twenty-Twoのtheme.jsonを開き、typographyのセクションを探します。次のような設定があるはずです。

{
	"version": 1,
	"settings": {
		"appearanceTools": true,
		"typography": {
			"dropCap": false,
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				}
			],
			"fontSizes": [
				{
					"name": "Small",
					"size": "1rem",
					"slug": "small"
				},
				{
					"name": "Normal",
					"size": "1.125rem",
					"slug": "normal"
				},
				{
					"name": "Medium",
					"size": "1.75rem",
					"slug": "medium"
				},
				{
					"name": "Large",
					"size": "clamp(1.75rem, 3vw, 2.25rem)",
					"slug": "large"
				},
				{
					"name": "Huge",
					"size": "clamp(2.5rem, 4vw, 3rem)",
					"slug": "huge"
				}
			]
		},
}

上記のコードには2種類のフォントファミリーと5つのフォントサイズが記載されています。

このコードはグローバルスタイルの「Typography」では次のように表示されます。

 Twenty Twenty-Twoのフォントスタイル
Twenty Twenty-Twoのフォントスタイル

行の高さの設定を生成するコードはどこにあるのか気になる方もいるかもしれませんが、実は、Twenty Twenty-Twoにはそれ専用の設定は存在しません。appearanceToolsプロパティにより設定を行います。これはいくつかの設定の宣言に対するショートカットとなっています(詳しくは後述)。

レイアウトと外観の設定

グローバルスタイルサイドバーの最後の項目は「Layout」です。本稿執筆時点では、扱うことのできる設定はpadding(余白)のみです。

 Twenty Twenty-Twoのレイアウト設定
Twenty Twenty-Twoのレイアウト設定

Twenty Twenty-Twoのレイアウトパネルは一度に複数の設定ができるブーリアンであるappearanceTools設定プロパティで有効になっています。

{
	"settings": {
		"appearanceTools": true
	}
}

"appearanceTools": true次の宣言ブロックに取って代わります。

{
	'settings': {
		'border': {
			'color': true,
			'radius': true,
			'style': true,
			'width': true
		},
		'color': {
			'link': true
		},
		'spacing': {
			'blockGap': true,
			'margin': true,
			'padding': true
		},
		'typography': {
			'lineHeight': true
		}
	}
}

これでtheme.jsonファイルで定義された設定がグローバルスタイルの設定画面とどのように対応しているか、お分かり頂けたはずです。

この新しいデフォルトテーマの全容を把握するにはもう一つ欠かせない項目が残っています。それはブロックパターンです。

Twenty Twenty-Twoのブロックパターン

Twenty Twenty-Twoはパターンのコレクションと表現できるかもしれません。Twenty Twenty-Twoには既存のブロックパターンが豊富に用意されており、これを用いて独創的なネスト型ブロック構造を組むことができます。

ここでのキーワードは「ユーザーの自由度の向上」です。ブロックパターンを利用すると、例えHTMLやCSSの知識が一切なくても、魅力的なポートフォリオからワンページのプロモーションサイトまで、あらゆるページを作成できます。

クライアントサイト向けに、高速、安全、開発者に優しいホスティングが必要ですか?KinstaはWordPress開発者を念頭に置き構築されており、豊富なツールと強力なダッシュボードが搭載されています。まずは、当社のホスティングプランをご覧ください。

しかも、WordPress 5.9では新機能であるパターンエクスプローラーによりパターンの仕組みが大幅に改良されました。パターンエクスプローラーとはフルスクリーンモードでパターンを確認できる機能です。

Twenty Twenty-Twoのパターンエクスプローラー
Twenty Twenty-Twoのパターンエクスプローラー

また、この新しい機能ではパターンディレクトリから直接、簡単にブロックパターンをインポートできます。WordPress利用者や開発者の可能性が大きく広がる機能であり、将来的にはより一層普及することが予想されます。

WordPressのパターンディレクトリ
WordPressのパターンディレクトリ

Twenty Twenty-Twoには65種類を超える豊富なパターンが用意されており、5つのカテゴリーに分類されています。

Twenty Twenty-Twoのパターンカテゴリー
Twenty Twenty-Twoのパターンカテゴリー

これらの便利なパターンはTwenty Twenty-Twoのテンプレートやテンプレートパーツと抜群の相性で、編集作業が非常に快適になります。

デュオトーンのレイヤー画像
デュオトーンのレイヤー画像
ヘッダーと説明付きの動画
ヘッダーと説明付きの動画
テキスト付きの画像2枚
テキスト付きの画像2枚

まだブロックパターンを利用したことがない方のために、これが便利な機能とみなされている理由を、簡単な例を用いてご説明します。

例えば、インデックスと個別記事のテンプレートからデフォルトのフッターを削除し、別のTwenty Twenty-Twoのブロックパターンと置き替えたいとします。

外観」もしくはWordPressのフロントエンドのツールバーのボタンからサイトエディタを立ち上げ、インデックステンプレートをカスタマイズします。

Index」をクリックすると、ヘッダーのドロップダウンメニューが表示され、ページで利用できるテンプレートのエリアの一覧が確認できます。「Footer」の横にある三点リーダー(縦)をクリックし、「Edit Footer」をクリックします。

テンプレートインスペクター
テンプレートインスペクター

先に述べたとおり、独立したテンプレートパーツエディタが立ち上がります。

独立したテンプレートパーツエディタに表示されるデフォルトのTwenty Twenty-Twoフッター
独立したテンプレートパーツエディタに表示されるデフォルトのTwenty Twenty-Twoフッター

ブロック挿入画面を開き、「Patterns」をクリックします。

新しく追加されたパターンエクスプローラー機能を開き、「Twenty Twenty-Two Footers」のカテゴリーを選択し、好みのフッターを選びます。

 Twenty Twenty-Twoのパターンエクスプローラー
Twenty Twenty-Twoのパターンエクスプローラー

必要に応じてブロックを追加、編集します。

独立したテンプレートパーツエディタでフッターを編集
独立したテンプレートパーツエディタでフッターを編集

変更内容に満足したら、ヘッダーを保存し、サイトを再確認しましょう。

以下の画像はそれぞれ異なるヘッダーとフッターの変更を加えた3つのテンプレート(インデックス、固定記事、区切りなしの固定記事)の比較です。

Twenty Twenty-Twoの各種テンプレートを使用したヘッダーとフッターのカスタマイズ(比較)
Twenty Twenty-Twoの各種テンプレートを使用したヘッダーとフッターのカスタマイズ(比較)

Twenty Twenty-Twoを子テーマで拡張する

ブロックテーマの子テーマを作成するのは通常のテーマの子テーマを作成するのとは大きく違います。

ただ、ブロックテーマの構造を一度理解しさえすれば、Twenty Twenty-Twoやそれ以外のブロックテーマの子テーマを難なく作成できるはずです。

それでは早速Twenty Twenty-Twoを使用したサイトの雰囲気を調整する方法を学んでいきましょう。

1. Twenty Twenty-Twoの子テーマを設定する

/wp-content/themesディレクトリ内に新規フォルダを作成し、任意の名前をつけます(テーマ開発の規格に準じたもの)。今回の例では子テーマのフォルダを「twentytwentytwo-child」と名付けました。

次はstyle.cssファイルが必要です。お好きなコードエディタを開き、次のスタイルシートを作成します。

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/

ここでも、必要に応じて項目を編集しましょう。

これで子テーマをプレビューできるようになります。管理画面の「外観」>「テーマ」から有効化できます。

2. 共通設定をカスタマイズする

WordPress 5.9以降、theme.jsonファイルを持つ子テーマには親テーマの設定が適用されるようになりました。子テーマのtheme.jsonファイルで特定のスタイルを定義した場合、それは親テーマのスタイルに加えて適用されます。

そのため、theme.jsonファイルで親テーマのスタイルを全て定義し直す必要はなく、必要なものだけ追加すれば大丈夫です。

カスタムカラーパレットの設定方法

Twenty Twenty-Twoの子テーマの設定で一番簡単なのはカラーパレットの置き替えです。子テーマのtheme.jsonで次の通り新しいカラーパレットを定義するだけです。

{
"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#FFFFFF",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#001F29",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#D6FDFF",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FDFCDC",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#FED9B7",
					"name": "Tertiary"
				},
				{
					"slug": "accent",
					"color": "#E94435",
					"name": "Accent"
				}
			]
		}
	}
}

ファイルを保存しサイトエディタへ戻ります。デフォルトのカラーパレットが上記で定義したものに置き替わっているはずです。

子テーマのカラーパレット
子テーマのカラーパレット

色はパレット自体の順番に表示されます。名前はベストプラクティスGithubで議論されている命名規則に準ずる必要があります。

theme.jsonの色についてもっと詳しく知りたい方はCarolina Nymark氏による詳しい記事をご覧下さい。

独自のデュオトーンフィルターの設定

デフォルトのデュオトーンを好みのフィルターに置き換えることもできます。

子テーマのtheme.jsonで設定のpaletteプロパティと同じ階層に、次のコードを追加するだけでOKです。

{
"version": 2,
	"settings": {
		"color": {
			"palette": [...],
			"duotone": [
				{
					"colors": [
						"#001F29",
						"#FFFFFF"
					],
					"slug": "default-filter",
					"name": "Default filter"
				}
			]
		}
	}
}

ファイルを保存し、ブロックエディタで結果を確認します。デュオトーンフィルターが一つだけ表示されているはずです。

デュオトーンフィルターの子テーマ
デュオトーンフィルターの子テーマ

3.ブロックのスタイルをカスタマイズする

先ほどもご説明したとおり、WordPress 5.9ではtheme.jsonの設定を調整し、グローバルスタイルインターフェースからスタイルを変更できます。

ブロックのスタイルは、ブロックが対応するblock.jsonファイルで特定の機能のサポートを宣言している場合にのみ、グローバルスタイルインターフェースから編集することができます。しかし、子テーマのtheme.jsonから、デフォルトのブロック設定を上書きすることは可能です。

ここで、記事タイトルとグループブロックのスタイルを上書きしたいとします。次の通り、追加または上書きしたいスタイルを定義するだけでOKです。

{
"version": 2,
	"settings": {...},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
				},
				"color": {
					"background": "var(--wp--preset--color--tertiary)"
				},
				"spacing": {
					"padding": "var(--wp--custom--spacing--small)"
				}
			},
			"core/group": {
				"spacing": {
					"margin": {
						"top": "0",
						"bottom": "0"
					}
				}
			}
		}
	}
}

上記の例では、core/post-titleのフォントファミリー、背景色、余白の値を変更し、core/groupの上下のマージンも変更しました。

公開されるサイトは次のようになります。

カスタマイズした記事タイトルのブロック
カスタマイズした記事タイトルのブロック

レビューは以上です。

今回の記事の趣旨から外れてしまうため、子テーマについてはこれ以上深掘りしませんが、GithubにはTwenty Twenty-Twoの子テーマの例が他にも掲載されています。

Twenty Twenty-Twoはこれまでになく柔軟で、軽量で、カスタマイズ性の高いデフォルトテーマです✨こちらのガイドではそれ以外にもたくさんの特徴をご紹介中 👇Click to Tweet

まとめ

今回はWordPressのこれまでで最も柔軟性の高い、新しいデフォルトテーマ「Twenty Twenty-Two」とその機能を詳しくご紹介し、WordPress 5.9で導入された新しい情報アーキテクチャについても解説しました。さらに、新しいグローバルスタイルのインターフェースにも少し触れました。

数々の魅力的な機能の開発が進められており、新しい編集機能は、より強力で信頼性が高く、機能的になっていることは間違いなさそうです。

WordPressの新機能は次々と登場する一方で、削除されるものや、重要視されなくなるものもあります。多くのユーザーが、カスタマイザーはどうなるのか、既存のテーマとの互換性はどのように維持されるのかといったことを心配していることでしょう。

ただし、従来のテーマからブロックテーマへいきなり完全に切り替わってしまう心配はご無用です。現在、4種類のテーマが用意されています。

  • ブロックテーマ:フルサイト編集向けに設計されたテーマ
  • ユニバーサルテーマ:カスタマイザー、サイトエディタ両方で利用できるテーマ
  • ハイブリッドテーマ:theme.jsonなどのフルサイト編集機能に対応している従来のテーマ
  • クラシックテーマ:PHPテンプレート、phpなどを備えたテーマ

このようにたくさんの選択肢が用意されています。まだブロックテーマに切り替えるのに躊躇している方にとっては嬉しいニュースかもしれません。

あとはあなた次第です!あなたは思い切って今すぐブロックテーマに切り替える心の準備はできていますか?コメント欄で是非ご意見をお聞かせ下さい。


時間とコストを節約し、サイトパフォーマンスを最大化します。

  • 24時間年中無休でお問い合わせいただけるWordPressホスティングの専門家からの即座なサポート。
  • Cloudflare Enterpriseとの統合。
  • 世界各地に設置された34カ所のデータセンターでグローバルなオーディエンスに対応。
  • アプリケーションのパフォーマンス監視機能を使った最適化。

長期契約は必要ではありません。サーバー移行のサポート、30日間の返金保証など、さまざまなサービスを提供しております。お客様に最適なプランをご提案いたしますので、お気軽にお問い合わせください。または、当社のプランをご確認ください。