WordPress 6.7 新主题 Twenty Twenty-Five 开发者详解

Twenty Twenty-Five 主题将随 WordPress 6.7 正式发布，为用户带来全新的设计体验。该主题秉承”简单直观、复杂可能”的设计理念，是一个灵活且易于扩展的默认 WordPress 主题，旨在通过丰富的模式和风格帮助用户讲述动人的故事。

Twenty Twenty-Five 主题将随 WordPress 6.7 一起推出，并内置了来自 Openverse 的系列鼓舞人心的高质量图片，这些免费图片资源来自 WordPress 社区共享的图片库。这些图片会嵌入在主题的块状图案中，特别适合用于讲述关于”无常、时间流逝和不断进化”等深刻主题的故事。

在 Twenty Twenty-Five 主题中，样板（Patterns）扮演着核心角色，这一设计趋势清晰地表明，块主题开发正逐渐转向站点编辑器界面，而非传统的 PHP 和 JavaScript 代码编写。现在，即使没有高级编码技能的用户也能轻松创建主题，只需掌握 theme.json 的工作原理以及如何创建块样板即可。

您将在 Twenty Twenty-F​​ive 中看到的模板和模板部分，实际上是嵌套块、样板和模板部分的集合，它们共同构成了各种布局类型的基础结构。Twenty Twenty-F​​ive 为我们提供了绝佳的范例，展示了有关 WordPress 块主题的所有关键信息，包括 theme.json 的使用方法，帮助用户创建自己的 WordPress 主题并分享到整个生态系统。

让我们直接进入主题，开始探索下一个默认 WordPress 主题 Twenty Twenty-F​​Five 的精彩世界。

## 文章目录

Toggle
样板和模板部分
样式
字体
颜色
模板
总结

Twenty Twenty-F​​Five 提供了丰富的区块模式和模板部分，帮助 WordPress 用户在几分钟内就能构建出精美的帖子和页面。这些样板和模板部分设计用途广泛，包括登录页面、产品和服务展示、活动宣传、行动号召、关于页面等。在主题文件夹中，您可以在 patterns 和 parts 目录下找到这些文件。打开任何模板部分文件，您会发现每个部分仅包含指向块样板的链接。以下是 header.html 模板部分的代码示例：

“`html

“`

模板部分也需要进行注册，您可以在 Twenty Twenty-F​​Five 的 theme.json 文件中找到 templateParts 属性下的相关配置：

“`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-F​​Five 模板部分

Twenty Twenty-F​​Five 主题的 patterns 文件夹包含了大量 PHP 文件，您可以打开任意文件查看块样板的具体构建方式。这些样板展示了 WordPress 核心最近添加的强大功能，例如 copyright.php 文件就包含了以下代码：

“`php

“`

从代码中可以看出，该模式利用了 WordPress 6.5 引入的块绑定功能，动态生成版权文本内容。具体来说，版权样板的 content 属性与 Twenty Twenty-F​​Five 主题中定义的源相连接。

#### Twenty Twenty-F​​Five 版权样板

如果您想了解这个文本字符串的具体定义位置，可以检查 Twenty Twenty-F​​Five 的 functions.php 文件，找到以下代码：

“`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 回调则提供格式化的文本内容：

“`php
/**
* 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-F​​Five 提供了其他使用块样板的优秀案例。例如，只需将现有样板组合到其他样板中，就能构建出高级布局。当您在站点编辑器中浏览样板时，可以在页面样板类别中找到多个登录页面布局。

#### Twenty Twenty-F​​Five 页面样板

这些样板是预先构建的布局，可供您在页面中使用。当您创建新页面时，编辑器会显示一个覆盖层，您可以在其中选择块样板。或许您想从着陆页样板开始，然后根据需求进行自定义。

#### 选择新页面的样板

您还可以更改默认页面模板，选择最适合您项目的模板。

#### 为您的页面选择一个模板

现在让我们深入探讨书籍样板的着陆页代码。前往 Twenty Twenty-F​​Five 的 patterns 文件夹，打开 page-landing-book.php 文件，您将看到以下代码：

“`html

“`

这只是一组块样板。这充分证明了开发人员和用户构建复杂布局的便捷性。开发人员只需单击几下，就能创建复杂的模板部分和块样板，只需将预构建的样板嵌套在其他样板中即可。构建登录页面从未如此简单。

## 样式

Twenty Twenty-F​​Five 拥有一组支持多种语言的多样化字体，以及大量捆绑为样式变化的预定义调色板。

### 字体

Twenty Twenty-F​​Five 包含 9 种字体，具有多种变体。您可以在”全局样式”界面的”排版”部分选择要在网站上使用的字体。

#### Twenty Twenty-F​​Five 主题字体

这些字体系列存储在 Twenty Twenty-F​​Five 的 assets/fonts 文件夹中，并在 theme.json 中注册。以下片段展示了如何注册 Fira Code 字体系列的五种变体：

“`json
{
“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-F​​Five 还提供 8 种字体排版。您只需在全局样式界面的字体排版部分选择一个，它就会应用于您的整个网站。

#### Twenty Twenty-F​​Five 排版

如果您选择字体排版编号 7“Platypi & Literata”，这两种字体将自动应用于您网站的所有元素：Literata 应用于一般文本元素，而 Platypi 应用于网站标题、标题和按钮块。该预设定义在以下 styles/typography 文件中的 typography-preset-6.json：

“`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-F​​Five 提供了 8 种颜色的默认调色板，这些颜色在 theme.json 中定义如下：

“`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-F​​Five 默认调色板

Twenty Twenty-F​​Five 还提供了 8 种额外的调色板，定义为样式变化。您可以在主题 styles/colors 文件夹中找到它们。以下图展示了日出的调色板。

#### 日出调色板

## 模板

Twenty Twenty-F​​Five 还提供了丰富的模板，帮助您创建各种类型的博客。您可以创建具有一致文本量的个人博客、具有各种布局结构的照片博客和作品集，以及针对不同目的的更有条理的博客。

#### 站点编辑器中的 Twenty Twenty-F​​Five 模板

以下图片展示了 Figma 的 Twenty Twenty-F​​Five 博客模板的预览。这里是一些个人博客模板。

#### Figma 的 Twenty Twenty-F​​Five 个人博客模板

这里是一些照片博客模板。

#### Figma 的 Twenty Twenty-F​​Five 照片博客模板

Twenty Twenty-F​​Five 模板采用极简主义设计，旨在提供简洁明了的界面。与模板部分一样，模板主要基于块模式。要了解更多详情，请打开 Twenty Twenty-F​​Five 主题 templates 文件夹中的一个.html 文件查看代码。以下是 archive.html 文件的源代码：

“`html

“`

存档页面的内容由查询标题和术语描述块，以及帖子列表、1 列（posts-personal-blog）和更多帖子（more-posts）模式生成。基于此代码，您可以轻松为您的网站创建自定义模板。例如，如果您想用照片博客布局替换帖子列表，只需更改此模板中使用的模式即可轻松实现。

#### 在 WordPress 6.7 中添加模板

在站点编辑器中，导航到模板部分，单击添加新模板。系统会提示您选择模板应应用的内容类型。在此示例中，我们选择了类别档案。接下来，您必须决定模板是用于所有类别还是特定类别。最后，系统会显示一个或多个模式供您开始编辑。

但您也可以从头开始构建一切。在此示例中，我们对 archive.html 文件中的代码进行了小幅更改，并使用了 twentytwentyfive/photo-blog-posts 样板代替 twentytwentyfive/posts-personal-blog。WordPress 类别存档页面现在显示了一个照片库。

#### Twenty Twenty-F​​Five 中的自定义类别存档

## 总结

Twenty Twenty-F​​Five 是随 WordPress 6.7 发布的下一个默认主题，其设计理念是让用户简单易用，让开发人员灵活使用。得益于其多样化和多功能的块样板和样式，该主题旨在帮助用户讲述引人入胜的故事。它包含许多来自 Openverse 的鼓舞人心的图像，这些图像无缝集成到主题的块样板中。主题的结构围绕嵌套块、模式和模板部分的集合展开，使得设计复杂的布局变得前所未有的简单，无需高级编码知识。

Twenty Twenty-F​​Five 是设计民主化的又一步。无论您是经验丰富的开发人员还是初学者，Twenty Twenty-F​​Five 都为探索块主题提供了坚实的基础，并且凭借正确的专业知识，您甚至可以创建自己的主题并与 WordPress 社区共享。

轮到你了。您已经在开发环境中测试过 Twenty Twenty-F​​Five 吗？在下面的评论中与我们分享您的感受。