使用钩子

除了知道如何向钩子注册回调函数外,在使用 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 安装的管理后台,进入插件页面,并激活你的新插件。

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

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

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

结论

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

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

MySQL

MySQL 是基于 Web 的应用程序中最流行的数据库系统之一。

本课将向您介绍 MySQL 数据库系统,以及如何与之交互。

什么是 MySQL?

MySQL 是一个开源的关系型数据库管理系统。它用于在数据库中存储数据,并在需要时检索这些数据。

SQL 代表结构化查询语言,它是一种用于与 MySQL 数据库中的数据交互的编程语言。

正如您在关于 WordPress 和 Web 服务器的课程中所学到的,WordPress 使用 MySQL 数据库来存储其所有数据。这些数据包括文章、页面、评论和用户等内容。

您可以使用的一个与 MySQL 数据库交互的工具是 phpMyAdmin。

phpMyAdmin 是一个基于浏览器的工具,允许您通过图形用户界面与 MySQL 数据库交互,同时也可以对其运行 SQL 查询。

它通常包含在您的 Web 主机或本地开发环境的控制面板中。

创建表

要在数据库中创建表,您需要使用 CREATE TABLE 语句。此语句需要表名以及表应包含的列。

例如,要创建一个名为 colors 的表,包含 idtypevalue 列,您可以使用以下 SQL 语句:

CREATE TABLE colors (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    type VARCHAR(30) NOT NULL,
    value VARCHAR(30) NOT NULL
)

这将创建 colors 表,并包含相应的列。

向表中添加行

现在,如果您想向表中添加一行,您需要使用 INSERT 语句。此语句需要表名以及每列的值。

例如,要向 colors 表添加一行,您可以使用以下 SQL 语句:

INSERT INTO colors (type, value) VALUES ('header', 'red');

如果您现在浏览 colors 表,您将看到刚刚添加的行。

从表中读取行

如果您想从表中读取一行,您需要使用 SELECT 语句。此语句需要表名以及要读取的行。

例如,要从 colors 表中读取 typeheader 的行,您可以使用以下 SQL 语句:

SELECT * FROM colors WHERE type = 'header';

这将返回所有请求的行。

如果您只想要 value 列的值,您可以使用以下 SQL 语句:

SELECT value FROM colors WHERE type = 'header';

这将只显示 value 列中的数据。

更新表中的行

如果您想更新表中的一行,您需要使用 UPDATE 语句。此语句需要表名、要更新的列、新值以及要更新的行。

例如,要更新 colors 表中 value 列的值,您可以使用以下 SQL 语句:

UPDATE colors SET value = 'blue' WHERE type = 'header';

如果您浏览该表,您将看到 value 列的值已被更新。

从表中删除行

如果您想从表中删除一行,您需要使用 DELETE 语句。此语句需要表名以及要删除的行。

例如,要从 colors 表中删除 typeheader 的行,您可以使用以下 SQL 语句:

DELETE FROM colors WHERE type = 'header'

浏览该表显示数据已被删除。

数据库键

在前面的示例中,您可能注意到使用 value 列来更新或删除行。虽然这可行,但这不是更新或删除行的最有效方式。这是因为 value 列不是唯一的,可能存在多行具有相同的值。此外,如果您想更新或删除一行,您需要知道 value 列的值,这可能无法实现。

因此,通常建议您的数据库表有一个 id 列,并且该 id 是唯一的、自动递增的。同时,最好为 ID 建立索引。索引允许 MySQL 比没有索引的字段更快地执行选择、更新和删除操作。

从 PHP 运行查询

与 PHP 和 JavaScript 不同,SQL 是一种在数据库上执行的查询语言。此外,由于 JavaScript 在浏览器中运行,通常不会从 JavaScript 直接向数据库发送请求,而是通过服务器端执行的 PHP 来实现。

要运行 SQL 查询,你需要从 PHP 建立与数据库的连接,准备并执行查询,查询结果会以某种变量形式返回给 PHP。

幸运的是,正如你在 WordPress 工作原理模块中学到的,WordPress 包含一个数据库 API,可以让你管理数据库连接并运行所需的任何查询。

此外,如果你使用默认的 WordPress 数据类型,甚至无需担心执行 SQL 查询。

附加资源

有关 MySQL 和 SQL 语句的更多信息,可以访问以下在线资源:

  • MySQL 教程
  • MySQL 8.2 参考手册
  • 在 freeCodeCamp 上学习 MySQL – 初学者课程

PHP

PHP 是一种用于创建动态网页的编程语言。

根据网络统计数据,超过 75% 的现代网站由 PHP 驱动。

让我们来看看 PHP 是如何工作的。

什么是 PHP?

PHP 通常用于创建网站的管理界面,例如 WordPress 仪表盘,但它也用于为网站前端填充内容。

PHP 是一种服务器端脚本语言,这意味着它由服务器解释,并将结果渲染到浏览器中。

为了看一个 PHP 能做什么的简单例子,我们沿用之前课程中的 HTML 页面,但使用 PHP 来更改标题元素的颜色:

<?php
if ( isset( $_GET['color'] ) ) {
    $color = $_GET['color'];
} else {
    $color = 'red';
}
?>
<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1 style="color: <?php echo $color; ?>;">这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <a href="/index.php?color=blue">将标题颜色改为蓝色</a>
    </body>
</html>

你首先会注意到,文档的文件扩展名从 .html 变成了 .php。这告诉服务器该文档包含 PHP 代码。

然后,任何你想添加到文档中的 PHP 代码都需要用 PHP 标签包裹起来。

在深入代码之前,先点击链接试试这个例子。

所以,在这个例子中:

  1. 文件顶部的 PHP 代码被包裹在 PHP 标签中,这告诉服务器将这些代码作为 PHP 执行。
  2. 创建了一个名为 $color 的变量,它存储来自 $_GET 全局数组的 color 查询字符串参数的值(如果存在的话),如果不存在则存储值 red
  3. $color 变量的值被添加到了标题元素的 style 属性中。你会看到这也被包裹在 PHP 标签中,并使用 echo 函数输出 $color 变量的值。
  4. 文档中添加了一个链接,将 color 查询字符串参数的值更改为 blue

你会注意到,检测查询字符串并设置颜色变量的 PHP 代码被添加到了文档中其他 HTML 元素之前。这是因为这段 PHP 代码需要在 HTML 元素在浏览器中渲染之前运行。

此外,你会看到新的标题颜色是在 PHP 标签内以内联样式输出的。这是因为 PHP 无法更改 CSS 文件,所以更改标题元素颜色的唯一方法是将颜色添加为内联样式。

最后,注意锚标签上查询字符串的使用,用于将数据从一个页面传递到另一个页面。这是在 PHP 中从一个页面传递数据到另一个页面的常见方式。

同时,你会看到按钮被改成了锚标签。这样做是为了确保 HTML 的语义化使用。按钮元素通常用于触发一个操作,例如提交表单或触发 JavaScript 函数。在这种情况下,锚标签用于链接到一个页面,而这个页面恰好是正在渲染的同一个页面。

这也可能是你第一次看到 if 语句。if 语句用于检查一个条件是否为真,如果为真,则运行 if 语句内的代码。这也被称为条件语句。

PHP 和 JavaScript 都支持条件语句。事实上,PHP 和 JavaScript 的许多功能是相似的。然而,这两种语言之间有一些关键区别,理解这些区别很重要。

其他资源

有关 PHP 的更多信息,你可以访问以下在线资源:

  • PHP 入门指南
  • 官方 PHP 文档
  • 在 freeCodeCamp 上学习面向初学者的 PHP

JavaScript

JavaScript 是一种编程语言,用于为网页添加交互功能。

让我们进一步了解 JavaScript 的工作原理,以及如何在 WordPress 网站中使用它。

什么是 JavaScript?

JavaScript 是一种客户端脚本语言,这意味着它由浏览器解释执行。

要了解 JavaScript 能做什么的简单示例,让我们看看之前课程中的 HTML 页面,并添加一个按钮,该按钮使用 JavaScript 更改标题元素的颜色:

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <button>将标题颜色改为蓝色</button>
    </body>
    <script>
        const button = document.querySelector('button');
        const heading = document.querySelector('h1');

        button.addEventListener('click', () => {
            heading.style.color = 'blue';
        });
    </script>
</html>

在这个示例中:

  1. 文档中添加了一个按钮元素,文本为“将标题颜色改为蓝色”。
  2. 在 HTML 文档的底部,有一个新的 <script> 元素。这个元素用于向文档添加 JavaScript。
  3. 创建了一个名为 button 的变量,它通过使用 document.querySelector() 方法并传入按钮元素的 CSS 选择器(本例中为 button)来存储对按钮元素的引用。
  4. 创建了一个名为 heading 的变量,它通过使用 document.querySelector() 方法并传入标题元素的 CSS 选择器(本例中为 h1)来存储对标题元素的引用。
  5. 为按钮元素附加了一个事件监听器。这个事件监听器监听点击事件,当事件被触发(按钮被点击)时,它会将标题元素的颜色改为蓝色。

你会注意到 JavaScript 是在其他 HTML 元素之后添加到文档中的。这是因为 JavaScript 需要能够访问 HTML 元素才能正常工作。

由于浏览器从上到下读取 HTML 文档,将 JavaScript 放在文档底部可以确保在 JavaScript 运行之前,HTML 元素已经加载到浏览器中。

你还会注意到,如果刷新页面,标题会恢复为原始颜色。这是因为 JavaScript 只能在页面加载到浏览器后影响页面,但这些更改不会持久保存。

与 CSS 类似,也可以使用外部文件向文档添加 JavaScript。这是向文档添加 JavaScript 的首选方式。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <button>将标题颜色改为蓝色</button>
    </body>
    <script src="script.js"></script>
</html>

然后,你可以将文档中 <script> 元素内的 JavaScript 移动到 script.js 文件中。

const button = document.querySelector('button');
const heading = document.querySelector('h1');

button.addEventListener('click', () => {
    heading.style.color = 'blue';
});

JavaScript 在 WordPress 网站的许多地方都有使用。JavaScript 最大的用途之一是在新的块编辑器中,它由一个名为 React 的 JavaScript 框架驱动。

WordPress 中还使用了许多外部 JavaScript 库,你可以在 WordPress 仪表盘中的“关于”页面底部找到这些库的列表。

此外,与 CSS 一样,WordPress 允许你灵活地将自定义 JavaScript 或外部 JavaScript 库添加到你的插件和主题中。

其他资源

有关 JavaScript 的更多信息,你可以访问以下在线资源:

  • MDN 上的 JavaScript
  • freeCodeCamp JavaScript 算法和数据结构认证

CSS

如果说 HTML 是网页的结构,那么 CSS 就是网页的样式。

在本课中,你将学习 CSS 如何与 HTML 配合使用,以及在哪里可以找到更多关于 CSS 的信息。

什么是 CSS?

CSS 代表层叠样式表。如果说 HTML 描述了网页的结构,那么 CSS 则描述了文档的样式。

CSS 用于定义网页的颜色、字体和布局。

让我们看看 HTML 课程中的 HTML 文档:

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

在上面的例子中,HTML 文档没有样式。它在浏览器中使用默认的浏览器样式显示。但你可以使用 CSS 来改变样式。

例如,你可以将标题元素的颜色改为红色,并将段落元素的字体大小改为 20 像素。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
    </head>
    <body class="main">
        <h1 style="color: red;">这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p style="font-size: 20px;">这是我的 HTML 文档的内容。</p>
    </body>
</html>

使用 style 属性将 CSS 添加到元素被称为内联样式,但这并不是为 HTML 文档添加样式的最佳方式。

相反,你可以使用 <style> 元素将 CSS 添加到文档中。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <style>
            h1 {
                color: red;
            }
            p {
                font-size: 20px;
            }
        </style>
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

也可以使用外部样式表将 CSS 添加到文档中。这是为文档添加 CSS 的首选方式。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

在上面的例子中,style.css 文件将包含以下 CSS:

h1 {
    color: red;
}
p {
    font-size: 20px;
}

在这些例子中,CSS 一直针对特定的元素。但也可以根据元素的属性来定位它们。

例如,你可以定位 body 元素的 class 属性,并为其添加边框。

.main {
    border: 5px solid black; 
}

CSS 能做的远不止改变元素的颜色和字体大小。它还可以用于创建复杂的布局、动画等等。

和 HTML 一样,CSS 在 WordPress 网站中随处可见。仪表盘有其自己的一套核心 CSS 来控制其外观和感觉。

主题会附带一套自定义的 CSS 来样式化主题元素。

在网站前端添加内容的插件也会使用 CSS 来样式化这些内容。

WordPress 还允许你灵活地添加自己的自定义 CSS,或使用外部 CSS 框架,例如 Bootstrap 或 Tailwind。

其他资源

有关 CSS 的更多信息,你可以访问以下在线资源:

  • MDN 上的 CSS
  • Web.dev 上的 CSS
  • freeCodeCamp 响应式网页设计课程

HTML

作为 WordPress 开发者,你最先学习的编程语言之一就是 HTML。

在本课中,你将了解什么是 HTML、它在 WordPress 中如何使用,以及在哪里可以找到更多关于编写 HTML 的信息。

什么是 HTML?

HTML 是网络的代名词。互联网的创始人设计 HTML 是为了创建网页。

无论何时你在浏览器中访问一个网站,无论是世界上最大的新闻门户网站之一,还是当地非营利组织的主页,你正在查看的文档都是用 HTML 编写的。

HTML 代表超文本标记语言,用于描述网页的结构。

HTML 由元素组成。元素是 HTML 文档的构建块。

一个 HTML 元素通常有一个开始标签、一个结束标签以及标签之间的内容。

以下是一个 HTML 文档的示例:

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

在上面的示例中,顶部的 <html> 标签是开始标签,底部的 </html> 标签是结束标签。注意结束标签以斜杠开头。这些标签之间的内容是 <html> 元素的内容。

HTML 元素可以相互嵌套。在上面的示例中,<head> 元素嵌套在 <html> 元素内,而 <title> 元素嵌套在 <head> 元素内。

HTML 元素也是语义化的,这意味着每个标签都有特定的含义,并且应该以特定的方式使用。例如,<h1> 元素是标题元素,而 <p> 元素是段落元素。

HTML 元素也可以有属性。属性用于提供关于元素的额外信息。在上面的示例中,<body> 元素有一个名为 class 的属性,其值为 main

某些元素允许你包含媒体,例如图像、音频和视频。在上面的示例中,<img> 元素用于在页面上包含图像。src 属性用于指定图像的位置,alt 属性用于为图像提供替代文本。

HTML 元素也可以是自闭合的。在上面的示例中,<img> 元素是自闭合的,你会注意到它没有结束标签。

当你在浏览器中访问一个网页时,浏览器会读取 HTML 文档并在浏览器窗口中显示内容。浏览器从上到下、从左到右读取 HTML 文档。

默认情况下,每个元素以不同的方式显示。例如,<h1> 元素显示为标题,而 <p> 元素显示为段落。

HTML 在 WordPress 网站中无处不在,从仪表盘到驱动前端的主题。甚至插件也使用 HTML 来显示内容。

无障碍 HTML

在编写 HTML 时,编写无障碍 HTML 非常重要。无障碍 HTML 是指以方便残障人士使用的方式编写的 HTML。

例如,如果你使用图像显示徽标,你应该为图像包含替代文本。这允许使用屏幕阅读器的人理解图像是什么。

此外,你应该始终使用语义化的 HTML 元素,并以正确的方式使用它们。例如,如果你要创建标题,你应该使用标题元素,而不是段落元素。

其他资源

有关 HTML 的更多信息,你可以访问以下在线资源:

  • MDN 上的 HTML
    • MDN 上的无障碍 HTML
  • Web.dev 上的 HTML
    • Web.dev 上的无障碍 HTML
  • freeCodeCamp 响应式网页设计课程

其他实用开发工具

虽然本地开发环境和代码编辑器是 WordPress 开发的基础工具,但还有其他社区工具和资源可能对您有所帮助。

如果您正在开发 WordPress 主题,WordPress.org 主题测试数据提供了导入包含虚拟数据的 XML 文件的选项,用于测试您的主题。这可以让您了解主题在不同类型内容和布局下的表现。

您可以安装主题检查插件,该插件会测试您的主题是否符合最新的 WordPress 标准和实践。

类似地,对于插件开发者,有插件检查插件,它会测试您的插件,确保其达到 WordPress 插件审查团队的基本要求标准。

还有一些插件可以帮助调试代码。这些插件包括:

  • 调试栏:在管理栏中添加一个调试菜单,显示查询、缓存和其他有用的调试信息。
  • 查询监视器:支持调试数据库查询、PHP 错误、钩子和操作、区块编辑器区块、已排队的脚本和样式表、HTTP API 调用等。

还有弃用通知记录插件,它会记录插件或主题中不正确的函数使用、弃用的文件使用以及弃用的函数使用。

您将在未来的课程中了解更多关于这些工具的信息。