模板部件是小部分(即。,部分)可以包含在顶级模板中。遵循DRY(Don't Repeat Yourself)原则,它们通常用作需要跨多个模板重用的部分。您可以将代码分解为一个文件,并在需要时将其包含在内,而不是多次编写代码。
因为本章的重点是主题.json
,本文档的目的是解释如何在主题.json
文件。您可以在模板章节.
在主题.json
,可以为模板零件注册其他元数据,例如零件分配到的标题和区域。
从技术上讲,您可以使用自定义模板部件,而无需通过注册它们主题.json
。但注册它们有一些明显的优势:
- 您可以为零件指定一个在用户界面中更具吸引力的可翻译标题。
- 您可以将每个部分指定给一个区域,从而在站点编辑器中创建更好的用户体验。
- 它可以更好地处理插件、样式变体和子主题,这些子主题可以捕获、过滤或以某种方式使用注册的元数据。
要注册模板部件,必须将对象数组传递给模板部件
中的属性主题.json
。数组中的每个对象都接受三个键/值对:
地区
:模板部件所属的区域。默认选项为收割台
,页脚
、和未分类的
。您也可以将其分配给任何自定义区域。
名称
:没有扩展名的模板部件的文件名。
标题
:模板的可读标题,可以翻译。
WordPress将在主题的/零件
文件夹。因此,如果您注册了名为“example”的模板部件,则还必须有一个/部件/example.html
在主题中创建文件。
任何主题都会注册的两个最常见的模板部分是网站页眉和页脚。这也是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管理员中查看图案>模板零件第节。你应该同时看到收割台和页脚与自定义模板零件一起列出的区域:
创建模板零件文件并将其注册到主题.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管理员中: