创建和自定义 WordPress 子主题的快速指南
已发表: 2018-10-09虽然主题开发看起来势不可挡,但子主题的设置很简单,而且它是从头开始开发主题的更快替代方案。
在这篇文章中,我将分享更多关于 WordPress 子主题的详细信息,以及如何有效地创建和自定义主题。
什么是 WordPress 儿童主题?
在定义什么是 WordPress 子主题之前,首先要了解什么是 WordPress 主题以及 WordPress 从何处获取信息以显示网站设计,这一点很重要。
根据 WordPress Codex,“主题是文件的集合,它们协同工作以生成图形界面,并为博客提供底层统一设计。 主题可以修改数据的显示方式,而无需更改底层软件。”
如果您的 WordPress 网站有一个包含所有必需模板和资产的活动主题,则父主题或子主题之间没有区别。

但是,如果您确定自己真的喜欢找到的主题,但又想对其进行一些更改而不从头开始创建主题,则可以创建一个 WordPress 子主题来实现此目的。
子主题继承原始主题的结构,并且仅包含您对其进行的自定义。 子主题不是完全替换主题,而是修改或添加到现有主题的文件中。
这样,当您的网站为访问者加载时,会加载原始主题设计,但会包含您对其所做的更改。
现实生活中的孩子——而不是网络世界——至少依赖一个父母的形象来生活。 同样,子主题依赖于原始主题才能发挥作用。
这就是为什么当您使用子主题时,原始主题被称为父主题。
与人类婴儿不同,儿童主题本身并不是一个完整的主题。 这意味着需要先安装父主题,然后才能激活其相应的子主题。
完美的儿童主题以及何时使用它
任何主题都可以是父主题,但有些主题更适合它。
选择一个您喜欢的主题,该主题可以使用一些小的结构自定义来满足您的需求,但这并没有提供直接开箱即用的自定义选项。
例如,Perfect Magazine 主题被用作创建 Newsliner 子主题的父主题,不仅可以更改设计中的某些颜色,还可以删除广告横幅,同时在页面顶部添加博客文章轮播。
Perfect Magazine 的选项中无法进行此类自定义,但它们的规模不足以保证从头开始创建全新的主题。

为什么要创建儿童主题?
WordPress 子主题对于保存和保存您在网站中投入的所有工作非常重要。 如果您直接修改主题,然后使用新的软件版本对其进行更新,您的所有修改和自定义都将丢失。
这就是为什么许多网站所有者选择根本不更新其父主题的原因。 但是,这是一个严重的安全问题,因为 54% 的被黑客攻击的 WordPress 网站都有过时的软件,黑客和恶意软件经常会通过扫描来找到这些软件。
此外,更新通常包含漏洞修复程序,因此忽略更新意味着您的网站容易受到攻击。
或者,您可以创建一个子主题来避免这些陷阱。
如前所述,使用 WordPress 子主题也可以加快开发速度。
由于已经设置了站点的文件系统和基本元素,您不必从头开始。 您可以在预先存在的主题上进行构建,并在自定义其设计的同时利用该功能。
开始使用 WordPress 子主题
创建子主题需要几个关键元素:
- 一个主题目录文件夹
- 一个style.css文件
- 一个functions.php文件
虽然子主题中唯一需要的文件是style.css ,但需要functions.php文件才能正确地将父主题样式表排入队列。
因此,强烈建议您在子主题中创建一个functions.php文件以避免错误。
创建 WordPress 子主题
创建 WordPress 子主题时,有四个步骤,下面将详细介绍:创建目录文件夹、制作样式表、将新样式表和父样式表加入队列以及激活主题。
创建目录文件夹
所有主题都位于 WordPress 安装的/wp-content/themes/文件夹中。
导航到该目录并创建一个新文件夹作为子主题文件夹。
通常,主题使用父主题的名称重新命名,但在末尾添加-child 。
例如,两个文件路径将是/wp-content/themes/yourtheme/ 和 /wp-content/themes/yourtheme-child/ 。
子主题的名称中也不应该有空格。
虽然这些不是命名文件夹的硬性规则,特别是如果您不分发主题以供公众使用,但这是一种常见的 WordPress 开发实践,因为它有助于组织。
创建样式表
WordPress 子主题通常用于相当广泛的设计编辑,因此需要单独的style.css 。
该文件将包含影响主题外观的所有 CSS 规则和声明。
在新的子主题文件夹的根目录中创建一个style.css文件。 然后,在页面顶部输入此标题:
/* 主题名称:二十七岁的孩子 主题 URI:http://example.com/twenty-seventeen-child/ 说明: 二十七儿童主题 作者:简多 作者 URI:http://example.com 模板:二十七 版本:1.0.0 许可证:GNU 通用公共许可证 v2 或更高版本 许可证 URI:http://www.gnu.org/licenses/gpl-2.0.html 标签:浅色、深色、两栏、右侧边栏、响应式布局、可访问性就绪 文字领域:二十七 */
标题是文件的重要组成部分,因为它告诉 WordPress 有关主题的基本详细信息。 它还表明它是具有特定父主题的子主题,如模板部分所示。

标题的唯一要求是Theme Name和Template 。 但是,最好填写其余部分。
请务必更改所有必需的详细信息,以确保它们准确无误。 例如,如果您使用的父主题是不同的主题,则作者和作者 URI以及对 27 的引用。
标签部分与 WordPress 主题目录相关。 如果您想在那里上传您的主题,请确保选择与您的主题相关的标签。
将父主题样式表和子主题样式表排队
接下来,确保每个主题的样式表在称为入队的过程中正确加载很重要。
入队意味着将项目或项目列表添加到队列中以进行数据处理。 在这种情况下,队列是您的网站在浏览器请求时需要加载的文件。
如果您要跳过排队,您的网站只会从您的子主题样式表中提取,并且不会使用父主题提供的任何样式。
还需要注意的是,可以使用@import方法将父style.css加入队列。 但是,由于性能问题,不再建议这样做。
要将样式表排入队列,您需要创建一个functions.php文件(如果您还没有的话)。
这可以通过创建一个新文件并将其命名为functions.php来完成。 然后。 将此代码放在最顶部:
<?php
确保在上面的行之前不要包含任何空格,否则会导致错误。
在functions.php文件中,添加以下代码以确保您的站点以正确的顺序正确加载父style.css以及子主题的style.css :
add_action('wp_enqueue_scripts','my_theme_enqueue_styles'); 功能 my_theme_enqueue_styles() { $父母_; // 这是 27 岁主题的 'twentyseventeen-style'。 wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style('儿童风格', get_stylesheet_directory_uri() 。 '/style.css', 数组($parent_style), wp_get_theme()->get('版本') ); } ?>
确保更改存储在$parent-style变量中的父样式以包含主题的名称。
根据 WordPress Codex 的建议,此代码将确保父style.css作为依赖项加载,这意味着子主题的style.css需要加载。
激活子主题
保存所有文件后,转到外观 > 主题以找到您的子主题,然后单击激活按钮。
您不需要同时激活您的父主题。 虽然,它仍应安装并保留在/wp-content/themes/文件夹中。
您的子主题style.css中的标题文本会将两者连接在一起,并阐明您的 WordPress 安装的关系。

激活子主题后,如果您遇到设计问题,您可能需要重新保存外观 > 菜单中的菜单以及定制器的主题选项中的一些其他内容。
快速定制提示
在开始开发过程之前,以下是一些关于自定义 WordPress 子主题的提示。
主题形象
在外观 > 主题页面上,您必须包含您自己的主题图像。
如果您想插入一些东西来代替方格框,您可以上传一个名为screenshot.png的 880 x 660 PNG 图像文件。
将图像放在子主题文件夹的根目录中。 这样,WordPress 安装就会知道将其用作主题的图像。
覆盖父主题文件
如果您想在 WordPress 子主题中插入新文件以覆盖旧组件,请将父文件复制到子主题中,然后您可以对其进行自定义。
加载站点时,WordPress 会检查子主题是否有任何与父主题对应的文件。 如果找到,它们将覆盖原始父主题的文件。
它不需要一个村庄
WordPress 子主题创建不必像听起来那么复杂。 请按照上述步骤操作,请放心,您的编辑将保持不变。 它还将帮助您的网站更加安全。
你想做什么样的儿童主题? 你能成功创建它吗? 你在这个过程中遇到过麻烦吗? 随时在下面的评论中分享您的经验。