教程

如何在 WordPress 中创建子主题

更新日期:
如何在 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 “作为子主题文件夹的名称。

使用 "mtschild "作为子主题文件夹

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

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

PHP
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
<?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
<?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 控制面板激活子主题

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

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

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

使用插件创建子主题

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

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

使用插件创建子主题

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

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

使用插件分析父主题

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

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

为你的子主题命名

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

输入子主题的详细信息

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

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

单击 "创建新子主题 "按钮创建子主题

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

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

点击屏幕上方的 "预览子主题 "链接进行预览

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

点击 "激活并发布 "按钮激活子主题

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

如何自定义子主题

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

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

使用 CSS 自定义样式

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

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

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

利用浏览器的 inspect 工具复制样式

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

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

右键单击并选择 "检查 "网站代码

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

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

编辑 css 进行试验

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

CSS
body {
background-color: #6841ea;
}

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

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

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

CSS
body { color: #3b3b3b; } 

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

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

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

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

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

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

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

将 css 样式复制到子主题的 style.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,显示网站的自定义版权:

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 网站上为自定义小部件设立一个专用区域,请使用以下代码片段建立一个名为 “自定义小部件区域 “的小部件区域:

PHP
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 会自动使用子主题中的文件,而不是父主题中的文件。

如何确保子主题与未来的父主题更新保持兼容?

定期检查父主题的更新并查看其文档和更新日志。如果更新引入了变化,请相应调整子主题以保持兼容性。始终使用版本控制以方便跟踪。

创建子主题后还能更新父主题吗?

是的,您可以更新父主题而不影响子主题。更新父主题不会覆盖您在子主题中进行的自定义设置。

是否可以为单父主题创建多个子主题?

是的,您可以为一个父主题创建多个子主题,每个子主题都有自己的自定义设置和修改。但一次只能激活一个主题。

创建子主题需要编码知识吗?

虽然编码知识会有所帮助,但并不总是有必要创建一个子主题。您可以从简单的修改开始,随着经验的积累逐渐学习更高级的技术。

结论

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

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

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

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

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

声明:原文出自:https://rankmath.com/blog/wordpress-child-theme/,由“WordPress 建站帮(WPJZB)”翻译整理,转载请保留本声明。

郑重声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

您认为这篇文章有用吗?

点击下方为它评星!

平均星级: 0 / 5. 评星数: 0

暂无评星,立刻首评!

本文作者:Yephy Wang

WordPress建站帮创始人

如果本文“对您有用”,欢迎随意打赏 WordPress 建站帮,让我们坚持创作!
赞赏一杯咖啡

赞赏 WordPress 建站帮

赞赏二维码

请通过支付宝、微信 APP 扫一扫,海外读者可「使用 PayPal 赞赏

“ 感谢您对 WordPress 建站帮的支持! ”

发表评论