如何在 WordPress 中创建子主题

相信很多使用 WordPress 建站的朋友都会有定制 WordPress 主题的需求，但如果我们在定制过程中直接编辑主题的话，可能会导致各种各样的问题。比如主题更新了，你的更改就会被覆盖！更好一点的办法就是创建一个从父主题继承的子主题。通过子主题，您可以安全可靠地修改和扩展主题的功能。

在本文中，我们将讨论如何在 WordPress 中创建子主题的问题。您将了解创建子主题的目的、如何设置子主题，以及如何自定义子主题以覆盖父主题的设计和功能。只需简单的几步操作，你就可以创建一个子主题，并在不接触父主题文件的情况下开始应用你的更改。

那么，废话不多说，让我们开始吧。

什么是子主题？

子主题是一种从父主题继承功能的 WordPress 主题。它允许您在不更改父主题文件的情况下修改或添加新功能。

这很有用，因为如果直接修改父主题文件，当主题更新时，你的修改就会丢失。

使用子主题，您可以在不影响父主题的情况下进行更改，并在接收更新时不会丢失修改内容。

在本节中，你会注意到我们一直在提到父主题，但它到底是什么呢？

什么是父主题？

父主题是一种预先设计的主题，是 WordPress 网站的基础。它提供网站的基本结构、布局和功能。

可以通过添加或修改母主题的功能来定制母主题，以满足特定网站的需求。

使用父主题可以节省网站建设的时间和精力，为设计和功能提供一个起点。

至此，我们可以说所有 WordPress 主题在技术上都是父主题，除非专门设计成子主题。

为何使用子主题？

使用子主题而不是直接修改主题有几个主要原因：

• 创建子主题可防止父主题更新时覆盖您的修改。
• 它将父主题和子主题文件分开。由于文件是有组织的，这有助于避免混淆。
• 多个子主题可用于不同目的，如更改样式或功能。但要注意的是，一个网站同时只能有一个活动主题。
• 这也是开始开发一个新的完整 WordPress 主题的好方法。

创建子主题的 4 个前提条件

在创建子主题之前，必须满足一些要求。

首先，您需要一个正常运行的 WordPress 安装和一个父主题，并为其创建一个子主题。

了解 HTML、CSS 和 PHP 也很有帮助，因为您需要修改代码来定制子主题。

此外，您还应该能够从其他来源复制和粘贴代码片段。

建议在本地开发环境中使用虚拟内容进行练习，或将实时 WordPress 网站移动到本地服务器进行测试。这样，您就可以先测试子主题，然后再在实时网站上实施。

最后，重要的是要有网站备份，以防过程中出现任何问题。

因此，一旦设置好所有这些要求，就可以创建一个子主题了。你所要做的就是按照本指南中概述的子主题设置流程进行操作。

但在本指南中，我们将使用默认的 WordPress 主题 Twenty Twenty-four。

在 WordPress 中创建子主题

现在，您已经了解了子主题的概念，让我们来深入探讨在 WordPress 中创建一个子主题。

我们将探讨两种常见的方法，以满足不同舒适度的需求：

使用代码创建子主题

首先，通过 FTP 或主机控制面板提供的文件管理器访问 WordPress 安装。导航至 wp-content/themes 目录，创建一个新文件夹，并为子主题命名。

在本教程中，我们将使用 “mtschild “作为子主题文件夹的名称。

该目录是子主题组件的主要存储空间。

在子主题文件夹中新建一个名为 style.css 的文件。该文件将包含识别和激活子主题的基本信息。打开 style.css 文件并插入后续代码：

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

这段代码会通知 WordPress，您的子主题扩展了指定的父主题。用您喜欢的子主题名称代替 “MTS 子主题”，并用父主题的文件夹名称代替模板字段。

下一步是确保子主题继承父主题的样式。为此，您必须调用父主题的样式表。

为此，请访问子主题目录下的 functions.php 文件（如果没有，请创建一个），然后执行以下代码中的任何一个。

如果父主题没有加载任何样式表，请使用以下代码通过 functions.php 加载 style.css：

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

如果父主题只加载其样式表，这段代码也能发挥作用。

但是，如果父主题只加载活动主题的样式表，则必须使用下面的代码通过 functions.php 来额外调用父主题的样式表：

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

对于本指南中使用的 Twenty Twenty-Four 主题，我们将应用第一段代码，因为该主题根本不加载任何样式表。

添加代码时，请记住从 <?php 标签开始。根据您的要求修改这些代码，尤其是使用主题名称 mts_child_theme 的地方。

完成上述步骤后，请重新登录 WordPress 控制面板，进入外观 → 主题。将鼠标悬停在子主题上，点击 “激活 “按钮。

由于您尚未对子主题进行任何更改，因此您的网站将保持父主题的功能和外观。

不过，我们会指导您自定义子主题，为进一步修改做好准备。

这是使用 WordPress 中的代码手动创建子主题的过程。如果这种方法看起来很复杂，你可以探索我们将在下一节介绍的插件方法。

使用插件创建子主题

使用插件创建子主题简单易行。首先，你需要安装并激活 Child Theme Configurator 插件。

Child Theme Configurator

作者： Lilaea Media

当前版本： 2.6.6

最后更新： 2024-03-23

child-theme-configurator.2.6.6.zip

94%评价等级 300,000+用户安装量 WP 4.0+最低支持版本

激活插件后，进入 WordPress 仪表板，导航至工具 → 子主题。

在 “选择父主题 “选项卡上，从创建子主题的下拉菜单中选择父主题。通常情况下，网站上的活动主题已被预选。

接下来，点击 “分析 “按钮。插件将仔细检查所选的父主题，以确定是否能生成子主题，以及是否需要其 style.css 文件作为外观。

接下来，为您的子主题命名。您可以根据自己的喜好定制样式表、功能和其他配置。

不过，在到达第 7 步之前，请不要更改设置。

在第 7 步中，单击标有 “单击编辑子主题属性 “的按钮。在这里，您可以输入子主题的详细信息。

手动创建子主题时，可能会丢失父主题的菜单和部件。不过，子主题配置器插件可以将它们从父主题转移到子主题。

如果您希望这样做，请在第 8 步的复选框中打勾。最后，单击 “创建新子主题“按钮创建子主题。

完成后，该插件将为您的子主题创建一个文件夹，其中包含重要的 style.css 和 functions.php 文件，以便将来进行自定义。

激活主题前，请点击屏幕上方的 “预览子主题 “链接进行预览，以验证其外观并确保不会对网站造成不良影响。

确认一切运行正常后，点击 “激活并发布“按钮。这样，您的子主题就可以在网站上运行了。

在网站上激活子主题后，就可以开始自定义了。我们将继续对此进行介绍。

如何自定义子主题

在深入研究自定义之前，请确定您希望修改的网站元素，如样式、模板、功能、小部件区域或自定义页面模板。

明确自己的目标可以简化定制过程。定制子主题有多种方法，包括：

使用 CSS 自定义样式

子主题的 style.css 文件是调整网站外观的平台。您可以在这里插入自定义 CSS 规则，以改变或增强父主题的样式。

在继续学习之前，有必要了解 HTML 和 CSS 的基本知识。您可以有效利用浏览器的“检查”工具，或直接从父主题的 style.css 文件中复制样式。

要使用浏览器访问网页的 CSS 代码，只需在网页上单击右键，然后从出现的选项中选择 “检查“。该工具会显示 CSS 样式代码，让你可以精确定位要修改的元素。

右键单击并选择 “检查 “后，浏览器屏幕将出现分叉，显示页面的 HTML 和 CSS。

根据浏览器设置的不同，HTML 和 CSS 详情可能会显示在屏幕右侧或底部。

当你将鼠标悬停在各种 HTML 行上时，Chrome 浏览器检查器会在 “元素 “选项卡中高亮显示这些行，并显示与高亮显示元素相关的相应 CSS 规则。

您可以直接编辑 CSS 进行试验，预览效果如何。例如，如果您想将 “Twenty Twenty-Four 主题 “默认首页的背景颜色从 #f9f9f9 改为 #6841ea。

在浏览器检查器中调整背景颜色后，更改将是暂时的。要使其永久生效，必须将此 CSS 规则转移到子主题的 style.css 文件中：

body {
background-color: #6841ea;
}

插入代码后，请记住保存您的修改。您可以将此过程复制到您希望自定义的任何其他网页元素上。

例如，假设您想修改网站的颜色。我们可以为您提供一些 CSS 代码，帮助您实现这一目标。

要将文字颜色更改为深灰色，请在 CSS 文件中添加以下代码：

body { color: #3b3b3b; } 

要将标题颜色改为蓝色，请使用以下代码：

h1, h2, h3 { color: #007bff; }

关于页眉的背景颜色，请使用以下代码：

#header { background-color: #f5f5f5; } /* Light grey background for header */

对于内容区域，使用此代码将背景颜色设置为白色：

.site-container { background-color: #fff; } 

您可以通过网站的子主题目录或 WordPress 面板将这些 CSS 样式复制到子主题的 style.css 文件中。添加 CSS 代码时，其格式将与此相似：

保存更改后，尝试刷新网站页面。如果更改没有出现，请清除浏览器缓存，确保您查看的是最新版本的 CSS。

改写模板文件

CSS 定制可以控制网站的外观，而子主题则提供了更强大的功能：覆盖模板文件。

这种高级功能可让您重塑网站页面和元素的布局和结构。不过，由于需要对 WordPress 模板、HTML 和 PHP 有更深入的了解，因此请谨慎操作。

要覆盖模板，请将父主题文件夹中的原始 .php 文件复制到子主题中，并保留准确的文件名。

例如，要覆盖 header.php，需要复制 /arent-theme/ 目录中的 header.php 文件，然后将其粘贴到 /child-theme/ 目录中作为 header.php。

现在，您可以编辑子主题中的 header.php。

一些可覆盖的常用模板：

• header.php – 包含<header> 标签和网站品牌、导航等内容。
• footer.php – 结尾<footer> 标签和标记。
• page.php – 页面的默认模板。
• single.php – 用于单个帖子的模板。
• index.php – 主页模板。

例如，您可以修改 footer.php，显示网站的自定义版权：

<!-- Modified child footer.php -->

<footer>
  <p>© <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

扩展功能

通过子主题中的 functions.php 文件，您可以引入新的 PHP 函数、钩子、过滤器和代码，以扩展父主题的默认功能。

这种灵活性使您能够注册自定义帖子类型、整合自定义部件、创建新的简码、调用附加脚本等。

例如，如果您希望在 WordPress 网站上为自定义小部件设立一个专用区域，请使用以下代码片段建立一个名为 “自定义小部件区域 “的小部件区域：

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

将这段代码保存到子主题的 functions.php 文件后，返回 WordPress 网站并访问外观 → 小工具。您会发现 “自定义小部件区域 “小部件可供使用。

常见问题 FAQ

结论

在 WordPress 中创建子主题是一项非常有价值的技能，它可以帮助您自定义网站，而不会在主题更新时面临丢失更改内容的风险。虽然一开始可能会让人望而生畏，但如果犯了错误，也不要急于放弃。

您可能遇到的最常见错误是语法错误，原因是代码中缺少某些内容。如果出错，您可以重新开始。

例如，如果你不小心删除了父主题需要的文件，你只需删除子主题中的文件，然后重新开始。

请记住，只要稍加坚持，创建子主题就能让你灵活地为网站创建独特的外观和感觉，同时保持父主题的稳定性和安全性。

快来试试吧，看看它能为您的 WordPress 网站带来什么不同。希望本指南能帮助您为网站创建子主题。如需帮助，请通过 admin@wpjzb.com 告诉我们。