子主题

有时,您可能需要一种方法来修改或扩展现有主题,而无需更改主题的代码。

这就是子主题发挥作用的地方。

在本课中,您将了解什么是子主题、为什么应该使用它们,以及如何创建和使用子主题。

什么是子主题?

子主题是其父主题的扩展。

使用子主题允许您扩展或修改父主题的任何部分,而无需对父主题代码进行任何更改。

为了理解其工作原理,让我们看一个简化的例子。

为什么要使用子主题?

从 WordPress 主题仓库中安装并激活任意主题到您的本地 WordPress 环境中。

在这个例子中,默认主题 Twenty Twenty-Four 已被安装并激活。

假设您想要自定义主题的某些部分,例如页脚的布局和结构。

您更希望站点菜单位于左侧,而站点徽标、标题和标语位于右侧。

您还想更改页脚版权信息,使其引用您的公司名称并更新 URL。

实现此目的的一种方法是在站点编辑器中操作。

您可以找到并编辑页脚模板部分,并进行所需的更改。

将菜单移到左侧,站点徽标和标题移到右侧,并更新页脚版权信息。

但是,如果您想在不同的站点上重复使用这些相同的更改呢?您每次都必须手动在站点编辑器中进行这些更改。

当然,您也可以手动进行更改,方法是导航到页脚模板中使用的 Twenty Twenty-Four 页脚模式,并更改该模式的内容。

但如果主题有更新会发生什么?在主题更新期间,整个主题会被替换为更新版本,因此您对任何特定文件所做的任何更改都将丢失!

这就是子主题发挥作用的地方。

通过创建一个仅包含您所需特定更改的子主题,您可以激活该子主题,更改就会被应用。

如果将来父主题有任何更新(在本例中是 Twenty Twenty-Four),子主题中的修改仍然会被应用,并且更改将保持不变。

创建子主题

为了理解子主题的工作原理,创建一个您的第一个子主题是个好主意。

让我们使用上面的例子来创建您的第一个子主题。

wp-content/themes 目录中,创建一个名为 twentytwentyfourchild 的新空主题目录。

在该目录中,创建一个 style.css 文件。然后,将以下主题头部信息添加到该文件中

/**
 * Theme Name: Child theme of Twenty Twenty-Four
 * Template:   twentytwentyfour
 */

现在浏览到 WordPress 管理区域,并导航到主题页面。您应该会看到列出的新子主题。

现在激活该子主题。然后浏览到网站前端。

您会注意到网站看起来和之前完全一样。这是因为所有主题元素都继承自父主题。

子主题的工作原理

所有 WordPress 主题——除非它们特指是子主题——从技术上讲都是父主题。

子主题与父主题略有不同,因为它们在 style.css 文件中有一个特殊的主题头部字段,用于定义它们是哪个父主题的子主题。

这个头部字段是 Template 字段。该字段的值必须与父主题的文件夹名称(或别名)匹配,相对于 wp-content/themes 目录。

这有时也被称为主题的别名。

因此,在这个例子中,这个主题是 Twenty Twenty-Four 的子主题,因为它将 Template 字段定义为 twentytwentyfour

您现在可以做的就是选择要修改的父主题的特定部分。

例如,如果您只想修改页脚,您可以在子主题目录中创建一个新的 footer.html 文件,位置与父主题中的 footer.html 相对路径相同,然后对子主题的 footer.html 进行所需的更改。

生成子主题页脚的一种方法是在站点编辑器中对页脚模板进行所需的更改。

然后,切换到代码编辑器视图,复制代码,并将其粘贴到子主题的 footer.html 文件中。

激活子主题后,您对子主题中 footer.html 文件所做的更改将被应用,并且页脚将按您期望的方式显示。

值得注意的是,子主题不仅可以扩展父主题的模板,实际上几乎可以扩展父主题的每个部分。通过子主题,你可以扩展模板部分、样式、甚至自定义主题功能。

使用创建块主题功能

虽然可以手动创建子主题,但你也可以使用“创建块主题”插件,基于在站点编辑器中进行的修改来创建子主题。

为此,请激活 Twenty Twenty-Four 主题,并删除本课程前面创建的子主题。

然后,搜索、安装并激活“创建块主题”插件。

接下来,导航到站点编辑器,对页脚模板部分进行相同的修改。

对修改满意后,点击站点编辑器右上角的“创建块主题”图标,打开创建块主题选项。

选择“创建主题”,然后选择“创建子主题”。

为子主题命名,并可选地添加相关主题元数据。

然后点击“创建子主题”。

子主题将被创建,编辑器会重新加载。

如果导航到 WordPress 管理区域的主题页面,你会看到新的子主题已列出,并已安装和激活。

如果浏览前端页面,你会看到对页脚模板部分所做的修改已生效。

最后,如果你查看代码编辑器,会发现子主题文件已创建。

延伸阅读

有关子主题的更多信息,请参阅主题开发者手册中高级主题下的“子主题”页面。你还可以在主题开发者手册核心概念章节的“子主题头部字段”部分,了解更多关于子主题特定头部字段的内容。