深入探索WordPress下一代默认主题Twenty Twenty-Five

作者 : King 本文共6938个字，预计阅读时间需要18分钟发布时间： 2025-05-11 共3人阅读

基于简单的事情应该是直观的，复杂的事情应该是可能的这一理念，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 模板部分的代码：

模板部件也需要注册，因此您可以在 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文件包含以下代码：

您可以一目了然地看到，该样板使用了 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 。您将看到以下代码：

它只是区块样板的集合。这应该能说明为开发人员和用户创建复杂布局是多么容易。开发人员只需点击几下，就能创建复杂的模板部件和区块样板，只需将预置样板嵌套到其他样板中即可。创建登陆页面从未如此简单。

风格

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 文件的源代码：

归档页面的内容由查询标题和术语描述块以及文章列表、1 栏（posts-personal-blog）和更多文章（more-posts）样板生成。

根据这些代码，您可以轻松为自己的网站创建自定义模板。例如，如果知识兔您想将文章列表替换为照片博客布局，只需更改该模板中使用的对应样板即可轻松实现。

在网站编辑器中，导航至模板部分，知识兔点击添加新模板。系统会提示你选择模板应适用的内容类型。在本例中，我们选择了分类归档。

在 WordPress 6.7 中添加模板

接下来，您必须决定该模板是用于所有类别还是特定类别。最后，您将看到一个或多个样板，然后知识兔开始编辑。

不过，你也可以从头开始创建一切。在本例中，我们对 archive.html 文件中的代码做了一个小改动，知识兔使用了 twentytwentyfive/photo-blog-posts 样板，而不是twentytwentyfive/posts-personal-blog 样板。WordPress 分类归档页面现在会显示一个图片库。

Twenty Twenty-Five 中的自定义分类归档页