Twenty Twenty-Four（中文譯作，二〇二四）是全新的 WordPress 預設主題，將隨 WordPress 6.4 版本一起釋出。
Twenty Twenty-Four 背後的理念是，無論網站的主題是什麼，預設主題都適用於任何型別的網站。該主題專為三種使用情況定製：小企業主、攝影師和藝術家以及作家和博主。
Twenty Twenty-Four 不僅僅是一個主題，它還是一系列模板和樣板的集合，將它們組合在一起，您就可以建立各種各樣的網站。因此，您可以將 Twenty Twenty-Four 視為一款多用途主題，儘管它是一款絕對簡約的主題。
正如您所期望的那樣，Twenty Twenty-Four 是一款塊主題，完全相容 WordPress 6.4 中的所有強大功能，包括細節塊和垂直文字。
在簡單介紹了新的 WordPress 預設主題後，我們將在本文中探索許多模板、模式和樣式，向您展示如何使用 Twenty Twenty-Four 構建一個有吸引力、反應靈敏、可用且易於訪問的網站。
現在，啟動站點編輯器，按 Cmd + k，然後輸入 Templates。
在 WordPress 6.4 中啟動模板
WordPress 預設主題：二〇二四
Twenty Twenty-Four 為我們提供了一個 WordPress 塊主題的完美範例。當你訪問 WordPress 安裝中的主題資料夾時，你會發現一個極其簡單的 functions.php 檔案，其唯一目的就是為特定區塊呼叫一些樣式表。
Twenty Twenty-Four 功能檔案是一個很好的例子，說明了如何優化主題，確保只有在需要時才嵌入特定資源。下面的程式碼僅在頁面上有按鈕時才呼叫 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 的預設樣式使用兩種字型： Cardo 字型用於標題，Inter 字型用於其他文字元素。
谷歌字型上的 Cardo 字型預覽
此外，還有 Jost 和 Instrument Sans 字型系列，並在一些風格變體中使用。
在下面的四個資料夾中，您將看到 Twenty Twenty-Four 預設主題的精華所在：
- styles
- patterns
- parts
- templates
全域性樣式
Twenty Twenty-Four 樣式部分
Twenty Twenty-Four 提供六種不同的樣式組合。您可以在網站編輯器的 “樣式” 部分或編輯模式下的 “瀏覽樣式” 面板中探索每種樣式。
Twenty Twenty-Four 瀏覽樣式面板
預設樣式在 theme.json 中定義，包含 11 種顏色、12 種漸變、5 種雙色調色彩組合和兩種字型系列： Inter 字型用於正文內容，Cardo 字型用於標題。
Twenty Twenty-Four 預設漸變色和雙色調
每個變體都新增了特定的樣式組合。
在撰寫本文時，Twenty Twenty-Four 有以下風格變體：
Ice：這種變體與預設樣式非常相似。它使用相同的預設調色盤，標題使用系統字型，正文使用 Inter 字型。
Twenty Twenty-Four Ice 樣式變體
Milky：該變體具有相同的預設字型系列，但色調不同。
Twenty Twenty-Four Milky 調色盤
Mint：Mint 在調色盤和字型系列方面都增加了變化。標題使用 Instrument Sans 字型，正文使用 Jost 字型。
Mint 變體改變了字型系列和色調
Onyx：這是預設樣式的深色版本。它增加了自定義調色盤、漸變和雙色組合。
瑪瑙色漸變和雙色組合
Rust：Rust 採用了令人愉悅的色調。字型設計基於預設字型系列，但字型大小有所不同。
Twenty Twenty-Four Rust 樣式變體
Sandstorm：該變體更改了預設樣式的多個元素。Sandstorm 定義了 11 種顏色的調色盤，使用 Instrument Sans 和 Jost 字型系列，並自定義了多個區塊和 HTML 元素的外觀。
Sandstorm 調色盤
模板
站點編輯器中的 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
您可以在站點編輯器的 “模板” 部分訪問用於自定義的模板列表。
現在，如果您想深入研究 Twenty Twenty-Four 模板的程式碼，只需在您最喜歡的程式碼編輯器中開啟其中的一兩個模板即可。毫不奇怪，每個模板都包含一個或多個模式。這再次證明，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"} /-->
模板以包含頁首模板部件的 div 開始。帶有 header 和 posts-three-columns 樣板的主元素構成正文，而 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"} /-->
你會發現這兩個模板非常相似。唯一不同的是，archive.html 使用的是 Archive title 區塊而不是 H1 元素。兩個模板都使用 posts-three-columns 樣板來生成頁面內容。
從 HTML 編輯器切換到 WordPress 網站編輯器，就可以預覽和自定義主題模板了。下圖顯示了編輯模式下的檔案模板。
編輯 Twenty Twenty-Four 歸檔模板
對更改滿意後，點選右上角的儲存。這將顯示一個新面板，您可以在此確認或放棄更改。再次單擊 “儲存“，就大功告成了。
模板部件和樣板
Twenty Twenty-Four 樣板
您可以在 twentytwentyfour 目錄的兩個不同資料夾中找到樣板和模板部件。patterns 資料夾包含 50 個樣板，而 parts 資料夾包含 6 個模板部件。
在網站編輯器中，模板部件和樣板都包含在同一個 Patterns 部分。
Twenty Twenty-Four 提供了幾種樣板，您可以用來構建整個頁面。這簡化了編輯工作流程，讓您只需少量定製即可構建整個網站。
例如，”About” 樣板類別中列出的主頁、About page 和 Portfolio Overview 樣板。
Twenty Twenty-Four 中的全頁面樣板
例如，您想建立一個 “關於” 頁面。藉助 Twenty Twenty-Four 主題的 About 樣板，您可以建立一個新頁面，然後從區塊插入器中選擇樣板即可。
使用 Twenty Twenty-Four 為空頁面新增樣板
About 樣板提供了整個頁面佈局，您只需根據自己的需要新增或切換區塊、圖片和文字，進行自定義即可。如果您想知道更換主題後頁面結構會發生什麼變化，答案是絕對不會。一旦包含在頁面中，樣板就會成為內容的一部分，並儲存在 WordPress 資料庫的 post 表中。
使用 “二〇二三” 主題預覽 “二〇二四” 樣板
提示：如果您想了解更多有關塊模式的資訊、它們是什麼以及如何構建您的塊模式，請不要錯過我們的深度指南《如何構建 WordPress 區樣板塊》。
向下滾動 “Patterns” 導航選單時，你會發現 “Template Parts” 部分，其中包括 Header、Footer 和 General 選單項。每個專案都是相應模板元件類別的入口。Twenty Twenty-Four 提供一個頁首、三個頁尾和兩個通用模板部件。
站點編輯器中的 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 建立網站，您只需在網站編輯器中自定義模板，然後選擇一個或多個樣板來填充您的網站頁面。
就其核心而言，Twenty Twenty-Four 是一個樣板集合。它反映了網站建設的新方法，併為如何構建區塊主題提供了一個很好的範例。
評論留言