深入了解2022主题和WordPress区块主题

虽然比原计划晚了一点，但我们正在获得一个新的WordPress默认主题。它的名字是2022！

新的WordPress默认主题随即将发布的WordPress 5.9版本一起提供。我们很想了解更多关于新主题的信息，因此我们在运行WordPress 5.9的本地开发环境中安装并测试了2022 。

在结束我们的想法之前，我们将向您展示我们的结果，为您带来对新WordPress主题来龙去脉的深入概述。

新的WordPress默认主题2022预览（图片来源：WordPress.org）

2022被设计为有史以来最灵活、最轻量级和可自定义的默认主题。它为测试区块、样板和模板提供了一个很好的游乐场。

作为一个区块主题，它将帮助您更好地探索全站点编辑、全局样式、导航区块和新的图像库，这是WordPress 5.9中最受期待的功能。

我们必须马上说2022是第一个默认区块主题！

新主题最雄心勃勃的目标之一是赋予用户权力。有了这么多开箱即用的样板和模板，用户只需单击几下即可构建复杂的布局。剩下的只是样式定制。

从技术的角度来看，写关于2022主题的文章与写WordPress 5.9附带的最新和最强大的功能没有太大区别。但是2022为我们提供了一个放大镜，可以更好地欣赏新的站点编辑功能并更好地了解平台的未来。

因此，我们在这里向您介绍新主题。

首先，我们将探索用户将使用WordPress 5.9和2022体验到的新站点编辑流程。

之后，我们将深入探讨在2022主题中实现的主要块主题功能。您将了解全局样式、区块样板、模板和模板组件。

但是关于2022主题和WordPress区块主题还有很多话要说。因此，作为附加章节，我们将简要介绍如何利用theme.json文件来扩展2022主题的功能。

让我们开始工作并深入了解全新的WordPress默认主题2022。

1. 2022主题带来新的站点编辑流程
2. 2022主题的核心：theme.json的快速概述
3. 2022主题中的全局风格
4. 2022主题区块样板
5. 以子主题扩展2022

2022主题带来新的站点编辑流程

几个完整的站点编辑功能成为WordPress 5.9的核心。使用安装了2022等区块主题的最新WordPress版本的站点所有者将很快能够：

• 使用更多区块和样板创建和编辑文章和页面
• 通过全局样式接口自定义theme.json文件中定义的设置和样式
• 为页面和文章创建和编辑模板
• 为页眉、页脚和其他模板区域创建和编辑模板部分

随着所有这些功能合并到核心，WordPress核心贡献者一直在讨论信息架构的演变，并重新设计了整个站点编辑流程。

激活2022主题后，您可能会注意到的第一件事是站点编辑器的入口点不再位于WordPress仪表板的主菜单中，而是已移至外观菜单下。

WordPress 5.9中的新外观菜单

将模板和样式编辑功能放在同一个外观菜单下应该可以简化编辑体验。它应该使您更容易理解您正在访问的功能与您的页面呈现相关。

编辑器菜单项打开站点的主页模板。根据您的阅读设置，这可以是您的最新文章页面或静态页面。

WordPress 5.9中的站点编辑器与2022主题

现在，点击左上角的WordPress图标会显示一个新的站点编辑器导航菜单，包括三个菜单项：站点、模板和模板部件。

让我们仔细看看。

编辑器导航菜单

站点选项打开主页模板（最新的博客文章或静态主页）。

从模板菜单项中，您将获得可用模板的列表。您可以单击列表中的任何模板以在编辑器中启动它。

在撰写本文时，2022主题提供了11个模板。

2022主题提供的模板

单击右侧的省略号 ( ︙ ) 图标可清除自定义项。

清除模板自定义

与主题模板不同，自定义模板只能重命名或删除（但您可以在文章编辑器中编辑自定义模板）。

重命名/删除自定义模板

Template Parts菜单项列出了您可以在编辑器中打开以进行自定义的可用模板部件。

您会发现默认情况下将四个模板部分添加到2022主题。将光标悬停在修改后的模板上会显示一个工具提示，让您知道模板已被自定义。

2022主题模板部分

您可以通过单击右侧的省略号 ( ︙ ) 图标来清除这些自定义。

清除模板组件自定义

编辑模板和模板部件

编辑器提供了自定义模板和模板部分结构的界面。

在这里，您可以轻松添加或编辑区块和样板，您的更改将自动应用于使用该模板的每个页面。

编辑单个文章模板

下图显示了编辑器中的404页面模板。这是一个非常简单的模板，只包括一个标题、一个段落和一个搜索框。尽管如此，它还是让我们很好地理解了UI的工作原理。

模板编辑器中的2022主题的404区块模板

在这里，您可以进行编辑和自定义模板以最好地满足您的需求。例如，您可能希望添加图片文章网格样板以增加访问者的参与度并邀请他们浏览您网站的内容。

自定义2022主题的404区块模板

模板编辑器顶部的标题下拉列表显示了可用模板区域的列表。相同的列表出现在“设置”侧边栏中的“模板”选项卡中。

2022主题中的模板区域

通过单击任何模板区域（例如页眉），您将被直接带到您要编辑的模板部分。

如果单击右侧的省略号图标，您将访问独立模板部件编辑器。

省略号图标启动独立模板部件编辑器

模板部分编辑器还提供了一对可拖动的手柄，允许您检查模板在不同屏幕分辨率下的行为。

调整模板零件预览尺寸

一旦您对更改感到满意，请保存您的编辑并返回主模板编辑器以检查最终结果。

如果您想深入了解新的信息架构，您可能需要查看以下文章：

• 站点编辑IA概念：如何显示和访问新功能
• 站点编辑iA概念 – 第 2 部分

2022主题的核心： theme.json的快速概述

为了全面了解2022主题和区块主题（如Bricksy）是如何工作的，让我们看一下基于theme.json文件的新主题配置和样式机制。

这种新机制在WordPress 5.8中引入，允许主题开发人员配置编辑器并从中央配置点添加功能支持。

在2022主题中，theme.json文件的结构如下：

{
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}

让我们快速浏览一下每个部分。

版本

version字段描述规范版本，当前为2.

设置

settings部分定义了全局或块级别的设置。在顶层定义的设置会影响所有块，但块可以单独覆盖全局设置。在2022主题中，您会发现以下设置：

{
"settings": {
"appearanceTools": true,
"color": {
"duotone": [...],
"gradients": [...],
"palette": [...]
},
"custom": {...},
"spacing": {...},
"typography": {
"dropCap": false,
"fontFamilies": [...],
"fontSizes": [...]
},
"layout": {...}
}
}

设置默认值称为presets，用于根据特定命名约定，生成CSS自定义属性和类名：

• CSS自定义属性：--wp--preset--{preset-category}--{preset-slug}
• CSS类名：.has-{preset-slug}-{preset-category}

一旦主题定义了它的预设，相应的CSS自定义属性就可以用来设置部分中的块和元素的样式styles。

风格

styles部分是主题定义块和元素默认样式的地方。例如，请参阅以下核心按钮区块的2022主题样式：

{
"version": 2,
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--typography--font-size--normal)"
}
}
}
}
}

您会注意到属性声明中使用的CSS自定义属性。

自定义模板

customTemplates部分是主题声明其自定义模板的地方。name和title字段是必需的。主题还可以通过设置postTypes属性来声明什么文章类型可以使用模板。

2022主题提供了四个自定义模板：

{
"version": 2,
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "page-large-header",
"title": "Page (Large Header)",
"postTypes": [
"page"
]
},
{
"name": "single-no-separators",
"title": "Single Post (No Separators)",
"postTypes": [
"post"
]
},
{
"name": "page-no-separators",
"title": "Page (No Separators)",
"postTypes": [
"page"
]
}
]
}

您将在block-templates文件夹中找到相应的.html文件。

2022主题的区块模板文件夹

模板部件

templateParts部分包括模板部件定义：

{
"version": 2,
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "header-large-dark",
"title": "Header (Dark, large)",
"area": "header"
},
{
"name": "header-small-dark",
"title": "Header (Dark, small)",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}

name和title字段是必需的。主题还可以声明一个area术语，模板部分将在编辑器中呈现。

2022主题模板部件

模板部件.html文件位于template-parts文件夹中。

现在您对2022主题的theme.json有了更多的了解，我们可以更深入地探索主题的功能和新的编辑界面。

让我们深入了解2022主题的全局样式。

2022主题中的全局样式

如果您查看2022主题的style.css，您可能会惊讶地发现它包含最少数量的CSS声明。原因是样式是在基于区块的主题的theme.json文件中声明的。

WordPress 5.9将更进一步，引入了一项新功能，该功能使区块主题用户能够从名为Global Styles的用户界面自定义站点元素的外观。

可以从位于编辑器右上角的新样式图标访问全局样式界面（另请参阅全局样式界面）。

单击该图标会显示一个新的样式侧边栏，其中包括三个单独的面板：

• 预览面板，显示您的自定义设置的预览
• 一个全局样式面板，提供对排版、颜色和布局的特定控件组的访问
• 一个Blocks项目，提供对块级样式设置的访问

2022主题中的样式侧边栏

2022主题的调色板

颜色面板可以帮助您编辑可用的调色板，并为背景、文本或链接分配或更改颜色。

在调色板面板中，您可以自定义主题或默认调色板，甚至可以创建自定义调色板。

2022主题中的颜色设置

您找到生成颜色控件的代码了吗？

如果没有，请在您最喜欢的代码编辑器中打开2022主题的theme.json。您会发现以下调色板声明：

{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}
]
}
}
}

下图显示了上面的代码如何匹配2022主题的调色板。

2022主题的调色板

现在让我们假设您要更改特定块的默认背景颜色。为区块的背景选择不同的颜色只会将不同的CSS变量分配给元素的background-color属性。下图提供了一个示例：

2022主题的原色用作背景色

就这样！您无需向定制器添加一行自定义CSS代码或为此创建子主题。

但是，让我们通过一些额外的例子继续探索2022主题的全局样式。

排版设置

排版面板是您可以在全球范围内为网站的文本和链接元素自定义排版样式的地方。

每个项目都提供对一组控件的访问，以便您自定义字体系列、大小和行高。

2022主题中的排版设置

您想知道生成这些控件的代码是什么吗？

打开2022主题的theme.json并找到typography部分。您将看到以下设置：

{
"version": 1,
"settings": {
"appearanceTools": true,
"typography": {
"dropCap": false,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Normal",
"size": "1.125rem",
"slug": "normal"
},
{
"name": "Medium",
"size": "1.75rem",
"slug": "medium"
},
{
"name": "Large",
"size": "clamp(1.75rem, 3vw, 2.25rem)",
"slug": "large"
},
{
"name": "Huge",
"size": "clamp(2.5rem, 4vw, 3rem)",
"slug": "huge"
}
]
},
}

您可能希望从上面的代码中看到两个字体系列和五个字体大小。你猜对了。

以下是上面的代码如何转换为全局样式排版设置：

2022主题中的排版样式

您可能会猜到是什么设置生成了Line height控件。在二十二十二中，您不会找到特定的设置，因为它是由appearanceTools属性启用的，这是几个设置声明的快捷方式（请参阅下一节）。

布局和外观工具

全局样式侧边栏中的最后一个元素是Layout。在撰写本文时，它仅包含一个padding控件。

2022主题中的布局设置

在2022主题中，布局面板由appearanceTools 设置属性启用，这是一个布尔值，可用于一次启用多个设置：

{
"settings": {
"appearanceTools": true
}
}

"appearanceTools": true只需替换以下声明块：

{
'settings': {
'border': {
'color': true,
'radius': true,
'style': true,
'width': true
},
'color': {
'link': true
},
'spacing': {
'blockGap': true,
'margin': true,
'padding': true
},
'typography': {
'lineHeight': true
}
}
}

好的——您现在希望了解在theme.json文件中声明的设置如何匹配相应的全局样式控件。

要获得新的WordPress默认主题的完整图片，我们还缺少一块拼图：区块样板。

2022主题区块样板

可以说2022主题主要是一组样板的集合——而且确实如此。在2022主题中，您会发现大量现成的区块样板，您可以从中进行选择，为您的网页构建令人惊叹且不可预测的嵌套块结构。

这里的关键词是用户授权。这很合适，因为使用区块样板，您可以构建各种各样的东西，从吸引人的作品集到单页促销网站，即使您对HTML或CSS 一无所知！

WordPress 5.9通过新的Pattern Explorer对样板系统进行了重大改进，该工具允许您以全屏模式浏览样板。

2022主题中的样板资源管理

新工具还使您能够直接从样板目录快速轻松地导入区块样板。这为WordPress用户和开发人员开辟了新的可能性，因此它的使用量在未来可能会大幅增加。

WordPress样板目录

2022主题包括五个类别的大量样板（超过65种）。

2022主题样板类别

这套坚实的样板与模板和模板组件完美搭配，新的默认主题，带来真正令人惊叹的编辑体验。

带有双色调的分层图像

带有标题和详细信息的视频

两张带文字的图片

如果您还没有机会尝试区块样板，我们将通过一个简单的示例向您展示为什么它们被认为是如此强大的工具。

假设您想从Index和Single Post模板中删除默认页脚，并将其替换为不同的2022区块样板。

从外观菜单或WordPress前端工具栏按钮启动站点编辑器以自定义索引模板。

单击索引按钮以显示标题下拉列表，其中显示页面上可用的模板区域列表。单击页脚旁边的省略号按钮，然后单击编辑页脚。

模板检查器

如上所述，这将启动隔离的模板部件编辑器。

独立模板部分编辑器中的默认2022主题页脚

现在打开块插入器并单击Patterns。

启动新的Pattern Explorer工具，选择Twenty Twenty-Two Footers类别，然后选择您选择的页脚。

2022主题中的样板管理器

现在根据您的需要添加和编辑区块。

在独立模板部件编辑器中编辑页脚

当您对更改感到满意时，保存标题并重新检查您的网站。

下图比较了具有不同页眉和页脚自定义的三个模板（索引、单个文章和没有分隔符的单个文章）：

在不同的2022主题模板中比较页眉和页脚自定义

以子主题扩展2022主题

为区块主题创建子主题与为经典主题创建子主题完全不同。

但是，一旦您对区块主题的结构有了很好的了解，您就会发现为2022主题或任何其他块主题创建子主题并不困难。

因此，让我们弄清楚如何自定义基于2022主题的网站的外观和感觉。

1. 为2022主题设置子主题
2. 自定义全局设置
3. 自定义区块样式

1. 设置2022子主题

在您的/wp-content/themes目录中，创建一个新文件夹并将其命名为您喜欢的任何名称（根据主题开发标准）。在此示例中，我们将子主题文件夹命名为twentytwentytwo-child。

现在你需要一个style.css文件。打开您喜欢的代码编辑器并创建以下样式表：

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments
Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/

与往常一样，您可以根据需要编辑字段。

您的子主题现在可供预览。您可以在外观 > 主题管理屏幕中激活它。

2.自定义全局设置

从WordPress 5.9开始，带有theme.json文件的子主题会继承父主题的设置。如果孩子的theme.json定义了一组样式，那么这些样式将应用在其父样式之上。

因此，我们可以创建一个仅包含一小部分自定义设置和样式定义的theme.json文件，而不是重新定义我们所有的原始选择。

如何声明自定义调色板

在为2022主题构建子主题时，最简单的任务是替换调色板。您需要做的就是在您子主题的theme.json中定义一个新的调色板，如下所示：

{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#FFFFFF",
"name": "Foreground"
},
{
"slug": "background",
"color": "#001F29",
"name": "Background"
},
{
"slug": "primary",
"color": "#D6FDFF",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FDFCDC",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#FED9B7",
"name": "Tertiary"
},
{
"slug": "accent",
"color": "#E94435",
"name": "Accent"
}
]
}
}
}

保存您的文件并返回到站点编辑器。上面定义的调色板应该已经取代了默认的2022主题的调色板。

子主题调色板

颜色将按顺序显示在调色板本身上，它们的名称应遵循最佳实践和Github上讨论的命名约定。

您可以在Carolina Nymark的深入概述中阅读更多关于theme.json颜色选项的信息。

如何声明自定义双色调滤镜

您还可以使用自定义过滤器集替换默认的双色调颜色。

为此，只需在子主题中添加以下代码。与palette属性处于同一级别的theme.json设置：

{
"version": 2,
"settings": {
"color": {
"palette": [...],
"duotone": [
{
"colors": [
"#001F29",
"#FFFFFF"
],
"slug": "default-filter",
"name": "Default filter"
}
]
}
}
}

保存您的文件并在区块编辑器中检查结果。您应该只看到一个双色调滤镜。

子主题双色调滤镜

3.自定义区块样式

正如我们之前提到的，使用WordPress 5.9，您现在可以从全局样式界面自定义theme.json设置和样式。

仅当区块在相应的block.json文件中声明支持特定功能时，才可以从全局样式界面自定义块样式。但是您可以覆盖子主题的theme.json中的默认区块设置。

现在假设您要覆盖文章标题和组区块样式。您需要做的就是定义要添加或覆盖的样式，如下所示：

{
"version": 2,
"settings": {...},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
},
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"spacing": {
"padding": "var(--wp--custom--spacing--small)"
}
},
"core/group": {
"spacing": {
"margin": {
"top": "0",
"bottom": "0"
}
}
}
}
}
}

在上面的示例中，我们更改了core/post-title的字体系列、背景颜色和填充值，以及core/group的顶部和底部边距。

下图显示了在公共站点上的结果：

自定义的文章标题栏

我们暂时不会深入探讨子主题，因为它超出了本文的范围。同时，您会在Github上找到更多关于2022主题子主题的示例。

小结

在仔细研究新的WordPress默认主题2022及其功能（使其成为有史以来最灵活的默认主题）时，我们公布了WordPress 5.9引入的新信息架构。我们甚至偷看了新的全局样式界面。

许多令人兴奋的新功能即将推出，而且随着时间的推移，新的编辑环境似乎变得更加强大、可靠和实用。

虽然许多新的WordPress功能正在开发中，但其他功能正在消失或重要性下降。许多用户想知道定制器会发生什么以及如何最好地保持与现有主题的向后兼容性。

但是，您不应该期望突然从传统主题跳跃到单一界限中的阻止主题。我们目前有四种不同类型的主题可供选择：

• 区块主题：为FSE设计的主题
• 通用主题：可与定制器和站点编辑器一起使用的主题
• 混合主题：支持FSE功能的经典主题，如theme.json
• 经典主题：带有PHP模板、functions.php等的主题。

所以，暂时不要担心——如果您还没有准备好切换到区块主题，仍然有很多解决方案可供选择。

原文地址：https://www.wbolt.com/twenty-twenty-two-theme.html