WordPress 的子主题使用

为啥使用子主题

修改别人的 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://lms.im/wordpress/wordpress-theme-bluesky.html
 Description:  BlueSky 的子主题
 Author:       不亦乐乎
 Author URI:   http://lms.im
 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

作者: LMS

天行贱,君子自强自息。

标签

《WordPress 的子主题使用》有16个想法

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

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

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注