子主题文件都放在 wp-content/themes目录下自己的目录里。下面的结构显示的就是子主题和它的父主题(以默认Twenty sixteen主题为例)在典型的WordPress目录结构中的位置:
子主题目录结构
- 网站根目录
- ——wp-content
- ————themes (主题存放的目录)
- ————————Twenty sixteen (示例中父主题Twenty sixteen的目录)
- ————————Twenty sixteen-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. (必需) 子主题的名称。
- Theme URI. (可选) 子主题的主页。
- Description. (可选) 子主题的描述。比如:我的第一个子主题,真棒!
- Author URI. (可选) 作者主页。
- Author. (optional) 作者的名字。
- Template. (必需) 父主题的目录名,区别大小写。 注意: 当你更改子主题名字时,要先换成别的主题。
- Version. (可选) 子主题的版本。比如:0.1,1.0,等。
- */ 这个关闭标记的后面部分,就会按照一个常规的样式表文件一样生效,你可以把你想对 WordPress应用的样式规则都写在它的后面。
其原理是子主题的样式表会替换父主题的样式表而生效。(事实上 WordPress根本就不会载入父主题的样式表。)所以如果你只是想简单地修改父主题中的一些样式和结构,而不是从头开始制作一个全新主题(我们当然不是,只是想修改不被覆盖而已),那么你就必须明确的先完全导入父主题的样式表,然后再对它进行修改。
举一个例子
例如父主题是Twenty sixteen,我们喜欢这个主题的绝大部分部分,但除了网站标题的颜色,所以我想把它从黑的色改成绿的色。而使用子主题功能的话,从头到尾只用完成以下三个简单的步骤就好:
在 wp-content/themes目录下创建一个新目录,并将它命名为 Twenty sixteen child(可以自定义你喜欢的名称)。
将下面的代码保存在名为 style.css的文件里,并将它放到新建的这个子主题文件夹。
到 WordPress的后台-主题,然后激活你的新子主题:Twenty sixteen child。
- @import url("../Twenty sixteen/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');
- ?>
Tips:知道了子主题的 functions.php是首先加载的,那么你子主题功能是可替换的其父主题功能的,只需通过有条件地进行声明即可。例如:
- if (!function_exists('theme_special_nav')) {
- function theme_special_nav() {
-
- }
- }
这样子主题就可以替换父主题中的一个 PHP函数功能,只需要简单地对它进行再次声明就好。
还有子主题的其他模板文件
它们在子主题中的表现和 style.css一样,它们会覆盖父主题中的相同文件。子主题可以覆盖任何父主题模板中的文件,只需要创建同名文件就行。
它们同样可以让修改父主题的样式功能而不用去编辑父主题的文件,并且你的修改能让你在更新父主题后继续保留。例如:
增加一个父主题没有提供的模板(例如:网站地图页面的模板,或者一单栏页面,它们在页面编辑的模板选择里是可以看见选择的)
替换父主题中的一个模板。如要修改父主题中某一模板文件,如 footer.php,我们就可以把父主题中的 footer.php复制到子主题目录中,然后编辑子主题中的 footer.php,这样既更新了网站的 footer,又不修改父主题的代码。以后主题要更新的时候我们就可以轻松把父主题替换掉,再根据子主题中的文件做微调就好了。
总结
通常情况下就算我们在网上找到一个合适的 wordpress主题,但是不可能百分百满意,到真正使用起来的时候我们才会发现很多要修改的地方。
这个时候有两种方法,第一种就是之前的直接修改主题所在的文件夹内的文件。但是这样会造成一个问题:如果当前主题后期有更新了,我们往往需要重新把整个主题替换掉才能使用新版的主题,那么我们之前的修改就都没有啦!
如果仅仅是改了一下footer.php,那还算方便只要稍微改一个文件就可以了,那么如果我们改了很多地方,最后自己也记不清改了哪些地方的时候,我们该怎么更新主题呢?
看完本文所讲的内容后我想你应该就知道怎么比较好的解决这个问题了,那就是使用简单方便的wordpress子主题功能。