自从打算将 Anders Norén 与 2013 年设计的 Lingonberry 主题作为 bugcc.com 的主题后,吸取之前的经验,打算使用 wordpress 的子主题功能来修改 Lingonberry 主题,因为通过这样的方式,当父主题被更新的时候,子主题所做的修改就可以保存下来。
首先新建一个 Lingonberry 主题的子主题文件夹,取名为:Lingonberry-child
子主题放在 wp-content/themes
目录下属于自己的目录里。下面的结构显示的就是子主题和它的父主题(Lingonberry)在 WordPress 目录结构中的位置:
public_html
--- wp-content
------ themes (主题存放的目录)
--------- Lingonberry (示例中父主题 Lingonberry 的目录)
--------- Lingonberry-child (子主题存放的目录,可以任意命名)
------------ style.css (子主题中不可或缺的文件,文件名必需为 style.css)
------------ functions.php (如果不在子主题中修改功能,可以不用新建这个文件)
接下来开始修改 CSS
在这个文件夹内新建一个同名的 CSS 文件:style.css
用 sublime test(当然你也可以使用其他的编辑软件)打开 style.css
在顶部新增下面的代码:
/*
Theme Name: Lingonberry-child(子主题的名称,必填)
Theme URI: http: //www.bugcc.com/(子主题的主页,选填)
Description: Child theme for the Lingonberry(子主题的描述,选填)
Author: bugcc(子主题的作者,选填)
Author URI: http: //www.bugcc.com/(子主题作者主页,选填)
Template: Lingonberry(父主题名称,注意区分大小写,必填)
Version: 0.1.0(版本号,可以根据自己的修改记录进行填写,例如修改日期什么的)
*/
当然,你可以只填写必填项,如下:
/*
Theme Name: Lingonberry-child(子主题名称,必填)
Template: Lingonberry(父主题名称,注意区分大小写,必填)
*/
接下来在这个 style.css
文件中通过代码导入父主题的原始 CSS 文件,如下:
@import url("../Lingonberry/style.css");
注意 @import 规则 :@import 规则之前没有其他的 CSS 样式规则,如果你将其他的规则置于它之上,那么它将无效,并且父主题的样式表不会被导入。
接下来就可以编写你想修改的 CSS 样式了,例如:
/*
Theme Name: Lingonberry-child(子主题名称,必填)
Template: Lingonberry(父主题名称,注意区分大小写,必填)
*/
@import url("../Lingonberry/style.css");
h1, h2, h3, h4, h5, h6, p, body, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
font-family: ’Microsoft YaHei’, 微软雅黑, Arial, Helvetica, sans-serif;
letter-spacing: 0.06em;
font-size: 1em;
}
如果你想看到修改后的效果,请先到 WordPress 的控制台> 主题,然后激活你的新主题:Lingonberry-child,将修改好并保存的子主题的 style.css 并上传到 Lingonberry-child 子主题的目录下便可。