使用 WordPress 子主题自定义功能

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

子主题目录

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

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

修改权限, 并进入目录

1
2
3

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

子主题配置

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

1	vi style.css

并写入以下内容

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

这个文件默认内容为:

functions.php

1
2
3

<?php
 
?>

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

functions.php

<?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 文件就可以移动当前的子主题目录下

1 2	mv -f ../../uploads/css/ ./ mv -f ../../uploads/js/ ./

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

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');
...
...