基于简单的事情应该是直观的，复杂的事情应该是可能的这一理念，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 主题了吗？请在下面的评论中与我们分享您的感受。
评论留言