如何创建 WordPress 子主题:分步指南

WordPress 子主题为您提供了一种安全的方式来自定义您的WordPress 主题的代码。如果您想直接编辑主题的 CSS、HTML 或 PHP,您绝对应该使用 WordPress 子主题。否则,您可能会在下次更新主题时丢失更改。

在这个详细的 WordPress 子主题教程中,您将了解您需要了解的有关 WordPress 子主题的所有信息,包括如何创建子主题。这篇文章将涵盖:

  • 什么是 WordPress 中的父主题?
  • 什么是 WordPress 中的子主题?
  • 创建儿童主题的好处
  • 如何在 WordPress 中创建子主题
  • 创建子主题的其他三种方法

让我们开始吧。

什么是 WordPress 中的父主题?

父主题是一个完整的 WordPress 主题。意思是,它包括主题工作所需的 WordPress 模板文件和资产。

index.php 和 style.css 文件(分别是主模板和样式文件)是唯一需要的模板文件。但是,大多数主题还将包括 PHP 文件、本地化文件、图形、JavaScript 和/或文本文件。
所有主题都被视为父主题——子主题除外。让我们仔细看看子主题是什么以及它为 WordPress 网站所有者提供的好处。

什么是 WordPress 中的子主题?

子主题是继承父主题的外观、感觉和功能的子主题。您可以像安装任何其他主题一样安装它,但它依赖于父主题来控制其功能。

当您对子主题进行修改时,它们将与父主题的文件分开。此外,您对子主题所做的任何修改都将优先于父主题中的行为。
请务必注意,子主题不会自行运行。它必须与父主题一起安装。
当您安装子主题时,您将能够在 WordPress 仪表板中看到它已连接到父主题。

创建儿童主题的好处

创建子主题允许您修改父主题而不会丢失您的自定义设置。
如果没有子主题,您就必须在需要更改时直接修改父主题的文件。这意味着无论何时更新父主题,您的所有更改都将被覆盖。
结果,你将面临一个不可能的选择。您可以忽略主题的所有更新,这可能会导致兼容性和安全性问题。或者,您可以更新并丢失您的定制——连同您在创建它们时投入的时间。

创建和自定义子主题的另外两个好处与第一个有关。

  • 将这些修改保存在与您的主题不同的文件夹中,使它们易于复制或从一个站点移动到另一个站点。
  • 您可以在低风险环境中开始学习和涉足主题开发。如果您开始自定义您的子主题并且出现问题或您不满意,您可以禁用子主题。这将恢复父主题和您的网站。

现在您已经了解了创建和自定义子主题的理想用例,让我们来看看下面的过程。

如何在 WordPress 中创建子主题

在 WordPress 中创建子主题只需几个步骤。下面我们将深入介绍每一个,以便您可以跟进。本演示将使用默认的 WordPress 主题二十二十一作为示例,但基本步骤将适用于任何 WordPress 主题。
通常,您只需要两个文件即可创建一个基本的子主题:

  1. 样式.css
  2. 函数.php

在本节中,我们将向您展示如何在 WordPress 中手动创建子主题。但是,如果您想节省一些时间,也可以使用一些工具/策略来自动化该过程。我们将在下一节中分享这些内容。
即使您确实使用其中一种其他方法,阅读手动方法仍然有帮助,因为它将帮助您更好地理解子主题的工作原理。

第 1 步:创建子主题文件夹。

首先,您需要创建一个文件夹,您可以在其中放置子主题的所有模板文件和资产。
现在,您可以在本地计算机上创建此文件夹。在本教程的后面,您将学习如何通过将文件添加到 Zip 文件夹并通过 WordPress 仪表板安装它们来在您的网站上安装子主题。
使用父主题的文件夹名称命名此文件夹,并在末尾添加“-child”。因此,如果您正在创建一个二十一岁的儿童主题,您会将文件夹命名为“twentytwentyone-child”。

第 2 步:为您的子主题创建样式表。

接下来,您需要在您的子主题文件夹中创建“style.css”文件,其中将包含您子主题的所有 CSS 规则和声明。
该文件也是您用来告诉 WordPress 使用哪个父主题的文件,因此它非常重要。
要创建该文件,您可以使用任何基本的文本编辑器(例如,记事本)或您最喜欢的代码编辑器(例如,Sublime Text)。
最重要的是,您必须在文件的最顶部添加一个必需的标题注释,以便样式表真正起作用。
此评论包含有关子主题的基本信息,包括它是具有特定父主题的子主题。

你真的只需要包括两个元素:

  1. 主题名称。这是您的子主题的名称。它可以是您网站的名称,也可以是“[主题名称] Child”之类的名称。对于我们的示例,我们将其设为“HubSpot Twenty Twenty-One”。
  2. 模板。这是包含您的父主题的目录的名称。这是将子主题与父主题联系起来的重要组成部分。对于二十二十一主题,这是“twentytwentyone”。对于其他主题,它通常是主题名称,但您可能需要仔细检查。您可以通过查看wp-content/themes文件夹或下载您的主题并打开 Zip 文件来执行此操作。

同样,上述两个元素是您的子主题运行所必需的 100%。


但是,您可以随意包含其他信息,包括描述、作者姓名、版本和标签。这些将影响您的子主题在外观 > 主题仪表板中的显示方式,如果您要发布或销售您的子主题,它们也会有所帮助。
我们建议也包括一个版本号,因为这将使您的主题样式表更容易排队。

第 3 步:排队父主题和子主题的样式表。

现在是时候将您的父主题和子主题的样式表加入队列了。这将确保两件事:

  1. 子主题继承其父主题的样式。因此,当您激活子主题时,您看到的不仅仅是一堆没有样式的文本。
  2. 子主题的样式表在父主题的样式表之前加载——没有覆盖它。这样,一旦您添加自定义 CSS 或以其他方式修改您的子主题,这些修改将增强或替换父主题的某些样式和功能。

不幸的是,这一步可能有点棘手,因为您需要使用的代码部分取决于您的父主题的编码方式。

第 4 步:安装并激活您的子主题。

一旦你创建了两个需要的文件——“style.css”和“functions.php”——你就拥有了基本子主题所需的一切。

要将子主题打包成可通过 WordPress 仪表板安装的文件,您需要将子主题文件夹压缩为 Zip 文件。
在 Windows 和 macOS 上,您应该能够通过右键单击本地计算机上的文件夹并选择压缩为 Zip 文件的选项来执行此操作。
这是 macOS 上的样子。

现在,您可以像安装任何其他 WordPress 主题一样安装此 Zip 文件。
要上传文件,请转到您的 WordPress 仪表板并单击外观>主题>上传 主题。然后,使用文件选择器选择您刚刚创建的 Zip 文件并单击立即安装。

上传后,您应该会看到来自 WordPress 的消息,告诉您它需要父主题并确认已安装父主题。
如果一切正常,请单击“激活”按钮。

好消息:您的儿童主题现已上线!在仪表板中打开主题时,您应该会看到正确的详细信息。

注意:要控制为您的主题显示的图像缩略图,您可以将名为screenshot.jpgscreenshot.png的图像上传到子主题的文件夹。这完全是可选的;它只会使您的仪表板看起来更好。
但是,现在唯一的问题是您的子主题看起来与您的父主题完全一样。要解决这个问题,是时候进行定制了。

第 5 步:自定义您的子主题。

您可以通过三种主要方式使用子主题来自定义父主题:

  1. 自定义 CSS。
  2. functions.php中的代码片段。
  3. 自定义模板文件。

自定义 CSS

要自定义您的子主题,您可能首先将 CSS 添加到子主题目录中的 style.css 文件。这是更改主题的最简单方法之一。
无论您想自定义父主题的配色方案、填充、版式或其他基本设计元素,只需将代码添加到标题注释下方的子主题样式表即可。此代码将覆盖您父主题样式表中的代码。

函数.php

另一方面,要修改父主题的功能,您需要向子主题目录中的 functions.php 文件添加函数。
例如,如果你想让作者和其他用户以不同的方式格式化他们的帖子,那么你可以使用 add_theme_support() 函数。
为了允许他们将帖子格式化为注释、链接、图片库、引用、单个图像或视频,然后您将以下内容添加到子主题目录中的 functions.php 文件中:

您可以在文件的开始和结束 PHP 标记之间放置任意数量的函数。

自定义模板文件

最后,您还可以使用子主题直接修改父主题的模板,例如个人博客文章或站点标题的模板。
但是,这需要对 PHP 和 HTML 有扎实的了解,因为您将直接使用这些语言。您还需要了解WordPress 模板层次结构。
如果您对这些技术不满意,您可能想跳过此步骤或使用可视化构建器,例如Elementor Pro 或 Divi。
要编辑模板文件,您首先需要将该模板文件从父主题文件夹复制到子主题文件夹。
例如,要编辑单个帖子模板,您可以将single.php文件从父主题复制到子主题。
然后,您可以直接对子主题目录中的single.php文件进行代码编辑。当父主题和子主题文件夹中都存在模板文件时,WordPress 将使用子主题中的模板文件。
但是,因为您已经将模板文件添加到子主题,所以当您更新父主题时它不会被覆盖。
就是这样!你的孩子主题很好。在WordPress 暂存环境中测试您的站点,然后实时推送您的更改。

创建 WordPress 子主题的其他选项

虽然上面的说明向您展示了如何手动创建 WordPress 子主题,但您可能不需要走手动路线。
以下是开始使用您网站的子主题的其他三个选项。

1. 查看您的主题开发者是否提供预制子主题。

因为如果您想对主题进行修改,使用子主题是必不可少的,许多主题开发人员提供了一个预制的子主题,您可以将其与父主题一起使用。
通常,您应该能够在主题开发人员的支持文档中找到该子主题的链接。或者,您可以联系主题开发人员寻求帮助。
例如,流行的 Astra 主题提供了自己的 WordPress 子主题生成器工具,可以为您创建必要的文件。
大多数其他流行主题也是如此。

2. 使用 WordPress 子主题插件。

如果您的主题开发人员不提供预建的子主题(并且您不想使用手动方法),您也可以使用 WordPress 子主题插件来生成您的子主题。


这里有一些最流行的免费儿童主题插件。

  • 儿童主题向导
  • WP 儿童主题生成器
  • WPS 儿童主题生成器
  • Orbisius 的儿童主题创作者

例如,使用免费的 Child Theme Wizard 插件,您可以转到工具 → Child Theme Wizard,只需单击几下即可轻松设置子主题。

3. 使用基于浏览器的 WordPress 子主题生成器。

除了插件,您还可以使用基于云的 WordPress 子主题生成器,您可以通过浏览器访问它。
免费的 Child Theme Generator 站点是最受欢迎的选项之一。您需要做的就是输入一些基本信息,该站点将让您下载子主题的两个关键文件。
如果您的父主题列在 WordPress.org 上,该站点还可以尝试为您预填信息。

WordPress 子主题不工作

您的子主题不起作用吗?以下是一些需要检查的事项。

1. 仔细检查您的 functions.php 文件。

确保您已将子主题的样式表放入 functions.php 文件中。如果你还没有排队,你的子主题将不会加载。
您的网站将保留在父主题上,所以它看起来没问题。问题是您对子主题所做的更改不会出现在前端。参考上面的第 3 步将入队代码添加到您的 PHP 文件中。

2. 确保将工作表命名为“style.css”。

检查以确保您将 CSS 表命名为“style.css”,而不是“stylesheet.css”。由于“style.css”是 WordPress 标准命名约定,使用该文件名将使您的 functions.php 文件自动知道那是您的样式表。如果您将样式表命名为任何其他名称,functions.php 文件将无法检索它并将其呈现给最终用户。

3. 确保您在 style.css 中使用了正确的模板名称。

如果您没有在 style.css 文件中输入正确的模板名称,WordPress 将不知道哪个主题是父主题。
同样,模板名称应该是包含您的父主题的文件夹的名称。

4. 清除缓存。

尝试清除您的 WordPress 缓存——您的 WordPress 服务器可能显示您网站的旧版本。
如果您安装了缓存插件来提高网站速度,您可能还想在处理子主题时停用它。
除了清除 WordPress 缓存外,出于同样的原因,您还应该清除浏览器缓存。或者,在隐身窗口中打开您的网站以查看您发布的更改。

5. 将 !important 添加到您的 CSS 代码中。

如果父主题仍在覆盖子主题的 CSS 代码,请将 !important 添加到您更改的元素中。这将强制覆盖写在父主题的 CSS 表上的任何内容。您可以在分号之前添加 !important,如下所示:

!important 规则可用于ID、CSS 类和标准 HTML 元素,例如段落、表格、标题等。
要了解有关此属性的更多信息,请查看如何在 CSS 中使用 !important 属性。

6. 联系您的主题支持或查看主题论坛。

如果您已执行所有这些步骤,但 CSS 仍未加载,那么是时候联系您的主题支持团队或查看 WordPress.org 上的主题论坛了。
虽然这应该是您的最后手段,但它的好处是可以为您提供针对您的主题的特定答案。
您的 WordPress 主题的开发人员可能使用了自定义代码或为主题文件实施了不同的命名系统。

创建您的 WordPress 子主题。

安装 WordPress 主题是创建 WordPress 网站的重要第一步。要自定义它,您可以使用内置的古腾堡编辑器或您的主题构建器(如果有的话)。但要更进一步,不仅要自定义其设计,还要自定义其功能,您需要创建一个子主题。

Newsletter Updates

Enter your email address below and subscribe to our newsletter

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注