创建区块主题插件

欢迎学习本课程,主题是 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”链接来找到主题开发者手册。

使用钩子

除了知道如何向钩子注册回调函数外,在使用 WordPress 钩子时,你还需要了解一些其他事项。

在本课中,你将学习钩子优先级、钩子参数和钩子顺序。

钩子优先级

我们先从钩子优先级开始。

如果你查看 add_action 的文档,你会看到在钩子名称和回调函数之后,还有两个额外的函数参数。

第三个参数是钩子优先级,它是一个整数,默认值为 10。这意味着如果你在代码中注册一个动作时没有指定优先级,它将以优先级 10 被注册。

add_filter 函数也有一个优先级参数,其工作方式相同。

钩子优先级允许你确定你的钩子回调相对于可能注册在给定钩子上的其他钩子回调(无论是 WordPress 核心、其他主题还是插件)的执行顺序。

钩子按优先级数字顺序执行,从 1 开始。通常将优先级保留为默认值 10 是安全的,除非你特别想改变回调函数的执行顺序。

例如,在动作课程中的 after_setup_theme 示例中,你可能希望确保注册的回调函数仅在 WordPress 核心注册的任何回调之后运行。

因为 WordPress 核心以默认优先级 10 注册所有钩子回调,如果你指定优先级为 11,就可以确保你的回调函数在所有核心回调完成后运行。

add_action( 'after_setup_theme', 'wp_learn_setup_theme', 11 );

或者,如果你想确保回调在 WordPress 核心之前运行,你可以设置一个较低的优先级,比如 9。

add_action( 'after_setup_theme', 'wp_learn_setup_theme', 9 );

你经常会看到回调以高优先级注册,比如 99 或 9999。

add_action( 'after_setup_theme', 'wp_learn_setup_theme', 9999 );

这是因为插件或主题开发者希望确保这个回调在所有其他回调函数之后运行。然而,你永远无法知道其他第三方插件或主题可能以什么优先级注册它们的回调。

钩子参数

现在让我们看看钩子参数。

add_actionadd_filter 函数中的第四个参数是回调函数可以接受的参数数量。

为了更好地理解这是如何工作的,让我们看看一个与内容相关的过滤器钩子 get_the_excerpt

该过滤器定义在 wp-includes/post-template.php 文件的第 436 行。

return apply_filters( 'get_the_excerpt', $post->post_excerpt, $post );

这个过滤器定义在 get_the_excerpt 函数中,而该函数又从 the_excerpt 函数中调用。

这个函数通常用于显示搜索结果时,此时显示文章摘要而不是文章内容很有用。

apply_filters 函数注册了一个过滤器钩子,并带有两个与该过滤器相关的变量:$post_excerpt 字符串变量和 $post 对象。

在定义动作或过滤器钩子时,可以添加任意数量的可能参数。然而,传递给接受参数参数的数字决定了其中有多少个被传递给钩子回调函数。

如果你查看 add_filter 的文档,你会看到接受参数数量的默认值是 1,这意味着如果你不为此参数指定值,第一个参数将可用于传递给回调函数。

get_the_excerpt 过滤器中,有两个可能的变量可以被接受。

如果你在不设置参数数量的情况下注册回调,那么只有第一个参数(在本例中是 post_excerpt)会在回调函数中可用。

add_filter( 'get_the_excerpt', 'wp_learn_amend_the_excerpt', 10 );
function wp_learn_amend_the_excerpt( $post_excerpt ) {
    // 对 $post_excerpt 进行处理
}

为了接受更多可用的参数,你需要指定要接受的参数数量。

add_filter( 'get_the_excerpt', 'wp_learn_amend_the_excerpt', 10, 2 );

然后你可以在回调函数中使用这些参数。

function wp_learn_amend_the_excerpt( $post_excerpt, $post ) {

}

能够确定回调函数需要哪些参数,并在注册钩子时正确设置参数数量,是一项非常有价值的技能。

例如,假设你只想在摘要后面添加一段简单的文字。在这种情况下,你只需要 $post_excerpt 参数,因此可以省略接受参数的设置。

add_filter( 'get_the_excerpt', 'wp_learn_amend_the_excerpt', 11 );
function wp_learn_amend_the_excerpt( $post_excerpt ) {
    $additional_content = '<p>由搜索引擎验证</p>';
    $post_excerpt       = $post_excerpt . $additional_content;

    return $post_excerpt;
}

注意,优先级也做了调整。这样做是为了确保这段文字在核心过滤器回调函数(已分配给该过滤器)执行完毕后再被添加。

让我们在搜索结果中看看效果。

但是,如果你想包含文章中的某些内容,比如文章标题,该怎么办呢?

在这种情况下,你需要更新回调函数,使其接受钩子中的两个参数,以便从 $post 对象中获取文章标题。

add_filter( 'get_the_excerpt', 'wp_learn_amend_the_excerpt', 11, 2 );
function wp_learn_amend_the_excerpt( $post_excerpt, $post ) {
    $additional_content = '<p>'. $post->post_title . ' 由搜索引擎验证</p>';
    $post_excerpt       = $post_excerpt . $additional_content;

    return $post_excerpt;
}

让我们看看更新后的搜索结果是什么样子。

你会注意到,这段代码对传递给回调函数的参数使用了相同的变量名,即 $post_excerpt$post

这并不是强制要求,在注册回调函数时,你可以为它们任意命名。但使用相同的名称有助于记住每个变量的用途。

钩子顺序

根据你的具体需求,你可能首先需要确定使用哪个操作或过滤器是正确的。

幸运的是,WordPress 开发者文档中有一个“常见 API”部分的钩子页面,其中列出了所有操作和过滤器钩子,并按照它们在 WordPress 站点不同请求中的执行顺序排列。

你可以使用这个列表来检查你想使用的钩子何时执行,然后根据这些信息判断它是否满足你的需求。

过滤钩子

WordPress 钩子有两种类型:动作钩子和过滤器钩子。

在本课中,我们将重点介绍过滤器,但关于动作钩子的更多信息,请查看动作钩子课程。

什么是过滤器钩子?

过滤器允许你在特定时间点修改或过滤某些数据,这些数据将在后续被使用。

要使用过滤器,你需要在代码中将一个函数注册到已有的过滤器钩子上,这个函数被称为回调函数。

为了更好地解释这一点,我们来看一个名为 the_content 的过滤器。

这个过滤器定义在 wp-includes/post-template.php 文件中,位于一个函数内部。当主题模板需要渲染任何文章或页面内容时,就会调用这个函数。

在该函数内部,我们可以看到以下代码:

$content = apply_filters( 'the_content', $content );

这里,apply_filters 函数定义了一个过滤器钩子,钩子名称为 the_content。

你会注意到,一个 $content 变量作为 apply_filters 的参数传递,并且 apply_filters 的返回值被重新赋值给一个变量,在这里仍然是 $content 变量。

如果我们在这个函数中向上看一点,会发现 $content 变量被赋值为 get_the_content 函数的返回值。这是一个 WordPress 核心函数,用于从文章表中检索当前文章或页面的 post_content 字段值。

因此,apply_filters 函数注册了过滤器钩子,将代码执行到此时 $content 的值传递给注册在该钩子上的所有回调函数,并要求返回更新后的值。

使用过滤器钩子

要将回调函数注册到过滤器上,你需要使用 WordPress 的 add_filter 函数。

你需要将钩子名称和回调函数的名称作为参数传递给 add_filter 函数。

让我们看看在主题的 functions.php 文件中如何实现。

在本课中,你将在当前激活的主题中编写一些代码。请注意,这仅用于演示目的。除非你自己正在开发该主题,否则不建议直接编辑现有主题的文件。

在代码编辑器中,导航到当前激活主题的 functions.php 文件,并打开它。

如果你的主题没有 functions.php 文件,你可以在主题目录的根目录下创建一个。确保它命名为 functions.php,并且在文件顶部包含 PHP 开始标签。

然后,将以下代码添加到你的 functions.php 文件中,以便将一个回调函数挂载到 the_content 过滤器钩子上。

add_filter( 'the_content', 'wp_learn_amend_content' );

然后,使用 PHP 函数语法创建回调函数,该函数接受来自过滤器的相关参数。

function wp_learn_amend_content( $content ) {
    // 执行一些更新 $content 的操作
    return $content;
}

你不必让参数名称与过滤器传递的变量名称相同,但这样做会让代码更易读。

注意,你必须返回更新后的数据。这样,从 apply_filters 调用中更新的原始变量才能获取到更新后的数据。

例如,假设你想在每篇文章内容的末尾添加一些内容,你可以像这样将其追加到 $content 变量中。

add_filter( 'the_content', 'wp_learn_amend_content' );
function wp_learn_amend_content( $content ) {
    $additional_content = '<!-- wp:paragraph --><p>通过 <i>the_content</i> 过滤</p><!-- /wp:paragraph -->';
    $content            = $content . $additional_content;

    return $content;
}

在这个例子中,你添加了一些文本到一个段落块中,这些文本会在前端每篇文章的底部显示。

始终从过滤器回调中返回某些内容非常重要,理想情况下是返回传递给过滤器的变量修改后的内容。如果不返回任何内容,会导致你的 WordPress 网站出现致命错误。

让我们看看这在我们的 WordPress 网站中是什么效果。

如果你在前端查看任何文章或页面,你会看到内容底部显示“通过 the_content 过滤”的文本。

所以,从这个例子可以看出,过滤器钩子允许你在代码执行的特定节点修改特定的数据片段。

动作钩子

WordPress 钩子有两种类型:动作钩子和过滤器钩子。通常简称为动作和过滤器。

本视频将重点讲解动作,但关于过滤器钩子的更多信息,请查看过滤器课程。

什么是动作钩子

顾名思义,动作允许你在 WordPress 请求执行过程中的特定时刻执行某些操作。

为了更好地解释这一点,我们来看一个例子。

在开发 WordPress 主题时,可以启用对不同文章格式的支持。

你可以在 WordPress 开发者文档的高级管理部分阅读更多关于文章格式的内容。

文章格式是一种方式,允许有权在 WordPress 网站上创建文章的用户从预定义的格式列表中选择。根据所选的文章格式,可以渲染不同的模板布局,以不同的格式显示文章。

要启用文章格式,文档指出你需要使用 add_theme_support 函数,并建议通过 after_setup_theme 动作钩子来注册。

这个钩子在 wp-settings.php 文件中定义,位于主题加载之后。

do_action( 'after_setup_theme' );

这里的 do_action 函数定义了动作钩子,钩子名称为 after_setup_theme

我们还可以在开发者参考中这个钩子的参考页面阅读更多关于它的信息。

这里我们看到,这个钩子在每次页面加载时触发,在主题初始化之后,用于执行主题的基本设置、注册和初始化操作。

使用动作钩子

要使用动作,你需要在代码中将一个函数注册到已有的动作钩子上,这个函数被称为回调函数。

要将回调函数注册到动作上,你需要使用 WordPressadd_action 函数。

你需要将钩子名称和回调函数的名称作为参数传递给 add_action 函数。

让我们看看在主题的 functions.php 文件中是什么样子。

在本课程中,你将在当前激活的主题中编写一些代码。请注意,这仅用于演示目的。除非你自己开发主题,否则不建议直接编辑现有主题的文件。

在你的代码编辑器中,导航到当前激活主题的 functions.php 文件并打开它。

如果你的主题没有 functions.php 文件,你可以在主题目录的根目录下创建一个。只需确保它命名为 functions.php,并在文件顶部包含 PHP 开始标签。

然后,将以下代码添加到你的 functions.php 文件中,将一个回调函数挂载到 after_setup_theme 动作钩子上。

add_action( 'after_setup_theme', 'wp_learn_setup_theme');

接下来你需要定义回调函数。

为此,使用 PHP 函数语法,并指定你要定义的函数名称。

function wp_learn_setup_theme() {

}

然后在回调函数内部添加 add_theme_support 函数调用。对于这个例子,你可以从文章格式文档中复制代码。

function wp_learn_setup_theme() {
    add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
}

在你的激活主题中添加这段代码后,如果你现在在 WordPress 仪表盘中创建一篇新文章,你会看到文章编辑器中出现文章格式选择框,你可以选择所需的文章格式。

这里你可以看到你在回调函数中启用的两种文章格式。

从这个例子中你学到,你可以使用动作来执行某些操作,无论是启用某个已有功能,还是在请求执行中添加一些内容。

WordPress 钩子

WordPress 中最常用的开发者功能之一就是它的钩子系统。

钩子让 WordPress 变得如此可扩展,并允许你在 WordPress 的基础上构建任何东西,从博客到在线电商平台。

让我们深入了解什么是钩子、它们如何工作,以及如何在你的 WordPress 主题和插件中使用它们。

什么是钩子?

钩子允许你的主题或插件代码在特定的预定义位置与 WordPress 请求的执行进行交互或修改它。

有两种类型的钩子:动作钩子和过滤钩子。它们通常被称为动作和过滤器。

要理解钩子如何工作,让我们看看钩子在 WordPress 核心中是如何定义的。

钩子如何工作

在 WordPress 前端请求课程中,你了解了 wp-settings.php 文件,以及这个文件如何设置 WordPress 环境。

如果你滚动到这个文件的大约第 704 行,你会看到以下代码行:

do_action( 'init' );

在这里,do_action 函数定义了一个动作钩子,钩子名称为 init

你可以在 init 钩子文档中阅读更多关于这个钩子的信息。

作为开发者,你可以挂钩到这个动作,并在 init 动作触发时运行你自己的代码。

这本质上就像能够在 wp-settings.php 文件中的那个位置添加你自己的代码,但无需实际修改核心文件。

如何使用钩子

你可以在你的 WordPress 主题和插件中使用钩子,向 WordPress 添加你自己的功能,或修改默认功能。

为了实际演示,让我们创建一个简单的例子,展示如何使用过滤钩子来修改文章的内容。

为此,你将创建一个小的插件。如果你从未使用过插件,不用担心,但请查看插件介绍模块以了解更多信息。

现在,在你的代码编辑器中,浏览到你的 wp-content/plugins 目录,并创建一个名为 wp-learn-hooks.php 的新文件。

然后,将以下代码添加到这个文件中:

<?php
/**
 * 插件名称:WP Learn Hooks
 * 描述:一个简单的插件,用于演示如何在 WordPress 中使用钩子。
 * 版本:1.0
 */

add_filter( 'the_content', 'wp_learn_amend_content' );

function wp_learn_amend_content( $content ) {
    return $content . '<p>感谢阅读!</p>';
}

现在,浏览到你本地 WordPress 安装的管理后台,进入插件页面,并激活你的新插件。

然后,浏览到你网站的前端,查看任何文章或页面。在这个例子中,我将查看示例页面。

你会看到页面内容现在末尾添加了“感谢阅读!”这段文字。

如果你停用插件,这段文字就会消失。

结论

这是一个简单的例子,展示了如何使用过滤钩子来修改文章的内容。

如果现在这些内容让你感到困惑,不用担心,因为我们将在动作钩子和过滤钩子的课程中更详细地介绍。