WordPress 子主题的创建和应用

网站建站过程中有一件重要的事情需要考虑的就是网站的主题风格，这除了需要同网站的整体风格和内容相配合外，界面美观、使用方便也是需要特别关注的因素。WordPress 社区提供了大量的不同风格的主题供选择，这极大地加速了网站的建站过程以及满足对网站风格个性化的需求。尽管 WordPress 主题丰富而多样，但毕竟不是为自己的网站设计的，通过大量的比对而精心选择好的主题多少会和自己的想法有些许的出入，同时在建站过程中有些需求通过标准主题是无法满足的，这个时候比较合理的做法就是对选择好的主题做客户化定制。

WordPress 中对主题进行客户化定制有两种方法，一种就是直接去修改主题自带的模板文件，比如文章显示模板、搜索模板、文章归档模板等等，这种方法的好处就是不需要做其它额外的工作，直接修改代码就可以了，但缺点就是当主题升级后，之前修改的代码就被覆盖了。

WordPress 提供了另外一种机制即子主题的方式来拓展现有主题（父主题）的功能，这种方法相比较第一种方法最大的好处就是父主题升级不会影响到对主题所做的客户化工作，而且由于是独立于父主题进行客户化定制的，父主题原有的功能都会保留。这种方法稍微麻烦一点的就是要多一个搭建子主题代码框架的步骤，但也是相对比较简单的过程。

本篇教程先介绍一下建立子主题的方法和过程，然后用一个具体的例子说明如何拓展主题 twentysixteen 的文章显示模板的功能（给文章显示模板增加左侧边栏）。关于如何创建侧边栏的方法，请看这篇文章。创建子主题主要分成以下三个步骤：

一、建立子主题的目录结构

首先是到 WordPress 的主题目录下创建自己的子主题目录，一般情况下都是在 wp-content/themes 这个目录下，子主题的目录名字可以任意选择，但使用父主题名字加上 “-child” 也是一个相对比较合适的名字。

二、创建样式单文件 style.css

在建立好的子主题的目录下创建样式单文件 style.css，该样式单文件包含对父主题的界面进行修改的外观样式代码，子主题的样式文件需要按照标准的内容格式做设计，这个文件的结构如下（放在整个文件的起始处）：

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: ebkso
Author URI: http://example.com
Template: twentysixteen
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, clean, left-sidebar, right-sidebar
Text Domain: twentySixteenchild
*/

必须要有的内容有两个：Theme Name，唯一性，表示子主题的名称；Template，需要扩展的父主题的名称。

三、引入父主题的样式

父主题相关的样式主要在父主题的 style.css 文件里面，子主题需要引入这个文件，方法是在子主题的 functions.php（在子主题目录中创建）文件内包含如下的代码：

<?php
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
function child_theme_enqueue_styles() {
 
    $parent_style = 'parent-style';
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

通过上面三个步骤，子主题的框架就搭好了，到后台管理工具 “外观-主题” 内就可以查看到创建好的子主题了，点击 “启用” ，子主题就可以生效了。子主题框架建好后，如何使用其来扩展功能呢，下面以主题 twentysixteen 增加左侧边栏为例介绍一些基本的步骤和方法，主要从以下几个方面着手：

一、父主题中有关代码的迁移

在文章前面部分的内容里介绍了如何引用父主题样式文件的方法，那么父主题还有三个部分的内容需要考虑迁移到子主题中：

1、父主题 “额外CSS” 中的样式：如果之前在父主题中有添加样式代码（外观-自定义），就把这部分代码拷贝到子主题的 “额外CSS” 中，无需删除父主题中的这部分样式代码。
2、父主题 “functions.php” 中的代码：如果之前在父主题的 functions.php 中有自己创建的代码，同样地把代码拷贝到子主题的 functions.php 中，同时删除父主题中同样的这部分代码。
3、需要修改的父主题中的模板文件：拓展父主题的功能一般都会涉及修改相应的模板文件，比如 header.php、footer.php、single.php 等，那么就在修改之前把这些模板文件拷贝到子主题的目录中，无需删除父主题中的这些文件。然后再到子主题目录中修改这些文件，WordPress 会用子主题目录内修改过的模板文件的功能覆盖父主题同名模板文件中的功能。

二、在子主题中修改和创建新的模板

由于在 twentysixteen 主题的文章显示模板中没有我们需要的左侧边栏部分的功能代码，这时候就需要修改父主题的 content-single.php 模板文件以及增加 sidebar-related-post.php 左侧边栏的显示模板文件，代码如下：

/* content-single.php ... */
<footer class="entry-footer">
	<?php twentysixteen_entry_meta(); ?>
	<?php
		edit_post_link(
		sprintf(__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
		get_the_title()
		),
		'<span class="edit-link">',
		'</span>'
		);
	?>
	<?php get_sidebar('related-post'); ?>
</footer>
/* ... */

/* sidebar-related-post.php ...*/
<?php if ( is_active_sidebar( 'left-sidebar-1' ) ) : ?>
	<aside id="leftsidebar-1" class="relatedpostsidebar widget-area" role="complementary">
/* ... */
		<?php dynamic_sidebar( 'left-sidebar-1' ); ?>
	</aside>
<?php endif; ?>

三、在子主题中引用外部的文件

如果在子主题代码中要引用存放在子主题目录中的文件（如Php、Image文件），需要使用 get_stylesheet_directory() 函数来返回子主题所在目录的路径，以及使用函数 get_stylesheet_directory_uri() 返回子主题的 URL 地址，代码如下所示：

<?php require_once( get_stylesheet_directory(). '/my_file.php' ); ?>

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my_image.jpg" alt="" />

<?php
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet() {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}

以上的内容详细地介绍了如何在 WordPress 中创建和应用子主题，当然子主题也不是万能的，如果在 WordPress 社区中找不到自己所期望主题的时候，还是设计和开发自己的主题更加合适，这也无需深入了解其它主题的内部结构和代码。