模板部件

模板部件是小部分(即。,部分)可以包含在顶级模板中。遵循DRY(Don't Repeat Yourself)原则,它们通常用作需要跨多个模板重用的部分。您可以将代码分解为一个文件,并在需要时将其包含在内,而不是多次编写代码。

因为本章的重点是主题.json,本文档的目的是解释如何在主题.json文件。您可以在模板章节.

主题.json,可以为模板零件注册其他元数据,例如零件分配到的标题和区域。

注册模板部件

从技术上讲,您可以使用自定义模板部件,而无需通过注册它们主题.json。但注册它们有一些明显的优势:

  • 您可以为零件指定一个在用户界面中更具吸引力的可翻译标题。
  • 您可以将每个部分指定给一个区域,从而在站点编辑器中创建更好的用户体验。
  • 它可以更好地处理插件、样式变体和子主题,这些子主题可以捕获、过滤或以某种方式使用注册的元数据。

要注册模板部件,必须将对象数组传递给模板部件中的属性主题.json。数组中的每个对象都接受三个键/值对:

  • 地区:模板部件所属的区域。默认选项为收割台页脚、和未分类的。您也可以将其分配给任何自定义区域。
  • 名称:没有扩展名的模板部件的文件名。
  • 标题:模板的可读标题,可以翻译。

WordPress将在主题的/零件文件夹。因此,如果您注册了名为“example”的模板部件,则还必须有一个/部件/example.html在主题中创建文件。

您将在“模板”一章中了解有关模板部件区域的更多信息。此外,请查看使用自定义模板部件区域升级站点编辑体验WordPress开发人员博客上的教程,了解创建自定义区域的深入演练。

注册模板部件

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

在这个练习中,让我们将它们都注册。首先,添加两个名为页眉.html页脚.html在你的主题中/零件文件夹(如果它们不存在)。在下一步中,您将向它们添加一些块代码。

现在在中注册这些模板部件主题.json:

{“版本”:2,“模板部件”:[{“区域”:“页眉”,“name”:“header”,“title”:“页眉”},{“区域”:“页脚”,“name”:“页脚”,“title”:“页脚”}]}

当两个地区名称值匹配。情况并非总是如此,但通常情况下,处理页眉和页脚时会出现这种情况。

一些主题作者喜欢将收割台页脚模板零件现场负责人网站页脚以更好地区分它们。如果这对你更有意义,你可以随意这样做。或者将其重命名为任何您想要的名称。

您不限于这两个通用模板部件。您可以为主题项目添加任意数量的部件。

构建模板零件

所有模板部件都应放置在主题的/零件文件夹(WordPress还识别/模板部分文件夹以实现向后兼容性)。所以您现在将编辑/部件/标题.html/零件/页脚.html文件夹。

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

在您的/部件/标题.html文件,添加此代码:

<!-- wp:group{“style”:{“spacing”:{“padding”:}“top”:“2rem”,“bottom”:“2-rem”、“right”:“2mem”,”left“:”2rem“}}},”layout“:{”type“:”default“}}--><div class=“wp块组”style=“顶部填充:2rem;右侧填充:2rem;底部填充:2rem;左侧填充:2rem”><!-- wp:group{“layout”:{“type”:“flex”,“justifyContent”:”space-between“}}--><div class=“wp块组”><!-- wp:站点时间/--><!-- wp:navigation{“icon”:“menu”,“layout”:{“type”:“flex”,“setCascadingProperties”:true,“justifyContent”:”right“}/--></div><!-- /wp:组--></div><!-- /wp:组-->

然后将此代码添加到您的/零件/页脚.html文件:

<!-- wp:group{“style”:{“spacing”:{“padding”:}“top”:“2rem”,“right”:“2-rem”<div class=“wp-block-group”style=“padding-top:2rem;padding-right:2rem,padding-bottom:2rem”><!-- wp:group{“align”:“wide”,“style”:{“spacing”:{“blockGap”:“0”}},“layout”(布局):{(类型):“flex”,“orientation”(方向):“vertical”,“justifyContent”(内容):“center”}}--><div class=“wp-block-group alignwide”><!-- wp:site-title{“level”:0,“isLink”:false,“className”:“is-style-normalize”}/--><!-- wp:段落--><p>由WordPress提供支持</p>(第页)<!-- /wp:段落--></div><!-- /wp:组--></div><!-- /wp:组-->

现在转到外观>编辑器在WordPress管理员中查看图案>模板零件第节。你应该同时看到收割台页脚与自定义模板零件一起列出的区域:

WordPress站点编辑器中的模板屏幕。“页眉”区域被特别选中,显示单个页眉模板部分。

包括模板零件

创建模板零件文件并将其注册到主题.json并不意味着您的部件将自动显示在站点上。因为他们只是部分,还必须将它们包含在模板中。

记住,您将在模板文档如果你还不熟悉的话。现在,您只需要测试注册过程是如何工作的。

要在顶级模板中包含模板零件,必须使用模板零件块。此块的基本标记为:

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

因此,从主题的/模板文件夹。你的主题应该至少有一个索引.html模板,但您可以使用任何文件进行测试。

现在将调用添加到wp:模板部分块,如下所示:

<!-- wp:template-part{“slug”:“header”,“tagName”:“header”}/--><!-- 此处显示其他块标记。--><!-- wp:template-part{“slug”:“footer”,“tagName”:“feoter”}/-->

现在,如果打开通过添加到的顶级模板,您应该可以看到页眉和页脚模板部分外观>编辑器>模板在WordPress管理员中:

正在编辑模板的WordPress站点编辑器。选中标题模板部分。