WordPress子主题的终极指南

已发表: 2017-06-29

WordPress 生态系统充满了漂亮的免费和高级主题，但要找到一个适合您需求的完美主题，即能满足所有要求的主题非常困难。 幸运的是，WordPress 有一个解决这个问题的方法，称为子主题。 所以，不用担心，您可以使用子主题应用更改来创建几乎完美的主题。

WordPress 子主题可以像一些自定义 CSS 代码一样简单，也可以覆盖现有的父主题模板并修改或添加额外的主题功能。 我将在本文中解释您需要了解的有关儿童主题的所有信息，所以让我们直接开始吧。

什么是儿童主题？

子主题是一个主题，它继承了另一个主题（称为父主题）的功能和样式。 子主题是修改现有主题的推荐方式。

— WordPress 文档

上面的官方 WordPress 定义很棒，但让我们更仔细地看看这意味着什么。 入门（准系统）子主题的外观和功能与父主题完全相同。 我将很快向您展示如何创建入门子主题，但目前，入门主题是最小的子主题，它将继承父主题的所有内容。 然后，您可以向子主题添加文件和代码，这将修改或增强父主题的外观和功能，使其成为一个单独的独特主题。

儿童主题类比
儿童主题类比

使用子主题有很多好处，没有真正的缺点，所以让我们看看为什么应该使用子主题。

为什么要使用儿童主题？

更好的问题：你为什么不使用儿童主题？ 我实际上想不出一个不使用它的好理由，但我知道你应该使用儿童主题的几个重要理由。

主题更新——如果您直接修改主题代码并在将来更新该主题，所有这些修改都将丢失。 我认为仅凭这个理由就足够了，可以开始使用子主题了。 我们有几个客户，他们直接编辑主题文件，然后打开支持票，说我们的主题更新破坏了他们的工作。 如果他们使用儿童主题，一切都会好起来的。 你甚至需要主题更新吗？ 是的！ 例如：如果主题更新包含安全修复程序并且不更新主题，您的 WP 网站可能成为黑客的潜在目标怎么办？

代码组织- 由于所有更改都放在子主题文件夹中，因此您可以清楚地看到已进行哪些更改以及如何进行更改。 如果您将来需要更改任何内容，您将确切知道在哪里可以找到这些更改，这将为您节省大量时间。

更快的开发——在子主题中扩展或覆盖父主题样式和功能，是一个更好的选择，而不是维护一个修改过的主题代码库，它可以被主题更新覆盖（我们已经确定，更新很重要:)） .

正如我之前提到的，我想不出为什么不使用子主题的单一原因，所以我建议您尽快设置一个入门子主题。 安装新主题时，您还应该创建一个初始子主题并使用它，即使您没有立即计划自定义父主题。 相信我，在路上，当您需要进行一些更改时，您会很高兴您使用的是儿童主题。

附带说明：WordPress 4.7 在定制器中引入了附加 CSS 编辑器，您可以在其中添加自定义 CSS 代码。 因此，如果您确定您唯一的主题修改将是一些自定义 CSS 代码，那么您不需要子主题。 您可以使用 Additional CSS 编辑器来添加您的 CSS 代码，仅此而已。 但是您确定以后不会对主题进行任何额外的更改吗？ 你是？

如何创建入门儿童主题？

现在我们知道了什么和为什么，让我们看看如何。 正如我们已经提到的，入门子主题是一个非常小的子主题。 它的外观和功能与父主题完全相同，但它将是您修改和改进的起点。

对于我们的示例，我们将为 Adrenaline 父主题创建一个起始子主题：

  1. 创建一个文件夹并将其命名为 adrenaline-pt-child。 最佳实践是使用父主题文件夹名称 (adrenaline-pt) 并在其末尾附加“-child”，因此哪个主题是子主题和哪个父主题是显而易见的。
  2. 在子主题文件夹中创建一个style.css文件。 打开style.css文件并将此代码粘贴到其中（此代码必须位于文件顶部）：
     /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ /* Write your custom CSS code below */
  3. 在子主题文件夹中创建一个functions.php文件。 打开functions.php文件并将此代码粘贴到其中：
     <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
  4. 或者，您可以将 screenshot.png（或 .jpg）添加到您的子主题文件夹中，该文件夹将作为预览图像显示在外观 -> 主题部分（屏幕截图图像应为 1200x900 像素大）。
子主题文件夹结构
子主题文件夹结构

这是基本的初学者儿童主题。 要安装它，您应该将此文件夹放在 wp-content/themes/ 目录中，靠近父主题文件夹。 或者，您也可以从此子主题文件夹创建一个 zip 文件，并通过外观 - > 主题中的 WP 管理仪表板将其安装为常规 WP 主题。

让我们解释一下上面片段中的代码。

style.css – “必填”的唯一字段是主题名称（您的子主题的名称）和模板（您的父主题的文件夹名称）。 其他字段是可选的，子主题将在没有它们的情况下工作。 但是，这些元字段：主题 URI、描述、作者……“很高兴拥有”，它们将显示在WP 管理 -> 外观 -> 主题中，这将使子主题更加“完整”。

functions.php - 为了使子主题与父主题具有相同的样式，我们需要将父主题 CSS 文件排入队列。 推荐的方法是使用wp_enqueue_scripts动作挂钩。 在回调函数中，我们使用wp_enqueue_style函数将父主题 CSS 文件排入队列。 如果父主题使用多个 CSS 文件（不仅仅是style.css ），那么您可能还需要将它们加入队列，这取决于父主题的入队技术。

在我们的 Adrenaline 主题中，我们还使用了自定义的 WooCommerce CSS 文件，因此最好将它也加入到子主题中。 我们必须在这里小心，因为我们需要将wp_enqueue_style函数的句柄参数命名为与父主题中相同的名称（在我们的示例中： adrenaline-woocommerce ）。 这样，我们的子主题 CSS 文件将排在最后，我们将能够毫无问题地覆盖任何父主题样式。 这是我们的 Adrenaline 主题更新后的functions.php文件：

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); /** * Enqueue additional parent theme CSS files. * Watch out to name the "handle" parameter the same as it is named * in the parent theme, otherwise the file might be enqueued twice. * In this example the parent handle name for this CSS file was * "adrenaline-woocommerce" */ wp_enqueue_style( 'adrenaline-woocommerce', get_template_directory_uri() . '/woocommerce.css' ); }

在这一点上，我想提一下，将父样式添加到子主题的旧方法是使用 CSS @import规则。 如果您使用的是子主题，它使用style.css中的@import规则来导入父主题 CSS 文件，那么我建议您切换到上面的示例，其中父主题 CSS 文件在functions.php中排队文件（并从style.css中删除@import规则）。 @import规则的问题在于，它比通过wp_enqueue_scripts挂钩将父 CSS 文件排队要慢得多。 您可以在此处阅读有关此问题的更多信息。

您可能会想：“必须有一个用于创建子主题的插件……”是的，有。 我们将在名为“在已配置的父主题上切换到子主题”的部分中查看此插件。

父子主题模板文件如何工作？

在继续介绍如何自定义子主题的示例之前，我们将快速了解 WordPress 模板层次结构的工作原理。

WordPress 使用模板文件来构建您的网站访问者看到的实际 HTML 页面。 一些比较知名的 WordPress 模板文件有： header.php 、 footer.php 、 index.php 、 single.php 、 page.php ……例如，如果访问博客页面，则使用index.php模板文件显示博客文章列表。 一些模板文件是模块化和可重用的。 例如header.php ，通常用于每个 WordPress 页面。

一些模板文件比其他模板文件更具体，被 WordPress 视为更高的优先级。 例如，如果一个主题有一个singular.php和一个page.php模板，并且访问者查看一个常规的WordPress 页面， page.php模板将用于生成页面。 这是因为page.php模板文件比 WordPress 模板层次结构中的singular.php模板更具体。 如果我们从主题中删除page.php文件，那么将使用singular.php模板。 您应该查看 WordPress 模板层次结构文档，其中对该主题进行了更详细的描述并提供了一些示例。

您应该查看的另一个资源是 WordPress 模板层次结构的交互式可视化。

WP模板层次结构
WP模板层次结构

因此，根据访问的页面类型，使用不同的模板文件来生成访问者看到的页面。 这很重要，因为这可以帮助您确定需要更改或添加到子主题中的模板文件以自定义您的站点。

WordPress 将始终使用它可以找到的最相关的模板文件，具体取决于模板层次结构。 如果我们使用子主题，它会先在子主题中查找这些模板文件，如果子主题中不存在模板文件，则返回到父主题。 此外，如果子主题使用比父主题更具体的模板文件（在 WordPress 模板层次结构中），它将使用该文件。

如何自定义您的孩子主题？

让我们继续我们的 Adrenaline 子主题示例，看看我们如何自定义它。 我们将介绍这些用例：

  • 添加自定义样式并覆盖父样式，
  • 添加自定义功能并覆盖父功能，
    • 添加新功能，
    • 覆盖父功能，
    • 添加新的模板文件，
    • 覆盖父模板文件

添加自定义样式并覆盖父样式

所有自定义 CSS 代码都应添加到子主题的style.css文件中。

假设我们想在我们的子主题中添加一些文本的警告样式。 我们在 WordPress 页面上有一个带有warning类的 div HTML 元素以及一些文本，我们希望为这个元素添加适当的样式。 我们为此示例编写的自定义 CSS 代码必须放在style.css文件中，位于子主题标题注释下方（始终位于文件顶部）。 带有自定义 CSS 代码的style.css文件如下所示：

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .warning { margin: 1rem 0; background-color: #fcf8e3; border-color: #faf2cc; color: #8a6d3b; padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: 0.25rem; }

比添加自定义 CSS 代码到您的子主题更重要的是覆盖父主题样式。 也许你喜欢父主题的整体外观，但你想改变一些东西，比如图标的颜色。 我们将以覆盖 Adrenaline 主页标题中的购物车图标颜色为例。 此图标颜色随原色的定制器设置而变化，但假设我们要为其赋予独特的颜色。

为了覆盖这个父主题样式，你必须在父主题中找到 CSS 选择器，也就是设置这个图标的颜色。 您可以使用 Chrome 开发工具找到 CSS 选择器。 这是一个关于如何做到这一点的简单视频教程。 一旦你有了正确的 CSS 选择器，在我们的例子中它是.header-info__link .fa ，你必须将代码放在子主题的style.css文件中。 具有此覆盖的子主题style.css文件如下所示：

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .header-info__link .fa { color: #2ebd61; }

最难的部分是找到正确的 CSS 选择器作为目标，一旦完成，只需应用正确的 CSS 规则即可。

伟大的！ 我们只是将一些自定义样式应用于我们的子主题。 您可以根据需要将尽可能多的自定义 CSS 代码添加到子主题style.css文件中。

现在让我们看看如何为子主题添加一些功能。

添加自定义功能并覆盖父功能

这是事情变得有趣的部分，您可以在其中使用附加功能改进您的子主题或覆盖您想要更改的父主题功能。

有几种方法可以实现您的自定义，让我们来看看它们：

  • 添加新功能，
  • 覆盖父功能，
  • 添加新的模板文件，
  • 覆盖父模板文件

添加新功能

您可能希望添加到子主题中的任何 PHP 代码形式的新功能都必须放入functions.php文件中。 如果要添加大量 PHP 代码，则应将代码提取到多个 PHP 文件中，然后将这些文件放入functions.php文件中，以便更好地组织代码。

例如，如果您向子主题添加简码，您可能会创建一个名为shortcodes.php的文件并将适当的代码添加到该文件中。 然后你需要functions.php中的文件，如下所示： require_once get_stylesheet_directory() . '/shortcodes.php' require_once get_stylesheet_directory() . '/shortcodes.php'

覆盖父功能

您可能需要修改一些父主题功能，但由于我们不允许直接编辑父主题代码，我们需要以某种方式在子主题中实现这一点。 不用担心，WordPress 有一个专门用于此的系统。

有两种修改父功能的方法，第一种是使用WordPress 操作和过滤钩子，第二种是使用可插入函数。

WordPress 操作和过滤器挂钩- 如果您使用的是编码良好的父主题，那么您应该能够在整个主题中找到自定义的 WP 操作和过滤器，您可以挂钩并更改主题的行为。 您应该在您的父主题中搜索 do_action 和 apply_filters 函数。 例如，在 Twenty Seventeen 主题中，您可以找到这个自定义过滤器： twentyseventeen_front_page_sections ，其默认值为4 。 该值表示在该主题的首页上定义了多少个部分。 如果我们要创建一个 27 个子主题并且希望只有 2 个部分，那么我们将这段代码放在子主题的functions.php文件中：

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } // Custom Twenty Seventeen front page sections filter example. add_filter( 'twentyseventeen_front_page_sections', 'twentyseventeen_child_front_page_sections' ); function twentyseventeen_child_front_page_sections() { return 2; }

可插拔函数——什么是可插拔函数？ 它们是普通的 PHP 函数，但包装在 if 语句中，以检查具有此名称的函数是否已存在。 它们看起来像这样：

 <?php if ( ! function_exists( 'some_function_name' ) ) { function some_function_name() { // Function code goes here. } }

如果您的主题正在使用这些可插入函数，那么您可以通过在子function.php文件中定义具有相同名称和更改代码的函数来覆盖它们在子主题中的代码。 在 WordPress 引导过程中，子主题functions.php文件在父主题functions.php文件之前加载，这就是为什么这种可插入函数方法是可能的。 此外，如果父主题函数不可插入，则不能覆盖它，因为两个具有相同名称的函数会引发严重的 PHP 错误。

可插拔功能在早期的 WordPress 核心中使用，并被过滤器所取代。

添加新模板文件

将新的 WordPress 模板文件（父主题没有）添加到子主题很容易。 您需要做的就是将模板文件放在子主题的根目录中。

例如，如果您的父主题没有category.php模板文件，该模板文件负责显示特定类别的帖子，那么您可以将category.php模板文件添加到子主题文件夹的根目录（在functions.php ). WordPress 现在将使用这个category.php文件来显示您的类别页面。

您还可以在子主题中添加更具体的模板文件，以接管相应页面的一小部分。

例如，如果你的父主题有一个archive.php模板，这是一个父模板文件，用于显示作者、类别、分类、日期和标签页面，但没有author.php模板，这是一个更具体的模板WordPress 模板层次结构，然后您可以将此author.php模板添加到您的子主题并更改作者页面的布局。 这样，您就可以保持类别、分类、日期和标签页面的布局和显示相同，而只更改作者页面。

覆盖父模板文件

覆盖父主题功能的最后一个也是最常见的用途是覆盖父主题模板文件。

如果我们想在我们之前创建的 Adrenaline 子主题中更改页面模板上的某些内容，我们需要将page.php文件从父主题复制到我们的子主题文件夹并进行所需的更改。

如果我们想更改单个帖子上显示的作者和日期，我们会将single.php文件复制到子主题并在该文件中进行更改。

覆盖父主题模板非常强大，因为您可以通过对现有父主题模板文件进行一些修改来更改您想要的任何内容，但保持父主题完整且安全更新。

在已配置的父主题上切换到子主题

如果您有一个没有子主题的现有 WordPress 网站并想开始使用子主题，那么需要注意一些事项。

您可以使用插件自动创建子主题，也可以手动创建。 现在，您可能在想：“是的，一个插件！ 如果可以自动完成，谁愿意手动做任何事情？” 好吧，你没有看错，但是因为你想了解更多关于子主题的知识，我们将首先看手动步骤

手动切换到子主题

首先，为您的父主题创建一个子主题，并将您直接在父主题代码中所做的任何修改或添加提取到子主题中。 这将使您的父主题可以安全更新，并且您的自定义代码将整齐地隐藏在子主题中。

现在，在您激活子主题后，如果您查看首页，有些事情可能看起来很奇怪甚至损坏。 这种混乱背后的原因是，WordPress 将子主题视为一个新的单独主题，因此所有主题设置都重置为默认值。 这会导致小部件切换侧边栏位置（来自页脚侧边栏的小部件可能最终出现在页眉部分等），并且定制器设置被重置为主题默认值。

小部件– 要修复小部件问题，请转到外观 -> 小部件并在正确的侧边栏中重新定位（拖放）小部件。

定制器设置- 有一种简单的方法可以迁移您已经在父主题中设置的定制器设置。 定制器导出/导入插件非常易于使用，它会导入父主题定制器设置，因此您无需手动设置它们。 按照这些说明将定制器设置迁移到您的子主题。

如果您的主题正在使用任何其他主题选项框架，那么您可能还需要重新配置它们。

完成这些操作后，子主题应该看起来就像您的父主题一样，但您已准备好进行进一步修改和定期父主题更新。

现在，我们了解了问题是什么，切换到子主题时以及如何解决这些问题，让我们看看在插件的帮助下切换到子主题的更简单方法。

自动切换到子主题（使用插件）

“自动”这个词在这里可能有点过分，因为我们仍然需要做一些事情才能切换到子主题，但它比手动操作更容易和更快。

我测试过的最好的子主题生成器插件是 Child Theme Configurator 插件。 它将允许我们创建一个子主题并一次性从父主题迁移所有主题设置。 棒极了！

这是有关如何使用此插件切换到子主题的快速教程：

  1. 在您的 WP 网站上安装并激活 Child Theme Configurator 插件，
  2. 转到工具 - >子主题，
  3. 第一步，选择“创建一个新的子主题”选项，确保您选择了正确的父主题，然后单击分析按钮，
  4. 插件完成分析后，您可以查看所有出现的附加选项并进行调整，具体取决于您的父主题，但默认设置通常没问题，
  5. 您可以单击“显示/隐藏子主题属性”按钮并更改子主题名称和其他元数据，
  6. 在将菜单、小部件和其他定制器设置从父主题复制到子主题选项中，您应该启用该复选框，以便小部件和定制器设置将从您现有的父主题迁移到这个新创建的子主题，
  7. 单击创建新的子主题按钮。

而已！

有关此插件的子主题创建和示例的完整教程，我建议您查看发布在子主题配置器插件页面上的视频。

我在我们的 Adrenaline 主题上测试了这个插件，效果很好。 子主题创建成功，小部件和定制器设置也迁移到它，所以我绝对推荐这个插件。

概括

子主题是修改 WordPress 主题的推荐方式。 它们允许用户制作自己的主题，只需进行轻微或重大修改，但同时保持父主题不变。

我们查看了儿童主题必须提供的所有内容，如果您认为我遗漏了一些内容，请在下面的评论部分与我们分享，我会将其添加到本指南中。

我希望你以后的每一个 WordPress 项目都使用一个子主题，因为基本上没有缺点，只有好处； 如果不出意外，您的父主题可以收到定期更新。