目录
大纲
WP建站和运维

模板部件

欢迎来到本课程,我们将探索如何创建并向您的主题添加模板部件。

通过本课程,您将:

  • 描述模板部件及其工作原理,
  • 定义模板部件区域,
  • 向您的主题添加模板部件。

什么是模板部件及其工作原理?

诸如页眉和页脚之类的模板部件是可重复使用的小型内容区块,可以添加到您主题中任意选择的模板中。模板部件保存在主题的部件文件夹中,我们使用模板部件区块来加载它们。

例如,在Twenty Twenty-Four主题中,我们有一个404模板,可以在这里查看页眉的模板部件区块。我们有slug属性,它是模板部件文件的名称,在本例中为header,接下来是area,它指定模板部件在页面布局中出现的位置,然后是tag name,它创建包装容器元素,在本例中将是header标签。

什么是模板部件区域?

模板部件区域是一种组织相似模板部件的方式。

这里我们以2024主题为例,在站点编辑器中查看页面模板。当我们进入右侧的设置时,如果进入模板选项卡,我们会看到页眉和页脚区域被应用到页面。

我们还在左侧的概览中看到了这些模板部件的内容。区域的使用是一个显著的区别,将它们与模式区分开来,因为模式没有区域属性。

向您的主题添加模板部件

添加模板部件的一种方法是进入“管理所有模板部件”,然后点击“添加新模板部件”。为您的模板部件命名并选择其区域,然后点击创建。

让我们为我们的主题创建一个新的模板部件“入门”。

我们将其命名为header并分配区域header,点击创建,然后我们将插入一些内容。我们将搜索站点标题区块并插入它。然后我们将更改保存到数据库,接下来我们需要创建新的模板部件文件并将代码复制到该文件中。

在代码编辑器中,我们复制代码,然后进入parts文件夹,创建新的header文件并粘贴我们的代码。

注册模板部件

接下来是注册我们的模板部件。

这是在theme.json中完成的,为了说明目的,我向您展示如何在Twenty Twenty-Four主题中完成。我们只需将其复制到我们自己的主题中。为了节省时间,我们将其粘贴到我们的theme.json文件中。

我们将在styles下粘贴它,现在我们需要那个闭合的数组括号和一个逗号,然后必须删除那个额外的逗号。保存这些更改后,现在我们可以在模板中添加模板部件区块。

再次参考Twenty Twenty-Four主题,查看404模板,我们将该代码复制到我们自己的主题的404模板中。现在您需要对页脚重复完全相同的过程。

请记住,从现在开始,为了使您的工作流程更轻松,既然您已经有了文件,您可以安装create block theme插件,然后选择保存更改选项。

后续步骤

要了解更多关于模板部件的信息,您可以参考WordPress.org上提供的主题手册。