WordPress 5.3 子主题使用详细教程

WordPress子主题也是一个主题，它继承了另一个主题——父主题——的功能，并允许你对父主题的功能进行修改，或者添加新功能。

本文将说明如何创建一个基本的子主题并告诉您能用它来干什么。

本文将使用 WordPress 5.3 的默认主题 Twenty Twenty 作为父主题进行举例说明。

创建子主题是很简单的。首选创建一个目录，将格式编写正确的 style.css 文件放进去，一个子主题就初步完成了！

只需要对 HTML 和 CSS 具有基本的了解，您就可以通过创建一个非常简单的子主题来对父主题的样式和布局进行修改和扩展，而不需要对父主题的文件作任何修改。

通过这样的方式，当父主题被更新的时候，您所做的修改就可以保存下来。

因为这个原因，我们强烈推荐您使用子主题的方式来对主题进行修改。

如果您对 PHP， WordPress Templates，和 WordPress Plugin API 有了基本的理解，那么，理论上来讲，您可以使用子主题对父主题的每一个细节方面进行扩展，而不需要对父主题的文件进行任何修改。

目录结构

子主题放在wp-content/themes目录下一个单独的目录里。下面的结构显示的就是子主题和它的父主题（Twenty Twenty）在WordPress目录结构中的位置：

public_html
- wp-content
  - themes (主题存放的目录)
    - twentytwenty (示例中父主题Twenty Twenty的目录)
    - twentytwenty-child (子主题存放的目录，可以任意命名)
      - style.css (子主题中不可或缺的文件，文件名必需为 style.css)

这个文件夹里面可以只包含一个style.css文件，也可以包含多至一个完整WordPress主题所拥有的文件：

style.css (必需)
functions.php (可选)
Template files (可选)
Other files (可选)

让我们看看它们是如何应用的。

必需的style.css文件

style.css是一个子主题必须包含的文件。它的头部信息让WordPress辨认它是子主题，并且重写父主题中的style.css文件。

对于任何WordPress主题，头部信息必须位于文件的顶端，唯一的区别就是子主题中的Template:行是必须的，因为它让WordPress知道子主题的父主题是哪个。

下面是style.css文件的头部信息的示例：

/*
Theme Name:     Twenty Twenty Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Twenty theme 
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentytwenty 
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 Twenty Child
Description: Child theme for the Twenty Twenty theme 
Author: Your name here
Template: twentytwenty 
*/

@import url("../twentyten/style.css");

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

解释一些上面代码的作用：

/* 开启子主题的头部信息。
Theme Name: 子主题名称的声明。
Description: 主题的描述（可选，也可被省略）。
Author: 作者名字的声明（可选，也可被省略）。
Template: 声明子主题的父主题，换言之，父主题所在的文件夹的名称，区分大小写。
*/子主题头部信息的关闭标记。
用 @import规则将父主题的样式表调入
#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元素里面。

<?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首先加载意味着你可以插入父主题的功能——通过条件语句进行声明。例如：

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

注意，替换的过程是在父级主题中，使用php的function_exits进行判断。用这种方式，子主题可以替换父主题中的一个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文件

注意 @import 规则

使用 functions.php

模板文件

其他文件

相关文章:

发表评论 取消回复

注意 `@import` 规则

发表评论取消回复