WordPress6.1 RC1 が 公開され、いよいよ WordPress6.1 のリリース（2022年11月1日予定）が近づいてきました。
WordPress6.1では新しいデフォルトテーマ「Twenty Twenty-Three」が搭載される予定です。
※「Twenty Twenty-Three」は WordPress6.1以降で使えます。
【参考】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)」で動作します。
１カラムになっています。サイドバーはありません。
ヘッダー/フッター幅は1200pxになってます。
ウィジェットエリアはありません。すべてブロックでまかなうようになっています。
コンテンツ部分
コンテンツ標準幅は 650px で幅広は 1200pxになっています。
これはtheme.jsonに以下のように layout の指定があるからです。
"settings": {
"layout": {
"contentSize": "650px",
"wideSize": "1200px"
}
}
サイズを変更すると公開ページも管理画面も反映されますので簡単ですね。
Font
フォントは「システムフォント」と「DM Sans」「IBM Plex Mono」「Inter」「Source Serif Pro」が選べるようになっています。
対応しているブロックで個別に設定できるようになっています。
※ブロックを選択後タイポグラフィ横の3点リーダーをクリックしてみてください。
「システムフォント」とは theme.json で設定されています。
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
レスポンシブ
テーマとしてのCSSブレイクポイントはありません。ブロック次第となります。
管理画面
ブロックテーマを選択している時だけ以下のようにメニュー部分が変更されています。
サイトのデザインは 外観→「エディタ」で行います。
ブロックテーマではクラシックテーマであったカスタマイザーはサイドメニューには出てきません。
カスタマイザーがサイドメニューには出てこないので「追加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で使われています。
表示スタイル
表示スタイルでは予め用意しているテーマスタイルを選択する事でサイトのカラーを変更する事ができます。
スタイルアイコンをクリックして、表示スタイルをクリックしてください。
テンプレート
フルサイト編集(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 |
 |
 |
 |
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とマージしてくれます。
…という事で リリースまでに更新された部分は、また追って追記していきたいと思います。
