创建区块主题插件

欢迎学习本课程,主题是 WordPress 的“创建区块主题”插件。

通过本课程,你将能够:

  • 描述“创建区块主题”插件是什么,以及为什么使用它,并且
  • 识别该插件的主要功能并描述其作用。

创建区块主题插件选项

“创建区块主题”插件由 MakeWordPress.org 社区开发。在开始使用之前,需要注意的一个重要方面是,该插件仅用于开发目的,不适用于生产环境网站。

它更像是一个用于创建新主题的工具。

安装并激活“创建区块主题”插件后,你可以导航到“外观”>“创建区块主题”。

你会看到的前四个选项都与当前激活的主题相关。

  • 将你的主题导出为压缩文件。
  • 为父主题创建一个子主题。
  • 克隆它。
  • 覆盖你当前的主题。

我将在本课程后面更详细地描述这个选项。

下一个选项是“创建空白主题”,如果你希望从一个模板或空主题开始,可以使用这个选项。

最后一个选项是“创建样式变体”。这与全局样式有关,我们将在中级主题开发者学习路径中更详细地介绍这一点。

请注意,这个插件还帮助你管理主题字体。如果你进入这个用户界面,你会看到当前主题中嵌入的所有字体。并且你会注意到有多个预览选项可用。

将更改导出到主题文件

我发现使用“创建区块主题”插件的最佳功能之一是能够直接将更改保存到主题文件中。

例如,如果我对索引模板进行更改,比如添加一个段落区块,然后点击保存,这个更改会保存在数据库中。

如果我现在对全局样式进行更改,比如在自定义调色板中添加一种新颜色,我可以搜索一种颜色或输入十六进制代码,然后命名我的颜色。我将这个命名为紫色。然后点击完成。如果我点击保存,这个更改也会保存到数据库中。

如果我们现在导航到“管理所有模板”,我们会看到在索引模板旁边有一个“已自定义”的标记。这意味着用户自定义优先。

现在,如果我回到站点编辑器,我们会看到“创建区块主题”插件的侧边栏和“保存更改”选项。这会从数据库中移除更改,并将它们推送到主题文件中。如果我们导航回“管理所有模板”,我们会注意到“已自定义”的标记已经消失了。

现在,我们快速查看一下主题文件,看看那些保存的更改。在索引模板中,我们可以看到添加的段落区块。现在让我们打开 theme.json 文件,搜索新的紫色颜色。你可以在设置中看到它,作为可供最终用户使用的新颜色。

想了解更多关于开发 WordPress 主题的内容吗?请查看中级主题开发者学习路径。

全局设置与样式

欢迎来到本课程,我们将一起探索 WordPress 的全局设置与样式。

通过本课程,您将:

  • 描述 WordPress 主题中 theme.json 文件的作用,
  • 熟悉 JSON 格式及 theme.json 的结构,以及
  • 理解用于加载网站设置和样式配置的层级结构。

为什么 WordPress 主题需要 theme.json 文件?

Theme.json 是主题的配置文件。以前,主题开发者会在经典主题中使用自定义器来为最终用户构建功能。

举个例子,如果我们查看经典主题 Twenty Twenty-One,会在自定义器中找到颜色和小工具的设置。最终用户正是通过自定义器来使用主题的。

如今,在现代化的 WordPress 中,我们有了区块主题,主题开发者现在可以使用 theme.json 来向最终用户提供这些功能。这提供了一种更一致的方式来呈现功能。

在站点编辑器中,您可以看到可以在主题中包含的设置和样式的各种可能性。

JSON 格式与 theme.json 的结构

JSON 代表 JavaScript 对象表示法,本质上是一种数据表示格式。它用于配置文件。它是通过 REST API 发送和请求数据的常见格式,轻量且易于阅读。

支持的数据类型包括字符串、数字、浮点数、布尔值、数组和对象。对于数组,我们始终使用数字索引,就像在 PHP 中理解的那样,如示例所示。

对于对象,我们使用键值对,如下例所示。这是一个来自《西部世界》的语录列表,您可以看到我刚才提到的键值格式。

另请注意,键始终是字符串。在代码编辑器中,您会在屏幕顶部找到面包屑导航,这有助于快速导航。

我的光标位于 Bernard Lowe 的第一条语录上,您可以看到它是一个数组项。另请注意,JSON 对逗号特别敏感。如果我删除一个逗号,就会收到错误消息。

查看默认主题 Twenty Twenty-Four 的 theme.json 文件。

现在我将介绍这些属性。

Schema(模式):用于定义支持的 JSON。这就是我们能获得实时提示和错误报告的原因。

Version(版本):例如版本 2。您可以在 WordPress.org 上找到这个实时参考文档,它提供了您可以设置的最新属性。

Settings(设置):用于定义区块控件、调色板、字体大小等。

Styles(样式):用于应用颜色、字体大小、应用于网站和区块的自定义 CSS 等项目。

Template parts(模板部件):在主题的 parts 文件夹中定义的模板部件的元数据。

Custom templates(自定义模板):在主题的 templates 文件夹中定义的自定义模板的元数据。

Patterns(模式):一个以逗号分隔的别名列表,用于从 WordPress.org 上的模式目录中注册。

用于加载设置和样式配置的层级结构

主题中包含的 theme.json 文件只是网站设置和样式配置层级结构中的一层。这意味着它在某些情况下可以被覆盖。

我将从低到高为您介绍这个层级的优先级。

WordPress

在安装文件中,如果您进入 WP includes 文件夹,会看到其中的 theme.json 文件,该文件定义了默认设置和样式。

主题的 theme.json 文件

您在该文件中定义的任何内容都会覆盖 WordPress 的默认设置。如果您有一个处于激活状态的子主题,并且子主题中包含 theme.json 文件,那么您在此处所做的任何设置都将优先于父主题中的 theme.json 文件。例如,您可以将“外观工具”设置为 false。

用户配置

在站点编辑器中,任何通过全局样式甚至模板更改并保存到数据库的更改,都将覆盖并优先于层级结构中的所有其他级别。

总结

在《中级主题开发者学习路径》中,可以找到更详细的信息。

别忘了,你还可以访问 theme.json 参考指南,进一步熟悉 JSON 模式。

模板

欢迎来到关于 WordPress 主题模板的课程。

通过本课程,你将能够:

  • 描述什么是主题模板以及 WordPress 如何为你处理最终的标记,
  • 理解模板系统的工作原理,
  • 列出并描述主题中常见的典型模板,以及
  • 区分模板和模板部分。

主题模板以及 WordPress 如何处理最终标记

模板是表示前端整体文档结构的文件。对于现代区块主题,它们由区块标记组成,并渲染静态和动态数据。

让我们来看一个页面的模板。我们将在站点编辑器中打开页面模板,并打开代码编辑器来查看区块标记代码。

区块标记通过特定的 HTML 注释符号来标识。它告诉正在渲染的页面输出该区块的结果。关于区块的额外信息,如属性或内联样式,会以 JSON 格式传递给区块标记。WordPress 解析这些区块标记,并将其转换为在网页浏览器中显示的最终 HTML 标记。

模板系统的工作原理

当有人访问 WordPress 网站的单篇文章时,所使用的模板遵循模板层级结构规定的一组规则。这是一张图表,可在 WordPress.org 上找到,请注意,决策过程在此图表中从左到右进行。

例如,以我们的例子来说,当网站访问者导航到一篇单篇文章,而当前激活的 WordPress 主题既不包含 single.html 也不包含 singular.html 模板时,它将默认使用 index.html 模板。现在让我们看看主题中常见的典型模板。

这些是 Twenty Twenty-Four 主题中包含的模板。

主题中常见的模板

Index:这是备用模板文件,是所有主题中必需的文件。

Single:当访问者请求单篇文章时使用,正如我们在例子中看到的。

Page:当访问者请求单个页面时使用。

Archive:当访问者按归档类型(例如分类或作者)请求文章时使用。

Search:当访问者在网站上执行搜索时,用于显示搜索结果。

404:当 WordPress 找不到与访问者请求匹配的文章、页面或其他内容时使用。

模板和模板部分的区别

在我们的主题文件夹中有一个 parts 文件夹,其中包含模板部分文件。模板部分旨在提供网页中重复出现的区域,并从根本上消除了多次创建它们的需要。

一个很好的例子是页眉或页脚,此外,它们还能在整个网站中提供一致的外观和感觉。模板可以包含一个或多个模板部分,但也可以选择不包含任何模板部分。

至此,我们对 WordPress 模板的简要概述就结束了。请注意,你将在中级主题开发者学习路径中学习更多关于创建模板和模板部分的知识。

主样式表

欢迎来到本课程,我们将一起探索 WordPress 主题的主样式表文件。

通过本课程,你将能够:

  • 创建 style.css 文件头部,配置主题的相关数据,
  • 描述主题 style.css 文件中可用的头部字段列表,以及
  • 添加必要的头部字段,在子主题中指定父主题的文件夹。

创建 style.css 文件头部,配置主题的相关数据

style.css 文件是每个 WordPress 主题必需的样式表。该文件的头部注释部分用于让 WordPress 和用户了解主题信息。

在代码编辑器中,我们可以查看默认 WordPress Twenty Twenty-Four 主题的 style.css 文件头部。当你还在代码编辑器中时,快速看一下 screenshot.png 图片文件。现在,我们切换到 WordPress 仪表盘。

进入 WordPress 仪表盘后,转到“外观”>“主题”,然后进入“主题详情”。在主题详情中,我们可以在左侧看到截图,右侧看到来自 style.css 文件头部的信息。我们还能看到主题名称、版本、作者、作者网址、描述,最后还有一个标签列表。

主题 style.css 文件中可用的头部字段

现在,让我们更仔细地看看主题 style.css 文件中可用的不同字段。为了演示,我们将使用默认 WordPress 2024 主题的主样式表文件。我们会逐一查看样式表中包含的字段。

从主题名称开始,请注意这必须是唯一的,特别是如果你计划将主题提交到官方 WordPress 目录。正如我们在 WordPress 中看到的,主题名称会被用户看到,所以在选择名称时要考虑这一点。

请注意,如果你刚开始学习主题开发,添加主题名称后就可以停止了。这实际上就是你所需的一切。

其余可选字段:

主题 URI,这是一个公共网页的 URL。人们会通过这个链接获取关于你主题的更多信息。

作者姓名,后面跟着一个 URL,提供关于作者的更多信息。

描述,同样,如果你希望用户看到并了解这个主题是否适合他们,这一点尤其重要。

你的主题能够兼容的最旧 WordPress 版本。

主题经过测试的最新 WordPress 版本。

主题能够兼容的最旧 PHP 版本。

版本号,后面跟着许可证和许可证 URL。

文本域,这是一个用于翻译的字符串,所以如果你计划翻译主题,请确保包含它,并且要全部使用小写字母。

最后是标签,这是一个以逗号分隔的列表,列出了你的主题支持的功能。

在子主题中指定父主题文件夹所需的头部字段

创建子主题实际上是主题开发者更高级的话题,但这里值得简要提一下。重要的是要理解,你的子主题不仅继承父主题的函数、过滤器、模板等,还会扩展和覆盖父主题。

子主题和父主题之间的这种连接是通过在子主题的 style.css 文件中添加头部字段“Template”来建立的。以下是一个为 Twenty Twenty-Four 主题创建的子主题示例。

主题结构

欢迎来到本课程,我们将一起探索 WordPress 主题的结构。

通过本课程,你将能够:

  • 熟悉 WordPress 主题中使用的文件夹和文件,
  • 描述创建块主题所需和可选的文件,以及
  • 列出块主题中使用的标准文件夹。

WordPress 主题中使用的文件夹和文件

在 assets 文件夹中,你会找到字体、图片、CSS 和 JS 文件。在 parts 文件夹中,你会找到用于头部和底部等部分的 HTML 文件。在 patterns 中,你会找到用于组件的 PHP 文件,这些组件可以帮助用户在构建页面和文章时节省时间。在 styles 中,你会找到 JSON 文件,它们为用户提供网站全局样式的变体。最后,在 templates 中,你会找到用于生成页面和文章的 HTML 文件。

块主题所需和可选的文件

必需文件

两个必需的文件是 style.css 和 index.html。style.css 文件是主样式表,用于配置主题数据(如名称和描述),也方便添加自定义 CSS。

另一个必需文件是 templates 文件夹中的 index.html。它是默认的后备模板,对于 WordPress 将其视为块主题是必要的。

可选文件

functions.php 文件在主题初始化后由 WordPress 自动加载,这是运行自定义 PHP 的好地方。接下来是 readme.txt 文件,它不直接被 WordPress 使用,但当你将主题提交到官方 WordPress 主题目录时是必需文件,它也为用户提供主题信息。

接下来是截图文件,建议使用 1200×900 的尺寸。它是主题的图片,用于在用户浏览 WordPress 后台时显示主题。用户进入外观 -> 主题,就会看到截图;如果你选择将主题提交到 WordPress 主题目录,它也会在那里使用。文件格式可以是 PNG 或 JPEG。

我们要看的最后一个文件是 theme.json,它是你网站的配置文件,主要用于与用户界面集成的设置和样式。我们将在本模块后面详细研究这个文件。

块主题中使用的标准文件夹

有四个标准文件夹。这些是 WordPress 为特定功能指定的标准文件夹。

首先是 templates 文件夹,里面是 HTML 文件,它们代表前端的整体文档结构,本质上是由块标记组成的模板。我们将在本模块后面深入探讨这些文件的内容。

接下来是 styles 文件夹,里面是 JSON 文件,每个文件代表一种不同的样式变体。用户可以选择颜色和字体,调整他们想要的网站外观和感觉。我们将在中级主题开发者学习路径中更详细地讨论这些。

接下来是 patterns,它们是可重用的组件,由一个或多个块组成,用户可以在站点编辑器中插入。注意,WordPress 会自动注册此文件夹中的文件。Patterns 也在中级主题开发者学习路径中有更详细的介绍。

最后一个文件夹是 parts 文件夹。这些是可以包含在顶级模板中的较小部分,包括头部、底部、侧边栏等内容。

开发者主题入门

欢迎来到这节向开发者介绍主题的课程。

通过本课程,你将

  • 区分主题和插件,
  • 发现 WordPress 主题的可能性,以及
  • 探索块主题、经典主题和混合主题的基本结构。

区分主题和插件

本质上,主题和插件之间的区别在于:主题控制内容的呈现,而插件控制网站的行为和功能。

WordPress 主题有哪些可能性?

你可以访问 WordPress.org 主题目录来获取灵感。

当你准备开始设计主题时,需要认真考虑颜色、字体、布局和功能。首先选择一种基础颜色和至少一种互补色,用于整个主题。像 Canva 上的色轮工具会很有帮助。

接下来,对于字体,你可以前往 Google Fonts,搜索并找到适合你主题的字体。

在 WordPress.org 主题目录中,我们可以看到主题开发者通常在其主题中包含的一系列布局,这展示了你可以添加到主题中的大量功能或特性。

你的主题将如何鼓励用户互动?

一种流行的鼓励互动的方式是使用颜色鲜艳的号召性用语按钮。

你的主题在无障碍方面会考虑哪些因素?

一个简单的入门方法是确保文本颜色和背景颜色之间有足够的对比度。

你的主题将包含哪些功能?

对于块主题,你会为最终用户提供哪些块、模式和媒体资源?

块主题、经典主题和混合主题的基本结构

Twenty Twenty-Four 主题是块主题的一个好例子。

块主题使用块来构建网站的所有部分,包括导航菜单、页眉、内容和页脚。这种主题的文件主要是 HTML 和 JSON 格式。

对于经典主题,Twenty Twenty 主题是一个很好的例子。

经典主题不使用块编辑器来管理文章和页面之外的网站布局。在经典主题中,我们主要使用 PHP 文件。

混合主题的一个好例子是 Twenty Twenty-One 主题。

混合主题是一种采用了一些站点编辑功能的经典主题。例如,在 Twenty Twenty-One 主题的 functions.php 文件中,我们会看到他们添加了对块样式的主题支持。

主题开发者手册

你可以通过访问 developer.wordpress.org 并点击页面顶部的“Themes”链接来找到主题开发者手册。