WordPress 的子主题使用

LMS
折腾
1.5K+ 16

为啥使用子主题

修改别人的 WordPress 主题有个麻烦的地方是，当人家更新时，你要是覆盖更新，修改过的内容又得重新再改一遍，非常蛋疼，使用 WordPress 的子主题功能可以很好的解决这个问题。

WordPress 子主题也是一个主题，它完全继承父主题的全部功能，并可以对父主题的功能进行修改、添加。所以说，在父主题存在的情况下，你可以通过新建一个子主题来修改原主题，而不需要在原主题上修修改改，最后一覆盖都忘记了。

如何使用子主题

子主题必须包含以下 3 个元素：

  1. 子主题文件夹
  2. style.css 样式文件
  3. functions.php 函数文件

子主题文件夹名字可以随意，但为了方便识别一般以父主题文件夹名加 -child 来建立，比如父主题文件夹是 BlueSky 对应的子主题文件夹命名则为 BlueSky-child 这样一目了然。

子主题起作用主要是通过 style.css 文件来实现的，所以子主题下的 style.css 文件格式必须按以下内容开始（以 BlueSky 主题的子主题为例）：

/*
 Theme Name:   BlueSky Child
 Theme URI:    http://muxer.cn/wordpress/wordpress-theme-bluesky.html
 Description:  BlueSky 的子主题
 Author:       不亦乐乎
 Author URI:   http://muxer.cn
 Template:     BlueSky
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         蓝色,透明背景,固定双栏
*/

上面内容里的 Template: 必须要对应父主题的主题名字填写正确，这样子主题才能继承父主题的所有功能，并且子主题上修改的东西才能作用到父主题上。

子主题下的 style.css 文件内容不要复制父主题下的 style.css 的内容，子主题下的 style.css 文件只添加需要增加的自定义 CSS 或者要覆盖父主题样式的 CSS 内容。如果你不需要修改父主题的样式，那么子主题的 style.css 文件只要上面的内容就好，其他留空就可以了。

搞定上面这一步骤后，还得在子主题中引入父主题的 css 文件，引入父主题的 css 文件需要在子主题的 functions.php 文件里加入以下代码：

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

上面的代码保证了在引入父主题 css 样式文件后再载入子主题的 css 样式文件，这样你在子主题下修改 css 样式就能覆盖父主题的 css 样式了。

上面的工作做完后，就可以到后台去启用这个子主题了。

子主题的其他功能

子主题除了在自己的 style.css 文件里修改样式可以覆盖父主题的外，其他页面也可以覆盖，比如在子主题文件夹下新建 tag.php、single.php、category.php、archive.php 等页面模板文件就可以覆盖父主题对应的模板文件了。除此之外，覆盖父主题对应的函数则要在子主题的 functions.php 文件里输入对应的新函数代码。具体请见 WordPress 官方网站：http://codex.wordpress.org/Child_Themes

文章目录
  1. 为啥使用子主题
  2. 如何使用子主题
  3. 子主题的其他功能
THE END

评论 16

  1. 这个功能确实很好，尤其是给我这样几乎什么都会的人用来瞎改改还是OK的

  3. 感谢博主~
    另外想提醒下“搞定上面这一步骤后，还得在子主题中引入父主题的 css 文件，引入父主题的 css 文件需要在子主题的 functions.php 文件里加入以下代码”这句话是在子主题里新建function.php这个文件，然后把下面的代码写进去，我理解成了复制一份过去然后把代码加在里面，折腾了半天……

    1. 句子太长表达不清，不好意思，还好你搞定了。

    2. 子主题的style.css文件只要写你需要修改的css就行了，不用全部复制原主题的style.css文件内容。

  4. 子主题最大的好处，就是母主题更新后，也不会影响子主题的设置
    之前想过要用，但稍微折腾下发现有点烦
    对于太折腾的东西一直有点不喜欢，就再没弄过
    直接用代码在后台禁止一切升级，以避免带来不必要的变动……

    1. 直接禁用太残忍了，我是有升级强迫症，看到有提示不升级心理就难受，不过我用的都是自己的主题所以无所谓主题升级，嘿嘿。

      1. “看到有提示不升级心理就难受”
        你也说了，是提示升级，我禁止升级后，提醒升级的那个角标就不会出现了
        不出现，就不会被迫去升级，毕竟这年头有些升级还不如不升级呢
        之前就遇过一个插件升级后变得极其糟糕，我就含恨删掉了

  5. get_stylesheet_uri跟get_template_directory_uri有点儿区别.其余的毫无难度.唯一奇怪的是我这边子主题的style.css必须是ascii的,换成utf的就不认.

    1. 换邮箱了啊，这inbox我难道也注册过？会不会你父主题的style.css不是utf8的呢？

发表评论

Submit