WordPress 6.1全新默认主题2023特色详解与使用技巧

2023（Twenty Twenty-Three）是与WordPress 6.1一同推出的全新默认WordPress主题。这是一个极简主义设计，摒弃了繁复的图像和附加功能，为用户提供了最佳的入门级模板构建和样式变化测试平台。它不仅适用于构建各种模板和样式变体，还能帮助用户测试最新版WordPress引入的所有新功能。这个主题堪称一个真实的开发和测试环境，其极简风格、响应式设计和轻量化特性，使其成为创建博客和各类网站的理想选择。

在介绍2022主题时，Kjell Reigstad曾展望过默认主题的未来。他提到，theme.json、块模板（block templates）和块样板（block patterns）等创新技术，极大地简化了主题开发流程，为用户开辟了全新的网站定制途径。有理由相信，WordPress社区将充分利用这些工具，在未来几年为用户打造更频繁、更多样化的主题和定制方案。

Channing Ritter提出了一个富有启发性的建议：如果我们不再过分强调主题本身，而是聚焦于由社区成员设计的、风格各异的变体集呢？我们可以以2022主题为基础，将其剥离和精简，打造一个空白的画布，让各种风格的变化充分展现。这正是新2023默认主题的诞生理念。WordPress社区被鼓励积极参与到默认主题的设计中，我们对此感到非常欣喜，因为新主题成为了集体智慧的结晶。

在深入探讨与2023主题捆绑的样式变体之前，让我们先了解其基本功能和适用范围。

文章目录

页面布局和样式

排版

字体

流体排版和间距

模板和模板部分

自定义模板

模板部分

全局样式和样式变体

总结

页面布局和样式

如前所述，2023是2022主题的精简版，其突出特点在于简洁和轻盈。这个新默认主题非常灵活，完美契合Gutenberg编辑器的最新站点编辑功能，包括模板编辑、全局样式变体、流体排版和块样板。因此，您会看到一个没有任何花哨元素的最小化页面，它专为定制和测试而设计。

例如，下图展示了带有和不带有特色图像的单个帖子页面。

23中带有和不带有特色图像的单个帖子预览

下图则将主页与存档页面进行了对比。

主页与二十三中的存档页面相比

尽管新主题是2022的简化版，但与之前的默认主题相比，2023仍存在一些关键差异。首先，标题大小有所减小，默认衬线字体被替换为系统无衬线字体。此外，调色板也焕然一新。您可以在theme.json中的以下代码中找到新的2023调色板定义：

{ “settings”: { “appearanceTools”: true, “color”: { “palette”: [ { “color”: “#ffffff”, “name”: “Base”, “slug”: “base” }, { “color”: “#000000”, “name”: “Contrast”, “slug”: “contrast” }, { “color”: “#9DFF20”, “name”: “Primary”, “slug”: “primary” }, { “color”: “#345C00”, “name”: “Secondary”, “slug”: “secondary” }, { “color”: “#F6F6F6”, “name”: “Tertiary”, “slug”: “tertiary” } ] }, } }

二十二十三种默认颜色

但2023主题最引人注目的特点，无疑是其丰富的样式变体集。2023提供了十种全局样式变体，每种都展示了不同的颜色、字体系列和字体大小组合。您可以在2023的样式文件夹中找到相应的JSON文件。

Figma平台上提供了页面模板、样式和2023的样式变化的完整预览。

Figma上的2023种风格变化预览

2023排版

在像2023这样极简的主题中，排版对于提升文本可读性、增强网站吸引力以及为访问者创造优质的浏览体验至关重要，无论设备或屏幕大小如何。为此，2023引入了一套新的字体系列，并采用了WordPress 6.1推出的流体排版（Fluid Typography）技术。

字体

2023提供了一套专为风格变化设计的字体，以简洁和多样性为特点：

System Font – var(–wp–preset–font-family–system-font)
IBM Plex Mono – var(–wp–preset–font-family–ibm-plex-mono)
Inter – var(–wp–preset–font-family–inter)
Source Serif Pro – var(–wp–preset–font-family–source-serif-pro)
DM Sans – var(–wp–preset–font-family–dm-sans)

IBM Plex Mono是IBM Plex字体集的一部分，该字体集在SIL开放字体许可（OFL）下发布，是IBM推出的新型企业字体。您可以在Adobe Fonts和IBM网站上预览其效果。

ibm.com上的 IBM Plex Mono 库

Inter是由Rasmus Andersson专为计算机屏幕设计的免费开源字体系列。您可以在Rasmus Andersson的网站或Google Fonts上预览和下载。

Rasmus Andersson网站上的 Inter 字体预览

Source Serif Pro是Adobe Originals系列字体，您可以通过Adobe Fonts账户免费使用。

fonts.adobe.com上的 Source Serif Pro 预览

DM Sans是另一种在SIL开放字体许可证（OFL）下获得许可的字体，由Colophon Foundry委托Google委托，由Colophon Foundry、Jonny Pinhorn和Indian Type Foundry共同设计。

Google 字体上的 DM Sans 预览

流体排版和间距

2023采用了WordPress 6.1引入的流体排版和间距预设，为WordPress主题提供了一个优秀的流畅排版实现示例，您可以将其作为模板，在您自己的主题中添加对此功能的支持。

以下代码展示了theme.json中settings.typography.fluid的settings.typography.fontSizes[]属性定义：

“settings”: { … “typography”: { “fluid”: true, “fontSizes”: [ { “fluid”: { “min”: “0.875rem”, “max”: “1rem” }, “size”: “1rem”, “slug”: “small” }, { “fluid”: { “min”: “1rem”, “max”: “1.125rem” }, “size”: “1.125rem”, “slug”: “medium” }, { “size”: “1.75rem”, “slug”: “large”, “fluid”: false }, { “size”: “2.25rem”, “slug”: “x-large”, “fluid”: false }, { “size”: “10rem”, “slug”: “xx-large”, “fluid”: { “min”: “4rem”, “max”: “20rem” } } ] } }

该typography.fluid设置启用了流畅排版功能，而typography.fontSizes[].fluid则设置了最小和最大字体大小值。

除了Fluid Typography，2023还支持流体间距。在WordPress 6.1之前，只能在编辑器中设置自定义间距值，这意味着主题作者无法为填充、边距和间隙指定固定值。这造成了一些限制，例如在不同主题之间轻松传输间距设置，或在不同站点之间复制和粘贴内容和块模式时保持间距值。

主题可以使用新的spacing.spacingScale和spacing.spacingSizes设置声明流体间距支持（在Theme.json中阅读更多内容：添加间距大小预设）。在2023中，这是通过以下设置实现的：

“settings”: { “spacing”: { “spacingScale”: { “steps”: 0 }, “spacingSizes”: [ { “size”: “clamp(1.5rem, 5vw, 2rem)”, “slug”: “30”, “name”: “30” }, { “size”: “clamp(1.8rem, 1.8rem + ((1vw – 0.48rem) * 2.885), 3rem)”, “slug”: “40”, “name”: “40” }, { “size”: “clamp(2.5rem, 8vw, 6.5rem)”, “slug”: “50”, “name”: “50” }, { “size”: “clamp(3.75rem, 10vw, 7rem)”, “slug”: “60”, “name”: “60” }, { “size”: “clamp(5rem, 5.25rem + ((1vw – 0.48rem) * 9.096), 8rem)”, “slug”: “70”, “name”: “70” }, { “size”: “clamp(7rem, 14vw, 11rem)”, “slug”: “80”, “name”: “80” } ], “units”: [ “%”, “px”, “em”, “rem”, “vh”, “vw” ] } }

下面的视频展示了流体排版在2023主题中的实际应用。您可以在以下链接中检查排版和间距预设。

模板和模板部分

使用2023，您将全面体验WordPress 6.1附带的站点编辑功能改进，尤其在模板和模板部分方面。

二十二十三个模板

当您启动站点编辑器并在您的网站上运行2023时，您将看到包含11个模板和4个模板部分的列表。下图展示了站点编辑器中的404页面模板。

二十二十三 404页面模板

您可以在2023的模板和部分文件夹中找到相应的HTML文件。

二十二十三模板零件

下图展示了编辑模式下的评论Comments模板部分。

编辑评论模板部分

您会发现这些自定义模板和模板部分都在theme.json中定义。

自定义模板

除了默认模板外，2023还提供了以下自定义模板：

空白的博客（替代）
404
包含特色图片
包含封面块

这些模板在theme.json中定义如下：

{ “customTemplates”: [ { “name”: “blank”, “postTypes”: [ “page”, “post” ], “title”: “Blank” }, { “name”: “blog-alternative”, “postTypes”: [ “page” ], “title”: “Blog (Alternative)” }, { “name”: “404”, “postTypes”: [ “page” ], “title”: “404” }, { “name”: “with-featured-image”, “postTypes”: [ “page”, “post” ], “title”: “With Featured Image” }, { “name”: “with-cover-block”, “postTypes”: [ “page”, “post” ], “title”: “With Cover Block” } ], }

模板部分

模板部分定义如下。

{ “templateParts”: [ { “area”: “header”, “name”: “header”, “title”: “Header” }, { “area”: “footer”, “name”: “footer”, “title”: “Footer” }, { “area”: “uncategorized”, “name”: “comments”, “title”: “Comments” }, { “area”: “uncategorized”, “name”: “post-meta”, “title”: “Post Meta” } ] }

全局样式和样式变体

如前所述，从WordPress 6.0开始，主题作者可以将多组样式与主题捆绑，使用户能够在不同样式变体之间切换而无需更换主题。这一伟大功能是新默认主题的核心亮点，因为2023提供了十种预建样式组合供用户选择。

二十二十三种全局风格

您可以在站点编辑器的全局样式界面中浏览这些样式。在这里，您可以：

从浏览样式面板切换全局样式
自定义排版设置——文本、链接、标题和按钮
编辑默认颜色或更改特定元素的颜色
自定义主要内容区域的布局
自定义特定元素的外观

在2023中自定义文本、颜色和布局

再次强调，在创造如此多的风格变化时，社区参与至关重要。在2023项目启动后，来自8个不同国家的19位贡献者提交了38份设计（您可以在GitHub上浏览所有项目）。在38种风格中，最终选择了10种款式：

Pitch是默认样式的深色版本，它使用了Rasmus Andersson的Inter字体系列。

Pitch是二十二十三的黑暗变体

Canary使用单一类型大小和窄列宽。它还应用了一种有趣的边界半径效果。

Canary使用单一类型大小和窄列宽

Electric为整个网站的所有排版使用了大胆的颜色。

Pilgrimage是基本主题的彩色深色版本。

Marigold是基本风格的柔和愉快变化。

Block-Out在图像上具有双色调效果。

Whisper展示了一些自定义元素，例如页面边缘的边框、按钮样式和独特的链接下划线。

Whisper展示了一些自定义元素

Sherbet具有独特的明亮多彩外观。

Sherbet具有独特的明亮多彩外观

Grapes因其令人愉悦的调色板和字体组合而被选中。

Grapes因其令人愉悦的调色板和字体组合而被选中

样式变体最酷的一点是，您不必是前端开发人员也能创建样式。如果您对编码感到满意，可以选择23种样式文件夹中的.json文件之一，并将其用作模板来构建您的样式变体。但如果编码不是您的强项，您可以使用官方的Create Block Theme插件，您可以从WordPress.org插件目录免费下载。

首先，安装并激活插件，然后导航到样式编辑器。在这里，根据您的喜好自定义颜色、排版和布局，并保存您的更改。在WordPress管理菜单的外观下找到创建块主题。

创建块主题菜单项

检查列表中的最后一项：创建样式变化。您将被要求为您的风格变化指定一个名称。输入名称并单击创建主题。这将在主题的样式文件夹中创建一个新的.json文件。

创建样式变化

现在，您可以进一步自定义您的样式，甚至将其导出到其他WordPress安装。

创建块主题插件是一个有价值的工具，可以帮助您充分利用最新版本的WordPress提供的主题和模板创建功能。当您使用它时，您可能会查看所有其他选项：

导出2023主题
创建2023子主题
克隆2023主题
覆盖2023主题
创建空白主题
创建样式变化
自定义样式变体出现在样式浏览器中

总结

乍一看，新的默认WordPress主题可能像是一个无特色的空盒子，但仔细观察，它远不止于此，因为它允许您充分利用最新的WordPress站点编辑功能。在2023主题中，您将看到许多可自定义的模板和模板部分，一组10种样式变体可用作创建独特网站的基础，并支持WordPress 6.1中可用的所有新功能，从流体排版Fluid Typography和改进的模板系统。

对于2023，网站外观和功能之间的差异现在非常明显。主题的唯一功能是规范网站的外观，而功能则通过插件添加。从这个角度来看，2023做得非常出色，为WordPress用户提供了所有最新的古腾堡网站编辑功能。自定义网站外观从未如此简单。

好了，关于2023主题的特色介绍就到这里。如果您很感兴趣，可以自己安装和测试，欢迎在下面分享您的测试感受。