WordPress子主题开发教程,如何手工创建WordPress子主题

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.cssfunctions.php这两个常用文件以外,可能我们还需要修改一些模版文件,比如header.phpcontent.phpfooter.php等等,这些模版文件的修改较为简单,可以直接修改后上传到子主题的目录下面,会自动替换父主题相应的模版文件。

通过以上这些步骤,就可以创建一个WordPress子主题了,你学会了吗?