[WordPress 日记] 第2天:子主题

为什么要理解子主题(child themes)的重要性?

子主题的主要功能之一是将你的自定义内容与现有主题分离,从而避免在主题更新时造成自定义内容丢失的问题。

为什么会有这个问题?让我们先了解一下 WordPress 主题和插件的更新机制:

1. 移除现有的插件和主题路径。

2. 下载最新版本的插件或主题压缩文件并解压缩。

假设今天我们根据网上的教程修改了主题的 functions.php 文件,当主题更新时,可能会导致我们的修改被覆盖。

这就是为什么我们需要将自定义内容独立于当前主题之外的原因。除了子主题之外,我们还可以通过创建自定义插件、使用代码片段等方式来实现这一目的,这些方法将在未来进行详细讲解。

子主题是什么?

根据 WordPress 官方开发文档,子主题允许您对网站外观进行小幅度修改,同时保持网站的外观和功能。

从另一个角度理解,子主题实际上就是一种特殊的插件。

如何创建子主题?

如果您是第一次创建子主题,可以使用 Child Theme Configurator 这款插件来制作。详细的操作方式可以参考 Alex 在 WordPress 小组会议上分享的幻灯片。

另一种创建子主题的方法适合那些希望更深入了解子主题工作原理的人。

图片[1]-[WordPress 日记] 第2天:子主题-59爱分享

创建子主题前的注意事项

子主题的基本原理是,首先加载上层主题(父主题)的样式,然后再加载子主题的样式;加载完子主题的函数后,再执行上层主题的函数。

如果您计划大幅修改样式,使子主题与父主题差异很大,建议选择结构相似的上层主题,以避免存在过多未使用的样式。如果您关心 Google 的 Page Speed Insights 分数,这一点尤为重要,因为这是影响评分的一个标准。

创建一个文件夹,并添加 style.css 文件

所有 WordPress 主题都必须包含 style.css 和 index.php 这两个文件。然而,因为我们不需要更改页面结构,所以子主题的文件夹中不需要 index.php 文件。

在 style.css 文件中添加主题头信息

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentynineteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentynineteenchild
*/

 

在这段信息中,各项的作用如下:

– **Theme Name**: 必填,主题名称,显示在主题列表中。
– **Theme URI**: 主题说明页面,如果计划发布到 WordPress.org,则必须填写。
– **Description**: 主题描述。
– **Author**: 开发者名称。
– **Author URI**: 开发者网站,通常与 Theme URI 相同。
– **Template**: 上层主题的名称(slug),子主题必须填写,指定继承的主题。
– **Version**: 版本号。
– **License**: 许可方式,如果要发布到 WordPress.org,则必须使用 GPL 许可。
– **License URI**: 许可条款页面。
– **Tags**: 标签,在 WordPress.org 上发布时供搜索过滤使用。
– **Text Domain**: 用于 gettext 时,读取翻译字符串的分类。

创建 functions.php 文件

如前所述,由于需要引入上层主题的功能和 CSS 样式表,因此需要通过以下操作(action)首先引入上层主题的 CSS。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'twentynineteen'; // 這裡定義為上層佈景主題的代稱 slug,也就是子佈景主題中的 Template
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentynineteenchilde',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ), //定義此樣式的依存樣式
        wp_get_theme()->get('Version')
    );
}

 

以上示例引用并改写自 WordPress 官方开发文档。

总结

正如前文所述,子主题实际上可以理解为一种特殊的「插件」。换句话说,只要将 functions.php 中的功能分离出来,您就创建了自己的插件。

除了创建子主题外,我们还可以通过 Code Snippets 插件进行更多的 WordPress 自定义。明天我们将简要讨论一下 Code Snippets 插件。

本文及 Day 1 的内容探索,是进行 WordPress 自定义非常重要的基础。因此,虽然相比官方文档来说内容较为简短,但这些都是基础知识。如果在这一系列文章中有任何错误,请随时指出,以免误导读者。

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容