wordpress怎样创建一个子主题

wordpress怎样创建一个子主题

什么是wordpress的主题?

wordpress的主题(Theme)就是我们看到的界面,当你安装一个主题后,比如,wordpress里有一个叫Twenty Fifteen的主题,它是这样的:
-w1439

又比如,我换成Twenty Sixteen这个主题后,是这样的:
-w1440

也就是说,不同主题就是不同界面样式,但我发布的内容都是一样的。

怎样更换主题

wordpress的主题,在后台的外观(Appearance)主题(Themes)里面:
-w761

如图所示,我当前激活的主题是Twenty Fifteen
-w1438

点击上图的+号就可以安装其他主题:
-w1440

wordpress主题文件位置

如下图所示,wordpress的主题是在wp-content/themes目录下,当我安装一个主题,就会在wp-content/themes目录下产生一个文件夹,所以wp-content/themes目录下,一个文件夹就是一个主题,比如我这里就有这四个主题:

  • twentyfifteen
  • twentynineteen
  • twentyseventeen
  • twentysixteen

-w367

为什么要创建子主题

当我们找了很久,终于找到一个“还算不错”的主题后,于是安装使用了,但是这个主题也只是“还算不错”,总感觉有些地方不够好,想改改,看到这里,懂点html+css知识的童鞋就会想了,主题的文件夹都知道了,要是觉得哪不好,直接去找它的html和css文件修改一下不就行了?是的,这样确实可以,但是这主题是会更新的,当主题有新版本后,我们一更新,那么我们修改的内容就全被覆盖了。

为了解决修改主题后会被覆盖的问题,我们可以创建一个子主题,修改什么内容,在子主题上改,这样,父主题更新就不会覆盖我们自定义的子主题了。

有人可能会想,那你这样不就相当于复制了一份,自己修改??其实不是的,当然你也可以复制一份,然后自己修改,但这样会有一个问题,当原主题更新后,你复制的主题因为你被改了很多,但你又想使用新主题的功能,这就没法弄了。

子主题是“继承”父主题的一个主题,刚开始创建的一个子主题,界面看起来跟父主题完全没有区别,因为子主题可以不自定义任何内容。

怎样创建一个子主题

下面,我们就以twentyfifteen这个主题为父主题,创建一个它的子主题。

1、在主题目录wp-content/themes下创建一个文件夹,名字随意,但是为了让你以后一眼就能看出它是谁的子主题,建议命名为“父主题名-child”,比如我这个子主题可命名为twentyfifteen-child,这样一看,就知道它是twentyfifteen的子主题,但为了体现命名是可以随意的,我这里特地写成abcd
-w383

然后在abcd文件夹下创建functions.phpstyle.css这两个文件:
-w378

2、把父主题中的wp-content/themes/twentyfifteen/style.css文件顶部注释复制到子主题的style.css中:

/*
Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 2.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

我们来解释一下这段注释的意思:
Theme Name主题名称(到时你在后台能看到你的子主题,那里的名称就是在这里定义的,没错,别看它是注释,wordpress的主题名称就是在style.css的注释里定义的,所以你这里可以写上你自己的名字,比如你就写“twentyfifteen-child”也可以)
Theme URI主题地址,因为有些人的主题是有官网的,而你自己的主题肯定没什么官网,你把它改成你的博客首页地址或者干脆不写也行。
Author创建名称,你可以写上你的英文名,当然中文也行
Author URI写这个主题的作者可能有自己的博客或者介绍页面之类的,你自己的话,你可以把你博客地址写上去,或者如果你博客有“关于我”之类的页面,也可以放那个地址。
Description插件介绍,你就大概写一下就行,其实写不写都无所谓,中文英文也无所谓。
Version版本,插件版本,这个因为自己用的,所以版本并不是很重要,就是个版本号,你直接写1.0就行。
License这个是授权协议,开源软件一般都有一个授权协议,但由于你只是自己用的,所以这个写不写都无所谓了,你可以保留原来的值不改就行。
License URI介绍你的授权协议的链接,还是保持原来的吧,这个其实写不写都无所谓。
Tags这个是搜索标签,可以把原来的删掉,写一个twentyfifteen-child就好了,因为反正你也不往外发,只是自己用,其实写不写都无所谓。
Text Domain这个,我也不知道干嘛的,你可以不写。
This theme, ……最后这一段是这个主题的介绍,你也可以大概写写你为什么要创建这个主题,这个主题主要用来干嘛的等等,当然你也可以删掉,啥也不写。

3、综合前面的解释,我把我的style.css文件顶部注释写成这样:

/*
Theme Name: abcd
Theme URI: https://www.xiebruce.top
Author: Bruce
Author URI: https://www.xiebruce.top
Description: 这是一个测试子主题
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: twentyfifteen子主题,子主题
Text Domain: twentyfifteen-child
template: twentyfifteen

这是一个我自定义的子主题。
*/

@import "../twentyfifteen/style.css";

大家可以看到,我除了在复制过来的内容上修改之外,还增加了两句,其中第一句:

template: twentyfifteen

这句是指定该主题继承谁,后面的名字,为要继承的主题的文件夹名,因为我要继承的主题是twentyfifteen,它的文件夹名就是twentyfifteen,所以这里就要写成twentyfifteen

增加的第二句(在注释外):

@import "../twentyfifteen/style.css";

这是最重要的一句,这一句是引入父主题的style.css,表示继承父主题的样式。

现在我们去后台主题管理界面看看,是不是多了一个叫abcd的主题?只是好像没有图片,没关系,你去父主题中找一个叫screenshot.png的图片,把它粘贴到你的主题文件夹中,就有图片了(当然你也可以自己截个图放进去,但名字一定要命名成screenshot.png
-w1440

把这个子主题激活,然后看看前台页面,是不是跟twentyfifteen一样,没有任何变化?但其实现在你已经在使用子主题了,你的子主题已经生效了!

有童鞋可能会问,functions.php不用写什么东西吗?是的,默认什么都不用写,而且这个文件其实不是必须的,如果你不需要自定义函数,你可以不在子主题中添加这个文件。

如何修改子主题

好了,现在子主题已经创建好了,如果你看你的父主题哪里不顺眼,那就在子主题中修改吧。

比如我要修改样式,那么直接在子主题的style.css里添加你想修改的样式即可,style.css的样式会覆盖父主题中的同名样式。

那如果要修改html文件呢?答案是,从父主题复制过来再修改。

子主题使用同名覆盖来达到修改父主题样式(功能)的效果,所以如果你要修改父主题的哪个文件,那就把它复制到子主题中进行修改即可,如果这个文件在父主题中的某个目录中的,那么在子主题中也要在相同的目录中,这样才能同名覆盖,不修改的文件,可以不复制过来,比如我要修改content.php中的文件,那我就把父主题的content.php复制过来,然后修改即可。
-w372
注意,有些文件有依赖,有相互包含,那么被包含的文件也要复制到子主题中,比如index.php包含了“header.php”、“footer.php”、“content.php”,假设你把“index.php”复制到子主题中,那么相应的“header.php”、“footer.php”、“content.php”这三个文件也要复制过去,因为“index.php”会在当前目录中查找这三个文件。

总结

1、style.css注释里的template属性是继承的关键,该属性的值为被继承主题(即父主题)的文件夹名:

template: twentynineteen

如果没有定义template,那么子主题将无法调用父主题的functions.php中的方法。

2、css的@import语句,该语句用于继承父主题的样式,如果没有定义,那么将无法继承父主题的样式:

@import "../twentyfifteen/style.css";

所以,定义一个子主题,必须元素:在wp-content/themes目录下创建一个文件夹,文件夹里有一个style.css文件,style.css文件里有以下内容即可:

/*
template: twentynineteen
*/

@import "../twentynineteen/style.css";

至于functions.php,它也不是必须的,只有需要自定义函数的时候,才要用到。

但最好指定一下Theme Name,因为这个属性是用于指定后台显示插件名称的,如果不指定,那么将默认使用插件文件夹名作为插件名:

Theme Name: abcd

另外最好截一个你新主题界面的图片并命名为screenshot.png,把它放到子主题文件夹里,否则后台查看该主题的时候,会没有图片。

除此之外,其他信息,则可有可无,并非必须的。

打赏
订阅评论
提醒
guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

2 评论
内联反馈
查看所有评论
Andy guo
Andy guo
4 年 前

感谢,正好需要这个教程

2
0
希望看到您的想法,请您发表评论x

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

wordpress怎样创建一个子主题