WordPress5.6 新デフォルトテーマ Twenty Twenty-One をチェックしています

Posted on Update by admin

WordPress Twenty Twenty-One

いよいよ WordPress5.6 のリリース（12月8日予定）が近づいてきました。WordPress5.6では新しいデフォルトテーマ「Twenty Twenty-One」が搭載される予定です。

Introducing Twenty Twenty-One

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

GitHub – WordPress/twentytwenty: Default theme for Twenty Twenty
https://github.com/WordPress/twentytwentyone
※「Twenty Twenty-One」は WordPress5.3 から利用できるようになっています。

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

　

外観

１カラムになっています。サイドバーはありません。
Twenty Twenty-One 外観 １カラム
ヘッダー/フッター幅は1240pxになってます。

ウィジェットエリアはフッター部分だけで 3列で表示するようになっています。
Twenty Twenty-One 外観 フッター
フッター部分にはメニューを設置できるようになってます。

コンテンツ部分

ヘッダ(タイトル)部分では特徴のある作り方になってます。タイトルのインパクトを大きくしたいのか font-size は (6rem)96px で表示されます。でかい、なんせでかい。
Twenty Twenty-One 外観 コンテンツ

アイキャッチ画像は最大1240pxでタイトル下に表示されます。
Twenty Twenty-One 外観 コンテンツ
標準の font-size は 1.25rem(20px) になってます。
※ここはブロックエディタの機能でブロックごとに変更できます。

コンテンツ標準幅は 610px と だいぶ狭いコンテンツ幅になっています。
ブロックで「幅広」設定にすると ヘッダーと同じ幅の 1240px で使えるようになります。
「全幅」設定した画像では 画面いっぱいで表示されるようになっています。

※「幅広」「全幅」にできないブロックはグループブロックに入れると「幅広」「全幅」で表示できるようになります。←WordPress5.7からできなくなりました。

　

Font

フォントはウェブフォントを使わずに、システムフォントを使うようになっています。

	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);

　

レスポンシブ

パーツごとの細かいのは別にありますが、おおまかなレスポンシブでのCSSブレイクポイントは以下のようになっています。
@media only screen and (min-width: 482px) {}
@media only screen and (min-width: 652px) {}
@media only screen and (min-width: 822px) {}

　
　

管理画面

ブロックパターン

「Twenty Twenty-One」では オリジナルのブロックパターンが付属しています。
Twenty Twenty-One ブロックパターン<

あんまし使えそうなのが無いので、不要な場合は以下の方法で削除できます。

以下のコードを テーマ(子テーマ)の functions.php、又は my-plugin.php に張り付けてください。

/**
 * Twenty Twenty-One ブロックパターン・カテゴリ削除
 *
 * Twenty Twenty-One
 * License: GPLv2
 */
function twentytwentyone_unregister_block_pattern(){

	if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
		return;
	}

	//ブロックパターン
	unregister_block_pattern( 'twentytwentyone/large-text' );
	unregister_block_pattern( 'twentytwentyone/links-area' );
	unregister_block_pattern( 'twentytwentyone/media-text-article-title' );
	unregister_block_pattern( 'twentytwentyone/overlapping-images' );
	unregister_block_pattern( 'twentytwentyone/two-images-showcase' );
	unregister_block_pattern( 'twentytwentyone/overlapping-images-and-text' );
	unregister_block_pattern( 'twentytwentyone/portfolio-list' );
	unregister_block_pattern( 'twentytwentyone/contact-information' );

	//ブロックパターンカテゴリ
	unregister_block_pattern_category( 'twentytwentyone' );
}
add_action( 'init', 'twentytwentyone_unregister_block_pattern' );

　

ブロックスタイル

一部のブロックに「スタイル」が追加されています。

カラムブロック
「Overlap」が追加されました。
Twenty Twenty-One カラムブロック

カバーブロック
「Borders」が追加されました。
Twenty Twenty-One カバーブロック

グループブロック
「Borders」が追加されました。
Twenty Twenty-One グループブロック

画像ブロック
「Borders」「Frame」が追加されました。
Twenty Twenty-One 画像ブロック

最新の投稿ブロック
「Borders」が追加されました。
Twenty Twenty-One 最新の投稿ブロック

メディアと文章ブロック
「Borders」が追加されました。
Twenty Twenty-One メディアと文章ブロック

区切りブロック
「幅広線」が無くなり「Thick」が追加されました。
Twenty Twenty-One 区切りブロック width=

ソーシャルアイコンブロック
「Dark Gray」が追加されました。
Twenty Twenty-One ソーシャルアイコンブロック
　

オプションテンプレート

オプションテンプレートはありませんでした。

　
　

メニュー

メニューは「Primary Navigation」と「Footer Navigation」の２箇所設置できます。
Twenty Twenty-One メニュー
「Footer Navigation」では Twitter や Facebook などのSNSのURLがあるとアイコンで表示されます。

　
　

テーマカスタマイザー

テーマカスタマイザーでできる事はわりとシンプルになっています。

スターターコンテント

テーマカスタマイザーを初めてオープンした時にスターターコンテントが走ります。
スターターコンテントではデモ用のコンテンツが挿入され「フロントページ」に設定されるようになります。

スターターコンテントは「新規サイト」（投稿、ページ、ウィジェット、またはカスタマイザー設定がまだ更新されていない新規インストール直後の状態）でのみ走ります。
これがいやな場合は投稿等になにか入れて更新しておくとデモ用のコンテンツは挿入されません。

Starter content for themes in 4.7

　

色

背景色だけ変更できます。
Twenty Twenty-One テーマカスタマイザー 背景色濃い色になると自動で文字色も反転するようになってます。
　
また、ダークモードに対応させる事もできます。
Twenty Twenty-One テーマカスタマイザー ダークモード

Twenty Twenty-One: Dark Mode Discussion

　

抜粋設定

アーカイブページでの記事を「概要」だけにするか「全文」にするかを設定できます。
Twenty Twenty-One テーマカスタマイザー 抜粋設定
この機能はWordPress標準には無い機能なので地味に便利かもしれません。

　
　

テンプレート

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

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

トップ 投稿 固定ページ アーカイブ カテゴリ/タグ サイト内検索 404 画像
index.php ○
single.php ○
page.php ○
archive.php ○ ○
search.php ○
404.php ○
image.php ○
header.php ○ ○ ○ ○ ○ ○ ○ ○
footer.php ○ ○ ○ ○ ○ ○ ○ ○

　
　

CSS

CSSではサイト構成の基準になる所は、カスタムプロパティ(CSS 変数)が使われています。
例えば以下のように style.css の最初の方に予め設定されています。

	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	/* Font Size */
	--global--font-size-base: 1.25rem;
	--global--font-size-xxl: 4rem;
	--global--font-size-page-title: var(--global--font-size-xxl);
	/* Headings */
	--heading--font-family: var(--global--font-primary);
	--heading--font-size-h1: var(--global--font-size-page-title);

子テーマでここを変更しようする場合は後付のオーバーライドが効かないので ちょっとめんどくさい事をしないといけないかもです。
　
　

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




スポンサードリンク