模板 代表网站前端的一级文档结构。但模板部分代表可以包含在一个或多个模板中的较小内容部分。

一些常见的部分是：

  • 头部
  • 页脚
  • 侧边栏
  • 评论

你可以有更多的部分。这些通常是设计的一部分，在多个一级模板中重复使用。部分不是主题的必需项，但它们是一个很好的功能，可以让你更好地管理文件和代码。

在模板简介中，你了解了模板部分的基础知识。在这份文档中，你将更深入地了解它们的工作原理。

模板部分是如何工作的？

正如你在模板文档中学到的那样，WordPress 根据访客在网站上查看的页面定位一级模板。然后加载该模板，并在将其发送回浏览器之前解析块标记。

与模板不同，部分不会根据当前查看的页面自动加载。它们必须作为顶级模板的部分通过模板部分块包含。

模板部分块的标记如下所示：

<!-- wp:template-part {"slug":"your-template-part-slug"} /-->

你可以包含更多的块设置，但slug属性必须设置为加载正确的部分。当 WordPress 在解析过程中遇到模板部分块标记时，它将在你的主题文件夹中查找名为/parts/your-template-part-slug.html的文件。如果找到，它将加载该文件并解析其块标记。

让我们看看一个简单的模板，它同时加载头部和页脚部分：

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

<!-- Other block markup goes here. -->

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

正如你所见，头部和页脚部分也包含了tagName设置。这将包装容器元素设置为<header>和<footer>。

如果这是包含在顶级模板中的块标记，WordPress 将执行以下步骤：

  1. 加载/parts/header.html文件并解析其块标记。
  2. 解析模板的其他块标记。
  3. 加载/parts/footer.html文件并解析其块标记。

模板部分包含什么？

块主题中的模板部分仅包含块标记，不包含其他内容。

让我们看看一个简单的页脚模板部分，它显示一个站点标题块和一个带有“由 WordPress 提供支持”消息的段落块。要重现此效果，你需要在主题中添加一个/parts/footer.html文件，并包含以下块标记：

<!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group alignwide">
	<!-- wp:site-title {"level":0} /-->

	<!-- wp:paragraph -->
		<p>Powered by WordPress.</p>
	<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

这只是一个示例，展示了块标记以及它在部分中可能的样子。模板部分可以非常简单或非常复杂，具体取决于你想在其中包含的内容。

要更深入地了解块的架构，请查看块编辑器手册中的关键概念文档。

组织模板部分

对于块主题，你必须将模板部分放在主题的/parts文件夹中。它应该按以下方式构建：

  • parts/
    • comments.html
    • footer.html
    • header.html
    • sidebar.html

这些都不是必需的。事实上，你甚至不需要包含任何模板部分。
WordPress 目前不支持嵌套模板部分。例如，你不能创建/parts/header文件夹并在其中放置多个头部部分。所有模板部分必须直接放置在主题的/parts文件夹中。

从技术上讲，如果主题中存在/block-template-parts文件夹，WordPress 也会在其中查找。这是为了与旧版 WordPress 向后兼容。但建议使用/parts文件夹而不是它。

构建模板部分

可以手动编写所有模板部分的块标记代码。但在大多数情况下，你希望直接在 WordPress 管理后台及其可视化编辑器中工作。然后按照模板简介中的说明将块标记从编辑器迁移到你的模板部分文件中。

要探索使用可视化界面，请阅读有关使用站点和模板编辑器的支持指南：

注册模板部分

虽然不是必需的，但你应几乎总是通过theme.json注册模板部分。这样做可以确保它们出现在用户界面中，以便与站点和模板编辑器一起使用，并带有可翻译的友好标签。

注册模板部分在模板部分文档的全局设置和样式章节中涵盖。

编辑模板部分

要从 WordPress 管理后台访问模板，请在管理菜单中打开外观 > 编辑器菜单。然后单击侧边栏中的图案项并滚动找到模板部分部分：

WordPress 模板部分部分在站点编辑器中的图案库下。屏幕上显示了帖子元数据和评论部分。

模板部分按模板部分区域分类（阅读下面的“模板部分区域”部分以获取更多信息）。每个区域列出为其注册的部分（注意常规是uncategorized区域）。

显示的模板部分可以来自三个位置：

  • 用户创建的保存在数据库中的模板部分（这些作为帖子存储在wp_template_part帖子类型中）
  • 来自主题/parts文件夹的模板部分
  • 插件动态添加的模板部分

从此屏幕，你可以对部分进行任何自定义，调整它们以符合你的愿景。

请记住，如果你从此屏幕保存部分，它们将存储在数据库中并覆盖你主题中的任何模板。如果你计划将此主题分发给其他人或在另一个站点上使用，你必须按照模板简介中的说明将块标记复制到/parts文件夹中的匹配模板。

添加新模板部分

你可以通过单击图案标题旁边的+图标创建新模板。这将显示一个下拉菜单，其中包含几个选项。单击此处显示的创建模板部分选项：

WordPress 图案库。显示一个下拉菜单，其中突出显示了创建模板部分选项。

然后会出现一个弹出模态框，让你输入自定义模板部分名称并选择其区域：

带有创建模板部分模态框覆盖屏幕的 WordPress 站点编辑器。

默认情况下，你可以从常规、头部和页脚区域中选择（要了解有关创建自定义区域的更多信息，请阅读下面的“模板部分区域”部分）。

从下一个屏幕，你将能够创建完全自定义的模板部分。它可以包含你喜欢的任何块。

同样，通过编辑器添加的任何新部分都保存在数据库中。如果你打算分发你的主题，你必须创建/parts文件夹内的模板部分文件并将块标记复制到其中。

模板部分区域

模板部分区域本质上是一种组织相似模板部分的方法。它们也出现在用户界面中的导航元素中。下面你可以看到在模板编辑侧边栏中高亮的头部区域：

WordPress 站点编辑器显示一个具有三列帖子网格的模板。在侧边栏中，头部区域被选中。

默认情况下，WordPress 有三个区域，你可以为其注册模板：

  • uncategorized（在管理后台标记为常规）
  • header
  • footer

这将涵盖一些常见用例（几乎所有主题都需要头部和页脚，例如）。但你可能想为主题创建自定义区域以更好地组织模板部分并提供更好的用户体验。

注册自定义区域

你可以通过向default_wp_template_part_areas钩子添加过滤器来注册任意数量的自定义区域。你的回调函数接受单个参数$areas，它必须是区域定义数组。每个区域定义必须是一个具有这些键/值对定义的数组：

  • area: 模板部分区域的机器可读 slug。
  • area_tag: 用于分配到此区域的模板部分的包装 HTML 标签。可以是以下之一：
    • div
    • article
    • aside
    • footer
    • header
    • main
    • section
  • label: 区域的易读标签，可以翻译。
  • description: 区域的描述及其所属的模板部分，可以翻译。
  • icon: 用于区域的图标。注意目前仅支持header、footer和sidebar，其他所有内容都回退到默认图标，直到此工单得到解决。

假设你想创建一个名为 Loop 的区域来分配整个主题中使用的模板部分。你可以通过将此代码添加到主题的functions.php文件来实现：

add_filter( 'default_wp_template_part_areas', 'themeslug_template_part_areas' );

function themeslug_template_part_areas( array $areas ) {
	$areas[] = array(
		'area'        => 'loop',
		'area_tag'    => 'section',
		'label'       => __( 'Loop', 'themeslug' ),
		'description' => __( 'Custom description', 'themslug' ),
		'icon'        => 'layout'
	);

	return $areas;
}

这将为主题注册一个新的 Loop 区域，但为了有用，你还需要按照theme.json文档中关于注册模板部分的描述至少为其注册一个模板部分。

假设你还创建了一个/parts/loop-default.html模板部分。你可以使用以下代码在theme.json中将其分配给你的新loop区域：

{
	"version": 2,
	"templateParts": [
		{
			"area": "loop",
			"name": "loop-default",
			"title": "Loop - Default"
		}
	]
}

此屏幕截图显示了Loop区域在站点编辑器中的外观：

WordPress 站点编辑器中的图案库中的模板部分部分。选择了自定义 Loop 模板部分区域。

你可以通过theme.json为区域注册任意数量的模板部分。例如，你可以注册loop-home.html和loop-author.html以分别在你的主页和作者模板中使用。但这些仅仅是示例。唯一的限制是你的想象力。

有许多原因你可能想注册自定义区域。要深入了解此系统的优点和功能，请阅读来自 WordPress 开发者博客的使用自定义模板部分区域升级站点编辑体验。