WordPress5.9 新デフォルトテーマ Twenty Twenty-Two と フルサイト編集(FSE) をチェックしています

WordPress5.9 Twenty Twenty-Two

WordPress5.9 Beta が 公開され、いよいよ WordPress5.9 のリリース(2022年1月25日予定)が近づいてきました。

WordPress5.9 をチェックしています

 

WordPress5.9では新しいデフォルトテーマ「Twenty Twenty-Two」が搭載される予定です。

Introducing Twenty Twenty-Two

「Twenty Twenty-Two」は WordPress5.9beta版 以降の WordPress に付属しています。また最新版が必要な場合はGitHubからダウンロードできます。

WordPress 5.9 RC1
https://wordpress.org/news/2022/01/wordpress-5-9-rc-1/

GitHub – WordPresstwentytwentytwo
https://github.com/WordPress/twentytwentytwo

ということで、「Twenty Twenty-Two」はまだ開発途中で今後 変わっていくと思いますが「Twenty Twenty-Two」をチェックしていきたいと思います。
「Twenty Twenty-Two」は新しいタイプのブロックテーマで WordPress5.9 からの機能「フルサイト編集(FSE)」でサイト全体を編集する事ができます。
ここではフルサイト編集(FSE) の機能も併せて説明致します。

 

フルサイト編集(FSE)

「Twenty Twenty-Two」テーマの特徴はブロックテーマになっていて、サイト全体を「フルサイト編集(FSE)」で編集できるようになっています。

管理者はphpの知識が無くてもサイト全体のデザイン・レイアウト等をサイトエディタ上で構成させる事ができます。
また、WordPess5.8から採用された theme.json を利用する事で更に詳細なブロック用CSS設定やブロックオプションを設定する事ができます。

【参考】Block Theme
https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overview/

 
 

外観

WordPress5.9 Twenty Twenty-Two 外観
「Twenty Twenty-Two」は WordPress 5.9 の新しい機能「フルサイト編集(FSE)」で動作します。
1カラムになっています。サイドバーはありません。
ヘッダー/フッター幅は1000pxになってます。
ウィジェットエリアはありません。すべてブロックでまかなうようになっています。

デザインは Figma で作られています。
【参考】Twenty Twenty-Two | Figma
https://www.figma.com/file/76mfUcaK4QDlrXElk8MK3H/Twenty-Twenty-Two
 
Figmaて何? て方はこちらをご覧ください。
【参考】Figma WordPress デザインライブラリを活用してみよう
https://ja.wordpress.org/2021/05/01/getting-started-with-the-figma-wordpress-design-library/

 

コンテンツ部分

コンテンツ標準幅は 650px で幅広は 1000pxになっています。
これはtheme.jsonに以下のように layout の指定があるからです。

	"settings": {
		"layout": {
			"contentSize": "650px",
			"wideSize": "1000px"
		}
	}

サイズを変更すると公開ページも管理画面も反映されますので簡単ですね。

 

コンテンツ部分では左右1.25remの余白(padding)が設けてありますので全幅にしてもそこまでになります。
WordPress5.9 Twenty Twenty-Two コンテンツ部分
これらは以下のようにテンプレートに直書きされています。

<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">

※ここを変更する場合はテンプレートファィルを変更するしかないみたいです。

 

アイキャッチ画像は幅広設定(1000px)でタイトル下に表示されます。
WordPress5.9 Twenty Twenty-Two アイキャッチ
※ここは「エディタ」→「テンプレート」「Single Post」で変更できます。

 

Font

フォントは「システムフォント」と「Source Serif Pro」を選べるようになっています。
WordPress5.9 Twenty Twenty-Two フォント
WordPress5.9 Twenty Twenty-Two フォント
対応しているブロックで個別に設定できるようになっています。

「システムフォント」はtheme.jsonで設定されています。

	"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",

 

レスポンシブ

テーマとしてのCSSブレイクポイントはありません。ブロック次第となります。

 
 

管理画面

ブロックテーマを選択している時だけ以下のようにメニュー部分が変更されています。
WordPress5.9 Twenty Twenty-Two 管理画面
サイトのデザインは 外観→「エディタ」で行います。

いままであったカスタマイザーはサイドメニューには出てきません。(ブロックテーマを選択している時だけ)
外観→テーマで カスタマイズをクリックしてもサイトエディタに行きます。
WordPress5.9 Twenty Twenty-Two カスタマイザー

 

カスタマイザーがサイドメニューには出てこないので「追加CSS」を使う事ができません。
そこで「追加CSS」へのリンクをメニューに表示させる参考Tipsを紹介します。

/**
 * Add an Appearance sub-menu link to Additional CSS.
 * ver5.9.0
 */
function nendebcom_add_custom_css_submenu() {
	add_submenu_page(
		'themes.php',
		__( 'Additional CSS' ),
		__( 'Additional CSS' ),
		'edit_theme_options',
		admin_url( 'customize.php?autofocus[section]=custom_css' )
	);
}
add_action( 'admin_menu', 'nendebcom_add_custom_css_submenu' );

※これもいずれ使えなくなるやもしれません。

【参考】Customizer Will Disappear for Some Block Theme Users With WordPress 5.9
https://wptavern.com/customizer-will-disappear-for-some-block-theme-users-with-wordpress-5-9

 

もひとつ、カスタマイザーにしか無かったサイトアイコン設定はサイトロゴブロック保存時に設定できるようになりました。
【参考】Site Logo: Add option to set site icon from Site Logo block #35892
https://github.com/WordPress/gutenberg/pull/35892

 


テーマエディタとプラグインエディタも「ツール」に移動されました。

 

サイトエディタ

管理画面 外観→「エディタ」をクリックすると【エディター】→ サイト の編集ページへ行きます。
WordPress5.9 Twenty Twenty-Two サイトエディタ
ここはトップページ(home.html)のヘッダーやフッターのデザイン・構成を変更していきます。

まず、ヘッダー部分では「サイトロゴ」「サイトのタイトル」と「Navigation(メニュー)」を触って行くことになるかと思います。
※「Twenty Twenty-Two」は ヘッダー用やフッター用のブロックパターンも用意していますので変更してみるのもいいかもしれません。

 

他へ移動する場合は左上「W」マークをクリックするとサイドメニューが出てきます
WordPress5.9 Twenty Twenty-Two サイトエディタ

 
ここで「ダッシュボード」をクリックすると 管理画面トップへ戻れます。
WordPress5.9 Twenty Twenty-Two サイトエディタ

 

他、テンプレートを編集する場合はそれぞれのカテゴリをクリックしてください。
 テンプレート
WordPress5.9 Twenty Twenty-Two サイトエディタ
 テンプレートパーツ
WordPress5.9 Twenty Twenty-Two サイトエディタ

 

変更したテンプレートはテーマのテンプレートを書換えるのではなくデータベースに登録されます。
データベースに登録されると該当のテンプレート(html)ファイルは使わなくなります。

いろいろやりすぎてテンプレート編集に失敗した場合でも 該当のテンプレートエディタで、中央上のボタンからテンプレートを初期化する事ができます。
WordPress5.9 Twenty Twenty-Two サイトエディタ

または、テンプレート/テンプレートパーツから該当のテンプレートの3点リーダーをリックすると初期化する事ができます。
WordPress5.9 Twenty Twenty-Two テンプレート
※初期化するとテーマのテンプレートを使うようになります。

 

右上のスタイルアイコンをクリックするとサイト全体のスタイルを設定できます。
WordPress5.9 Twenty Twenty-Two タイポグラフィ
タイポグラフィ(フォントファミリ・サイズ・行の高さ)や色、レイアウトが設定できます。

 

右上の3点リーダーからツールの「エクスポート」を選択するとテンプレートとテンプレートパーツをダウンロードできます。
WordPress5.9 Twenty Twenty-Two
編集したテンプレートとテンプレートパーツをバックアップとったりこれをベースに配布用テーマを作ったりできますね。

 

「Twenty Twenty-Two」の場合、トップページは背景黒色のテンプレート(header-small-dark.html)を使い、他のページは主に背景色無しのテンプレート(header.html)を使うようにしています。
トップページ(home.html) のコンテンツ部分は「クエリーループ」ブロックを使っています。
 
トップページのコンテンツ部分のデザインを変更する場合は「エディタ」で編集するか、固定ページ(テンプレート:page-home.html)でフロントページを作る従来の方法になります。
※リスト表示をするとブロック構成がわかりやすく確認する事ができます。
WordPress5.9 Twenty Twenty-Two リスト表示 

 

ブロックパターン

「Twenty Twenty-Two」では オリジナルのブロックパターンが付属しています。
それぞれ以下のカテゴリ内にありますのでチェックしてみてください。
「Twenty Twenty-Two General」
「Twenty Twenty-Two Footers」
「Twenty Twenty-Two Headers」
「Twenty Twenty-Two Posts」
「Twenty Twenty-Two Pages」
※ヘッダーやフッター用のはセットになってますので現在のと差し替える感じになります。

※WordPress5.9よりブロックパターンの[Explore]ボタンをクリックすると大きな画面でブロックパターンを探す事ができるようになりましたのでイメージしやすくなってます。
WordPress5.9 Twenty Twenty-Two ブロックパターン

【参考】[Patterns]: Browse Patterns in a Modal #35773
https://github.com/WordPress/gutenberg/pull/35773

 
 

テンプレート

フルサイト編集(FSE)のテンプレートは従来のテーマとは違います。
テンプレートは テーマの block-template-partsフォルダ や block-templateフォルダ に入っています。
ヘッダーはトップページ用と他ページ用と分けています。

partsフォルダ
 footer.html
 header.html
 header-large-dark.html
 header-small-dark.html

templateフォルダ
 404.html
 archive.html
 blank.html
 home.html
 index.html
 page.html
 page-large-header.html
 page-no-separators.html
 search.html
 single.html
 single-no-separators.html

※phpではなくhtmlファイルになっています。

 

ヘッダー用テンプレートパーツは3種類あります。それぞれどんな表示になるかのサンプルは以下のようになります。

WordPress5.9 Twenty Twenty-Two header-small-dark WordPress5.9 Twenty Twenty-Two header-large-dark WordPress5.9 Twenty Twenty-Two header
header-small-dark.html header-large-dark.html header.html

 

テンプレートパーツの振り分けは以下のようになっています。

footer.html header.html header-large-dark.html header-small-dark.html
404.html
archive.html
blank.html
home.html
index.html
page.html
page-large-header.html
page-no-separators.html
search.html
single.html
single-no-separators.html

※no-separatorsの有/無しはタイトルの下に区切り(hr)があるかどうかの違いです。
※blank.htmlは「投稿コンテンツ」ブロックのみになっています。
 

テンプレートについてはこちらのディスカッションをご覧ください。
テンプレートの優先順や従来のテーマのphpテンプレートを使ったハイブリッドテーマの可能性 等 なかなか興味深いです。

[Discussion] Hybrid themes: Templating hierarchies #29024
https://github.com/WordPress/gutenberg/issues/29024

 
 

CSS

「Twenty Twenty-Two」の style.css には なんと 少しだけしか CSSコードが入っていません。
ほぼ WordPressコアのブロツク用のCSSと theme.json に設定されている CSSで表現しようとしています。

 
 

子テーマ

子テーマも従来の方法どおりに作れます。
template や partsフォルダを作ってオリジナルテンプレートを置くだけで こちらを読むようになります。
theme.json も設置すると親テーマのtheme.jsonとマージしてくれます。

theme.jsonでカラーパレットを変更するという事例が、いくつか試しているようなので参考にしてみたらいかがですか?
【参考】Try a few Twenty Twenty-Two child themes #292
https://github.com/WordPress/theme-experiments/pull/292

【参考】Add initial blue variant.
https://github.com/WordPress/theme-experiments/pull/292/commits/35509b05acaba7da5a9060ffa362e8ed140eabe0
 
 

…という事で リリースまでに更新された部分は、また追って追記していきたいと思います。