二〇二三：来自社区的新默认WordPress主题

WBOLT_COM 10 月 04, 2022 1.3k+ 0

二〇二三主题

二〇二三（Twenty Twenty-Three）是与 WordPress 6.1 一起推出的全新的默认 WordPress 主题。

这是一个极简主义主题，没有图像或附加功能。它提供了最佳的入门主题来构建模板和样式变化，并测试最新版本的 WordPress 引入的所有功能。该主题可以被视为一个真正的开发和测试环境，尽管极简风格、响应能力和轻便性使其成为创建适合各种用途的博客和网站的不错选择。

在他对二〇二〇主题的介绍中，Kjell Reigstad 谈到了默认主题的未来：

theme.json、区块样板和块模式等创新使主题开发变得更加简单，并为用户提供了自定义网站的新方法。有理由相信社区可以利用这一切在未来几年为我们的用户构建更频繁和多样化的主题和定制解决方案。

Channing Ritter 提出了以下建议：

如果我们没有强调主题本身，而是强调了由社区成员设计的一组自以为是的风格变化怎么办？我们可以使用二〇二二作为一个新主题的基础，该主题被剥离和最小化——一张空白的画布，让各种风格的变化大放异彩。

这就是新的二〇二三默认主题所发生的事情。社区被要求积极参与设计默认的 WordPress 主题，我们喜欢这样，因为它使新主题成为真正参与工作的结果。

二〇二三主题预览

但在揭示与新的 WordPress 默认主题捆绑在一起的样式变化之前，让我们先了解一下二〇二三的基本功能以及它可以适用的内容。

页面布局和样式
二〇二三排版
模板和模板部件
全局样式和样式变化

页面布局和样式

如上所述，二〇二三是二〇二二的精简版。新的默认主题引人注目的是它的简单性和轻盈性。二〇二三非常灵活，非常适合 Gutenberg 的最新站点编辑功能，例如模板编辑、全局样式变体、流体排版和区块样板模式。

因此，毫不奇怪，在本文显示的屏幕截图中，您会看到没有任何花里胡哨但非常适合定制和测试的最小页面。

举个例子，下图显示了带有和不带有特色图片的单个文章页面。

二〇二三中带有和不带有特色图像的单个文章预览

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

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

即使新主题是二〇二〇的简化版本，与之前的默认主题相比，二〇二三也呈现出一些关键的差异。

首先，标题的大小已减小，默认衬线字体已替换为系统无衬线字体。

二〇二三主题中的标题大小

此外，还应用了不同的调色板。您可以在theme.json的以下代码中看到新的二〇二三调色板定义：

{
"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"
}
]
},
}
}

二〇二三主题默认颜色

但新的默认主题的主要特点是它的风格变化集。二〇二三带有十种全局风格变体，每一种都展示了颜色、字体系列和字体大小的不同组合。

二〇二三全局风格

您将在二〇二三种样式文件夹中找到相应的 JSON 文件。

Figma上提供了页面模板、样式和二十三的样式变化的完整预览。

Figma上的二〇二三风格变化预览

二〇二三排版

在像二〇二三这样的极简主题中，排版在使文本可读、网站吸引人以及最终为访问者提供有益的浏览体验方面发挥着关键作用，无论设备和屏幕大小如何。

为此，二〇二三带有一组新的字体系列，并使用 WordPress 6.1 引入的流体排版。

字体

二〇二三具有一组用于风格变化的新字体，其特点是简单和多样：

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 帐户免费使用它（阅读有关 Adobe 字体许可的更多信息）。

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

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

Google 字体上的 DM Sans 预览

流体排版和间距

二〇二三使用 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，Twenty-3 还支持流体间距。

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

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

"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"
]
}
}

下面的视频显示了流体排版在二〇二三中的实际应用。

您可以在 Design Specification 中检查排版和间距预设。

模板和模板部件

使用二〇二三，您将看到 WordPress 6.1 附带的所有功能和站点编辑改进。

对于模板和模板部件尤其如此。

二〇二三的模板

当您启动站点编辑器并在您的网站上运行二〇二三主题时，您将看到包含 11 个模板和 4 个模板部件的列表。

下图显示了站点编辑器中的 404 模板。

二〇二三主题404页面模板

您将在二〇二三的模板和部件文件夹中找到相应的 HTML 文件。

二〇二三主题模板

下图显示了编辑模式下的 Comments 模板部分：

编辑评论模板部分

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

自定义模板

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

Blank
博客（替代）
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"
}
]
}