如何创建 WordPress 子主题（教程）

在本文中，我们将更多地讨论什么是 WordPress 子主题以及为什么要使用它们。然后，我们将讨论创建子主题有意义的一些情况，并教您如何创建。

使用 WordPress 的最大好处之一就是它近乎无穷无尽的自定义选项。但是，在深入了解之前，您应该遵循一些协议。否则，您的自定义可能无法按预期工作。

这就是儿童主题来拯救的地方。它们是 WordPress 的一项功能，使您能够安全地自定义主题并使所有调整井井有条。一旦您学会了如何使用它们，您的生活就会变得轻松很多，尤其是当您花大量时间调整主题的样式和行为时。

什么是 WordPress 子主题？

从表面上看，WordPress 子主题与普通主题的工作原理相同。一旦激活，它将像您的任何其他主题一样工作。不同之处在于，子主题有一个“父主题”，它们从中继承所有属性。

例如，假设您在博客上使用二十二十二主题。您可以随时为它创建一个子对象，它看起来和工作起来都是一样的。但是，您可以在不影响其父主题的情况下自定义子主题工作方式的各个方面。这是对您有利的方法：

• 您可以安全地更新主题。更新主题时，您还会丢失在此过程中对其代码所做的任何更改。但是，如果您使用子主题并更新其父主题，则可以绕过此问题。
• 更容易跟踪您对主题所做的更改。许多 WordPress 主题包括数十个文件和数百行代码。这意味着对它们的任何更改（无论多么小）都可能很棘手，因为很容易忘记这些调整。使用儿童主题，您可以随心所欲地进行更改，同时保持内容整洁。

让我们用一个例子来总结一下到目前为止我们学到了什么。

如果您为 Twenty-Twenty-Two 创建子主题，WordPress 会将其识别为不同的项目。但是，子主题将继承其父主题的所有样式和功能。WordPress 然后加载覆盖其默认配置的任何更改。如果是这样，它将呈现那些而不是默认的 Twenty-Twenty-Two 主题文件。

这听起来很棘手，但一旦您学会了如何创建一个并在实际中看到它就很简单。

何时使用子主题

如果您计划更改您的主题，您应该为它创建一个子主题。但是，如果您对主题的工作方式和外观完全满意，则可以按原样使用它。

专业提示：如果只需要更改CSS，您还可以决定使用 WordPress 的自定义/附加 CSS 功能。这比创建子主题简单得多，可以直接从定制器中完成。

如果您仍然对使用子主题是否是个好主意犹豫不决，这里有一些这样做有意义的例子：

• 如果您要对活动主题的功能或样式进行任何永久或临时更改。
• 当使用接收持续更新的主题时（这是一件好事！）并且您不想在此过程中丢失您的自定义设置。
• 要测试您可能希望使用安全环境在活动主题上实施的更改。

这些场景中的任何一个都是日常使用子主题的充分理由。但是，如果您打算创建一个主要用于测试目的的网站，您可能还需要考虑设置一个暂存网站。

如何创建 WordPress 子主题（5 个步骤）

如果这是您第一次设置 WordPress 子主题，您一定要备份您的网站。不要害怕 - 这个过程非常简单，但谨慎行事总是值得的。

此外，在我们开始之前，您应该已经知道在这个场景中您想使用哪个主题作为父主题。如果您只是出于测试目的而这样做，现在可以随意选择 WordPress 的默认主题之一。

1. 为您的子主题创建一个文件夹

第一步当然是最简单的。您在网站上安装的每个主题在服务器上的专用主题目录中都有自己的文件夹。首先，我们将为您的新子主题创建一个新的子目录。

有很多方法可以与您网站的文件结构进行交互——例如通过您的面板——但我们偏爱安全文件传输协议 (SFTP)，因为它易于使用。要通过 FTP 访问您的网站，您需要一个专门的客户端。我们建议使用FileZilla，因为它即使对于初学者也很容易上手，而且它还在不断开发中。如果您不熟悉使用 FTP，您还需要在处理这些步骤之前温习一下您的技能。

安装后，使用您的 SFTP 凭据访问您网站的目录。此目录最常显示为public_html，默认为您添加的域 (example.com)。

输入目录并前往wp-content/themes/。在里面，您会为每个 WordPress 主题找到一个独特的文件夹。

现在，右键单击主题目录中的任意位置，选择创建目录选项，然后为新文件夹设置名称：

您的子主题文件夹可以有任何您想要的名称。但是，出于实际目的，我们建议给它一个您可以轻松识别的标题，例如twenty twentytwo -child（或其他名称，具体取决于其父主题）。

准备好子主题的文件夹后，您就可以继续进行第二步了。

2. 创建主题样式表

您可能知道，样式表是为您的页面提供大部分视觉效果的 CSS 文件。每个主题都有自己独特的样式表，您的孩子也不例外。请记住，默认情况下，您的子主题将继承其父主题的所有样式。但是，您可以通过向即将创建的 style.css 文件添加新代码来覆盖它们。

虽然您的子主题的 style.css 文件将来会派上用场，但它现在也实现了一个重要目的。它只是告诉 WordPress “嘿，我也是一个主题，把我和其他人一起加载！”

为此，您需要返回子主题的目录并访问它。现在，该文件夹应该是空的。右键单击其中的任意位置，然后选择“创建新文件”选项。当 FileZilla 提示您为其选择名称时，键入style.css并确认您的决定。

最后，我们需要向该文件添加一小段代码。右键单击它并选择查看/编辑。此选项会将文件的副本下载到您的计算机并使用本地编辑器将其打开。打开文件后，您需要粘贴以下文本：

乍一看，这似乎是很多信息，但要使子主题起作用，您只需要正确设置一个字段：模板。在上面的示例中，您可以看到我们使用了twenty twentytwo，这是 Twenty-Twenty-Two 主题目录的名称。如果您使用不同的主题作为父主题，则需要将该值替换为其文件夹的名称（而不是主题的全名）。

您还需要选择对您的子主题有意义的标题和描述，因为您会在 WordPress 的“主题”选项卡中看到这两者。至于其余字段，值可以替换为您喜欢的任何内容。

继续，设置正确的模板值并调整代码后，您可以将更改保存到style.css文件并关闭文本编辑器。现在，FileZilla 将询问您是否要将服务器上的文件替换为您刚刚修改的本地副本。说是，然后访问您的 WordPress 仪表板。如果您查看“主题”选项卡，您应该会看到一个新添加的内容。

3.配置您的子主题以继承其父主题的风格

到目前为止，您应该已经为新的子主题创建了一个文件夹和style.css文件。在后者中，我们包含了将其指定为主题的信息。下一步是确保您的子主题继承其父主题的样式和功能。

为此，我们将使用一个functions.php文件，它使您能够指示 WordPress 添加新功能。在该文件中，我们将添加一个脚本来“排队”您父主题的样式表（不是我们刚刚创建的样式表）。之后，您的子主题将可供您使用。

首先，返回到您的子主题目录。在里面，创建一个名为functions.php的新文件，就像您在第二步中对 style.css 所做的那样。

现在使用 FileZilla 的查看/编辑选项打开文件并将以下代码粘贴到其中：

在这种情况下，无需替换任何代码的值。无论您使用哪个父主题，相同的代码都将起作用，因为您已经使用 style.css 文件指定了它。

长话短说，该代码片段告诉 WordPress 它应该加载您父主题的样式表，这是您的子主题工作所需的最后一块拼图。

现在将更改保存到您的functions.php文件并关闭它。当 FileZilla 询问您是否要替换网站的 functions.php 文件时，请务必同意，仅此而已！现在您的儿童主题已准备就绪，可以隆重登场了。

4.激活您的新儿童主题

要使用您的子主题，请返回您的 WordPress 仪表板并转到外观>主题选项卡。在里面，应该有一个没有特色图片的主题——你的孩子主题。

单击主题名称旁边的激活按钮，然后像往常一样打开您的网站。如果您严格按照前三个步骤操作，您的网站应该看起来与我们开始之前完全一样。

随时快速环顾四周，三次检查一切是否正常。如果答案是“是”（应该是），您就可以继续学习本教程的第二部分，我们将在其中讨论如何使用您的新子主题。

但是，在此之前，让我们快速进站并为您的子主题添加一张特色图片。

5. 将图像添加到您的子主题

我们很清楚 - 当我们谈论主题的特色图片时，我们指的是在“主题”选项卡中显示在其名称上方的图形。这里有一些例子。

新创建的子主题不附带这些图像，因此您需要提供一个供 WordPress 加载它。幸运的是，这是一个非常简单的过程。您所要做的就是在您的子主题目录中添加一个名为screenshot.png的 PNG 图像。

WordPress 将以 387 x 290 的分辨率显示此图像。但是，您可能希望使用更高的维度来保存它，以便它在更大的屏幕上显示良好。在任何情况下，您都可以使用任何您想要的图像作为主题的屏幕截图。

完成后，您的主题选项卡应该再次看起来很棒，所以是时候恢复正常了。

如何自定义您的 WordPress 子主题（4 个技巧）

在此阶段，您手上应该有一个完全可用的子主题。更重要的是，您还对整个过程的运作方式以及创建过程中每个步骤的必要性的原因有深刻的理解。这意味着我们可以直接使用您刚刚创建的文件来玩弄您的子主题！

1. 添加自定义样式

如您所知，每个 WordPress 子主题都会自动继承其父主题的样式。但是，它们也有自己的样式表。如果它们之间存在任何冲突，您添加到子主题的 style.css 文件的任何自定义项将覆盖其父项的样式。

只要您知道主题的元素是什么，使用 CSS 调整主题的样式就很简单。即使您不这样做，也可以使用浏览器附带的网络检查器（例如Chrome DevTools ）轻松找到答案。只需右键单击要更改的元素，然后选择“检查”选项。

现在，页面的源代码将显示在您右侧的一列中，包括您正在检查的元素的特定类：

有了这些信息，您就可以访问子主题的style.css文件并添加必要的代码来调整它。然后您可以将更改保存到您的style.css文件中，您就可以开始了。返回您网站的前端，看看您的主题现在是什么样子。

2. 学会覆盖你父主题的文件

一分钟前，我们讨论了您的子主题的style.css如何自动覆盖其父主题的代码。对于父主题和子主题之间有两个文件的任何其他文件也是如此。

想象一下，例如，您决定为二十二十二主题创建一个子对象。在本例中，父级在其主题文件夹中有一个footer.php文件：

如果您要在其子主题中创建一个footer.php文件，WordPress 会自动加载该文件。只要两个文件共享相同的文件夹树结构，平台就会执行此操作。在这种情况下，由于您的父主题的footer.php文件位于twentytwentytwo目录的顶部，因此它的副本也必须如此。

只要两个文件共享相同的名称，WordPress 就会完成剩下的工作。使用此技巧，您将能够更改主题功能的任何方面。另外，如果你破坏了任何东西，你可以简单地从你的子主题目录中删除有问题的文件并重新开始。

3. 创建自定义页面模板

每当您在 WordPress 中创建新页面时，您都可以选择与它一起使用的模板。一些最常见的示例包括全角布局或带有侧边栏的布局。

您可以向任何您想要的主题添加新布局，尽管这个过程有点复杂。如果您想尝试创建一个新的，这里有一个入门教程。

4.使用主题挂钩

在 WordPress 中，挂钩是触发器，可让您在发生某些事情时添加自定义代码或调整文件的工作方式。这些都是您可以通过修改文件来完成的事情，但是使用挂钩更简洁，因为它们是单独存在的。

不过，学习如何创建钩子有点超出本文的范围。

简而言之，您可以使用自己的functions.php文件向您的子主题添加挂钩。这样，您所做的任何修改都将独立于其父主题。

解锁 WordPress 子主题的好处

WordPress 子主题起初可能令人生畏。创建一个需要您卷起袖子，但在您完成之后，您会发现过程并不那么复杂。另外，向您的子主题添加自定义项应该可以让您更好地了解 WordPress 的工作原理，这可以打开很多大门。谁知道？在某些时候，您甚至可能最终会创建自己的主题。

你可能喜欢的内容：