每次升级主题总是有人问都修改了什么,因为很多人根据自己的喜好对主题进行了个性化修改,虽然我也作了记录,但具体修改了什么文件以及修改了哪个样式属性还真没办法详细记录。那么如何将主题升级到最新版本,而又能保留自己个性的修改呢?答案很简单,使用WordPress子主题功能,升级后无需再次修改原主题,只需要启用并修改子主题就可以了,下面就以Ality主题为例,创建一个Ality主题的子主题。
一、在WordPress主题目录(themes)新建一个主题文件夹,名称任意,比如:Ality-child。
二、将Ality主题的样式文件style.css和css目录(因为Ality主题有部分样式文件和字体图标在这个CSS目录中)及图片目录img,一起复制到新建的主题文件夹Ality-child中,也可以将之前修改过style.css复制过来。
三、打开复制过来的style.css文件,在文件头部添加:
- Template:Ality
这个是关键,其中的Ality名称必须与父主题文件夹名称相同,而且父主题Ality也必须与新建的子主题同在WordPress主题目录(themes)中。
其它内容酌情修改,最终如下:
- /*
- Theme Name: Ality-child
- Theme URI: https://zmingcx.com/wordpress-theme-ality.html
- Author: 知更鸟
- Author URI: https://zmingcx.com/
- Description: Ality子主题。
- Template:Ality
- Version: 0.2
- */
四、登录后台外观→主题中启用这个子主题Ality-child之后,就可以根据自己的喜好修改其中的样式。
父主题样式可以通过下面形式加载:
- @import url("../Ality/style.css");
代码必须写在所有样式之前,也就是文件头的后面,子主题样式文件中只需添加自己修改的部分即可。
比如:将导航菜单改为红色,修改下面5个选择器样式:
展开代码展开收缩
- #site-nav {
- background: #d03f42;
- }
- #site-nav li {
- border-right: 1px solid #f64f53;
- border-left: 1px solid #a12e30;
- }
- #site-nav li a:hover, #site-nav li a:active {
- background: #a52d30;
- }
- #site-nav.current_page_item , #site-nav .current-menu-item {
- background: #a12e30;
- }
- #site-nav li a:hover, #site-nav li a:active {
- background: #a12e30;
- }
子主题继承父主题所有功能,可以在子主题中新建一个functions.php文件,增加新的功能,或者去掉父主题的部分功能。
还可以将父主题其它模板文件比如index.php、single.php、archive.php等复制过来,进行个性化修改。
本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

1F
鸟哥,这个功能好,原理是什么啊,模板?
B1
@ l罗伯特 还需要什么原理,这就是WordPress自带的子主题功能
B2
@ 知更鸟 貌似functions.php也可以自定义了,但是子模版的functions.php能调用父模板的函数么?
B3
@ cpder 子主题延续父主题所有功能,也可以在子主题中新建一个functions.php文件,从而增加新的功能,但不能与父主题代码有重复
B4
@ 知更鸟 我启用了子主题,所有功能都没有了,主题选项都是空的,像一个新主题,前台菜单都没有了,要怎么引入父主题的配置呀!
2F
鸟哥 移动端的搜索和登录去掉了吗? 还有鸟哥如何隐藏移动导航菜单?提个建议 移动端导航能否做成这种 mufeng.me (移动端的),过渡很平稳~
B1
@ 氪星人 我用了缓存插件,所以有时看不见移动端的东西
那个站用的是单独的移动版主题,不存在什么过渡,与我的主题不在一个层面上
3F
这个功能确实很好,以前没听说过,学习了
4F
前几天就是老更新,所以已经使用了子主题,非常好用的功能!现在再也不怕主题更新了

B1
@ NIGHT 你这个CMS板子,之前看过,弄的非常不错了,让我都有些不想作CMS了
B2
@ 知更鸟 工作太忙了,慢慢修改了一些,现在首页才完成了上中部的布局,下半部及分类的模板等还没有弄好!还有就是依托了你的后台主题选项,对首页的调用做了一些增强。现在基本是完成了首页全后台控制调用!

B2
@ 知更鸟 这就是我上次在这发的 哈哈 他改的不错 不过还是期待鸟哥你的cms版本 期待着
B2
@ 知更鸟 个人觉得没有hotnewspro的cms好,有些杂乱呵呵
B3
@ 老虎 主要是中间的滚动层没放好位置,现在往下移了一层,就不会了!
B1
@ NIGHT 大侠 原来是你改的CMS主题 很不错啊 啥时候完工
B2
@ Robin 蜗牛速度中,主要是要兼顾美观啊 所以静态页面都做好了 还在考虑把一些层放在什么位置好看!
B1
@ NIGHT 博主的中间幻灯(鸟哥的上部幻灯)代码能提供一下吗?
B2
@ 花开花落 其实推敲一下自己都可以弄出来,如果给代码,那要修改的地方有点多了,期待收费版吧
B3
@ cpder 幻灯的代码确实好弄,我前后台都已经弄出来了,通过自定义栏目的方式选择要加入幻灯的文章;但是那个第一篇文章下、广告下那个图片文章我就纠结了,静态的可以弄,但是我想还是通过自定义栏目的方式显示4篇文章的特色图,这需要一个循环,但是貌似跟博客的主循环有冲突,导致重复显示,因为不懂PHP所以也不知道要怎么解决了……!
5F
wp的主题模板就是修修改改的比较多。
6F
鸟哥,我提一个建议,建议不要鼠标放在图片上,图片变白的这个功能,感觉有点鸡肋,个人意见啊。
7F
有点影响用户体验!
8F
总体感觉不错
9F
鸟哥,手机版的登录界面,密码框会被键盘挡住,看不到,建议修改下
B1
@ 多壳 汗,这也是问题?弄个2K屏的大手机问题迎刃而解
B1
@ 多壳 我手机屏幕分辨率小也不会出现这个问题哦。可能是你浏览器的问题或者操作系统的缺陷
10F
原来还有这个功能 多谢
11F
鸟哥,我的网站评论发表之后怎么不能像你网站这样显示呢?我的发表之后是这样显示的:“小王发表在《朝天钩钓法经验谈》”,我想它变成这样的:“小王:写得不错,楼主给力了!!”
B1
@ 钓有道 用主题集成的近期留言小工具,而不是WP自带的
B2
@ 知更鸟 已经完美解决了,谢谢鸟哥
12F
支持,正在考虑换主题了!这个不错哦!
13F
子主题是不是相当于新建的一个页面了。
14F
这个功能非常棒~~~~以后肯定会有用到的地方
15F
永远爱鸟哥啊~
16F
其实子主题很多人在用,修改style.css特别好,但是也有局限性,比如inc文件夹下的如果修改了貌似就没用,得在父主题里改。下次又覆盖。比如修改了某些图片,修改了某些模版的某些功能,等等。
17F
鸟哥,我想问下,博客首页的那个第一篇文章下、广告下的那个图片文章能不能改成显示4篇文章的特色图,通过自定义栏目来选择要显示的文章,用自定义栏目的话会有一个循环,貌似会跟主循环有冲突,导致会重复显示第一篇文章和那个图片文章,因为我不懂PHP所以也不知道要怎么解决,不知道这个可不可以做出来的!
B1
@ 成全 神马皆有可能,不过没人会免费帮你改这改那
B2
@ 知更鸟 感觉是可以弄出来的,就是还没找到方法
,再慢慢琢磨琢磨吧……
18F
放在 GitHub 上就可以方便查看更新变动的代码了。
19F
——这样可以方便了,哇哈哈哈哈~~~
B1
@ Z搜集 不过话说回来,这会不会一定程度上影响网站性能
B2
@ Z搜集 修改较少,无影响,比如这个子主题:
http://www.woniu778.com/
改动很大,基本没什么影响
20F
不错!学习了。
21F
想请教,比如修改了mediaqueries.css、script.js文件,那么就应该需要加载的是子主题下的相应文件,看http://www.woniu778.com/的网页源代码,发现其加载的也是子主题路径。但这两个是在functions.php内的ality_scripts()加载,网上子主题修改教程中的方法,只能到得出错提示。想请教怎样达到加载修改后的这两个文件。谢谢站长分享主题
B1
@ 饿狼 一两句还真说不清楚
有时间会写个子主题的进阶教程
22F
B1
@ Z搜集 子主题确实还有很多技巧,并不是本文这些简单的基本知识,只能等我之后写一些经验汇总了
23F
搞得这么复杂。
24F
不行,返回空白.
25F
留个记号 以后用的 谢谢分享!
26F
终于搞定了,非常感谢!
27F
永远爱鸟哥~
28F
搞得这么复杂。
B1
@ 海沧房产网 其实子主题还是很不错的,这个使用在所使用的主题更新频率比较高的地方
29F
不错的哦
30F
表示不懂,不敢乱动。
31F
正想用下。
32F
Begin主题按照这个试了下,提示缺失父级主题,并提示需要安装Begin主题,具体如下,不知道问题出在哪
/*
Theme Name: Begin-child
Author: 知更鸟
Template:Begin
Version: 2020/03/10
*/
来自外部的引用