分类： 中级主题开发者

欢迎来到本课程，我们将一起学习如何创建和使用区块样式变体。

什么是区块样式变体，以及如何将其包含在你的主题中？

这里有一个使用 Twenty Twenty-Four 主题的示例。

如果我们在这里选择 H2，可以看到 带星号 样式已被应用，其中包含一个额外的 CSS 类 .style-asterisk。

注册区块样式变体

现在让我们看看如何使用 PHP 注册区块样式。

如果我们查看 Twenty Twenty-Four 主题的 functions.php 文件并向下滚动，会看到 register block style 函数，这里正在通过一些样式修改核心区块标题的区块样式。

接下来，让我们看看如何使用 theme.json 自定义核心 WordPress 区块样式。

如果你查看 Twenty Twenty-Four 主题的 theme.json 文件，向下滚动到大约第 506 行，会看到添加了一个 variations 属性，以便提供圆角图片的选项。

我们可以进入站点编辑器查看实际效果。

点击一张图片，进入样式面板，可以看到“圆角”作为一个选项出现。

后续步骤

如果你想了解更多关于样式的知识，可以查阅区块编辑器手册，或者通过访问 WordPress.org 上的主题手册，随时了解区块样式变体的相关内容。

欢迎来到本课程，我们将探索如何在不使用 theme.json 文件的情况下创建区块样式表。

什么是区块样式表，何时使用它？

你始终可以选择在 theme.json 中编写 CSS。

以下是一个针对 WordPress 核心画廊区块的示例。然而，如果你的 CSS 变得过于冗长，区块样式表就是解决方案。

现在，让我们看看 WordPress 目录中的几个区块主题。

• 第一个主题名为 Ronny，由 ThemeinWP 创建。
• 第二个主题名为 Charity Vibes，由 Iconic Themes 创建。

你始终可以选择将 CSS 放在 style.css 中。

但对于大型项目，你可能需要考虑按区块拆分样式表，并将其放入诸如 assets 之类的文件夹中。这样可以提高网站性能，也让大型项目更易于管理。

在 Ronny 主题中，他们选择将区块样式表放在 ‘assets/styles’ 中；而在 Charity Vibes 中，他们选择将样式表放在 ‘assets/css’ 中，并命名为 blocks.css 文件。

由此可见，你在命名文件和文件夹时是有选择余地的。

创建自定义区块样式表

现在，让我们看看如何创建自定义区块样式表。

需要注意一些命名约定。

区块样式表的类名是 .wp-block-{命名空间}-{别名}，对于核心区块，你会使用类 .wp-block-{别名}，而区块样式表文件则命名为 core-{别名}.css。

要注册区块样式表，你需要使用 wp_enqueue_block_style 函数。

第一个参数传入区块名称，第二个参数传入一个参数数组。你可以使用 functions.php 来注册区块样式表。

以下是一个针对 WordPress 核心图片区块的示例，这是让你的样式在页面头部区域以内联方式显示所需的最低要求。

add_action( 'init', 'themeslug_enqueue_block_styles' );

function themeslug_enqueue_block_styles() {
    wp_enqueue_block_style( 'core/image', array(
        'handle' => 'themeslug-block-image',
        'src'    => get_theme_file_uri( "assets/blocks/core-image.css" ),
        'path'   => get_theme_file_path( "assets/blocks/core-image.css" )
    ) );
}

下一步

你可以参考 WordPress.org 上的主题手册，了解更多关于区块样式表的信息。

欢迎阅读本指南，了解如何在主题中包含 CSS、JavaScript、图片和字体。

加载样式和脚本

如何在主题中加载样式和脚本？

嗯，这与开发 WordPress 插件时加载 CSS 或 JavaScript 的方式非常相似。请务必查看WordPress 初学者开发者学习路径中的加载 CSS 或 JavaScript 课程。

基本上，要在主题中加载或包含 CSS 或 JavaScript 文件，您需要使用 WP enqueue scripts 动作钩子。

包含 CSS

让我们从在主题中包含 CSS 开始，无论是使用样式表还是内联样式。例如，在 Twenty Twenty-Two 主题中，我们看到在 functions.php 文件中，他们通过使用 WP enqueue scripts 动作钩子来加载样式。

这里我们特别看到 get_template_directory_uri 函数，它与 style.css 文件拼接后，基本上可以使 CSS 样式在前端可用。如果您需要添加内联 CSS，WordPress 提供了 wp_add_inline_style 函数。

包含 JavaScript

现在让我们看看如何在主题中包含 JavaScript，无论是使用外部文件还是内联 JavaScript。这里有一个 Twenty Twenty-One 主题中的示例。

我们加载了几个 JavaScript 文件。我们使用了 WP enqueue scripts 动作钩子，这些文件位于 ‘assets/js’ 文件夹中。与添加内联 CSS 类似，您可以使用 wp_add_inline_script 函数添加内联 JavaScript。

包含图片

如何在主题中包含图片？

我们假设您不是在构建块主题。使用一个您可以选择使用的代码示例。将您的图片文件放在 ‘assets/img’ 文件夹中，并使用 get_parent_theme_file_uri 函数，该函数将获取您主题的 URL。

<img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/img/your-image.jpg' ) ); ?>" alt="">

包含字体

现在让我们看看如何使用 theme.json 在主题中包含字体。

您可以通过使用 theme.json 在主题中包含字体。以下是 Twenty Twenty-Two 主题中如何实现此操作的示例。您可以看到字体文件已添加到 assets/fonts 文件夹中。然后在 theme.json 中的 settings.typography.fontFamilies 下，我们看到在 fontFace 中如何引用该文件，以生成一个可在样式中使用的变量。

这就是该变量的样子，您只需将 slug 替换为您在设置中设置的那个即可。

var(--wp--preset--font-family--source-serif-pro)

这是一个在文章标题中使用 Source Serif Pro 字体的示例。

"styles": {
    "blocks": {
        "core/post-title": {
            "typography": {
                "fontFamily": "var(--wp--preset--font-family--source-serif-pro)"
            }
        }
    }
}

后续步骤

如果您想查看本课程中提到的函数，请查看 WordPress.org 上提供的参考文档。您还可以查看主题手册，了解更多关于如何包含资源的信息。

欢迎来到本课程，我们将深入探讨主题的函数文件（functions.php），以及如何利用它来添加你自己的功能。

functions.php 文件

WordPress 主题的 functions.php 文件有什么作用？

通过添加可选的 functions.php 文件（在《初学者 WordPress 开发者学习路径》中介绍过），可以为你的主题添加功能或特性。请务必查看关于《主题结构》的课程。

我们可以选择添加 functions.php 文件，以便利用 WordPress 钩子系统在不修改核心文件的情况下扩展 WordPress。要了解更多关于 WordPress 钩子的信息，可以参考《初学者开发者学习路径》中的相关模块。

与插件类似，你应该始终将代码挂载到钩子上，以便在加载过程的适当时间点执行其功能。例如，你可以通过使用 after_setup_theme 动作钩子和 add_theme_support 函数，在主题被 WordPress 初始化后添加各种主题支持功能。

以下是默认的 Twenty Twenty-Four 主题中包含的 functions.php 文件内容。其中的 register_block_pattern_category 函数为我们注册了页面的模式分类。

请注意，WordPress 核心已经提供了许多模式分类。只是这个特定的模式分类并未提供，因此主题为我们实现了它。当执行 init 钩子时，将运行 Twenty Twenty-Four 模式分类函数。

使用插件

如何判断何时使用插件而不是 functions.php 文件？

既然你可以为主题添加类似插件的功能，那么明智地使用这种能力就很重要。如果你计划分发你的主题，最好将代码放在插件中，而不是依赖 functions.php 文件。这样，如果网站所有者决定更换主题，他们的网站也不会崩溃。

如果你计划将主题提交到 WordPress.org 主题目录，请务必遵循那里的指南。

常见用途

让我们看看使用 functions.php 文件扩展 WordPress 功能的一些常见用途。

对于经典主题，你可以使用 functions.php 文件来添加块主题样式。如果你查看 Twenty Twenty-One 主题，你会看到一个示例，他们为这个经典主题添加了对块样式的主题支持。

// Add support for Block Styles.
add_theme_support( 'wp-block-styles' );

你还可以使用 functions.php 文件加载脚本和样式，我们将在下一节关于包含资源的课程中介绍这一点。不过，要查看示例，你可以参考 Twenty Twenty-Two 主题。

最后，你可以选择使用 functions.php 文件包含其他 PHP 文件。你可以再次参考 Twenty Twenty-Two 主题的示例，你会发现它使用了位于 inc 文件夹中的 block-patterns.php 文件。

// Add block patterns
require get_template_directory() . '/inc/block-patterns.php';

这是通过添加 require、get_template_directory 并拼接文件路径来实现的。

下一步

你可以通过参考 WordPress.org 上的主题手册，了解更多关于添加自定义功能的内容。

欢迎来到本课程，我们将探索如何创建模板部件并将其添加到你的主题中。

什么是模板部件，它们如何工作？

模板部件（如页眉和页脚）是可重复使用的小型内容区块，可以添加到主题中你选择的模板里。模板部件保存在主题的 parts 文件夹中，我们通过模板部件块来加载它们。

例如，在 Twenty Twenty-Four 主题中，我们有 404 模板，我们可以在这里查看页眉的模板部件块。slug 属性是模板部件文件的名称，这里为 header，接下来是 area，它指定模板部件在页面布局中出现的位置，然后我们有 tag name，它创建包装容器元素，这里会是 header 标签。

什么是模板部件区域？

模板部件区域是一种组织相似模板部件的方式。

这里以 2024 主题为例，我们在站点编辑器中查看页面模板。我们看到，在右侧的设置中，如果进入模板选项卡，会发现页眉和页脚区域正在应用于页面。

我们还在左侧的概览中看到每个模板部件内容的视图。使用区域是它们与模式的一个显著区别，因为模式没有 area 属性。

将模板部件添加到你的主题

添加模板部件的方法之一是进入管理所有模板部件，然后点击添加新模板部件。为你的模板部件命名，选择其区域，然后点击创建。

让我们为我们的主题创建一个新的模板部件，开始操作。

我们将它命名为 header，并分配区域为 header，然后点击创建，接着插入一些内容。我们只需搜索站点标题块并插入它。然后我们将更改保存到数据库，接下来需要创建新的模板部件文件，并将代码复制到该文件中。

在代码编辑器中，我们复制代码，然后进入 parts 文件夹，创建新的 header 文件并粘贴我们的代码。

注册模板部件

接下来是注册我们的模板部件。

这是在 theme.json 中完成的，为了演示，我将展示在 Twenty Twenty-Four 主题中是如何操作的。我们只需将其复制到我们自己的主题中。为了节省时间，我们直接将其粘贴到我们的 theme.json 文件中。

我们转到 styles 下方，粘贴代码，现在需要添加闭合数组括号和一个逗号，然后删除多余的那个逗号。保存这些更改，现在我们可以将模板部件块添加到我们的模板中了。

再次参考 Twenty Twenty-Four 主题，查看 404 模板，我们将代码复制到我们自己的主题的 404 模板中。现在你需要对页脚重复完全相同的过程。

请记住，为了让你的工作流程更轻松，既然文件已就位，你可以直接安装 create block theme 插件，然后选择保存更改选项。

下一步

要了解更多关于模板部件的信息，你可以参考 WordPress.org 上的主题手册。

欢迎来到本课程，我们将深入探讨 WordPress 如何在浏览器中加载模板的细节。

WordPress 如何使用查询字符串？

当有人访问 WordPress 网站上的某个页面时，查询字符串会根据一些规则（我们将在本课程后面介绍）帮助确定应使用哪个模板。为了更好地理解查询字符串本身，让我们在 WordPress 仪表盘中看一个简单的例子。

普通固定链接结构使用带有问号、参数和值的查询字符串，该值是数据库中页面或文章的 ID。如果我们将固定链接结构从文章名称改为普通并保存更改，现在让我们看看一个实际可用的页面。我们有一个示例页面。

如果我们将鼠标悬停在此处的标题上，会在左下角看到 ID 为 2。如果我们进入前端，实际上可以输入查询字符串来查看示例页面是否会被调出。这里你输入一个斜杠，然后在问号后面加上 page ID 等于 2，它确实正确调出了页面。

WordPress 数据库

现在让我们看看数据库，了解 WordPress 如何处理查询字符串。WordPress 有一个名为 WP posts 的表和一个名为 post type 的字段。让我们看看数据。

我们想要 ID 为 2 的文章。那是我们的示例页面。所以我们打开它，如果向下滚动到底部，会看到文章类型是 page。这就是 WordPress 知道接下来要查找页面模板的方式。

模板层级图概述

WordPress.org 上提供了这个图表，帮助我们更好地理解当 WordPress 决定为最终用户访问的页面或文章使用哪个模板时所应用的规则。

黑色的是页面类型，然后是桃色的变量模板。接着是绿色的次要模板，蓝色的则是你的主要模板。

查询示例

现在让我们看一个所查询页面的示例。

如果我们访问网站的主域名（也称为首页），WordPress 会查找 front-page.html 模板。如果该模板不可用，它会继续查找 home.html 模板。

最后，如果那个也不可用，它会回退到最终的备用模板，即你的 index.html 模板。这解释了为什么 index.html 是你的主题必需的文件。

下一步

要了解更多关于模板层级的信息，你可以访问 WordPress.org 上的主题手册。

欢迎来到本课，了解模板的用途、结构和加载方式。

模板的用途和结构是什么？

创建模板是为了给页面提供一些结构。它们决定了布局，并且可以引入不同的部分，比如页眉、主体和页脚。如果我检查这段代码，我可以看到浏览器如何通过引入页眉、主体部分和页脚的代码，在前端渲染代码。

这里我们正在查看默认主题 Twenty Twenty-Four 中的 404 模板。

你可以看到，对于这个区块主题，区块标记被用来引入页眉、主体部分和页脚。你还可以看到，模式被用来从 patterns 文件夹中的模式文件引入代码。

现在请记住，对于区块主题，你不能直接使用纯 HTML。那段 Hello World 代码会导致错误，当我进入站点编辑器并转到 404 模板时，你会在这里看到这个错误。

在移除 Hello World 代码后，我想指出的另一件事是，在站点编辑器中，当我们进入代码编辑器时，模式的代码实际上被引入到这里。看到这里完全没有提到模式了吗？在构建模板时请记住这一点。

WordPress 加载模板的顺序是什么？

有一个模板加载顺序，最底层是主题的模板。接下来，如果存在一个启用的子主题，这些模板会优先加载。最后，在最顶层，我们会发现保存在数据库中的用户自定义内容具有最高优先级。

在准备好主题起始文件的情况下，让我们从头创建一个模板。如果你不熟悉主题起始文件，我建议你看看面向初学者的 WordPress 开发者主题开发模块。

从头创建一个模板

让我们构建自己的 404 模板，但首先让我们看看 404 模板是如何在 Twenty Twenty-Four 主题中创建的。

在主体部分，我们看到这里调用了一个模式，它的名称是 hidden 404。让我们进入 patterns 文件夹。我们会找到 hidden 404 文件，注意它是 PHP 而不是 HTML。如果我们查看那个文件，我们会看到这里又调用了另一个模式，名为 hidden search。所以是一个模式嵌套在另一个模式中。

借助 Twenty Twenty-Four 的 404 模板，我们将节省一些时间，并用它在我们的主题中创建自己的 404 模板，同时准备好主题起始文件。我已经创建了 PHP 文件。我确保将 slug 替换为文件夹的名称，也就是主题的根目录。

仔细检查并将 twentytwentyfour 替换为你根目录的名称。我的根目录是 gettingstarted。

一旦你放置好两个模式，就可以创建你的 404 模板了。这是 Twenty Twenty-Four 中的模板，这是我创建的那个。我将在未来的课程中为这个模板添加页眉和页脚。

下一步

如果你想了解更多关于模板的信息，可以参考 WordPress.org 上的主题手册。

在接下来的几课中，我们将学习模板层次结构和模板部分。

欢迎来到本课程，学习如何创建样式变体，或者简称为 theme.json 变体。

什么是样式变体？

样式变体本质上是 theme.json 的替代版本，你可以随主题一起提供。它们是自定义命名的 JSON 文件，存储在主题的 styles 文件夹中。

任何可以添加到 theme.json 的设置或样式，也可以添加到你的样式变体 JSON 文件中。这让你的用户可以选择他们想要在网站上使用的变体。从某种程度上说，它们是你主题的一种“皮肤”，反映了情绪和语气。这是一种以独特方式区分你的网站的方法。

你可以为你的主题捆绑这些替代设计，让用户决定哪种最适合他们的网站。在站点编辑器中，用户可以进入样式，为他们的网站选择不同的样式组合。

在默认的 Twenty Twenty-Four 主题中，用户可以选择 Ember 变体。这意味着在全局样式中，他们有一个不同的调色板，并且有这四种颜色可用。在渐变选项卡中，他们有一组完全不同的渐变以及双色调橙色和白色。

如果我们查看主题文件，会发现每个变体都有自己的独立 JSON 文件。需要注意的是，当我们创建样式变体时，属性 duotone、gradients 和/或 palette 会被完全替换。我们不仅仅是交换单个颜色。

区分主题 JSON 文件和样式变体 JSON 文件

样式变体的一个显著区别是，我们在版本下方添加了标题。我们的示例是 Ember。再次注意，当用户选择 Ember 样式变体时，theme.json 中的双色调在这里不可用。

区分子主题和样式变体

首先，相似之处在于它们都希望覆盖父主题的 theme.json 文件，但方式不同。如果你有一个子主题并且它处于激活状态，同时添加了一个 theme.json 文件，那么设置会覆盖父主题的设置。

在给定主题中，样式变体具有相同的能力来覆盖 theme.json 文件。然而，当用户选择一个变体时，这些更改被视为用户自定义，并存储在数据库中。

后续步骤

如果你想了解更多关于样式变体的信息，请参考 WordPress.org 上提供的主题手册。

欢迎来到本课程，学习如何从头创建模式并在主题中注册模式的基础知识。

模式的来源

WordPress 中可用的模式来源有哪些？当最终用户在页面、文章或模板中使用插入器时，他们将可以访问当前活动块主题中可用的模式，这包括 WordPress 模式目录。他们还可以访问 WordPress 核心模式，如本例所示。

模式目录

现在，让我们使用 theme.json 来列出模式目录中的模式。不要与 patterns 文件夹中列出的模式混淆。这些模式是你自己创建并添加到主题中的，只要它们位于该文件夹中，就会自动注册。但如果我们要进入 theme.json，我们会看到官方 WordPress 模式目录中模式的别名列表，以逗号分隔。

创建模式

现在，让我们从头创建一个模式，以便将其捆绑到主题中。再次强调，你需要在 patterns 文件夹中创建文件。该文件是 PHP 格式，但它包含块标记，并且还有一个文件头，本质上是一个放在文件顶部的注释。

你会在那里找到的最常见的元数据是标题、别名和分类。你需要的块的 HTML 标记代码可以在站点编辑器中生成。进入站点编辑器，你始终可以进入代码编辑器，找到你的代码，然后复制并粘贴到你的模式 PHP 文件中。

下一步

像往常一样，你可以参考 WordPress.org 上的主题手册，请注意，我们将在未来的课程中详细介绍构建和注册模式的更多细节。

欢迎来到关于使用 theme.json 文件的课程，我们将从零开始注册一个自定义模板。

创建自定义模板

构建主题最快的方法是在站点编辑器中工作，并使用像 Create Block Theme 这样的插件，你可以直接将更改推送到主题文件中。

让我们进入站点编辑器。我们将查看默认的 Twenty Twenty-Four 主题中可用的模板。我们可以看到所有这些模板的作者都是 Twenty Twenty-Four。现在我们可以进入代码编辑器查看这些文件。我们在 templates 文件夹中找到了它们全部列在这里。

在 theme.json 中注册自定义模板

所有自定义模板都在 theme.json 中注册。我们有多个页面模板和一个单篇文章模板。我们在这里看到名称与文件名对应。

添加新模板

回到 WordPress 中，我们首先点击“添加新模板”来创建自定义模板。我们将选择“单篇文章”和“所有文章”。接下来，选择一个模式以节省时间，或者你可以从头开始。如果点击保存，模板将保存到数据库中。

如果我们进入模板，我们会看到它在那里，即“单篇文章”。如果我们进入“管理所有模板”，我们会看到它显示为用户更改，这意味着它存在于数据库中，尚未成为主题文件的一部分。

使用 Create Block Theme 插件更新主题文件

为了导出模板，我们需要使用 Create Block Theme 插件。我们从进行更改并将这些更改保存到数据库开始。每次，我们都可以使用 Create Block Theme 插件保存更改，将这些更改从数据库推送到主题文件中。

如果我们进入代码编辑器，我们会看到自定义模板 Single-Post。现在，如果我们愿意，可以将其重命名为更具描述性的名称。我将命名为 No Image。

注册自定义模板

现在你可以使用 theme.json 文件注册新的自定义模板。这使我们能够为模板指定一个自定义名称。我们将名称设为 No Image，与文件名对应，然后给它一个标题。这就是用户在前端看到的内容。

保存这些更改，然后返回站点编辑器并重新加载。现在进入“所有模板”并向下滚动，你会看到 single No Featured Image 模板现在是主题文件的一部分。

下一步

一如既往，你可以参考 WordPress.org 上的主题手册。在下一个模块中，我们将深入探讨创建模板、模板层次结构和模板部分。