WordPress是一款非常受欢迎的博客系统,使用它可以轻松实现一个个人网站。
安装后可以在主题中心浏览各具特色的主题,重要的是:这些主题都是免费的!

这些现成的主题随装随用,给萌新站长节省了不少成本,而且还可以随时更换主题,不会影响网站本来的设置和已经发布的文章。
但有时候,我们想做一些局部的修改,这就需要手工编辑主题文件。

但直接在后台编辑主题有一个问题,就是当主题更新的时候,已经做过的修改会被新版本的主题文件覆盖。
这样一来,我们就只能重新修改,或者干脆拒绝更新。
显然,这两种都不是合理的方案。
事实上,我们可以通过创建子主题完美解决这个问题。
把需要修改的主题作为父主题,然后创建一个子主题继承父主题。
子主题允许更改站点的局部外观,但仍保留原主题的整体外观和功能。
可以按照如下步骤创建子主题
1. 创建子主题文件夹
WordPress的主题目录是:wp-content/themes
,假设当前使用的主题(即需要修改的主题)是twentyeleven,则当前的主题目录是:wp-content/themes/twentyeleven
。
这里把twentyeleven主题作为父主题,然后在twentyeleven主题的同级目录下创建一个twentyeleven-child
目录用来存放子主题(命名为twentyeleven-child
不是必须的,只是推荐的做法)。
2. 创建子主题样式表
接下来,在twentyeleven-child
目录下创建一个名为style.css
的子主题样式表,其中包含所有控制主题外观的CSS规则和声明。
样式表必须在文件的最顶部包含以下注释,用于告诉 WordPress 有关主题的基本信息,包括它是某特定主题的子主题。
完整的注释应该包含以下内容:
/*
Theme Name: Twenty Eleven Child
Theme URI: http://example.com/twenty-eleven-child/
Description: Twenty Eleven Child Theme
Author: John Doe
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: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyelevenchild
*/
但只有Theme Name(主题名称)和Template(模版)是必须的。
所以twentyeleven-child
目录下的style.css
文件顶部注释可以简单写成:
/*
Theme Name: Twenty Eleven Child
Template: twentyfifteen
*/
接下来的工作是导入父主题的样式,和定义子主题的样式。
整体思路是:父主题的样式先执行,子主题的样式后执行,我们就可以把需要修改的样式添加进子主题,让其覆盖父主题的样式。
导入父主题样式的方法有两种,第一种是使用CSS的@import
规则。
在注释下添加如下@import
语句:
@import url("../twentyeleven/style.css");
这条语句可以导入父主题样式,但是因为在CSS文件内部使用@import
导入样式,会影响浏览器的并行下载,影响执行效率,所以不推荐使用。
这里推荐第二种方式,把父主题样式表和子主题样式表同时加入执行队列,并让子主题样式表在父主题样式表之后执行。
为了实现这一操作,我们需要添加functions.php
文件。
同样的,在子主题目录下创建一个functions.php
文件,然后添加以下代码:
function twentyeleven_theme_styles() {
$parenthandle = 'parent-style';
$theme = wp_get_theme();
wp_enqueue_style(
$parenthandle,
get_template_directory_uri() . '/style.css',
array(),
$theme->parent()->get('Version')
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'twentyeleven_theme_styles' );
代码中的wp_enqueue_style()是一种将样式表文件排队到 WordPress 生成页面的安全方法。
语法是:wp_enqueue_style( $handle, $src, $deps, $ver, $media );
$handle
定义样式表的ID;$src
定义样式表的URL;$deps
定义样式表的依赖;$ver
定义样式表的版本号;$media
定义样式表的媒体查询。
请注意:子主题array( $parenthandle )
添加了对父主题的依赖,这会影响执行顺序,使父主题先于子主题执行。
add_action()
函数用于添加一个和特定操作挂钩的回调函数。
语法是:add_action( $hook, $function_to_add, $priority, $accepted_args
);
$hook
指定挂载回调函数的钩子名称;$function_to_add
指定要挂载的回调函数;$priority
用于指定与特定操作关联的函数的执行顺序(较低的数字对应于较早的执行,具有相同优先级的函数按照它们添加到操作的顺序执行);$accepted_args
指定函数接受的参数数量。
wp_enqueue_scripts是在将前端的脚本和样式排入队列时需要使用的正确钩子,表示将前端的脚本和样式载入页面的这一操作。
add_action( 'wp_enqueue_scripts', 'twentyeleven_theme_styles' );
上面这段代码表示在将前端的脚本和样式排入队列时,执行我们定义的twentyeleven_theme_styles()
函数,将父主题和子主题的样式表按顺序加入队列。
至此,我们就完成了针对样式的基本操作。
接下来,就可以随心所欲的定义子主题的样式文件了,在子主题中的定义的样式会覆盖父主题的对应样式。
例如:
/*
Theme Name: Twenty Eleven Child
Template: twentyfifteen
*/
body {
background: #ffffff;
}
然后说一下子主题的这个functions.php
文件,它会先于父主题的functions.php
文件执行。
因此如果父主题中存在可插拔函数,那么可以用子主题的同名函数简单地覆盖父主题的对应函数。
例如父主题中存在下面这个theme_special_nav()
函数,它被定义成只有先前没有创建过同名函数的情况下才会被创建。
if (!function_exists('theme_special_nav')) {
function theme_special_nav() {
// Do something.
}
}
那么如果我们在子主题中也定义一个theme_special_nav()
函数,执行不同的动作,它就会覆盖父主题的theme_special_nav()
函数。
原因是子主题已经创建了theme_special_nav()
函数,父主题中的同名函数将不会被创建。
最后说一下模版。
除了style.css
和functions.php
这两个常用文件以外,可能我们还需要修改一些模版文件,比如header.php
、content.php
、footer.php
等等,这些模版文件的修改较为简单,可以直接修改后上传到子主题的目录下面,会自动替换父主题相应的模版文件。
通过以上这些步骤,就可以创建一个WordPress子主题了,你学会了吗?