Twenty Twenty-Fourは、WordPress 6.4に同梱される、まったく新しいデフォルトのWordPresstテーマです。

Twenty Twenty-Fourは、サイトのトピックが何であれ、あらゆる種類のサイトに応用することができます。このテーマは、中小企業、写真家やアーティスト、ライターやブロガーという3つのパターンに合わせて作られています。

テーマというよりも、Twenty Twenty-Fourはテンプレートとパターンのパッケージのようなもので、それを組み合わせることで、様々なウェブサイトを構築することができます。このように、Twenty Twenty-Fourは、最小限の要素に焦点を当てたものですが、多目的テーマと考えることができます。

ご期待の通り、Twenty Twenty-Fourは、詳細ブロックや縦書きテキストなど、WordPress 6.4に搭載された素晴らしい機能すべてに完全対応したブロックテーマです。

新しいWordPressデフォルトテーマの簡単な紹介の後、Twenty Twenty-Fourを使って、魅力的、レスポンシブで、ユーザビリティが高いウェブサイトを構築する方法を明らかにすべく、そのテンプレート、パターン、スタイルに迫ります。

サイトエディターを起動し、Cmd + kを入力し、Templatesと入力します。

Launching templates in WordPress 6.4
WordPress 6.4でテンプレートを起動する

WordPressテーマ「Twenty Twenty-Four」

Twenty Twenty-Fourは、WordPressブロックを見事に活用したテーマとなっています。このWordPressサイトのテーマフォルダには、非常にシンプルなfunctions.phpファイルが格納されています。その唯一の目的は、特定のブロックのためにわずかなスタイルシートをエンキューすることです。

Twenty Twenty-Fourのfunctionsファイルは、特定のリソースが必要なときだけ埋め込まれるようにテーマを最適化する手法の好例だと言えるのではないでしょうか。次のコードは、ページ上にボタンがあるときだけbutton-outline.cssスタイルシートをキューに入れる仕様になっています。

if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
	/**
	 * Register custom block styles
	 *
	 * @return void
	 * @since Twenty Twenty-Four 1.0
	 *
	 */
	function twentytwentyfour_block_styles() {
		/**
		 * The wp_enqueue_block_style() function allows us to enqueue a stylesheet
		 * for a specific block. These will only get loaded when the block is rendered
		 * (both in the editor and on the front end), improving performance
		 * and reducing the amount of data requested by visitors.
		 *
		 * See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
		 */
		wp_enqueue_block_style(
			'core/button',
			array(
				'handle' => 'twentytwentyfour-button-style-outline',
				'src'    => get_template_directory_uri() . '/assets/css/button-outline.css',
				'ver'    => wp_get_theme()->get( 'Version' ),
			)
		);
	}
	...
endif;

このテーマはWordPressサイトに機能を追加するものではなく、ページで特定の機能が必要であれば、その構成は完全にプラグインに頼ることになります。そのため、Twenty Twenty-Fourのfunctions.phpファイルは、特定のブロックに対して特定のスタイルシートをエンキューすることだけを担います。

引き続きTwenty Twenty-Fourテーマフォルダを見ていくと、style.cssファイルにはテーマが正しく動作するために必要な詳細が記述されたヘッダーがあるだけで、CSSブロックが存在しないことに気づくはずです。

/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

また、assetsフォルダにはfonts、images、cssフォルダがあり、button-outline.cssスタイルシートが含まれています。

Twenty Twenty-Fourのデフォルトスタイルは、2つのフォントを使用しており、見出しにはCardo、その他のテキスト要素にはInterが指定されています。

Cardo font preview on Google Fonts
Google FontsのCardoフォントをプレビューする

JostとInstrument Sansのフォントファミリーもあり、複数のスタイルバリエーションで使用されています。

続いて、Twenty Twenty-Fourデフォルトテーマの真価は以下の4つのフォルダにあります。

  • styles
  • patterns
  • parts
  • templates

グローバルスタイル

Twenty Twenty-Four Styles section
Twenty Twenty-Fourのスタイル選択画面

Twenty Twenty-Fourには、6つのスタイルバリエーションが用意されています。各スタイルは、サイトエディターの「Styles/スタイル」セクション、または編集モードの「Browse styles/スタイルを表示」パネルで確認できます。

Twenty Twenty-Four Browse styles panel
Twenty Twenty-Fourスタイルパネル

スタイルパネルには、6種類のスタイルが用意されています。

デフォルトのスタイルはtheme.jsonで定義され、11色、12種類のグラデーション、5種類のデュオトーンカラーの組み合わせ、2種類のフォントファミリーが用意されています。本文にはInter、見出しにはCardoを使用しています。

Twenty Twenty-Four default gradients and duotones
Twenty Twenty-Fourのデフォルトのグラデーションとデュオトーン

各バリエーションで、特定のスタイルの組み合わせが利用できます。

この記事を書いている時点では、Twenty Twenty-Fourには以下のスタイルバリエーションが用意されています。

Ice：このバリエーションはデフォルトのスタイルによく似た見た目になっています。同じデフォルトのカラーパレットを使用し、見出しにはシステムフォント、本文にはインターフォントを使用しています。

Twenty Twenty-Four Ice style variation
Twenty Twenty-Four「Ice」のスタイルバリエーション

Milky：このバリエーションには、同じデフォルトのフォントファミリーが付属していますが、カラーパレットが異なります。

Twenty Twenty-Four Milky color palette
Twenty Twenty-Four「Milky」のカラーパレット

Mint：カラーパレットとフォントファミリーの両方にバリエーションを加えるものとなっています。見出しにはInstrument Sansを、本文にはJostを使用しています。

The Mint variation changes font family and color palette
Mintのフォントファミリーとカラーパレット

Onyx：デフォルトスタイルのダークバージョンです。カスタムパレット、グラデーション、デュオトーンの組み合わせが利用できます。

Onyx gradients and duotone combinations
Onyxのグラデーションとデュオトーンの組み合わせ

Rust：心地よいカラーパレットが使用されています。タイポグラフィはデフォルトのフォントファミリーをベースにしているものの、フォントサイズは異なります。

Twenty Twenty-Four Rust style variation
Twenty Twenty-Four「Rust」のスタイルバリエーション

Sandstorm：このバリエーションでは、デフォルトスタイルの複数要素が変更されています。11色のパレットを定義、Instrument SansとJostのフォントファミリーを使用し、特定のブロックとHTML要素の外観をカスタマイズしています。

Sandstorm's color palette
Sandstormのカラーパレット

テンプレート

Twenty Twenty-Four templates in the Site Editor
サイトエディターのTwenty Twenty-Fourテンプレート

Twenty Twenty-Fourには11種類のテンプレートが組み込まれています。対応するファイルは、テーマのディレクトリのtemplatesフォルダにあります。

  • single.html
  • single-with-sidebar.html
  • search.html
  • page.html
  • page-with-sidebar.html
  • page-wide.html
  • page-no-title.html
  • index.html
  • home.html
  • archive.html
  • 404.html

サイトエディターの「Template/テンプレート」セクションで、カスタマイズしたテンプレートの一覧を表示することができます。

繰り返しますが、コードエディターで開くだけで簡単にTwenty Twenty-Fourテンプレートのコードを詳しく確認できます。各テンプレートに1つ以上のパターンが含まれています。この事実は、Twenty Twenty-Fourが多かれ少なかれパターンの集合体であることを改めて証明しています。

例えばindex.htmlをエディターで開いてみてください。次のようなコードが確認できるはずです。

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
	<!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
	<h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
	<!-- /wp:heading -->
	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

このテンプレートは、headerテンプレート部分を含むdivで始まります。見出しとposts-three-columnsパターンを持つmain要素が本文を作成し、footerテンプレート部分がページ下部を司ります。

index.htmlとarchive.htmlを比較してみましょう。

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">

	<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} /-->

	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

2つのテンプレートがよく似ていることがわかるはずです。唯一の違いとして、archive.htmlではH1要素の代わりにArchiveタイトルブロックが使われています。どちらのテンプレートも、ページのコンテンツを生成するのにposts-three-columnsパターンを使っています。

HTMLエディターからWordPressサイトエディターに切り替えると、テーマのテンプレートをプレビューしてカスタマイズすることができます。下の画像は編集モードのArchiveテンプレートです。

Editing Twenty Twenty-Four's Archive template
Twenty Twenty-FourのArchiveテンプレートを編集する

変更が完了したら、右上の「保存」をクリックします。新しいパネルが表示され、変更内容を確認したり、（または気に入らない場合には）破棄したりすることができます。もう一度「保存」をクリックすれば完了です。

テンプレートのパーツとパターン

Twenty Twenty-Four patterns
Twenty Twenty-Fourのパターン

パターンとテンプレートのパーツは、twentytwentyfourディレクトリの2つのフォルダにあります。patternsフォルダには50以上のパターンがあり、partsフォルダには6つのテンプレートパーツがあります。

サイトエディターでは、テンプレートパーツとパターンはすべて同じPatternsセクションに含まれています。

Twenty Twenty-Fourには、ページ全体の構築に使用できるパターンが複数用意されています。これにより、編集ワークフローがシンプルなものになります。ちょっとしたカスタマイズだけでウェブサイト全体を構築可能です。

例としては、AboutパターンカテゴリにあるHomeページ、Aboutページ、Portfolio Overviewページのパターンが挙げられます。

Full page patterns in Twenty Twenty-Four
Twenty Twenty-Fourの全ページパターン

例えば、Aboutページを作りたいとしましょう。Twenty Twenty-FourのAboutパターンが便利です。新しいページを作成し、ブロックインサーターからパターンを選ぶだけでOKです。

Adding a pattern to an empty page with Twenty Twenty-Four
Twenty Twenty-Fourで空のページにパターンを追加する

Aboutパターンでページ全体のレイアウトを構成できるので、その後カスタマイズに専念できます。必要に応じて、ブロック、画像、テキストを追加したり、切り替えたりすれば十分でしょう。また、テーマを変更した場合であっても、ページの構造に問題は出ませんのでご心配なく。一度ページに組み込まれたパターンはコンテンツの一部となり、WordPressデータベースのpostsテーブルに保存されます。

Previewing a Twenty Twenty-Four pattern with the Twenty Twenty-Three theme
Twenty Twenty-ThreeテーマでTwenty Twenty-Fourパターンをプレビューする

「Patterns/パターン」ナビゲーションメニューを下にスクロールすると、「Header/ヘッダー」「Footer/フッター」「General/一般」メニュー項目を含む「Template Parts/テンプレートパーツ」セクションが見つかります。各項目を通して対応するテンプレートパーツカテゴリーを操作することになります。Twenty Twenty-Fourでは、1つのヘッダー、3つのフッター、2つの一般テンプレートパーツが用意されています。

Twenty Twenty-Four's patterns and template parts in the Site Editor
Twenty Twenty-Fourのパターンとテンプレートパーツをサイトエディターで表示

コードエディターでTwenty Twenty-Fourのテンプレートパーツを開いてみると、そのほとんどがシンプルにパターンを内包した構造であることがわかります。例えば、Sidebarのテンプレートパーツがいい例です。

<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->

このテンプレートパーツの中には、Sidebarパターンが格納されています。このパターンは非表示なので、サイトエディターの「patterns/パターン」セクションには掲載されません。コードの中身を詳しく確認するには、テーマのpatternsフォルダに移動し、hidden-sidebar.phpファイルを見つけて、コードエディターで開いてください。

このファイルのヘッダーを見ると、隠しパターンであり、ブロックインサーターから表示できないことが確認できます。

<?php
/**
 * Title: sidebar
 * Slug: twentytwentyfour/sidebar
 * Categories: hidden
 * Inserter: no
 */
?>

まとめ

機能や特殊効果満載の多目的テーマをお探しなら、Twenty Twenty-Fourは必ずしも最適なテーマとは言えないかもしれません。

このデフォルトWordPressテーマは、軽量で柔軟性があり、煩わしさがなく、サイトエディターからあらゆる側面を管理することができます。

Twenty Twenty-Fourでは、コードを一行も触る必要がなく、面倒な設定も不要です。Twenty Twenty-Fourでサイトを作成するには、サイトエディターからテンプレートをカスタマイズし、サイトのページに配置するパターンを選択するだけでOKです。

Twenty Twenty-Fourの特徴はなんといっても、パターンにあります。サイト構築への新たなアプローチを反映したテーマとなっており、ブロックテーマを使った構築方法の素晴らしい一例だと言えます。

あなたは開発環境ですでにTwenty Twenty-Fourを使ってみましたか？WordPressサイト構築の新たなかたちはどう思いますか？以下のコメント欄からご意見をお聞かせください。

Carlo Daniele Kinsta

ウェブデザインとフロントエンド開発をこよなく愛し、WordPress歴は10年以上。イタリアおよびヨーロッパの大学や教育機関とも共同研究を行う。WordPressに関する記事を何十件も執筆しており、イタリア国内外のウェブサイトや雑誌に掲載されている。詳しい仕事情報はXとLinkedInで公開中。