如何通过 4 个简单的步骤创建 WordPress 子主题

已发表: 2015-11-25

关注@Cloudways

子主题——顾名思义——是从父主题派生功能的主题。在某些情况下不建议直接编辑 WordPress 主题，例如主题可能会更新的地方。如果应用了主题的新更新，您可能会丢失已完成的自定义。

为了保持自定义并继续接收主题的更新，建议为您要使用的父主题创建一个 WordPress 子主题。创建子主题还有另一个优势，即您的父主题保持完整且无需任何编辑。

子主题与父主题位于不同的文件夹中，除非修改，否则子主题取决于父主题的功能。如果您在网站上使用子主题，那么 WordPress 核心将首先检查子主题的文件。如果不修改，WordPress 将执行父主题的文件。

为了完全理解WordPress中子主题的概念，我们将创建一个25个默认WordPress主题的子主题，并进行一些修改以了解子主题背后的想法。

要创建 WordPress 子主题，我们将按照以下步骤操作：

创建一个文件夹并将其命名为二十五个孩子。附加 -child 被认为是一种很好的做法。
使用子主题信息和functions.php文件创建style.css
在 style.css 中导入二十十五模板
通过functions.php文件入队样式表
编辑模板文件，如 single.php

第 1 步：创建子主题文件夹并添加 style.css

第一步是为我们的子主题创建一个新文件夹。将其称为 25-child，以便轻松记住我们的儿童主题所在的位置。

为此，请使用 FileZilla 等 FTP 客户端连接到您的服务器并导航到 /public_html/wp_content/themes 并创建一个名为二十五岁儿童的新文件夹

在这个新目录中创建一个 style.css 文件并将以下信息粘贴到其中。

 /*
主题名称：二十十五岁的孩子
主题 URI：https://wordpress.org/themes/twentyfifteen/
作者：WordPress 团队
作者 URI：https://wordpress.org/
模板：二十五
描述：二十五岁的儿童主题
版本：1.3
许可证：GNU 通用公共许可证 v2 或更高版本
许可证 URI：http://www.gnu.org/licenses/gpl-2.0.html
标签：黑色、蓝色、灰色、粉色、紫色、白色、黄色、深色、浅色、两列、左侧边栏、固定布局、响应式布局、可访问性就绪、自定义背景、自定义颜色、自定义-标题、自定义菜单、编辑器风格、特色图像、微格式、后格式、rtl 语言支持、置顶帖、线程评论、翻译就绪
文本域：二十五个孩子
这个主题和 WordPress 一样，是在 GPL 下获得许可的。
用它来制作一些很酷的东西，玩得开心，并与他人分享你学到的东西。
*/

您应该编辑的最重要的行是“主题名称” 、 “文本域”和“模板” 。由于主题名称不能与二十十五相同，并且在模板中我们告诉WordPress该主题是二十十五的子主题，如果二十十五文件夹中的文件不存在于二十十五子中，我们应该调用它们文件夹。此外，文本域对于您安装 WordPress 的每个主题都应该是不同且唯一的。

现在，如果我们导航到我们的WordPress 管理仪表板 → 外观 → 主题，我们将看到二十五个孩子已经出现。我们可以在我们的网站上应用该主题。

因为 style.css 存在于子主题目录中。 WordPress 将加载该 style.css 而不是父主题的 style.css。其他所有文件，如index.php 、 page.php 、 functions.php 都将从父主题加载。

由于我们没有在子主题的style.css 中定义任何样式，我们将不得不导入样式。 WordPress codex 上推荐的最佳实践是使用functions.php 文件将样式表排入队列。

第 2 步：使用functions.php 将样式表排入队列

与其他文件不同，WordPress子主题的functions.php文件背后的原理是：WordPress首先加载子主题的functions.php并初始化其中的函数，之后还会执行父主题的functions.php。

正如我之前提到的，导入样式表的最佳方法是通过functions.php文件将它们排入队列。

在您的子主题目录中创建functions.php文件并添加以下代码。

 <?php
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
函数 enqueue_parent_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
}

这将从父主题文件中调用样式表“ style.css ”。如果您想编辑样式表中的任何内容，您可以在子主题的 style.css 中添加这些规则。

第三步：编辑子主题的style.css文件

在 WordPress 子主题中，您可以通过在子主题文件夹中的 style.css 中定义规则来轻松编辑样式表。例如，如果我们想更改锚点颜色，我们只需要在子主题的 style.css 中添加以下代码

一种 {
颜色：#D54E21；
文字装饰：无；
}

这里发生的事情是“a”的子主题的 style.css 规则覆盖了父主题的style.css ，其余保持不变。

第四步：编辑single.php的模板文件

我们可以轻松编辑子主题中的单个模板文件。例如，如果我们想编辑 single.php，那么我们需要从父主题文件夹中复制该文件并将其粘贴到子主题的文件夹中。

假设我们要从单个帖子页面中删除评论部分。在我们的子主题文件夹中复制文件后，我们可以编辑它并删除以下评论部分。

 // 如果评论已打开或我们至少有一条评论，请加载评论模板。
if ( comments_open() || get_comments_number() ) ：
评论模板（）；
万一;

这里发生的事情是 WordPress 检查子主题文件夹中的single.php ，如果它存在于目录中，它将从那里加载它，否则它将回退到父主题文件夹。

就像那样，我们可以在我们的主题中编辑任何单独的模板文件。这种方法通常很好，因为它使我们的父主题保持完整并更新父主题而不会丢失我们的自定义。