使用 WordPress 子主题自定义功能

正常情况下如果你想添加自定义的功能，并且不使用插件的情况下，那首选就是在当前主题下的 functions.php 里面添加自定义代码，但问题是，如果主题有更新时，这里面的代码会被覆盖，从而丢失了你的自定义功能。这时候子主题的优势就来了，它可以让你无需修改任何父主题代码却也能达到自定义功能目的~

子主题目录

首先进入你的 WordPress 下 wp-content/themes 目录，创建与当前主题相同名字的目录，目录名字结尾加上 -child，比如我的父主题目录是 slanted，则创建目录 slanted-child

$ cd /opt/lampp/htdocs/wordpress/wp-content/themes
$ sudo mkdir slanted-child

修改权限，并进入目录

$ sudo chown -R your_user:www-data slanted-child/
$ sudo chmod -R 777 slanted-child/
$ cd slanted-child/

子主题配置

子主题至少要包含一个 style.css 文件才能生效，创建该文件

$ vi style.css

并写入以下内容

/*
Theme Name:     SomeTheme Child
Theme URI:      http: //example.com/
Description:    Child theme for the SomeTheme theme
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       SomeTheme
Version:        0.1.0
*/

各参数意义：

• Theme Name: (必需) 子主题的自定义名称，但通常是 父主题名字 + Child
• Theme URI: (可选) 子主题的主页
• Description: (可选) 子主题的描述，比如: 我是 xxx 的子主题
• Author URI: (可选) 作者主页
• Author: (可选) 作者的名字
• Template: (必需) 父主题的目录名，区别大小写
• Version: (可选) 子主题的版本，比如：0.1，1.0 等

一般子主题是自用的，所以我的子主题只挑了以下几个：

/*
Theme Name: Slanted Child
Description: Slanted 的子主题
Author: Gelomen
Template: slanted
*/

引入父主题样式

在 style.css 下使用 @import 引入父主题样式，这样子主题就可以拥有父主题的样式了

/*
Theme Name: Slanted Child
Description: Slanted 的子主题
Author: Gelomen
Template: slanted
*/

@import url("../slanted/style.css");

此时回到你的网站后台主题页面就可以看到你的主题选项，启用后就可以看到你的网站跟父主题是一样的

其它配置文件

子主题目录下可以拥有以下文件类型：

• style.css (必需)
• functions.php (可选)
• 模板文件 (可选)
• 其他文件 (可选)

functions.php

这个文件默认内容为：

<?php

?>

将你原本放在父主题的自定义代码迁移到这里，父主题更新时就不怕丢失了，比如我的 美化搜索 URL 和引入自定义 CSS、JavaScript 文件代码，这里可以直接在后台的主题编辑器里修改内容

<?php

//搜索美化伪静态
function change_search_url_rewrite() {
    if ( is_search() && ! empty( $_GET['s'] ) ) {
        wp_redirect( home_url( '/search/' ) . urlencode( get_query_var( 's' ) ) );
        exit();
    } elseif ( is_search() && empty( get_query_var( 's' ) ) ) {
        wp_redirect( home_url( '/search' ) );
        exit();
    }
}
add_action('template_redirect', 'change_search_url_rewrite');

// 加载自定义js
function my_js_fun() {
	wp_enqueue_script('simulate_shell', '/wp-content/uploads/js/simulate_shell.js', array(), '1.5', true);
}
add_action('wp_footer', 'my_js_fun');

// 加载自定义css
function my_css_fun() {
	wp_enqueue_style('simulate_shell', '/wp-content/uploads/css/simulate_shell.css', array(), '1.0');
}
add_action('wp_head', 'my_css_fun');

?>

模板文件

模板文件在子主题中可以覆盖任何父主题模板中的文件，只需要创建同名文件就行

子主题使用模板文件的例子：

• 增加父主题没有的模板，可以在编辑页面下选择
• 替换比父主题更个性化的模板，重写 index.php 或 home.php

其他文件

子主题目录还可以放置其它用于主题的文件，比如自定义样式的 CSS 文件 和 实现前端功能的 JavaScript 文件，以及让子主题显示预览的 screenshot.png 文件

CSS 和 JavaScript

我之前在首页增加的模拟 Shell 的 CSS 和 JavaScript 文件就可以移动当前的子主题目录下

$ mv -f ../../uploads/css/ ./
$ mv -f ../../uploads/js/ ./

然后修改 functions.php 里引用的路径

...
...
wp_enqueue_script('simulate_shell', '/wp-content/themes/slanted-child/js/simulate_shell.js', array(), '1.5', true);
...
...
wp_enqueue_style('simulate_shell', '/wp-content/themes/slanted-child/css/simulate_shell.css', array(), '1.0');
...
...

子主题截图

在后台主题管理页面，我们当前的子主题没有预览图，我们可以自行将我们的主页截图，命名为 screenshot.png，并存放在子主题目录下，然后刷新后台主题管理页面即可看到子主题有预览图了