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,把它放到子主题文件夹里,否则后台查看该主题的时候,会没有图片。

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

打赏

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
xiebruceAndy guo Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
Andy guo
Guest
Andy guo

感谢,正好需要这个教程

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

wordpress怎样创建一个子主题