模板部分

模板部件是小型区块（即部件），您可以将其包含在顶级模板中。遵循 DRY（不要重复自己）原则，它们通常用作需要在多个模板中重用的部分。与其多次编写代码，您可以将其拆分为单个文件并在需要时包含它。

由于本章专注于theme.json，本文档的目标是解释如何在theme.json文件中注册模板部件。您可以在模板章节中更深入地了解模板和模板部件。

在theme.json中，您可以为模板部件注册额外的元数据，例如标题和分配给该部件的区域。

注册模板部件

从技术上讲，您可以在不通过theme.json注册的情况下使用自定义模板部件。但是注册它们有一些明显的优势：

• 您可以为部件提供一个在用户界面中更具吸引力的可翻译标题。
• 您可以将每个部件分配到一个区域，从而在站点编辑器中创建更好的用户体验。
• 它与插件、样式变体和子主题配合得更好，这些插件可能会以某种方式获取、过滤或使用注册的元数据。

要注册模板部件，您必须向theme.json中的templateParts属性传递对象数组。数组中的每个对象接受三个键/值对：

• area: 模板部件所属的区域。默认选项是header、footer和uncategorized。您也可以将其分配给任何自定义区域。
• name: 不带扩展名的模板部件文件名。
• title: 您模板的可读标题，可以翻译。

WordPress 将在主题的/parts文件夹中查找模板部件。因此，如果您注册名为 `example` 的模板部件，您还必须在主题中包含一个/parts/example.html文件。

您可以在模板章节中了解更多有关模板部件区域的信息。此外，请查看 WordPress 开发者博客上的使用自定义模板部件区域升级站点编辑体验教程，以深入了解创建自定义区域。

注册一个模板部件

任何主题都会注册的两个最常见的模板部件是用于站点页眉和页脚。这也是为什么 WordPress 有默认的header和footer区域的原因。您不需要使用这些部件或区域，但它们几乎是所有网站的标准部分。

对于此练习，让我们同时注册它们。首先，如果它们尚不存在，请在主题的/parts文件夹中添加几个名为header.html和footer.html的空文件。您将在下一步中向其中添加一些块代码。

现在在theme.json中注册这些模板部件：

{
	"version": 2,
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		}
	]
}

当area和name值都匹配时可能会令人困惑。这并非总是如此，但在处理页眉和页脚时经常是这样。

一些主题作者更喜欢将header和footer模板部件命名为site-header和site-footer以更好地区分它们。如果您觉得这样更有意义，请随意这样做。或者将它们重命名为您想要的任何名称。

您不限于这两个常见的模板部件。您可以为您的主题项目添加尽可能多的部件。

构建一个模板部件

所有模板部件都应放置在主题的/parts文件夹中（WordPress 也识别/template-parts文件夹以向后兼容）。因此，您现在将编辑/parts/header.html和/parts/footer.html文件。

您可以在模板章节中了解更多有关构建自定义模板部件的信息。出于本文档的目的，只需将以下代码片段视为您可以自定义的示例。

在您的/parts/header.html文件中添加此代码：

<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","bottom":"2rem","right":"2rem","left":"2rem"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem">
	<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
	<div class="wp-block-group">
		<!-- wp:site-title /-->
		<!-- wp:navigation {"icon":"menu","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->
	</div>
	<!-- /wp:group -->
</div>
<!-- /wp:group -->

然后将此代码添加到您的/parts/footer.html文件：

<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
<div class="wp-block-group" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem">

	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
	<div class="wp-block-group alignwide">
		<!-- wp:site-title {"level":0,"isLink":false,"className":"is-style-normalize"} /-->

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

</div>
<!-- /wp:group -->

现在转到 WordPress 管理中的外观 > 编辑器，并查看图案 > 模板部件部分。您应该能看到页眉和页脚区域列出了您的自定义模板部件：

包含一个模板部件

创建模板部件文件并在theme.json中注册它们并不意味着您的部件会自动出现在网站上。因为它们只是部分，所以您还必须将它们包含在模板内部。

请记住，如果您不熟悉它们，您可以在模板文档中了解有关创建模板的更多信息。目前，您只需要测试注册过程如何工作。

要在顶级模板中包含模板部件，您必须使用模板部件块。此块的基本标记为：

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

因此，打开来自主题/templates文件夹的模板文件之一。您的主题应该至少有一个index.html模板在那里，但您可以使用任何文件进行测试。

现在按此处所示添加对wp:template-part块的调用：

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

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

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

现在，如果您在 WordPress 管理中的外观 > 编辑器 > 模板中打开添加了它们的顶级模板，您应该能看到页眉和页脚模板部件：