wordpress 自己制作子主题 child theme

使用 WordPress 的子主题（Child Themes）功能快速制作自己的主题

在了解子主题功能之前，先来看一下你在使用 WordPress 的时候是否是这样：不会自己制作主题，只好从网上下载一个，这个主题整体风格比较适合，但是有些小地方不太好，自己只是有一点 CSS 基础，可以修改一些简单的样式。修改的时候，却发现主题文件这么多，里面掺杂各种 PHP、HTML 代码，让人不知道在哪里修改。

太好了，那么我们开始学习子主题吧，子主题就是来解决这个问题的。它可以基于某个主题，继承它的功能和样式，然后让你自己进行简单的代码编写就可以衍生出一个新的版本。你还可以对子主题增加样式、功能等等，不仅仅是修改父主题样式那么简单。

做一个子主题非常简单，只需要用 FTP 什么的新建一个目录，然后增加几个文件就可以。你只需要了解很简单的 HTML 和 CSS 知识就可以修改父主题的样式等，当然当父主题升级之后，子主题样式、功能不会被覆盖失效。所以从这个角度来说，如果你想修改一个主题，你应该用子主题这个功能，而不是直接修改原主题文件。

下面就来具体实践看一下，我们就以 Twenty Twelve 这个主题为例吧，其他的主题都是一样的。

子主题的目录结构

子主题也是一个主题，也跟其他主题一样，放在 wp-content/themes 目录下面的文件夹中，文件夹的名称可以随便定义，为了形象一点，在示例中，我们可以新建 twentytwelve-child 这样一个文件夹存放子主题。这样的话，我们的 themes 文件夹中，至少有两个文件夹：twentytwelve、twentytwelve-child ，因为子主题要基于父主题，所以主题目录肯定要有父主题。

在子主题中，一般有下面几个文件：

  • style.css (这个必须有)
  • functions.php (这个可以有)
  • 其他模板文件 (这个可以有)
  • 其他文件 (这个可以有)

style.css 是必须的

这是构建子主题中唯一必须有的文件，因为 WordPress 根据主题中的 style.css 头部信息来获取主题信息。特别是子主题，除了像一般主题一样添加头部信息之外，还需要添加父主题的名称，这样 WordPress 才能获取父主题的资源文件。

style.css 头部信息通常是这样的

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

它是一段 CSS 注释，但会被 WordPress 识别，必须放在 style.css 的最顶端。很明显，这段注释里面包含了 主题名称、主题地址、描述、作者、作者名称、模板（父主题）、主题版本号。在这些参数里面，只有 Theme Name 和 Template 是必须有的，其中 Template 参数的作用，就是指定父主题，是在子主题中用的，所以在一般的主题中，是不会有 Template 这个参数的。

新建目录并且把上面注释写进 style.css 文件中，你再登陆 WordPress 后台，找到 主题 选项，就可以看到并且选择这个主题了。

后台选择启用子主题

马上动手做一个基础的子主题

假设我现在在用 Twenty Twelve 这个主题，我突然想修改一下网站标题文字颜色，想改成红色（red），那么我可以这样做。

  1. 按照上面说的，新建一个目录，然后新建一个 style.css 文件，把上面注释信息复制进去修改一下。
  2. 登陆后台，启用这个子主题。
  3. 在 style.css 文件中，导入父主题的 style.css 文件（使用 @import ）。
  4. 想办法找到要修改内容的 HTML 结构，并且在下面编写对应的 CSS 代码。

前两步上面说过了，不再赘述。第三步中，具体的代码是这样的

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

就是利用 @import 导入命令，利用相对目录结构，把父主题的 CSS 文件导入进来，如果父主题不仅仅有 style.css 文件，还有其他的 CSS 文件等，那就多写几行 @import 导入进来。

第四步中，我们可以先用 FireBug 查看网页结构，找到相应的 class 或者 id，然后编写出来 CSS 代码，放在 @import 语句的下面。

查找结构修改子主题的 CSS

好了，保存一下，刷新浏览器。你会发现，没有变化。对，你没看错，确实没有变化，因为编写的这条 CSS 的优先级不够。

代码之所以要放在 @import 导入命令的下面，不仅仅是因为网页中的代码顺序，在后面的 CSS 样式会覆盖前面的同等优先级的 CSS 样式，还需要特别注意的是如果在 @import 命令之前添加 CSS 代码，会导致父主题的样式不会导入。

优先级计算的不够精确的话，就会出现这种情况了，我们可以直接加上 ！important 命令，直接把当前 CSS 的优先级提到最高，这样就显示出来效果了。

修改样式成功

我们就这样成功又快速的利用子主题修改了父主题的样式，对于修改其他样式，同样的方法，不再举例赘述。

引用父主题的 functions.php 文件

functions.php 文件是一个主题中的功能文件，可以包含主题的各种功能，通常是一个主题必不可少的文件。在子主题中引用父主题的 functions.php 文件不像是引用 style.css 文件会把原先的样式覆盖掉，而是把子主题的 functions.php 的内容追加到父主题的 functions.php 文件的前面，优先加载。

我们有时候想要增加功能到一个主题上面，但是当主题升级之后，我们增加的功能就被覆盖掉了，我们还需要再复制进去。比较聪明的办法就是利用子主题的这个特性，想要增加父主题的功能，我们可以新建一个子主题，然后把功能放在 functions.php 中，这样即使是父主题升级了也没有关系。注意，你不需要把父主题的 functions.php 文件内容，全部复制到子主题的 functions.php 中。

关于 functions.php 中功能代码的编写，就跟普通主题的一样，例如下面一个例子（添加 favicon.ico 到头部）：

<?php

function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action('wp_head', 'favicon_link');

?>

但是有时候我想替换父主题的某些功能怎么办？别忘了子主题这个 functions.php 文件的引用机制，是在父主题的 functions.php 之前加载使用的。那么我们就可以利用这个特性，来替换父主题的相关函数等。例如：

if (!function_exists('theme_special_nav')) {
    function theme_special_nav() {
        //  Do something.
    }
}

这样，子主题就可以通过事先简单的声明来替换父主题的 PHP 函数功能啦。

引用子主题中的其他文件

如果在子主题目录中还有一些其他的文件要引入，你可以使用 get_stylesheet_directory() 这个函数来获取当前子主题的目录位置。因为父主题的 style.css 文件被你的子主题的 style.css 文件替换了，但是你的子主题 style.css 文件却在子主题目录中，使用 get_stylesheet_directory() 函数可以指向你的子主题目录位置，这样就可以引用子主题目录里面的文件啦。

这个例子使用 require_once 引入一个存放在你子主题目录中的文件。

require_once( get_stylesheet_directory(). '/my_included_file.php' );

使用文章格式（Post Formats）

子主题会继承父主题的文章格式（如果父主题有的话），如果你在子主题中使用 add_theme_support(‘post-formats’) 函数来定义文章类型，会覆盖掉父主题原有的设置。

修改替换父主题的模板文件

如果子主题只能替换一下 CSS 或者 functions.php 的功能，那简直弱爆了。假如觉得父主题的文章页面（single.php）的 HTML 结构已经满足不了我强大的样式定义需求了，那么我可以通过在子主题中增加一个同名的模板文件（single.php）直接覆盖掉父主题对应的模板文件，注意一定要和父主题的模板文件同名才可以覆盖。需要注意一点，在 WordPress 3.0 之后的版本，子主题的 index.php 才能去覆盖父主题的 index.php。

再唠叨一遍，你在子主题中所做的一切，都不会影响到原来的父主题，所以即使是父主题升级了，模板文件变动了，你的子主题的相关代码仍然会起作用。

这个功能通常用在下面几个场景：

  • 添加一个父主题原来没有的模板文件
  • 增加一个比父模板更加具体的模板文件 点击这里查看模板层次
  • 替换父主题的某个模板文件

引用其他文件

子主题实质上就是一个独立的主题，不仅仅可以使用 style.css、functions.php 等文件，还可以增加其他的主题必备的文件和资源，例如：图片、样式、Javascript 等。当然，你要通过正确的链接地址引用到它们。

更多相关资料

 

 

相信很多朋友使用的WordPress主题都经过了自己的一些修改，好不容易折腾好了，主题的升级版发布了，要不要升级呢？升级以后，还得重新再次修改？郁闷啊！

其实，你大可不必如此烦恼，使用Wordpress的子主题功能，一切问题都可以迎刃而解！

WordPress 子主题简介

WordPress子主题也是一个主题，它继承了另一个主题——父主题——的功能，并允许你对父主题的功能进行修改，或者添加新功能。

创建一个子主题是很简单的。创建一个目录，将格式编写正确的 style.css 文件放进去，一个子主题就做成了！

只需要对 HTML 和CSS 具有基本的了解，您就可以通过创建一个非常基本的子主题 来对一个父主题的样式和布局进行修改和扩展，而不需要对父主题的文件作任何修改。

通过这样的方式，当父主题被更新的时候，您所做的修改就可以保存下来。

因为这个原因，我们强烈推荐您使用子主题的方式来对主题进行修改。

如果您对 PHP， WordPress Templates，和 WordPress Plugin API有个基本的理解，理论上来讲，您可以使用子主题对父主题的每一个方面进行扩展，而不需要对父主题的文件进行任何修改。

本文将说明如何创建一个基本的子主题并解释您能用它来干什么。本文将使用 WordPress 3.0 的默认主题 Twenty Ten 作为父主题进行举例说明。

目录结构

子主题放在wp-content/themes目录下属于自己的目录里。下面的结构显示的就是子主题和它的父主题（Twenty Ten）在典型的WordPress目录结构中的位置：

  • public_html
    • wp-content
      • themes (主题存放的目录)
        • twentyten (示例中父主题Twenty Ten的目录)
        • twentyten-child (子主题存放的目录，可以任意命名)
          • style.css (子主题中不可或缺的文件，文件名必需为 style.css)

这个文件夹里面可以少至只包含一个style.css文件，也可以包含多至一个完整WordPress主题所拥有的文件：

  1. style.css (必需)
  2. functions.php (可选)
  3. Template files (可选)
  4. Other files (可选)

让我们看看它们是如何起作用的。

必需的style.css文件

style.css是一个子主题唯一必须的文件。它的头部提供的信息让WordPress辨认出子主题，并且重写父主题中的style.css文件。

对于任何WordPress主题，头部信息必须位于文件的顶端，唯一的区别就是子主题中的Template:行是必须的，因为它让WordPress知道子主题的父主题是什么。

下面是一个style.css文件的头部信息的示例：

1
2
3
4
5
6
7
8
9

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

逐行的简单解释：

  • Theme Name. (必需) 子主题的名称。
  • Theme URI. (可选) 子主题的主页。
  • Description. (可选) 子主题的描述。比如：我的第一个子主题，真棒！
  • Author URI. (可选) 作者主页。
  • Author. (optional) 作者的名字。
  • Template. (必需) 父主题的目录名，区别大小写。 注意： 当你更改子主题名字时，要先换成别的主题。
  • Version. (可选) 子主题的版本。比如：0.1，1.0，等。

*/ 这个关闭标记的后面部分，就会按照一个常规的样式表文件一样生效，你可以把你想对WordPress应用的样式规则都写在它的后面。

要注意的是，子主题的样式表会替换父主题的样式表而生效。（事实上WordPress根本就不会载入父主题的样式表。）所以，如果你想简单地改变父主题中的一些样式和结构——而不是从头开始制作新主题——你必须明确的导入父主题的样式表，然后对它进行修改。

下面的例子告诉你如何使用@import规则完成这个。

一个子主题的范例

这个例子中的父主题是Twenty Ten，我们喜欢这个主题的几乎每个部分，除了网站标题的颜色，因为我想把它从黑色的改成绿色的。使用子主题的话，只用完成以下三个简单的步骤：

  1. 在wp-content/themes目录下创建一个新目录，并将它命名为twentyten-child（或其他你喜欢的名称）。
  2. 将下面的代码保存在名为style.css的文件里，并将它放到新建的这个文件夹。
  3. 到WordPress的控制台>主题，然后激活你的新主题：Twenty Ten Child。
1
2
3
4
5
6
7
8
9
10
11
12

/*
Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme
Author: Your name here
Template: twentyten
*/
 
@import url("../twentyten/style.css");
 
#site-title a {
    color: #009900;
}

下面一步步解释上面代码的作用：

  1. /* 开启子主题的头部信息。
  2. Theme Name: 子主题名称的声明。
  3. Description: 主题的描述（可选，也可被省略）。
  4. Author: 作者名字的声明（可选，也可被省略）。
  5. Template: 声明子主题的父主题，换言之，父主题所在的文件夹的名称，区分大小写。
  6. */子主题头部信息的关闭标记。
  7. 用 @import规则将父主题的样式表调入
  8. #site-title a 定义网站标题的颜色（绿色），覆盖父主题中相同的样式规则。

注意 @import 规则

需要注意的是，@import 规则之前没有其他的CSS样式规则，如果你将其他的规则置于它之上，那么它将无效，并且父主题的样式表不会被导入。

使用 functions.php

不像style.css，子主题中的functions.php不会覆盖父主题中对应功能，而是将新的功能加入到父主题的functions.php中。（其实它会在父主题文件加载之前先载入。）

这样，子主题的functions.php提供了一个灵活稳定的方式来修改父主题的功能。如果你想在你的主题里加入一些PHP函数，最快的方式可能是打开functions.php文件然后加入进去。但那样并不灵活：下次你的主题升级更新了，你加入的新功能就会丢失掉。相反地，如果你使用子主题，将functions.php文件放进去，再将你想加入的功能写进这个文件里，那么这个功能同样会工作得很好，并且对于父主题以后的升级更新，子主题中加入的功能也不会受到影响。

functions.php文件的结构非常简单：将PHP起始标签置于顶部，关闭标签置于底部，它们之间就写上你自己的PHP函数。你可以写得很多，也可以写得很少，反正按你所需。下面的示例是一个基本的functions.php文件的写法，作用是将favicon链接加入到HTML页面的head元素里面。

1
2
3
4
5
6
7
8

<?php
 
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "n";
}
add_action('wp_head', 'favicon_link');
 
?>

给主题作者的提示。事实上子主题的functions.php首先加载意味着你的主题的用户功能可插入——即子主题是可替换的——通过有条件地进行声明。例如：

1
2
3
4
5

if (!function_exists('theme_special_nav')) {
    function theme_special_nav() {
        //  Do something.
    }
}

用这种方式，子主题可以替换父主题中的一个PHP函数，只需要简单地对它再次声明。

模板文件

模板文件 在子主题中的表现和style.css一样，它们会覆盖父主题中的相同文件。子主题可以覆盖任何父主题模板中的文件，只需要创建同名文件就行。（注意：index.php在WordPress3.0及以上版本才能被覆盖。）

同样，这项WordPress的功能允许你修改父主题的样式功能而不用去编辑父主题的文件，并且你的修改能让你在更新父主题后继续保留。

下面是一些使用模板文件的子主题的例子：

  • 增加一个父主题没有提供的模板（例如：网站地图页面的模板，或者一单栏页面，它们在页面编辑，模板选择里是可用的）
  • 增加一个比父模板更加具体的模板（见模板级别）。（例如：新加的tag.php模板用于按tag归档的文章来代替父主题中通常的archive.php模板。）
  • 替换父主题中的一个模板.（例：使用你自己的home.php来覆盖父主题中的home.php）

其他文件

除了style.css，functions.php，index.php和home.php，子主题可以使用任何正式主题使用的类型的文件，只要文件被正确链接。打个比方，你可以使用在样式表里或者Javascript文件里链接的图标、图片，或者从functions.php文件中调用出来的额外PHP文件。

posted @ 2017-06-03 16:14  微信公众号--共鸣圈  阅读(5499)  评论(0)  编辑  收藏  举报