二〇二四（Twenty Twenty-Four）：全新极简多用途WordPress默认主题

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 是一个样板集合。它反映了网站建设的新方法，并为如何构建区块主题提供了一个很好的范例。