云策 WordPress 开发者社区

社区新闻

Create Block Theme 插件使用教程

查看官方原文 ↗ 发布于

2012 年推出的 Underscores (_s) 入门主题，专为开发者设计，在最佳编码实践方面领先 1000 小时。在 2022 年引入 Twenty Twenty-Two 块主题之前，所有 WordPress 默认主题都基于 _s 主题。

就像经典主题的 underscores 一样，Create Block Theme (CBT) 插件是块主题的类似工具。在撰写本文时，CBT 插件的当前 v1.13.4 版本有两个功能：创建块主题和管理主题字体。在 WordPress 6.5 中，后一个功能预计将作为新的字体库功能合并到核心中。

安装并激活 CBT 插件后，您可以直接从 wp-admin 仪表板使用它来创建块主题。

无需编写任何代码或接触模板文件，您可以：

  • 克隆主题
  • 为主题添加样式变体
  • 重写全局样式自定义
  • 或创建子主题或空白主题

CBT 插件是唯一可以直接从站点编辑器创建块主题不同变体的工具。Learn.WordPress.org 上的短视频“使用 Create Block Theme 简化块主题开发”简要概述了所有选项。在本文中，您将重点了解插件的特定用例。

站点设置

如果您还没有这样做，让我们先设置一个测试站点。在本示例中，本地设置包括一些虚拟测试数据以及已安装并激活的 CBT 插件。它有一个名为 Emptytheme 的空白主题，已重命名为“EMPTY-CBT”并进行了少量修改。

显示管理仪表板的截图，其中激活了 EMPTY-CBT 主题

自定义块主题

您可以根据喜好自定义块主题。使用全局样式界面或 theme.json 文件进行您喜欢的更改。

本文假设您熟悉使用站点编辑器全局样式界面和创建块主题。

对于本文，进行了以下更改：

  • 为主页添加了一些基本布局更改
  • 添加了一个页面模板和一个页脚部分
  • 添加了一个导航

下面的截图显示了 EMPTY-CBT 文件结构和 index.html 模板标记。

显示 EMPTY-CBT 文件结构和 index.html 模板标记的截图

WordPress 站点编辑器提供了一个导出主题功能，包括 theme.json 文件和样式变体。

让我们探索这个功能，并找出它与 CBT 插件的不同之处。

使用 WordPress 站点编辑器导出功能

在站点编辑器中，您可以通过工具部分的更多（三个垂直点）菜单找到导出功能。

显示站点编辑器中主题导出功能位置的截图

导出的文件包含所有自定义编辑和样式更改，并作为 zip 文件下载到您的下载文件夹中。

显示导出的块主题 zip 文件结构的截图

WordPress 6.0 开发说明WordPress 6.0 中的主题导出描述了导出块主题的底层过程。

  • 导出工具将所有文件从当前活动主题复制到 zip 文件中。然后检查数据库中对模板和 theme.json 文件的任何更改，提取所有更改并覆盖同名文件。
  • 出于安全原因，模板文件中的某些更改会被清理。例如，以下 CSS 变量：--wp--custom-spacing--outer 变为 u002du002dwpu002du002dcustomu002du002dspacingu002du002douter。
  • theme.json：属性将按字母顺序排序。模式也可能更新以匹配站点的当前 WordPress 版本。

如何使用 Create Block Theme 插件

如果您尚未安装，请从 WordPress 插件仓库安装并激活Create Block Theme 插件。

显示管理仪表板中激活的 Create Block Theme 插件的截图

如果您点击管理仪表板中的外观，有两个按钮：创建块主题和管理主题字体。本文重点介绍创建块主题选项。

显示创建块主题插件选项的截图

选择创建块主题按钮后，该插件允许您创建整个主题、子主题或主题样式变体，而无需编写任何代码或接触模板文件。

现在，让我们转向插件的导出选项。

选项 1. 导出选项

与 WordPress 站点编辑器的导出功能类似，此选项也允许导出带有用户更改的活动主题。

显示创建块主题插件导出主题选项的截图

要测试此功能，请使用上一节中描述的相同设置，不做任何更改。

显示使用 CBT 插件（左）和 WordPress 编辑器导出工具（右）导出的主题文件结构的截图

使用 WordPress 插件和站点编辑器导出的主题文件结构完全相同，包含相同的代码。当您希望将自定义主题用作独立主题或提交到主题目录时，此功能非常有用。它需要更新主题名称和主题元数据（本文后面讨论）。

选项 2：创建活动块主题的克隆

从外观 > 创建块主题并选择克隆 EMPTY-CBT选项，它将显示以下表单。只有主题名字段是必需的，所有其他字段都是可选的。

显示创建块主题插件克隆活动主题选项的截图

此功能创建活动主题的新副本以及用户更改。克隆的主题将包含活动主题的所有资源以及用户的更改。

克隆的主题将下载到您的主题下载文件夹。如果您激活了它，您会注意到您上传的 screenshot.png 文件覆盖了其原始的占位符截图图像。

显示上传主题的 Screenshot.png 文件

如果您检查其文件和文件夹，它们与当前激活的主题以及您的自定义更改相同。其 style.css 文件包含您输入的元字段，其他字段（如果未填写）则显示为空白。

显示克隆主题元字段的截图

文本域字段正确显示 emptycbtclone 名称，但标签字段是从 WordPress 继承的。有一个 GitHub 工单用于将主题标签添加到导出的 style.css 文件中。

选项 3：创建子主题

当您只想进行少量自定义并希望继续使用父主题进行未来更新时，子主题非常有用。如果您是创建块子主题的新手，块主题文档包含详细说明。

在使用创建子主题选项之前，将其背景颜色更改为 Luminous vivid orange (#FF6990)，链接颜色更改为白色。

显示使用全局样式自定义样式元素的截图

然后填写表单，包括主题名称、其他元字段和截图图像。以下截图显示了新创建的 EXPTY-CBT-CHILD 子主题，该主题已在测试站点示例中激活。

显示管理仪表板中激活的子主题的截图

此选项创建一个包含三个文件的子主题：readme.txt、空的 style.css 和 theme.json；一个文件夹：parts/header.html 和 screenshot.png 图像。

显示使用创建块主题插件创建的子主题文件结构的截图

style.css 文件包含创建子主题时输入的元信息。

/*
Theme Name: EMPTY-CBT-CHILD
Theme URI:
Author:
Author URI:
Description: This is demo child theme of EMPTY-CBT block theme.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: emptycbt
Text Domain: emptycbtchild
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/

选项 4：覆盖活动块主题

为了测试覆盖选项，让我们使用 EMPTY-CBT 主题，并使用其全局样式界面进行一些更改。

从外观 编辑器选择蓝色的编辑按钮。当您按下顶部的样式（半月形）按钮时，它将显示外观面板。现在选择颜色按钮，将其背景颜色更改为黑色 (#000000)，文章标题更改为 Luminous vivid amber (#FCB900) 并保存更改。

显示站点编辑器全局样式菜单侧边栏的截图

如果您访问管理所有模板面板（设计 模板 管理所有模板），您会注意到以下屏幕。

显示站点编辑器模板管理站点视图的截图

您是否注意到上面的页面和单篇文章模板中的蓝色圆点？它们表示这两个模板已被修改。有一个选项按钮（三个点）可以清除自定义（如果需要）。

在站点编辑器中所做并保存的任何更改都存储在数据库中，当我们更改主题时这些更改会丢失。这类用户更改不会反映在主题的模板或模板部件标记中。

如果您希望将自定义永久保存在当前主题中，这个覆盖选项非常方便。两种样式都可以使用样式变体选项保留，这将在下一节中探讨。

注意： 小心！一旦覆盖，您将无法从站点编辑器恢复更改，只能通过手动更新代码编辑器或重新进行自定义。

现在，让我们选择覆盖选项并按生成按钮。将显示以下通知。

显示主题覆盖选项通知的截图

如果我们检查 theme.json 文件，我们之前的修改已附加到样式部分。同样，如果您检查模板列表，蓝色圆点已被清除。

显示带有更新样式的 theme.json 文件的截图

这是完整的 theme.json 文件 
{
    "settings": {
   	 "appearanceTools": true,
   	 "layout": {
   		 "contentSize": "650px",
   		 "wideSize": "1000px"
   	 },
   	 "typography": {
   		 "fontFamilies": [
   			 {
   				 "fontFace": [
   					 {
   						 "fontFamily": "Inter",
   						 "fontStyle": "normal",
   						 "fontWeight": "300",
   						 "src": [
   							 "file:./assets/fonts/inter_300.ttf"
   						 ]
   					 },
   					 {
   						 "fontFamily": "Inter",
   						 "fontStyle": "normal",
   						 "fontWeight": "900",
   						 "src": [
   							 "file:./assets/fonts/inter_900.ttf"
   						 ]
   					 },
   					 {
   						 "fontFamily": "Inter",
   						 "fontStyle": "normal",
   						 "fontWeight": "400",
   						 "src": [
   							 "file:./assets/fonts/inter_regular.ttf"
   						 ]
   					 }
   				 ],
   				 "fontFamily": "Inter",
   				 "slug": "inter"
   			 },
   			 {
   				 "fontFace": [
   					 {
   						 "fontFamily": "Open Sans",
   						 "fontStyle": "normal",
   						 "fontWeight": "400",
   						 "src": [
   							 "file:./assets/fonts/open-sans_normal_400.ttf"
   						 ]
   					 }
   				 ],
   				 "fontFamily": "Open Sans",
   				 "slug": "open-sans"
   			 }
   		 ]
   	 }
    },
    "styles": {
   	 "color": {
   		 "background": "var:preset|color|black",
   		 "text": "var:preset|color|cyan-bluish-gray"
   	 },
   	 "elements": {
   		 "link": {
   			 "color": {
   				 "text": "var:preset|color|luminous-vivid-amber"
   			 }
   		 }
   	 },
   	 "typography": {
   		 "fontFamily": "var:preset|font-family|inter"
   	 }
    },
    "version": 2,
    "$schema": "https://schemas.wp.org/trunk/theme.json"
}

当您浏览站点的前端时，您会注意到自定义已应用。

选项 5：创建活动主题的样式变体

一个最近的更新将样式和模板变体分开，并保留在主题模板文件中所做的任何更改。

块主题的样式变体功能是其最强大的功能之一。Twenty Twenty-Three 主题完全使用样式变体设计。在主题手册中阅读更多相关信息。

在本文前面的部分中，您创建了两个变体：一个作为子主题的鲜艳橙色和黑色背景，以及覆盖选项。

为了测试样式变体选项，在这个用例中，我重新创建了与原始主题样式变体相同的样式。此选项允许在白色（原始）、红色和黑色背景样式之间切换，而无需修改原始主题样式或创建新的子主题。

使用站点编辑器的模板编辑模式，我重新创建了原始的白色背景和黑色对比色并保存了样式。

显示如何使用全局样式创建活动主题样式变体的截图

我想将其创建为我的“白色”变体。当选择插件的创建样式变体选项时，它要求我们输入变体名称。

显示成功创建样式变体通知的截图

同样，我还重新创建了我们在创建子主题部分中创建的 Luminous vivid orange (#FF6900) 背景样式，并将其保存为鲜艳橙色样式变体。

在创建了“白色”和“鲜艳橙色”作为我的两个样式变体之后，如果您检查您的 EMPTY-CBT 文件夹，一个新的 /styles/white.json 文件已与您的选择一起创建。

显示带有变体 theme.json 文件的新样式文件夹的截图

返回站点编辑器的模板编辑器模式（外观 编辑器 设计）并选择模板编辑（蓝色）按钮，然后选择样式（右上角） 浏览样式按钮，您创建的所有三种样式都会显示出来。

显示浏览样式菜单中样式变体图标的截图

样式变体功能允许您创建任意数量的主题样式变体，而无需编写一行代码。现在，您可以在站点的变体之间切换。

最后，让我们探索创建空白主题选项。

选项 6：创建空白主题

要使用创建空白主题选项，请填写之前在克隆和子主题选项中使用的相同表单。对于我的测试，我输入了 EMPTY-BLANK 作为唯一必填字段。

一个空白主题会下载到活动主题的文件夹中，并显示以下消息：

显示成功创建空白主题通知的截图

以下截图显示了新创建的 EMPTY-BLANK 主题，该主题已在我的测试站点上激活。由于我没有包含截图图像，它包含了 CBT 插件的截图图像。

显示使用空白主题创建选项时如果未上传则显示默认截图图像的截图

以下是 EMTY-BLANK 主题的文件结构，包含一个带有系统字体和定义的页眉和页脚模板部件的起始 theme.json 文件。

主题文件夹包括 readme.txt、screenshot.png、styles.css 和三个模板文件。

/parts 文件夹包括 header.html 和 footer.html 模板，/templates 文件夹包含一个类似的起始 index.html 模板文件。

显示默认空白主题文件结构的截图

/*
 Theme Name: EMPTY-BLANK
 Theme URI:
 Author:
 Author URI:
 Description: This is demo empty-blank theme with current active EMPTY-CBT theme.
 Requires at least: 5.8
 Tested up to: 5.9
 Requires PHP: 5.7
 Version: 0.0.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template:
 Text Domain: emptyblank
 Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/

如何分享您导出的主题

导出的主题可以提交到 WordPress 主题仓库，但需要完成一些更新，这些更新列在WP 6.0 现场指南中：

  • 截图。
  • readme.txt 文件中的 changelog 条目（如果有）。
  • style.css 中的主题版本号。
  • 在所有相关文件中更新主题名称。
  • 添加所需的许可证文件（如果未包含）。
  • 然后重新压缩文件并将新的 zip 文件提交到 https://wordpress.org/themes/getting-started/。

注意：请查看主题手册以获取最新的提交指南。

尽管本指南中包含了一个emptytheme示例来演示 Create Block Theme 插件对块主题开发者来说有多么强大，但您可以将此插件集成到您的开发工作流中，使用 WordPress 主题目录中的任何块主题。

有些选项工作方式类似（例如，导出、克隆、覆盖），但您仍然可以在工作流中使用最适合您的选项。

更多学习资源