模板简介

像几乎所有内容管理系统一样，WordPress 使用模板系统来处理网站前端的内容输出。在现代块主题中，模板是包含 块标记 的 HTML 文件。

在本文档中，您将了解 WordPress 中的模板系统是如何工作的。之后，您可以跳转到更详细的 模板 和 模板部分 文档。

什么是模板？

简而言之，模板将动态数据封装到结构化的 HTML 标记中，然后将其发送到浏览器。这并不是一个特别革命性的概念，几乎所有具有动态数据的网站系统都使用它。

WordPress 中的模板系统执行了几项重要任务：

• 解析块标记，用于引用静态和动态数据。
• 从数据库中检索动态数据（例如，帖子内容、站点选项等）。
• 将生成的 HTML 发送到访问者的浏览器。

WordPress 与大多数其他平台的主要区别在于包含块标记。块主题模板完全由块组成，这些块既可以表示静态数据，也可以表示动态数据。WordPress 模板系统解析这些块，以确保在将其发送到访问者的浏览器时输出正确的内容。

WordPress 的另一项优势是提供可视化界面，以便直接在管理后台构建或自定义模板：

站点编辑器还允许您的主题用户从管理界面覆盖块模板和模板部分。用户所做的任何更改都会保存在其站点的数据库中。这些自定义内容与存储在模板文件中的方式相同：作为块标记。

模板与纯 HTML

如果您已经学习了一些基本的 HTML，可能已经构建了一两个网页。但是，使用 HTML 构建完整网站非常困难，因为每当您对整个站点进行全局更改时，您必须不断更新每个文件。

这是因为 HTML 是一种文档语言。它不知道如何处理动态数据，也不能用于动态加载可重用的代码片段。

从技术上讲，块模板是 .html 文件。但是，它们包含专门的块标记，由 WordPress 的模板系统解析（该系统的构建基于 PHP（在前端）和 JavaScript（在编辑器中））。使用此系统，即使存在于 .html 文件中，块也可以是动态的。

动态数据

模板与编写纯 HTML 文件之间的主要区别在于模板具有插入动态数据的能力。让我们看看如果您从头开始构建网站而不使用像 WordPress 这样的 CMS，这看起来会是什么样子。

假设您想在纯 HTML 中输出您的站点标题。您通常会将其包装在 <h1> 标签中并手动键入您的站点名称：

<h1>Your Website Name</h1>

使用 WordPress，您不需要知道正确的 HTML 或站点的名称。因为主题可以在任何 WordPress 站点上使用，所以站点标题是动态数据，从一个站点到另一个站点会有所不同。

要在块主题中输出正确的站点标题及其相关的 HTML，请添加块标记：

<!-- wp:site-title /-->

通过使用块标记，您的主题可以在任何安装 WordPress 的地方使用。

可重用性

良好网页设计的原则之一是 DRY（Don't Repeat Yourself，不要重复自己）。在使用纯 HTML 构建网站时，您必须为站点的每一页重新编写所有 HTML。

例如，大多数网站的页眉和页脚在站点的每一页上都是完全相同的。因此，为每一页重复该代码没有意义。模板系统让您只需编写一次代码即可在任何地方重用。

在 WordPress 中，这些较小的、可重用的模板部分称为模板部分（或简称“部分”）。

如果您要创建一个名为 header.html 的模板部分，您可以在任何模板中使用正确的块标记包含它：

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

这允许您在所有模板中重用页眉部分，但您只需要创建一次 header.html 文件。

块标记

模板和模板部分是完全由代表各个块及其设置的块标记组成的文件。WordPress 解析此块标记并将其转换为 Web 浏览器可以理解的最终 HTML 标记。

与 经典主题 不同，WordPress 会自动为块主题输出一些标准 HTML 元素。这包括包装 <html> 和 <body> 标签、<head> 以及外部 <div class="wp-site-blocks">。WordPress 和插件也会自动输出 meta、样式和脚本。与经典主题相比，块主题不负责添加 PHP 钩子。

从技术上讲，块标记是有效的 HTML。WordPress 使用带有标准化格式的自定义 HTML 注释语法来表示标记。

让我们看看模板中虚构块的标记：

<!-- wp:namespace/slug {"align":"full"} /-->

如您所见，代码是用 <!-- 开始标签和 /--> 结束标签的 HTML 注释标签包裹的。这告诉 WordPress 查找块标记。然后可以将标记分解为四个部分：

• 前缀： wp: 前缀告诉 WordPress 这是一个需要解析的块，而不仅仅是普通的 HTML 注释。这对于核心和第三方块是必要的。
• 命名空间： 要解析块的命名空间。
• Slug： 要解析块的 slug。
• 块设置： 代表块设置的有效的 JSON 代码。

在使用核心 WordPress 块时，您不使用块命名空间。例如，core/site-title 块在调用时不包括前面的 core/：

<!-- wp:site-title /-->

对第三方块的引用必须包含命名空间。

如何创建块标记

当然，您可以学习手动编写主题的所有块标记。但是，记住所有可能的块设置可能很困难，而且也容易出错，从而导致网站损坏。

相反，在构建块模板时，您几乎总是希望通过块编辑器构建，并直接在数据库中保存或将块标记复制到您的主题的模板文件中。

构建整个模板的最简单方法是通过 WordPress 管理后台中的 外观 > 编辑器 > 模板 进行。这是 Twenty Twenty-Three 的 主页 模板从该屏幕的视图：

您可以完全使用可视化的站点编辑器自定义模板，方法是添加、移动或删除块。您还可以调整各个块的设置。

一旦您的模板设计得就像您想要的那样，请点击工具栏中的 选项 按钮（⋮ 图标）并选择 代码编辑器 选项。这将为您提供模板的块标记。然后，将其复制并粘贴到您的模板文件中：

对于主页模板，您将块标记粘贴到您主题的 /templates/home.html 模板中。

当然，只有当您计划将主题分发给其他人时才需要这样做。如果这是您自己的网站，您可以从该屏幕保存模板，它将保存到数据库中，覆盖 /templates/home.html 模板文件。

一些主题作者使用的另一种技术是从帖子/页面编辑器或模板编辑器构建。有时，他们会创建某些较小的部分以直接复制并粘贴到他们的模板或模板部分中。

要从帖子编辑器复制块，请选择要使用的块，然后点击块编辑工具栏中的 选项 按钮（⋮ 图标）。然后从下拉菜单中点击 复制 按钮：

然后，您可以将复制的代码粘贴到您的模板或模板部分文件中。您还可以像站点编辑器中那样从该屏幕切换到 代码编辑器 模式，并以相同的方式复制块标记。

模板和部分之间的关系

模板代表发送到浏览器的整体 HTML 输出。思考这些的一个简单方法是将其视为“顶级模板”，因为它们是模板系统的顶层和最外层。

模板部分是位于顶级模板内的部分模板。部分使得包含可重用部分变得容易，而无需为每个模板重新创建块标记。

在您的主题中，您的模板和模板部分将分别位于 /templates 和 /parts 文件夹中。以下是该结构可能看起来的示例：

• parts/
  • footer.html
  • header.html
• templates/
  • 404.html
  • archive.html
  • index.html（必需）
  • singular.html

让我们看看存档模板 (archive.html) 及其块标记的示例：

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:template-part {"slug":"loop","align":"full"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

此模板基本上充当包装器，包含三个模板部分：

• /parts/header.html
• /parts/loop.html
• /parts/footer.html

这不是所有块主题都使用的技术，但这是一个常见的做法。每当您的代码在多个模板中重复时，通常最好将该代码复制到模板部分文件中，并将其包含在您的顶级模板中。

到目前为止，您只学习了模板的总体高层级。现在是时候更深入地了解模板系统及其每个组件的工作原理。作为下一步，请跟随这些文档：

• 模板
• 模板部分