WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

常折腾WordPress的朋友可能会遇到这种问题:更新自己的主题后发现所有自己之前修改过的代码都消失了!如果你想修改第三方WordPress主题模板的代码并且保留自己的个性化定制,比如functions.php和style.css等,最好的方法是避免直接修改主题,而是创建一个子主题然后去修改,关于什么是子主题,我用最简单的说法就是像“插件”一样,你创建个主题的插件,然后自己随意添加修改删除,这都不会影响主题本身的代码,所以当主题更新后,你自己修改的东西也不会随之消失。如果你想要个官方一点的说法,参见WordPress官方的:子主题

本文将以WordPress官方主题Twenty Sixteen为例,演示如何创建子主题,并且重写父主题的某个特定样式。

 

1)创建子主题目录 – twentysixteen-child

当你下载并安装好WordPress官方主题Twenty Sixteen的时候,用FTP工具登录你的服务器,会在 /wp-content/themes/ 下找到文件夹“twentysixteen”,这个就是父主题的文件夹、我们要保持它原封不动的情况下创建子主题,在 /wp-content/themes/ 下建立一个名为“twentysixteen-child”的文件夹,这个文件夹就是我们的子主题。现在你的 /wp-content/themes/ 文件夹目录看起来应该是这样:

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

 

2)主题样式表的建立与启用 – style.css

“style.css”是制作子主题唯一的必要的文件。

在 /wp-content/themes/twentysixteen-child/ 文件夹下建立一个后缀为.css的样式表文件:右键【新建】-【文本文档】-名字就叫“style”,并且把文件后缀从“.txt”改成”.css”。并且重命名为“style.css”。现在你的 /wp-content/themes/twentysixteen-child/ 文件夹目录看起来应该是这样:

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

然后打开“style.css”,复制粘贴以下代码并保存到服务器:

以上是参照标准的主题样式表开头信息改写的,其中:

  • Theme Name – 子主题名称(必要),可自行更改,将作为名字显示在后台的【外观】-【主题】中。
  • Theme URI – 子主题网址。
  • Description – 子主题描述。
  • Author – 子主题作者。
  • Author URI – 子主题作者网址。
  • Template – 子主题模板名称(必要),由于我们在创建子主题,所以这个模板名称必须是与父主题一样的才可以,否则我们的主题会在后台不能启用。更改主题名字时要切换到其它主题,否则前台将不能显示。
  • Version – 子主题版本号,这个完全自行决定,一般从1.0开始,以后更新的话记得把这个版本号也更新一下。

回到WordPress的后台,依次展开【外观】-【主题】,你会发现我们的子主题已经可以启用了,点击【启用】开始使用我们的子主题:

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

这时如果你刷新你的网页,会发现所有的样式都消失了,这是因为我们用子主题的“style.css”重写了父主题自带的“style.css”,说白了就是我们的子主题的内容是被WordPress优先考虑使用的。现在我们的网站首页看起来应该是这样(没有任何布局):

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

 

3)继承父主题样式表与重写 – style.css

因为我们只是想建立在父主题上做些修改罢了,所以我们需要让子主题继承父主题的样式,具体做法:打开子主题的“style.css”,在代码最后加上这句:

保存然后刷新首页,你会发现首页的样式全部回来了。这句代码也很好理解,就是让指定子主题一个具体文件然后继承全部样式。现在我们的网站首页看起来应该是这样(已经继承了父主题的布局样式):

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

那么如果我们想修改继承的父主题的某一个特定的内容呢?也很简单,首先我们要回到父主题被继承的文件“style.css”找到想做修改的地方,然后把其名称写在子主题并赋予新的参数即可。这么说可能有点抽象,不如我们来尝试把网站标题文字的颜色修改一下。

但是我们要怎样确定哪段在“style.css”里的代码是标题文字的呢?这个就要用到浏览器的【审查元素】功能,首先在浏览器中用光标对准标题文字,然后点鼠标右键-选择【审查元素】,在新弹出的窗口中被选中的代码即是和你审查元素相关的,如图:

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

在这里我们可以看到有个class的名字是”entry-title”,可以确定这个就是和标题文字相关的元素。再回到父主题的文件夹 /wp-content/themes/twentysixteen/ ,打开文件“style.css”,搜索关键词“entry-title”,在1667行找到带“color”(颜色)关键词的参数,其代码为:

其中“.entry-title a”就是指定具体要修改的参数是和什么有关的,在这里是标题文字,其中属性“color”是调整颜色的,先不要管它,回到子主题的文件夹 /wp-content/themes/twentysixteen-child/ ,打开文件“style.css”,然后我们把刚才的整句代码修改为:

并且保存,这时当我们刷新网站首页时,会发现文章标题字体的颜色已经被更改成了紫色,如图:

WordPress子主题创建方法 | 使用子主题避免更新后丢失自定义代码

我们子主题的文件 /wp-content/themes/twentysixteen-child/style.css 全部代码是这样的:

这里要说明的就是,如果你今后在修改其它子主题时发现某个参数始终不能实现效果,那可以在参数后加“!important”强制重写(比如color: #B00CE8 !important;),如果还不好使,那就可能是没找对地方或者其它原因了。

 

这样我们就成功的继承了父主题的样式并且对特定内容做出了重写。关于样式表“style.css”的其它美化方法也是大同小异,所以这里对于“style.css”在子主题的修改就介绍到这里。下一步你可以参考WordPress官方教程学习关于functions.php在子主题的使用:使用 functions.php

 

参考文献:zh-cn:子主题WordPress Child Themes Tutorial

 

</catmee> 文章全部原创、谢绝转载,作者「BianLei」,如果喜欢欢迎分享链接,相关内容参见本站版权声明
如果您觉得本站的存在对您多少有所帮助,可以用手机支付宝扫一扫以下二维码支付任意金额作为支持:支付宝
本站相关:QQ空间 | Facebook
Tagged . Bookmark the permalink.

用V2EX的Gravatar头像缓存解决WordPress默认头像不显示的问题
用V2EX的Gravatar头像缓存解决WordPress默认头像不显示的问题

WordPress免插件添加文章图片统计!适合图片博客的好功能哟
WordPress免插件添加文章图片统计!适合图片博客的好功能哟

WordPress后台主题添加页面不显示缩略图的解决方法
WordPress后台主题添加页面不显示缩略图的解决方法

免插件修改WordPress后台登陆网址 | 修改wp-login.php后台地址
免插件修改WordPress后台登陆网址 | 修改wp-login.php后台地址

WordPress在文章编辑器添加pre自定义标签按钮
WordPress在文章编辑器添加pre自定义标签按钮

COMMENTS: 4

  1. 老杨 says:

    感觉这个挺鸡肋的,还是喜欢直接改…

  2. Anonymous says:

    我的wordpress改用子主题后,首页的幻灯片和文字还要自己修改

  3. Anonymous says:

    ???

Comment Anonymously? No Problem! | 可以匿名评论了我会说?

Fill up Email address to subscribe reply and display your avatar from Gravatar (If any)
填写邮箱即可显示您在Gravatar的头像