分类： 模板

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

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

模板部件（如页眉和页脚）是可重复使用的小型内容区块，可以添加到主题中你选择的模板里。模板部件保存在主题的 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 上的主题手册。

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