wordpress5.3 正确使用子主题

50 阅读 0 评论 33 点赞

我是靠谱客的博主文艺月饼，最近开发中收集的这篇文章主要介绍wordpress5.3 正确使用子主题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

子主题介绍

在了解子主题功能之前，先来看一下你在使用 WordPress 的时候是否是这样：不会自己制作主题，只好从网上下载一个，这个主题整体风格比较适合，但是有些小地方不太好，自己只是有一点 CSS 基础，可以修改一些简单的样式。修改的时候，却发现主题文件这么多，里面掺杂各种 PHP、HTML 代码，让人不知道在哪里修改。

太好了，那么我们开始学习子主题吧，子主题就是来解决这个问题的。它可以基于某个主题，继承它的功能和样式，然后让你自己进行简单的代码编写就可以衍生出一个新的版本。你还可以对子主题增加样式、功能等等，不仅仅是修改父主题样式那么简单。

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

如何创建子主题

子主题也是一个主题，也跟其他主题一样，放在 wp-content/themes 目录下面的文件夹中，文件夹的名称可以随便定义。

在子主题中，一般有下面几个文件：

style.css (这个必须有)
functions.php (这个可以有)
其他模板文件 (这个可以有)
其他文件 (这个可以有)

style.css 是必须的

这是构建子主题中唯一必须有的文件，因为 WordPress 根据主题中的 style.css 头部信息来获取主题信息。特别是子主题，除了像一般主题一样添加头部信息之外，还需要添加父主题的名称，这样 WordPress 才能获取父主题的资源文件。

style.css 头部信息通常是这样的

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

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

它是一段 CSS 注释，但会被 WordPress 识别，必须放在 style.css 的最顶端。很明显，这段注释里面包含了主题名称、主题地址、描述、作者、作者名称、模板（父主题）、主题版本号。在这些参数里面，只有 Theme Name 和 Template 是必须有的，其中 Template 参数的作用，就是指定父主题，是在子主题中用的，所以在一般的主题中，是不会有 Template 这个参数的。

使用@import 导入父主题的样式

到WordPress的控制台>主题，然后激活你的新主题：Twenty Twelve Child

Template参数的值必须是父主题的目录名，不是主题名称

想要替换父主题的样式，可以在子主题这样写

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

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

li.page_item>a{
    color: #f00 !important;
}

h2.entry-title{
    font-size: 4rem !important;
}

直接加上！important 命令，直接把当前 CSS 的优先级提到最高。否则你写的样式可能不起作用。

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

使用 functions.php

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

这样，子主题的functions.php提供了一个灵活稳定的方式来修改父主题的功能。如果你想在你的主题里加入一些PHP函数，最快的方式可能是打开functions.php文件然后加入进去。但那样并不灵活：下次你的主题升级更新了，你加入的新功能就会丢失掉。相反地，如果你使用子主题，将functions.php文件放进去，再将你想加入的功能写进这个文件里，那么这个功能同样会工作得很好，并且对于父主题以后的升级更新，子主题中加入的功能也不会受到影响。

functions.php文件的结构非常简单：将PHP起始标签置于顶部，关闭标签置于底部，它们之间就写上你自己的PHP函数。你可以写得很多，也可以写得很少，反正按你所需。

引用父主题的 functions.php 文件

functions.php 文件是一个主题中的功能文件，可以包含主题的各种功能，通常是一个主题必不可少的文件。在子主题中引用父主题的 functions.php 文件不像是引用 style.css 文件会把原先的样式覆盖掉，而是把子主题的 functions.php 的内容追加到父主题的 functions.php 文件的前面，优先加载。

我们有时候想要增加功能到一个主题上面，但是当主题升级之后，我们增加的功能就被覆盖掉了，我们还需要再复制进去。比较聪明的办法就是利用子主题的这个特性，想要增加父主题的功能，我们可以新建一个子主题，然后把功能放在 functions.php 中，这样即使是父主题升级了也没有关系。注意，你不需要把父主题的 functions.php 文件内容，全部复制到子主题的 functions.php 中。

关于 functions.php 中功能代码的编写，就跟普通主题的一样，例如下面一个例子（添加 favicon.ico 到头部）：

<?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 文件的引用机制，是在父主题的 functions.php 之前加载使用的。那么我们就可以利用这个特性，来替换父主题的相关函数等。例如：

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文件。