深入探索WordPress下一代預設主題Twenty Twenty-Five

基於簡單的事情應該是直觀的，複雜的事情應該是可能的這一理念，Twenty Twenty-Five 是一款靈活、易於擴充套件的預設 WordPress 主題，其多種樣板和樣式可幫助人們講述故事。

Twenty Twenty-Five 將與 WordPress 6.7 一起交付。它附帶了一組來自 Openverse 的靈感圖片，Openverse 是一個由 WordPress 社羣共享的免費圖片庫。這些圖片被嵌入到 Twenty Twenty-Five 的區塊樣板中，隨時可以用來講述故事，喚起無常、時間流逝和持續進化的概念。

樣板在 Twenty Twenty-Five 中的核心作用證明了區塊主題開發如何越來越注重網站編輯器介面，而不是編寫 PHP 和 JavaScript 程式碼。

現在，即使沒有高階編碼技能的使用者也能建立主題。您只需瞭解一下 theme.json 的工作原理以及如何建立區塊樣板。

您將在 Twenty Twenty-Five 中看到的模板和模板部件是巢狀區塊、樣板和模板部件的集合，它們構成了每種佈局型別的結構元素。

Twenty Twenty-Five 為設計民主化理念提供了一個極好的範例，本文將為您詳細介紹其結構。

如果您已經閱讀過我們對 theme.json 的介紹，那麼您將能夠建立自己的 WordPress 主題並與整個生態系統共享。

下面，讓我們直奔主題，開始下一個預設 WordPress 主題 Twenty Twenty-Five 的學習之旅。

樣板和模板部件

Twenty Twenty-Five 提供了許多區塊樣板和模板部件，幫助 WordPress 使用者在幾分鐘內建立文章和頁面。這些樣板和模板部分設計用於多種用途，如登陸頁面、產品和服務、活動、行動號召、關於頁面等。

在主題資料夾中，你可以在 parts 和 patterns 目錄下找到相應的檔案。開啟任何模板部分檔案後，你會發現每個模板部分都只包含一個指向區塊樣板的連結。以下是 header.html 模板部分的程式碼：

<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->

模板部件也需要註冊，因此您可以在 Twenty Twenty-Five 主題的 TemplateParts 屬性下的 theme.json 中找到它們：

{
"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 是模板部件的 slug，title 是用於建立標籤的文字字串，用於在螢幕上標識模板部件。

WordPress 6.7 中的 Twenty Twenty-Five 模板部件

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 中引入的區塊繫結功能來動態生成版權文字內容。

在這裡，版權樣板的 content 屬性與  Twenty Twenty-Five 主題中定義的源相連。

Twenty Twenty-Five 主題版權樣板

如果您想知道在哪裡定義了這個文字字串，請檢視 Twenty Twenty-Five 的 functions.php 檔案並找到以下程式碼：

/**
* Register block binding sources.
*/
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
/**
* Register the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return void
*/
function twentytwentyfive_register_block_bindings() {
register_block_bindings_source(
'twentytwentyfive/copyright',
array(
'label'					=> _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
'get_value_callback'	=> 'twentytwentyfive_copyright_binding',
)
);
}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

'© YEAR' 生成顯示在頁面上的文字字串，而 twentytwentyfive_copyright_binding 回撥則提供格式化的文字字串：

/**
* Register block binding callback function for the copyright.
*/
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
/**
* Callback function for the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return string Copyright text.
*/
function twentytwentyfive_copyright_binding() {
$copyright_text = sprintf(
/* translators: 1: Copyright symbol or word, 2: Year */
esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
'©',
wp_date( 'Y' ),
);
return $copyright_text;
}
endif;

如果這一切聽起來有點複雜，那麼請想一想，使用者只需使用開箱即用的元素，就能輕鬆建立複雜的佈局。

再想一想，開發人員直接在網站編輯器中生成程式碼，建立模板和區塊樣板是多麼容易。與區塊繫結 API 的整合為與外部資料來源整合開啟了無限可能的大門。

Twenty Twenty-Five 還提供了使用區塊樣板的其他良好示例。例如，您只需將現有樣板與其他樣板組合在一起，就能構建高階佈局。

在網站編輯器中瀏覽樣板時，您可以在頁面樣板類別中看到多個著陸頁佈局。

Twenty Twenty-Five 樣板

這些樣板是預構建的佈局，可以在頁面中使用。建立新頁面時，編輯器會顯示一個覆蓋圖，您可以在其中選擇一個區塊樣板。您可能想從著陸頁面樣板開始，然後根據自己的需要進行定製。

為新頁面選擇樣板

您還可以更改預設頁面模板，使用最適合您專案的模板。

為頁面選擇模板

現在，讓我們深入瞭解 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.
*
* @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 擁有支援多種語言的各種字型和大量預定義的調色盤，並將其捆綁為各種風格。

字型

Twenty Twenty-Five 包含 9 種字型和多種變體。您可以在全域性樣式介面的排版下選擇要在網站上使用的字型。

Twenty Twenty-Five 主題字型

這些字型系列儲存在 Twenty Twenty-Five 主題文 assets/fonts 件夾中，並在 theme.json 中註冊。

下面的片段註冊了 Fira Code 字型系列的五個變體：

{
"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 字型變體。

網站編輯器中的 Fira Code 字型變體

Twenty Twenty-Five 還配備了 8 種排版型別。您只需在全域性樣式介面的排版部分選擇一種，它就會應用於您的整個網站。

Twenty Twenty-Five 主題字型排版

如果您選擇第 7 號排版型別 Platypi & Literata，這兩種字型將自動應用於網站的所有元素： Literata 適用於一般文字元素，Platypi 適用於網站標題、標題和按鈕區塊。

該預設在 styles/typography 下的 typography-preset-6.json 檔案中註冊：

{
"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"
}
}
}
}
}

配色

Twenty Twenty-Five 提供一個包含 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"
}
]
},
...
}

預設配色方案

此外，Twenty Twenty-Five 還提供 8 種定義為風格變體的額外配色方案。您可以在主題的 styles/colors 資料夾中找到它們。

下圖顯示的是 Sunrise 配色方案。

Sunrise 配色方案

模板

Twenty Twenty-Five 還提供了大量模板，供您建立任何型別的部落格。您可以建立文字量一致的個人部落格、具有各種佈局結構的圖片部落格和作品集，以及針對各種目的的結構更嚴謹的部落格。

網站編輯器中的 Twenty Twenty-Five 模板

以下圖片展示了 Figma 提供的 Twenty Twenty-Five 部落格模板預覽。下面是一些個人部落格模板。

來自 Figma 的 Twenty Twenty-Five 部落格模板

下面是一些攝影部落格模板。

來自 Figma 的 Twenty Twenty-Five 攝影部落格模板

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）樣板生成。

根據這些程式碼，您可以輕鬆為自己的網站建立自定義模板。例如，如果您想將文章列表替換為照片部落格佈局，只需更改該模板中使用的對應樣板即可輕鬆實現。

在網站編輯器中，導航至模板部分，點選新增新模板。系統會提示你選擇模板應適用的內容型別。在本例中，我們選擇了分類歸檔。

在 WordPress 6.7 中新增模板

接下來，您必須決定該模板是用於所有類別還是特定類別。最後，您將看到一個或多個樣板，然後開始編輯。

不過，你也可以從頭開始建立一切。在本例中，我們對 archive.html 檔案中的程式碼做了一個小改動，使用了 twentytwentyfive/photo-blog-posts 樣板，而不是twentytwentyfive/posts-personal-blog 樣板。WordPress 分類歸檔頁面現在會顯示一個圖片庫。

Twenty Twenty-Five 中的自定義分類歸檔頁

小結

Twenty Twenty-Five 主題是隨 WordPress 6.7 釋出的下一款預設主題，其設計理念是為使用者提供簡潔性，為開發人員提供靈活性。得益於其多樣化和多功能的區塊樣板和樣式，該主題可以幫助使用者講述引人入勝的故事。該主題包含許多來自 Openverse 的靈感圖片，這些圖片與主題的區塊樣板實現了無縫整合。

該主題的結構圍繞巢狀區塊、樣板和模板部件的集合展開，因此無需高階編碼知識就能輕鬆設計複雜的佈局。

Twenty Twenty-Five 主題是設計民主化的又一步。無論您是經驗豐富的開發人員還是初學者，Twenty Twenty-Five 都為您探索區塊主題打下了堅實的基礎，只要掌握正確的訣竅，您甚至可以建立自己的主題與 WordPress 社羣分享。

輪到你了。您已經在開發環境中測試過 Twenty Twenty-Five 主題了嗎？請在下面的評論中與我們分享您的感受。