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

Posted on Update by admin

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からダウンロードできます。

2022/01/26 リリースされました。
WordPress 5.9　https://wordpress.org/news/2022/01/josephine/

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)」で動作します。
１カラムになっています。サイドバーはありません。
ヘッダー/フッター幅は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 タイポグラフィ
タイポグラフィ(フォントファミリ・サイズ・行の高さ)や色、レイアウトが設定できます。

　

右上の３点リーダーからツールの「エクスポート」を選択するとテンプレートとテンプレートパーツをダウンロードできます。
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
　
　

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




スポンサードリンク