いよいよ WordPress5.3 のリリース（11月12日予定）が近づいてきました。WordPress5.3では新しい公式テーマ「Twenty Twenty」が搭載される予定です。

「Twenty Twenty」は 最新の「Gutenberg v6.5.0(グーテンベルク)」に対応しておりますが、WordPress4.7 から利用できるようになっており「Gutenberg(グーテンベルク)」が無い環境でも使えるようです。

「Twenty Twenty」は WordPress5.3beta版以降のWordPressに付属しています。また最新版が必要な場合はGitHubからダウンロードできます。
GitHub – WordPress/twentytwenty: Default theme for Twenty Twenty
https://github.com/WordPress/twentytwenty

ということで、「Twenty Twenty」はまだ開発途中で今後 変わっていくと思いますが「Twenty Twenty」をチェックしていきたいと思います。

　

外観

１カラムになっています。サイドバーはありません。
ウィジェットエリアはフッター部分左右に２か所だけになっています。

コンテンツ部分

ヘッダ(タイトル)部分では特徴のある作り方になってます。タイトルのインパクトを大きくしたいのか font-size は 84px で表示されます。でかい、なんせでかい。
アイキャッチ画像は最大1200pxでタイトル下に表示されます。
標準の font-size は 21px になってます。※ここはブロックエディタの機能でブロックごとに変更できます。

コンテンツ幅は 580px と だいぶ狭いコンテンツ幅になっています。
ブロックで「幅広」設定にすると 1200px で使えるようになりますが いちいちセットするのがめんどくさいのと1200px は相対的に広すぎる気がします。
「全幅」設定した画像では 画面いっぱいで表示されるようになっています。

　

font

fontは「Inter」というのが使われています。fontのファイルは「Twenty Twenty」に入ってます。
The Inter typeface family
https://rsms.me/inter/

アイコンは「Font Awesome」が使われています。こちらも必要なバーツが「Twenty Twenty」に入ってます。
Font Awesome
https://fontawesome.com/

　

レスポンシブ

レスポンシブでのCSSブレイクポイントは以下のようになっています。
@media ( min-width: 479px ) {}
@media ( min-width: 480px ) {}
@media ( min-width: 599px ) {}
@media ( min-width: 600px ) {}
@media ( min-width: 660px ) {}
@media ( min-width: 700px ) {}
@media ( min-width: 782px ) {}
@media ( min-width: 1000px ) {}
@media ( min-width: 1220px ) {}
@media ( min-width: 1280px ) {}
@media ( min-width: 1330px ) {}

　

オプションテンプレート

投稿や固定ページ用のテンプレートでは標準テンプレート以外では「Cover Template」と「Full Width Template」があります。

「Cover Template」にするとアイキャッチ画像がヘッダー部分設置され、さらにカスタマイザーで画像透過や背景色、文字色など変更できます。

「Cover Template」を固定ページで作ってトップページにするのもいいかと思います。

　
　

ウィジェット

ウィジェットエリアはフッターウィジェットだけです。

ウィジェットは２列で表示されるようになっています。

サイドバーがありませんので コンテンツ内でウィジェットを使いたい場合はブロックを使う事になります、
標準のウィジェット(アーカイブ・カテゴリ・最新の記事・最新のコメント等) は「Gutenberg(グーテンベルク)」のブロックで設置できるようになっていますので それを使う前提になっているようです。

現状では 標準でないウィジェット(他のプラグインに付属されているウィジェット)を使いたい場合は ウィジェットをブロック化したプラグインを探すか
ウィジェットをショートコード化 して使えるプラグイン「Widget Shortcode」を利用すれば 「Gutenberg(グーテンベルク)」で ショートコードとしてウィジェットを使えるようにできます。

　
　

メニュー

メニューは５種類あります。

「Desktop Horizontal Menu」は リンクをヘッダ表示して、「Desktop Expanded Menu」「Mobile Menu」は 「・・・」クリックで展開します
「Footer Menu」は フッタ部分の一番上に表示されます。
「Social Menu」はSNSへのリンクを設定すると該当のアイコン表示されます。
※カスタマイザーでも設定できます。

　
　

テーマカスタマイザー

テーマカスタマイザーで「コンテンツのオプション」を設定できます。

　

色

ヘッダ/フッタとコンテンツ部分の背景色と リンクの色を変更できます。

濃い色になると自動で文字色も反転するようになってます。

　

テーマオプション

キーワード検索をヘッダに表示にするかを設定できます。
トップページやアーカイブ(投稿一覧)で コンテンツを全部表示か抜粋(一部だけ)表示にするかを設定できます。

　

Cover Template

ここでは「Cover Templateページ」の画像透過や背景や文字色などいろいろ触れます。

※ページ個別には設定できないので複数作る場合は注意してください。
　
　

テンプレート

テンプレートはとてもシンプルになっています。

サイトシーンによるテンプレート読込

	トップ	投稿	固定ページ	アーカイブ	カテゴリ/タグ	サイト内検索	404	アタッチメント
index.php	○			○	○	○
singular.php		○	○					○
404.php							○
header.php	○	○	○	○	○	○	○	○
footer.php	○	○	○	○	○	○	○	○

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

　
　

ちょっとテスト

コンテンツ幅変更

コンテンツ幅は 580px と だいぶ狭いなと思うので 簡単に変更できるかテストしてみました。
公開画面と管理画面のCSS と $GLOBALS[‘content_width’] を上書きしてみます。

以下のコードを my-plugin.php に張り付けてください。

/*
 * 公開画面での Content幅を 760px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_org_style() {
	echo '<style>
	.section-inner.thin,
	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){
		max-width: 76rem;
	}
	</style>';
}
add_action( 'wp_head', 'twentytwenty_org_style', 99 );


/*
 * 管理画面での Content幅を 760px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_admin_style() {
	// Content幅 760 + 30
	echo '<style>
	.wp-block {
	    max-width: 790px;
	}
	.wp-block[data-align="wide"] {
	    max-width: 1200px;;
	}
	.wp-block[data-align="full"] {
	    max-width: none;
	}
	</style>';
}
add_action( 'admin_print_styles', 'twentytwenty_admin_style', 99 );


/*
 * content_width を 760px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_content_width() {
	// This variable is intended to be overruled from themes.
	$GLOBALS['content_width'] = 760;
}
add_action( 'after_setup_theme', 'twentytwenty_content_width', 0 );

「Twenty Twenty」は まだまだ変更すると思いますので すぐ使えなくなるかもです。

　

参考

WordPress 5.3 Beta 1
https://wordpress.org/news/2019/09/wordpress-5-3-beta-1/

Introducing Twenty Twenty
https://make.wordpress.org/core/2019/09/06/introducing-twenty-twenty/

GitHub – WordPress/twentytwenty: Default theme for Twenty Twenty
https://github.com/WordPress/twentytwenty

Twenty Twenty Bundled in Core, Beta Features Overview – WordPress Tavern
https://wptavern.com/twenty-twenty-bundled-in-core-beta-features-overview

The Inter typeface family
https://rsms.me/inter/

Font Awesome
https://fontawesome.com/

Widget Shortcode
https://ja.wordpress.org/plugins/widget-shortcode/