性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

使用WordPress的子主题功能修改你的WordPress主题

Loading
1
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

相信很多朋友使用的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文件。

支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

MetInfo | 最适合企业网站建设的cms系统

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

精彩推荐

把一个WordPress站点的文章导入另一个WordPress站点的方法

把一个WordPress站点的文章导入另一个WordPress站点的方法

给WordPress里包含下载资源的文章,加一个下载标识

给WordPress里包含下载资源的文章,加一个下载标识

21 条评论

  1. 你好博主!我也做自己的博客,不懂PHP很吃力,用了知更鸟的主题,但是子主题里面的widget.php文件始终用的父主题的,子主题怎么修改也不管用。根据您的经验这是什么问题呢?

  2. learnwordpress

    依文中介绍,我在/wp-content/themes/下新建了一个目录。
    然后将父主题的style.css文件修改后放到新建目录下。
    修改后style.css的内容如下:

    /*
    Theme Name: zAlive child
    Theme URI: http://www.zenoven.com/themes/zAlive
    Author: zxy
    Author URI: http://www.zenoven.com/
    Description: zAlive is a responsive two columns theme with green and black color. With rich options you can custom the slider, excerpt, advertisement code,primary sidebar layout, copyright, nav menu, CSS style, scripts and more.
    Template: zAlive
    Version: 1.3.4
    */

    @import url(“../zAlive/style.css”);

    #site-title a {
    color: #009900;
    }

    可是刷新仪表盘后显示: 缺失父级主题。请安装“zAlive”父级主题。
    我的父主题目录确实就是zAlive啊。是我哪里操作错了么?
    请大神指点~

  3. 搜wordpress的教程大多时候都来到这里,很有用,很多问题到这里就能解决掉,赞

发表评论