WordPress 子主题能干什么以及不能干什么

子主题基本用法

以Twenty Ten主题为例:

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

  • 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文件的头部信息的示例:

/*
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/
<strong>Template:       twentyten</strong>
Version:        0.1.0
*/

逐行的简单解释:

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

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

要注意的是,子主题的样式表会替换父主题的样式表而生效。(事实上WordPress根本就不会载入父主题的样式表。)所以,如果你想简单地改变父主题中的一些样式和结构——而不是从头开始制作新主题——你必须明确的导入父主题的样式表,然后对它进行修改。下面的例子告诉你如何使用@import规则完成这个。

/*
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;
}
  • @import 用于将父主题的样式表调入。
  • #site-title a 用户自定义样式,定义网站标题的颜色(绿色),覆盖父主题中相同的样式规则。

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

可选的 functions.php

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

functions.php文件的结构非常简单:将PHP起始标签置于顶部,关闭标签置于底部,它们之间就写上你自己的PHP函数。下面的示例是一个基本的functions.php文件的写法,作用是将favicon链接加入到HTML页面的head元素里面。

<?php

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

?>

由于同一个函数不能被多次定义,子主题中的函数不能和父主题同名,也就是说子主题只能新增函数,不能更改或覆盖父主题中的功能函数,除非父主题的作者从一开始就使用以下写法:

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

上面这段代码的作用是当不存在函数XX时才定义函数XX。

然而主题的原作者们通常很少这么写,因此还是没用。

可选的页面模板.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文件。

子主题能干什么

  • 覆盖整个样式表 style.css。子主题的样式表会替换父主题的样式表而生效,事实上WordPress 根本就不会载入父主题的样式表。然而这并不比额外CSS好用。而且有些主题用的样式表不一定是 style.css 。
  • 增加少量函数到 functions.php。子主题中的functions.php会在父主题文件加载之前先载入。不会覆盖父主题中对应功能,而是将新的功能加入到父主题的functions.php中。
  • 新建或覆盖整个页面模板.php。子主题可以覆盖任何父主题中的同名模板文件。

子主题不能干什么

  • 不能更改父主题在 functions.php 中已有的功能函数。除非作者遵照上文提到的标准写法。
  • 不能更改 .php 文件中的局部细节。要么覆盖整个文件,只改局部是做不到的。

总结

总体来看,我觉得子主题很鸡肋。

如果是修改样式表我选择用额外CSS,修改函数小细节没必要覆盖整个文件,可能会错过原主题作者的一些更新内容。新增函数虽然可以写在子主题的functions.php,但是调用的时候不还是得回到父主题里调用?这可能会引发一些问题,主题编辑器甚至通不过修改。

如此看来,子主题唯一的用处就是新建页面模板。

不过,既然都有功夫新建一个子主题,那手动新建页面也算不了什么麻烦事。

所以最终我还是选择回归最原始的方式,那就是写篇文章记录一下自己修改过的地方,然后每次更新的时候再手动复制粘贴一遍……目前发现JavaScript能有效解决这个问题,见《WordPress 主题修改经验》。

参考资料

  1. 子主题
  2. WordPress 主题修改经验
  3. Argon 主题修改记录
  4. Adams主题修改记录
小提示:您还可以点击下方 [ 标签 ] 阅读相关文章。您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed

评论

  1. Image
    Windows Edge
    广东省汕头市 电信
    1 年前
    2025-3-06 20:38:39

    谢谢分享😊 刚刚评论验证码错误 (13+2=15 错误?? …… 试试看这次对不对吧)

    • Image
      博主
      Aria
      Android Chrome
      上海市闵行区 电信
      1 年前
      2025-3-06 23:50:01

      谢谢评论,老bug了,时灵时不灵的,至今也没完全找到原因,感谢你的耐心~

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇