欢迎来到本课程,我们将探索如何创建模板部件并将其添加到你的主题中。
通过本课程,你将能够:
- 描述模板部件及其工作原理,
- 定义模板部件区域,以及
- 将模板部件添加到你的主题中。
什么是模板部件,它们如何工作?
模板部件(如页眉和页脚)是可重复使用的小型内容区块,可以添加到主题中你选择的模板里。模板部件保存在主题的 parts 文件夹中,我们通过模板部件块来加载它们。
例如,在 Twenty Twenty-Four 主题中,我们有 404 模板,我们可以在这里查看页眉的模板部件块。slug 属性是模板部件文件的名称,这里为 header,接下来是 area,它指定模板部件在页面布局中出现的位置,然后我们有 tag name,它创建包装容器元素,这里会是 header 标签。
什么是模板部件区域?
模板部件区域是一种组织相似模板部件的方式。
这里以 2024 主题为例,我们在站点编辑器中查看页面模板。我们看到,在右侧的设置中,如果进入模板选项卡,会发现页眉和页脚区域正在应用于页面。
我们还在左侧的概览中看到每个模板部件内容的视图。使用区域是它们与模式的一个显著区别,因为模式没有 area 属性。
将模板部件添加到你的主题
添加模板部件的方法之一是进入管理所有模板部件,然后点击添加新模板部件。为你的模板部件命名,选择其区域,然后点击创建。
让我们为我们的主题创建一个新的模板部件,开始操作。
我们将它命名为 header,并分配区域为 header,然后点击创建,接着插入一些内容。我们只需搜索站点标题块并插入它。然后我们将更改保存到数据库,接下来需要创建新的模板部件文件,并将代码复制到该文件中。
在代码编辑器中,我们复制代码,然后进入 parts 文件夹,创建新的 header 文件并粘贴我们的代码。
注册模板部件
接下来是注册我们的模板部件。
这是在 theme.json 中完成的,为了演示,我将展示在 Twenty Twenty-Four 主题中是如何操作的。我们只需将其复制到我们自己的主题中。为了节省时间,我们直接将其粘贴到我们的 theme.json 文件中。
我们转到 styles 下方,粘贴代码,现在需要添加闭合数组括号和一个逗号,然后删除多余的那个逗号。保存这些更改,现在我们可以将模板部件块添加到我们的模板中了。
再次参考 Twenty Twenty-Four 主题,查看 404 模板,我们将代码复制到我们自己的主题的 404 模板中。现在你需要对页脚重复完全相同的过程。
请记住,为了让你的工作流程更轻松,既然文件已就位,你可以直接安装 create block theme 插件,然后选择保存更改选项。
下一步
要了解更多关于模板部件的信息,你可以参考 WordPress.org 上的主题手册。