如何创建 WordPress 子主题

已发表: 2016-06-22

通常,几乎不可能找到完美的主题; 总有一些修改需要做。 那么,为什么不直接使用一个不错的 WordPress 默认主题,例如二十五岁,并使其成为您自己的主题,使其外观和功能都符合您的要求呢? 创建一个儿童主题将为您节省大量时间和麻烦(相信我)。

我可以根据第一手经验说话。 我“继承”了一个 WordPress 网站,开发人员刚刚破解了父主题,我仍然记得我无法真正更新主题是多么令人沮丧,因为担心它会覆盖赋予网站功能的自定义设置。 我不知道什么是原始代码,什么是自定义代码,所以它就在那里,没有更新的可能性。

不过,这个故事确实有一个美好的结局。 当时我对 WordPress 比较陌生,所以它确实很早就教会了我改变父主题不是一个好主意。 当网站最终重新设计时,首要任务是进行自定义并将它们放入子主题中。

子主题允许您在单独的位置工作,而您的工作不会被未来的父主题更新覆盖。 从技术上讲,当您创建子主题时,您会创建一组单独的文件,您可以使用这些文件来自定义主题,而不会影响原始父主题。 如果您对父主题的文件进行更改,这些更改将在您下次更新主题时被覆盖。 这很重要,因为更新可以包括功能修改、错误修复和重要的安全措施。 保持父主题最新并使用子主题进行任何自定义是至关重要的。

儿童主题基础知识

子主题是您创建的独立主题,其基本功能依赖于父主题。 当您使用子主题时,WordPress 知道引用它并查找包含的任何功能。 这很棒,因为它允许您只修改您需要更改的父主题的部分,这使其成为向您的 WordPress 站点添加自定义项的非常有效的方式。

为了更深入地挖掘,以下是子主题在文件级别上的工作方式。 WordPress 检查子主题中是否包含所需的文件。 如果包含,则加载该子主题文件。 如果子主题中没有,则加载父主题中的文件。 唯一的例外是 functions.php 文件,其中加载了父版本和子版本。 通常,functions.php 文件中包含重要信息。 如果 WordPress 只加载了子主题版本(除非您将所有内容都复制过来),那么该网站将无法正常工作。 值得庆幸的是,WordPress 会加载这两个文件,因此您不必担心将整个 functions.php 文件复制到您的子主题中。

请记住,如果需要,您可以随时关闭您的子主题并使用原始主题。 虽然这是一条单行道; 您不能关闭父主题并依赖子主题。

如果您要向 WordPress 主题添加自定义,最好使用子主题。 准备好创建自己的了吗? 现在我们将逐步完成该过程。

创建子主题

它并不像创建一个听起来那么复杂。 实际上,从技术上讲,您只需要两个文件: style.cssfunctions.php文件。 大多数儿童主题不止于此,但从技术上讲,这些是唯一需要的两个。

要创建子主题,您需要安装 WordPress 以及您想要使用的父主题。

请记住:您永远不应该在实时站点上进行更改。 我们免费的本地开发应用程序 Local 将帮助您简化工作流程并安全地试验您的网站。 今天就试试吧!

创建主题目录

首先,转到您的主题目录并为您的新主题创建一个文件夹。 给它一个可识​​别的名字。 对于这个例子,我将我的主题命名为child-example以便于查找。

创建-wordpress-child-theme-child-theme-files

制作子主题样式表

下一个非常关键的步骤是创建子主题的样式表。 创建一个style.css文件。 请记住,它必须命名为style.css才能正常工作。

接下来,您将需要包含有关您的主题的一些信息。

将其复制并粘贴到style.css file

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

这可能看起来很多,但实际上只有两个是必需的,即Theme NameTemplateTheme Name告诉 WordPress 子主题的名称。 Template告诉 WordPress 它应该将哪个主题视为父主题,这非常重要。

创建-wordpress-child-theme-theme-list

其他大多数都是不言自明的,但有一些可能需要更多澄清。 Text DomainTags可能有点混乱。 Text Domain用于翻译字符串以实现国际化目的。 这对于您的主题来说是独一无二的,并且应该在您使用翻译功能时使用。 Codex 中有更多信息,可以在 I18n for WordPress Developers 主题中找到。 Tags部分是特定于 WordPress 主题的标签列表。 对于这个例子,我查看了 25 岁的父style.css ,从那里抓取标签,并将它们放在子主题中。

利用父样式

还记得 WordPress 如何首先查找子主题文件吗? 现在,子主题可以工作,但它看起来不是很精致,因为你还没有做任何样式。 如果您激活它并重新加载页面,它看起来会有点乱。 它可能看起来像这样:

创建-wordpress-child-theme-unstyled-text

让我们解决这个问题,让它回到父主题,并且至少会应用一些样式。 您仍将使用您的子主题进行自定义样式,但首先,让我们显示父样式。

为确保加载父文件的样式表,我们需要将其放入子主题中。 您需要在子主题中创建一个functions.php文件来放入以下代码段。

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
创建wordpress子主题父主题样式

进行 CSS 自定义

现在父样式已显示,让我们为您的子主题自定义更改一些 CSS。 对于此示例,为页面内容设置背景元素的样式是查看子主题的好方法。 它在父主题 CSS 中的样式为白色,但让我们在您的子主题中将其更改为蓝色。 请记住,首先加载父样式,然后再加载您的自定义,因此我们将看到这些样式。

如果您是 Chrome 用户,开发者工具对于在浏览器中查看样式和实验非常有帮助。 转到查看 > 开发人员 > 查看源代码并选择页面元素。 样式将显示在右侧。 我检查了具有白色背景的.hentry类的文章。 我粘贴了一个十六进制值以首先在浏览器中对其进行测试。

创建-wordpress-child-theme-chrome-dev-tool

要进行此更改,请在子主题中打开 CSS 文件并添加 CSS 信息。

创建-wordpress-child-theme-child-css-file

如您所见,可以在子主题中轻松更改样式。

创建-wordpress-child-theme-background-change

修改子主题的功能

调整样式很容易,但是页眉、页脚、侧边栏等其他内容呢? 假设要在页脚中进行一些修改。 将父主题的页脚复制并粘贴到子主题中。 footer.php文件可以在您选择的文本编辑器中打开并进行修改。 我决定删除“Proudly powered by WordPress”这一行,所以我从我的子主题的文件中删除了它。 现在这是 WordPress 将首先加载的文件,因此该行文本将不会显示。

创建-wordpress-child-theme-footer-modification

创建子主题是创建 WordPress 主题时要养成的好习惯。 只需几个简单的步骤,它们就很容易创建和维护。 将自定义项与父主题分开对组织目的和使所有内容保持更新都有好处,这将在以后省去很多麻烦。