WordPress6.1 新デフォルトテーマ Twenty Twenty-Three をチェックしています


 
WordPress6.1 RC1 が 公開され、いよいよ WordPress6.1 のリリース(2022年11月1日予定)が近づいてきました。
Twenty Twenty-Three

WordPress 6.1 をチェックしています

 

WordPress6.1では新しいデフォルトテーマ「Twenty Twenty-Three」が搭載される予定です。
※「Twenty Twenty-Three」は WordPress6.1以降で使えます。

TT3 default theme: Announcing style variation selections

 
【参考】New Twenty Twenty-Three Default Theme Now in Development
https://wptavern.com/new-twenty-twenty-three-default-theme-now-in-development

2022/11/02 WordPress6.1がリリースされテーマ「Twenty Twenty-Three」も公開されました。
Twenty Twenty-Three By WordPress.org https://wordpress.org/themes/twentytwentythree/
 

「Twenty Twenty-Three」は ブロックテーマになっており、WordPress6.1 Beta版 以降の WordPress に付属しています。また最新版が必要な場合はGitHubからダウンロードできます。

 

Twenty Twenty-Three は Twenty Twenty-Two の機能を取り除いた最小限のバージョンで、WordPress コミュニティのメンバーによってデザインおよび提出された 10 の異なるスタイルのバリエーションのコレクションが含まれています。
https://core.trac.wordpress.org/ticket/56383

 
GitHub – WordPresstwentytwentythree
https://github.com/WordPress/twentytwentythree
 
 
ということで、「Twenty Twenty-Three」はまだ開発途中で今後 変わっていくと思いますが「Twenty Twenty-Three」をチェックしていきたいと思います。
「Twenty Twenty-Three」は「Twenty Twenty-Two」と同様に ブロックテーマで WordPress5.9 からの機能「フルサイト編集(FSE)」でサイト全体を編集する事ができます。
※「Twenty Twenty-Three」は WordPress6.1以降で使えます。

 

フルサイト編集(FSE)

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

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

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

 
 

外観

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

 

コンテンツ部分

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

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

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

 

Font

フォントは「システムフォント」と「DM Sans」「IBM Plex Mono」「Inter」「Source Serif Pro」が選べるようになっています。
Twenty Twenty-Three フォント

対応しているブロックで個別に設定できるようになっています。
※ブロックを選択後タイポグラフィ横の3点リーダーをクリックしてみてください。

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

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

 

レスポンシブ

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

 
 

管理画面

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

ブロックテーマではクラシックテーマであったカスタマイザーはサイドメニューには出てきません。
 

カスタマイザーがサイドメニューには出てこないので「追加CSS」を使う事ができません。
管理画面にログイン後、URLを http~/wp-admin/customize.php のように手打ちしたらカスタマイザーに入れます。

どうしても簡単に「追加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

 

ブロックパターン

「Twenty Twenty-Three」では オリジナルのブロックパターンが付属しています。
それぞれ以下のカテゴリ内にありますのでチェックしてみてください。

featuredカテゴリ 「Call to action」
footerカテゴリ 「Default Footer」
queryカテゴリ「Post Meta」
隠しブロックパターン「Hidden 404」※404.htmlで使われています。
隠しブロックパターン「Hidden Comments」※comments.htmlで使われています。
隠しブロックパターン「Hidden No Results Content」※search.htmlで使われています。

 

表示スタイル

表示スタイルでは予め用意しているテーマスタイルを選択する事でサイトのカラーを変更する事ができます。
スタイルアイコンをクリックして、表示スタイルをクリックしてください。
Twenty Twenty-Three 表示スタイル

 
 

テンプレート

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

partsフォルダ
 comments.html
 footer.html
 header.html
 post-meta.html

templateフォルダ
 404.html
 archive.html
 blank.html
 blog-alternative.html
 home.html
 index.html
 page.html
 page-no-separators.html
 search.html
 single.html
 single-no-separators.html
 with-cover-block.html
 with-featured-image.html

 

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

header.html post-meta.html comments.html footer.html comments.html post-meta.html 投稿タイプ
404.html page
archive.html
blank.html page,post
blog-alternative.html page
home.html
index.html
page.html page
page-no-separators.html page,post
search.html
single.html post
single-no-separators.html page,post
with-cover-block.html page,post
with-featured-image.html page,post

 

アイキャッチ画像は投稿・固定ページのデフォルトテンプレートではオーバレイがあたっていて暗い画像になります。。
アイキャッチ画像を表示したい場合は、以下のテンプレートに変更するかテンプレートを修正する必要があります。
「With Featured Image(オーバレイ無しでアイキャッチ画像表示)」
「With Cover Block(タイトルをカバーブロック(アイキャッチ画像バック)で表示)」

デフォルト With Featured Image With Cover Block
Twenty Twenty-Three デフォルトテンプレート Twenty Twenty-Three With Featured Image Twenty Twenty-Three With Cover Block

 
 

CSS

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

 
 

functions.php

「Twenty Twenty-Three」には functions.php がありません。
でもカスタマイズ用として functions.php を作って置いたらちゃんと読み込んでくれますので安心してください。

■2022/10/25追記
functions.phpが追加されました。
 
 

子テーマ

子テーマも従来の方法どおりに作れます。
templates や partsフォルダ を作ってオリジナルテンプレートを置くだけで 子テーマのを読むようになります。
※サイトエディタで編集したら、さのテンプレート(テンプレートパーツ)ファイルは読まなくなります。

theme.json も設置すると親テーマのtheme.jsonとマージしてくれます。

 

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