使用WordPress子主题保留个性化修改

每次升级主题总是有人问都修改了什么,因为很多人根据自己的喜好对主题进行了个性化修改,虽然我也作了记录,但具体修改了什么文件以及修改了哪个样式属性还真没办法详细记录。那么如何将主题升级到最新版本,而又能保留自己个性的修改呢?答案很简单,使用WordPress子主题功能,升级后无需再次修改原主题,只需要启用并修改子主题就可以了,下面就以Ality主题为例,创建一个Ality主题的子主题。

一、在WordPress主题目录(themes)新建一个主题文件夹,名称任意,比如:Ality-child。

二、将Ality主题的样式文件style.css和css目录(因为Ality主题有部分样式文件和字体图标在这个CSS目录中)及图片目录img,一起复制到新建的主题文件夹Ality-child中,也可以将之前修改过style.css复制过来。

三、打开复制过来的style.css文件,在文件头部添加:

  1. Template:Ality

这个是关键,其中的Ality名称必须与父主题文件夹名称相同,而且父主题Ality也必须与新建的子主题同在WordPress主题目录(themes)中。

其它内容酌情修改,最终如下:

  1. /*
  2. Theme Name: Ality-child
  3. Theme URI: https://zmingcx.com/wordpress-theme-ality.html
  4. Author: 知更鸟
  5. Author URI: https://zmingcx.com/
  6. Description:  Ality子主题。
  7. Template:Ality
  8. Version: 0.2
  9. */

四、登录后台外观→主题中启用这个子主题Ality-child之后,就可以根据自己的喜好修改其中的样式。

父主题样式可以通过下面形式加载:

  1. @import url("../Ality/style.css");

代码必须写在所有样式之前,也就是文件头的后面,子主题样式文件中只需添加自己修改的部分即可。

比如:将导航菜单改为红色,修改下面5个选择器样式:

展开代码
展开收缩

  1. #site-nav {
  2.     background#d03f42;
  3. }
  4. #site-nav li {
  5.     border-right1px solid #f64f53;
  6.     border-left1px solid #a12e30;
  7. }
  8. #site-nav li a:hover, #site-nav li a:active {
  9.     background#a52d30;
  10. }
  11. #site-nav.current_page_item , #site-nav .current-menu-item {
  12.     background#a12e30;
  13. }
  14. #site-nav li a:hover, #site-nav li a:active {
  15.     background#a12e30;
  16. }

子主题继承父主题所有功能,可以在子主题中新建一个functions.php文件,增加新的功能,或者去掉父主题的部分功能。

还可以将父主题其它模板文件比如index.php、single.php、archive.php等复制过来,进行个性化修改。

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  59  访客  48  作者  10
    • l罗伯特
      l罗伯特 2

      鸟哥,这个功能好,原理是什么啊,模板?

        • 知更鸟
          知更鸟

          @ l罗伯特 还需要什么原理,这就是WordPress自带的子主题功能

            • cpder
              cpder 4

              @ 知更鸟 貌似functions.php也可以自定义了,但是子模版的functions.php能调用父模板的函数么?

                • 知更鸟
                  知更鸟

                  @ cpder 子主题延续父主题所有功能,也可以在子主题中新建一个functions.php文件,从而增加新的功能,但不能与父主题代码有重复

                    • Aaron
                      Aaron 0

                      @ 知更鸟 我启用了子主题,所有功能都没有了,主题选项都是空的,像一个新主题,前台菜单都没有了,要怎么引入父主题的配置呀!

              • 氪星人
                氪星人 3

                鸟哥 移动端的搜索和登录去掉了吗? 还有鸟哥如何隐藏移动导航菜单?提个建议 移动端导航能否做成这种 mufeng.me (移动端的),过渡很平稳~

                  • 知更鸟
                    知更鸟

                    @ 氪星人 我用了缓存插件,所以有时看不见移动端的东西
                    那个站用的是单独的移动版主题,不存在什么过渡,与我的主题不在一个层面上

                  • 花卉网
                    花卉网 4

                    这个功能确实很好,以前没听说过,学习了

                    • NIGHT
                      NIGHT 3

                      前几天就是老更新,所以已经使用了子主题,非常好用的功能!现在再也不怕主题更新了 :lol: :lol:

                        • 知更鸟
                          知更鸟

                          @ NIGHT 你这个CMS板子,之前看过,弄的非常不错了,让我都有些不想作CMS了 :arrow:

                            • NIGHT
                              NIGHT 3

                              @ 知更鸟 工作太忙了,慢慢修改了一些,现在首页才完成了上中部的布局,下半部及分类的模板等还没有弄好!还有就是依托了你的后台主题选项,对首页的调用做了一些增强。现在基本是完成了首页全后台控制调用! :mrgreen: :mrgreen:

                              • Robin
                                Robin 3

                                @ 知更鸟 这就是我上次在这发的 哈哈 他改的不错 不过还是期待鸟哥你的cms版本 期待着

                                • 老虎
                                  老虎 6

                                  @ 知更鸟 个人觉得没有hotnewspro的cms好,有些杂乱呵呵

                                    • NIGHT
                                      NIGHT 3

                                      @ 老虎 主要是中间的滚动层没放好位置,现在往下移了一层,就不会了!

                                  • Robin
                                    Robin 3

                                    @ NIGHT 大侠 原来是你改的CMS主题 很不错啊 啥时候完工

                                      • NIGHT
                                        NIGHT 3

                                        @ Robin 蜗牛速度中,主要是要兼顾美观啊 所以静态页面都做好了 还在考虑把一些层放在什么位置好看!

                                      • 花开花落
                                        花开花落 3

                                        @ NIGHT 博主的中间幻灯(鸟哥的上部幻灯)代码能提供一下吗?

                                          • cpder
                                            cpder 4

                                            @ 花开花落 其实推敲一下自己都可以弄出来,如果给代码,那要修改的地方有点多了,期待收费版吧 :lol:

                                              • 成全
                                                成全 1

                                                @ cpder 幻灯的代码确实好弄,我前后台都已经弄出来了,通过自定义栏目的方式选择要加入幻灯的文章;但是那个第一篇文章下、广告下那个图片文章我就纠结了,静态的可以弄,但是我想还是通过自定义栏目的方式显示4篇文章的特色图,这需要一个循环,但是貌似跟博客的主循环有冲突,导致重复显示,因为不懂PHP所以也不知道要怎么解决了……!

                                          • php程序员
                                            php程序员 1

                                            wp的主题模板就是修修改改的比较多。

                                            • lzy
                                              lzy 1

                                              鸟哥,我提一个建议,建议不要鼠标放在图片上,图片变白的这个功能,感觉有点鸡肋,个人意见啊。

                                              • lzy
                                                lzy 1

                                                有点影响用户体验!

                                                • wordpress boy
                                                  wordpress boy 1

                                                  总体感觉不错

                                                  • 多壳
                                                    多壳 1

                                                    鸟哥,手机版的登录界面,密码框会被键盘挡住,看不到,建议修改下

                                                      • 知更鸟
                                                        知更鸟

                                                        @ 多壳 汗,这也是问题?弄个2K屏的大手机问题迎刃而解

                                                        • 驭象人
                                                          驭象人 4

                                                          @ 多壳 我手机屏幕分辨率小也不会出现这个问题哦。可能是你浏览器的问题或者操作系统的缺陷

                                                        • 七支剑
                                                          七支剑 5

                                                          原来还有这个功能 多谢

                                                          • 钓有道
                                                            钓有道 2

                                                            鸟哥,我的网站评论发表之后怎么不能像你网站这样显示呢?我的发表之后是这样显示的:“小王发表在《朝天钩钓法经验谈》”,我想它变成这样的:“小王:写得不错,楼主给力了!!”

                                                            • 图书资讯
                                                              图书资讯 2

                                                              支持,正在考虑换主题了!这个不错哦!

                                                              • 网上买书
                                                                网上买书 2

                                                                子主题是不是相当于新建的一个页面了。

                                                                • 购物生活好店品
                                                                  购物生活好店品 4

                                                                  这个功能非常棒~~~~以后肯定会有用到的地方

                                                                  • 爱账号
                                                                    爱账号 1

                                                                    永远爱鸟哥啊~

                                                                    • 老虎
                                                                      老虎 6

                                                                      其实子主题很多人在用,修改style.css特别好,但是也有局限性,比如inc文件夹下的如果修改了貌似就没用,得在父主题里改。下次又覆盖。比如修改了某些图片,修改了某些模版的某些功能,等等。

                                                                      • 成全
                                                                        成全 1

                                                                        鸟哥,我想问下,博客首页的那个第一篇文章下、广告下的那个图片文章能不能改成显示4篇文章的特色图,通过自定义栏目来选择要显示的文章,用自定义栏目的话会有一个循环,貌似会跟主循环有冲突,导致会重复显示第一篇文章和那个图片文章,因为我不懂PHP所以也不知道要怎么解决,不知道这个可不可以做出来的!

                                                                          • 知更鸟
                                                                            知更鸟

                                                                            @ 成全 神马皆有可能,不过没人会免费帮你改这改那

                                                                              • 成全
                                                                                成全 1

                                                                                @ 知更鸟 感觉是可以弄出来的,就是还没找到方法 :sad: ,再慢慢琢磨琢磨吧……

                                                                            • 锦程
                                                                              锦程 0

                                                                              放在 GitHub 上就可以方便查看更新变动的代码了。

                                                                              • Z搜集
                                                                                Z搜集 1

                                                                                :???: 居然才看到这篇文章,之前一直手动修改,当然自己之前都先做了记录。
                                                                                ——这样可以方便了,哇哈哈哈哈~~~

                                                                                  • Z搜集
                                                                                    Z搜集 1

                                                                                    @ Z搜集 不过话说回来,这会不会一定程度上影响网站性能

                                                                                      • 知更鸟
                                                                                        知更鸟

                                                                                        @ Z搜集 修改较少,无影响,比如这个子主题:
                                                                                        http://www.woniu778.com/
                                                                                        改动很大,基本没什么影响

                                                                                    • 陈莎莎艰辛祛痘史
                                                                                      陈莎莎艰辛祛痘史 1

                                                                                      不错!学习了。

                                                                                      • 饿狼
                                                                                        饿狼 1

                                                                                        想请教,比如修改了mediaqueries.css、script.js文件,那么就应该需要加载的是子主题下的相应文件,看http://www.woniu778.com/的网页源代码,发现其加载的也是子主题路径。但这两个是在functions.php内的ality_scripts()加载,网上子主题修改教程中的方法,只能到得出错提示。想请教怎样达到加载修改后的这两个文件。谢谢站长分享主题

                                                                                          • 知更鸟
                                                                                            知更鸟

                                                                                            @ 饿狼 一两句还真说不清楚
                                                                                            有时间会写个子主题的进阶教程

                                                                                          • Z搜集
                                                                                            Z搜集 1

                                                                                            :sad: 鸟哥,我为了主题协调性是更改了主题色,即要把你的主色调蓝色改成其他的,故CSS要更改一大串关于颜色的代码,于是想想还是每次更新用查找替换方便,而且也不怕因为你更改了原先的CSS而发生不必要的错误。同时也是因为要改几个PHP细节代码怕不适合你的新版本。另外我发现img图片(已经COPY过去了)不会调用子主题的文件夹内的,然后我只得把img重新COPY到父主题文件夹内。个人感觉子主题不适合大改动,或者我懂的还太少。 :mrgreen:

                                                                                              • 知更鸟
                                                                                                知更鸟

                                                                                                @ Z搜集 子主题确实还有很多技巧,并不是本文这些简单的基本知识,只能等我之后写一些经验汇总了

                                                                                              • 百家网络博客
                                                                                                百家网络博客 2

                                                                                                搞得这么复杂。

                                                                                                • 阿古
                                                                                                  阿古 2

                                                                                                  不行,返回空白.

                                                                                                  • 格娜小屋
                                                                                                    格娜小屋 0

                                                                                                    留个记号 以后用的 谢谢分享! :razz:

                                                                                                    • 申宝玉
                                                                                                      申宝玉 1

                                                                                                      终于搞定了,非常感谢!

                                                                                                      • 海沧二手房
                                                                                                        海沧二手房 2

                                                                                                        永远爱鸟哥~

                                                                                                        • 海沧房产网
                                                                                                          海沧房产网 2

                                                                                                          搞得这么复杂。

                                                                                                            • boke123导航
                                                                                                              boke123导航 5

                                                                                                              @ 海沧房产网 其实子主题还是很不错的,这个使用在所使用的主题更新频率比较高的地方

                                                                                                            • 速美
                                                                                                              速美 0

                                                                                                              不错的哦

                                                                                                              • 坊子帮
                                                                                                                坊子帮 3

                                                                                                                表示不懂,不敢乱动。 :razz:

                                                                                                                • 平行进口车上牌
                                                                                                                  平行进口车上牌 1

                                                                                                                  正想用下。

                                                                                                                  • 活动线报网
                                                                                                                    活动线报网 2

                                                                                                                    Begin主题按照这个试了下,提示缺失父级主题,并提示需要安装Begin主题,具体如下,不知道问题出在哪
                                                                                                                    /*
                                                                                                                    Theme Name: Begin-child
                                                                                                                    Author: 知更鸟
                                                                                                                    Template:Begin
                                                                                                                    Version: 2020/03/10
                                                                                                                    */

                                                                                                                  匿名

                                                                                                                  发表评论

                                                                                                                  匿名网友
                                                                                                                  :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                                                                                  拖动滑块以完成验证