每次升级主题总是有人问都修改了什么,因为很多人根据自己的喜好对主题进行了个性化修改,虽然我也作了记录,但具体修改了什么文件以及修改了哪个样式属性还真没办法详细记录。那么如何将主题升级到最新版本,而又能保留自己个性的修改呢?答案很简单,使用 WordPress 子主题功能,升级后无需再次修改原主题,只需要启用并修改子主题就可以了,下面就以 ruike 主题为例,创建一个 Ality 主题的子主题。
一、在 WordPress 主题目录 (themes) 新建一个主题文件夹,名称任意,比如:ruike-child 。
二、将 ruike 主题的样式文件 style.css 和 css 目录 (因为 ruike 主题有部分样式文件和字体图标在这个 CSS 目录中) 及图片目录 img,一起复制到新建的主题文件夹 ruike-child 中,也可以将之前修改过 style.css 复制过来。
三、打开复制过来的 style.css 文件,在文件头部添加:
这个是关键,其中的 ruike 名称必须与父主题文件夹名称相同,而且父主题 ruike 也必须与新建的子主题同在 WordPress 主题目录 (themes) 中。
其它内容酌情修改,最终如下:
/* Theme Name: ruike-child Theme URI: http://www.xhsay.com/ Author: luke Author URI: http://www.xhsay.com/ Description: 子主题。 Template:ruike Version: 1.0 */ |
四、登录后台外观→主题中启用这个子主题 ruike-child 之后,就可以根据自己的喜好修改其中的样式。
父主题样式可以通过下面形式加载:
1 |
@import url("../ruike/style.css"); |
代码必须写在所有样式之前,也就是文件头的后面,子主题样式文件中只需添加自己修改的部分即可。
比如:将导航菜单改为红色,修改下面 5 个选择器样式:
#site-nav { background:#d03f42; } #site-nav li { border-right:1pxsolid#f64f53; border-left:1pxsolid#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 等复制过来,进行个性化修改。