Twenty Twenty-Fiveは、「高度なカスタマイズが可能でありながら、基本的な設定は直感的に行える」を考慮して設計されたWordPressデフォルトテーマです。多くのパターンとスタイルによって、WordPressユーザーが思いのままにサイトを構築でき、柔軟性と拡張性に優れています。
Twenty Twenty-Fiveは、WordPress 6.7に搭載されるデフォルトテーマで、WordPressコミュニティが提供する無料の画像リポジトリ「Openverse」から、多くの魅力的な画像がブロックパターンに組み込まれています。これらの画像は無常、時の流れ、そして絶え間ない進化をテーマにしています。
Twenty Twenty-Fiveでパターンが中核的な役割を果たしている点は、ブロックテーマ開発がますますサイトエディターに重点を置き、PHPやJavaScriptのコード記述が減少していることを裏付けています。
今や、テーマ開発に高度なコーディングスキルは不要。theme.jsonの仕組みとブロックパターンの作成方法さえ知っていれば、誰でも作成することができます。
Twenty Twenty-Fiveのテンプレートとテンプレートパーツは、入れ子になったブロック、パターン、テンプレートパーツの集合体で、各タイプのレイアウトの構造要素を構成します。
今回は、「デザインの民主化」という理念を反映するTwenty Twenty-Fiveの構造を掘り下げていきます。
この新デフォルトテーマは、WordPressのブロックテーマ構築について学ぶのに理想的です。この記事とtheme.jsonの解説記事とあわせて読めば、独自のWordPressテーマを作成して、エコシステム全体で共有することができるようになります。
パターンとテンプレートパーツ
Twenty Twenty-Fiveには、多くのブロックパターンとテンプレートパーツが組み込まれており、数分で投稿や固定ページを構築可能です。ランディングページや製品・サービス、イベント、CTA（行動喚起）、会社概要ページなど、目的別にデザインされています。
テーマフォルダには、partsとpatternsというディレクトリがあり、いずれのテンプレートパーツファイルにもブロックパターンへのリンクしか含まれていません。以下は、header.htmlテンプレートパーツのコードです。
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->テンプレートパーツも登録する必要があり、Twenty Twenty-Fiveのtheme.json、templatePartsプロパティに記述されています。
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "footer",
"name": "footer-newsletter",
"title": "Footer Newsletter"
},
{
"area": "uncategorized",
"name": "right-aligned-sidebar",
"title": "Right Aligned Sidebar"
},
{
"area": "uncategorized",
"name": "sidebar",
"title": "Sidebar"
}
]
}areaプロパティは、テンプレートパーツが収まるページセクションと対応するカテゴリを決定し、nameはテンプレートパーツのスラッグ、titleは画面上でテンプレートパーツを識別するラベルを作成するために使用するテキストです。
Twenty Twenty-Fiveテーマのpatternsフォルダには、.phpファイルが多数含まれています。いずれかのファイルを開いてコードを確認すると、ブロックパターンがどのように構築されているかを理解できます。
各パターンには、最近WordPressコアに追加された強力な機能が活用されています。例えば、copyright.phpファイルには以下のようなコードがあります。
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"twentytwentyfive/copyright"
}
}
},
"className":"copyright",
"textColor":"primary",
"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->上のパターンでは、WordPress 6.5で導入されたBlock Bindingsの機能を利用して、著作権テキストの内容が動的に生成されます。Twenty Twenty-Fiveで定義されたソースに、著作権（Copyright）パターンのcontent属性が接続されています。
このテキストがどこで定義されているのかを確認するには、functions.phpファイルを確認して以下のコードを見つけます。
/**
* ブロックのバインディングソースを登録
*/
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
/**
* 著作権ブロックのバインディングソースを登録
*
* @since Twenty Twenty-Five 1.0
* @return void
*/
function twentytwentyfive_register_block_bindings() {
register_block_bindings_source(
'twentytwentyfive/copyright',
array(
'label' => _x( '© YEAR', 'エディターの著作権プレースホルダーのラベル', 'twentytwentyfive' ),
'get_value_callback' => 'twentytwentyfive_copyright_binding',
)
);
}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );'© YEAR'は、固定ページに表示されるテキストを生成し、twentytwentyfive_copyright_bindingの呼び出しによって、フォーマットされたテキストが提供されます。
/**
* 著作権ブロックのバインディングコールバック関数を登録
*/
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
/**
* 著作権ブロックのバインディングソースのコールバック関数
*
* @since Twenty Twenty-Five 1.0
* @return string 著作権テキスト
*/
function twentytwentyfive_copyright_binding() {
$copyright_text = sprintf(
/* translators: 1: 著作権シンボルまたは単語, 2: 年 */
esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
'©',
wp_date( 'Y' ),
);
return $copyright_text;
}
endif;一見複雑ですが、ユーザーは標準で用意されている要素だけを使って、非常に簡単に複雑なレイアウトを作成できます。
開発者はサイトエディターで直接コードを生成することで、テンプレートやブロックパターンを簡単に作成できます。Block Bindings APIを活用すれば、外部データソースとの統合の可能性が無限に広がります。
Twenty Twenty-Fiveではまた、既存のパターンを他のパターンに組み合わせるだけで高度なレイアウトを構築できます。
サイトエディターでパターンメニューを開くと、「Pages」パターンフォルダにランディングページ用のレイアウトがいくつかあります。
これらのパターンは、すでに完成されたレイアウトになっており、そのまま固定ページに適用可能です。新規固定ページを作成すると、エディターにウィンドウが表示され、ブロックパターンを選ぶことができます。ランディングページのパターンから始めて、要件や好みに応じてカスタマイズしていくのもありです。
デフォルトの固定ページテンプレートを変更して、プロジェクトに適したものを使用することもできます。
以下は、「Landing page for book」パターンのコードを見てみます。Twenty Twenty-Fiveのpatternsフォルダに移動して、page-landing-book.phpを開くと、以下のコードが表示されるはずです。
<?php
/**
* Title: Landing page for Book
* Slug: twentytwentyfive/page-landing-book
* Categories: twentytwentyfive_page, featured
* Keywords: starter
* Block Types: core/post-content
* Post Types: page, wp_template
* Viewport width: 1400
* Description: A landing page for the book with a hero section, pre-order links, locations, FAQs and newsletter signup.
（ヒーローセクション、予約リンク、所在地、FAQ、ニュースレター登録がある書籍向けランディングページ） *
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/
?>
<!-- wp:pattern {"slug":"twentytwentyfive/hero-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-links"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/banner-about-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-locations"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/text-faqs"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/newsletter-sign-up"} /-->上記はブロックパターンの集まりです。開発者そして一般ユーザーの両方が複雑なレイアウトをいかに簡単に構築できるかがわかります。開発者は、事前に用意されているパターンを別のパターンにネストすることで、複雑なレイアウトを数回のクリックで作成できます。これ以上ないほど、ランディングページの作成が容易になります。
スタイル
Twenty Twenty-Fiveには、多言語をサポートする多様なフォントセット、スタイルのバリエーションとしてまとめられたカラーパレットが多数組み込まれています。
フォント
多くのバリエーションを持つ9種類のフォントが付属しています。サイトで使用するフォントは、サイト全体の「スタイル」パネルの「タイポグラフィ」で選択可能です。
各フォントファミリーはassets/fontsフォルダに保存され、theme.jsonに登録されています。
以下は、Fira Codeフォントファミリーの5つのバリエーションです。
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Light.woff2"
],
"fontWeight": "300",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Regular.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Medium.woff2"
],
"fontWeight": "500",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-SemiBold.woff2"
],
"fontWeight": "600",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Bold.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
...
}
}
}以下は、サイトエディターに表示されるFira Codeフォントのバリアントです。
組版設定は8種類あり、同様に「タイポグラフィ」パネルでサイト全体に適用できます。
例えば、「Platypi & Literata」を選択すると、Literataは一般的なテキスト要素、Platypiはサイトタイトル、見出し、ボタンブロックに適用されます。
このプリセット設定は、typography-preset-6.jsonファイルのstyles/typographyに登録されています。
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Platypi & Literata",
"slug": "typography-preset-6",
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|literata",
"fontSize": "var:preset|font-size|large",
"fontStyle": "normal",
"fontWeight": "300",
"letterSpacing": "-0.24px",
"lineHeight": "1.3"
},
"blocks": {
"core/site-title": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800",
"letterSpacing": "-0.6px"
}
},
"core/post-title": {
"typography": {
"fontWeight": "800",
"letterSpacing": "-0.96px"
}
},
"core/query-title": {
"typography": {
"fontWeight": "800"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
},
"button": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
}
}
}
}色
8色のデフォルトパレットがあり、theme.jsonで以下のように定義されています。
{
"settings": {
"color": {
"palette": [
{
"color": "#FFFFFF",
"name": "Base",
"slug": "base"
},
{
"color": "#111111",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFEE58",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F6CFF4",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#503AA8",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#686868",
"name": "Primary",
"slug": "primary"
},
{
"color": "#FBFAF3",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#11111133",
"name": "Opacity 20%",
"slug": "opacity-20"
}
]
},
...
}
スタイルバリエーションとして定義されたカラーパレットがさらに8種類組み込まれており、これらはテーマのstyles/colorsフォルダにあります。
以下は、Sunriseカラーパレットです。
テンプレート
Twenty Twenty-Fiveには、あらゆる種類のブログを考慮した豊富なテンプレートが用意されています。一貫したテキスト量が想定される個人ブログ、様々なレイアウト構造の写真ブログやポートフォリオなど、特定の目的に特化したブログを構築することができます。
以下は、FigmaのTwenty Twenty-Fiveブログテンプレートのプレビューです。こちらは個人ブログ用のテンプレートです。
以下は写真ブログのテンプレートです。
Twenty Twenty-Fiveのテンプレートはクリーンかつシンプルで、洗練されたデザインになっています。テンプレートパーツと同様、テンプレートもブロックパターンに大きな影響を受けています。templatesフォルダにある.htmlを見てみましょう。以下は、archive.htmlファイルのソースコードです。
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->
<!-- wp:pattern {"slug":"twentytwentyfive/posts-personal-blog"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/more-posts"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->アーカイブページのコンテンツは、クエリタイトル、タームの説明、投稿一覧、1カラム（posts-personal-blog）、もっと見る（more-posts）パターンで生成されます。
このコードを土台に、自分のサイト用に独自のテンプレートを簡単に作成することができます。パターンを変更することで、投稿一覧を写真ブログのレイアウトに置き換えることも可能です。
サイトエディターのホーム画面で「テンプレート」を選択し、右上の「新規テンプレートを追加」をクリックします。次の画面でテンプレートを適用するコンテンツの種類を選択してください。今回は例として、「カテゴリーアーカイブ」を選択します。
次に、テンプレートをすべてのカテゴリー、または特定のカテゴリーに適用するかを決定します。どちらかを選択すると、パターン選択のウィンドウが表示されます。パターンを選んで編集を始めることもできますが、ゼロから構築することも可能です。
以下は、archive.htmlファイルのコードを少し編集し、twentytwentyfive/posts-personal-blogの代わりにtwentytwentyfive/photo-blog-postsパターンを使用した例です。カテゴリーアーカイブページに写真ギャラリーが表示されるようになりました。
まとめ
WordPress 6.7に搭載される新デフォルトテーマ「Twenty Twenty-Five」は、ユーザーの使いやすさと開発者向けの柔軟性を極めた設計になっています。多様で多彩なブロックパターンとスタイルにより、誰でも魅力的なサイトを構築できるように。Openverseの魅力的な画像が、テーマのブロックパターンにシームレスに多数統合されているのも特長です。
このテーマの構造は、ネストされたブロック、パターン、テンプレートパーツのコレクションが中心になっており、高度なコーティング知識がなくても、これまで以上に複雑なレイアウトを実現することができます。
Twenty Twenty-Fiveは、デザインの民主化への新たな一歩と言えます。このデフォルトテーマは、ブロックテーマの可能性を探る強固な基盤となり、経験豊富な開発者はもちろん、WordPress初心者であっても、独自のテーマを構築し、WordPressコミュニティで共有することができます。
コメントを残す