WordPress 有好多好多的主题可以选,所谓众口难调,千挑万选之后,总不能完全满足我们的需要。 如果直接修改主题样式文件,一更新,所有的修改就丢失了,不得不重新再来一遍。

为了避免以上问题,Wordpress提供了子主题机制。就是网站系统首先加载子主题定义的样式或功能,再加载父主题。 这样,如果同名文件在子主题,父主题的就会被覆盖。这样既能满足自定义的需求, 又能保证更新之后自定义内容不丢失。

可是怎么创建子主题?

子主题也可以看做一个单独的主题,他只需要在主题目录里放一个 style.css 并在文件里写上以下信息就能生效。

本文以官方主题twentytwelve为例:

下边是一个清晰的目录结构:

  • wp-content
    • themes(主题目录)
      • twentytwelve(父主题目录)
        • index.php(必须)
        • style.css(必须)
        • functions.php
        • header.php
        • footer.php
        • (完整的模板)……
      • twentytwelve-Child(子主题目录)
        • style.css(必须)
        • functions.php
        • (可选部分的模板文件,会覆盖同名的父主题模板文件)……

对于style.css 这个文件,下列形式的头信息是必须的。

/*
Theme Name: twentytwelve Child
Theme URI: https://www.instrum.xyz
Description: This is twentytwelve child style.
Author: Dr. Lu
Author URI: www.instrum.xyz
Template: twentytwelve
Version: 1.0
*/
注意:以上加粗两项是必填的项目。

子主题中style.css的注释块之后不能为空,需要包含父主题样式的css
例如:
@import url("../twentytwelve/style.css");

然后可以根据个人需要更改样式。

最后就是进入后台,主题栏目,就会出现我们刚刚建立的子主题,twentytwelve child 启用它,刷新你的首页看看吧。

注意: 对于子主题中的functions.php 函数,wordpress是把子主题中的函数添加到父主题的函数中,所以,子主题中不用再包含父主题中的函数功能。

利用一下代码,可以实现子主题的函数功能替换父主题中的函数功能。

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

本文是对网络资源的简单汇总与简单应用。推荐网站

2017年2月7日更新:

添加style到子样式中css,可以直接添加,如果重新定义主题样式,要在样式中加入 important。

例如:


.site-content {
    margin: 0px 0 0 !important;
    margin: 1.714285714rem 0 0;
}
.site-header {
    padding: 8px 0 !important;
    padding: 1.714285714rem 0;
}
News Reporter
Dr. Lu

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Skip to toolbar