如果你还不了解thematic,如果你希望能快速敏捷的进行wordpress主题开发,我们强烈建议你看一下《wordpress主题框架之Thematic介绍 》这篇文章,这篇文章能让你对thematic有个初步的认识。在上一篇文章中我们介绍了《thematic主题框架安装》,这篇文章开始介绍Thematic主题框架的子主题的style.css样式表的介绍。
之所以称之为子主题(Child Theme),是因为子主题不能独立的存在,必须以来Thematic框架而进行开发,这些内容我们在上一篇文章中有过介绍。
现在我们进入到wp-content\themes\thematicsamplechildtheme目录下,在这里有个style.css,这个文件控制了wordpress的样式,所以这个文件也是至关重要的。打开这个文件显示出以下CSS样式:/*为了更容易的理解以下内容的作用,部分文字的背景在本文编辑时加入了颜色Theme Name:后面的字符就是在wordpress后台看到的主题名称,你可以把这段字符修改为任何你喜欢的东西,例如Theme Name:My Theme,经过这样的修改,在后台显示的主题名称就变成了My Theme Theme Name: A Thematic Child Theme Theme URI: 后面的字符应该是一个网址,也就是发布这个主题的网址.这个选项不是必填的Theme URI: Description:后面的字符是关于这个主题的描述,也不是必填的.Description: Use this theme to start your Thematic Child Theme development. Author: 主题的作者 Author: Ian StewartAuthor URI:主题作者的主页,不过感觉有种***子放屁的感觉和Theme URI有重复的感觉Author URI: http://themeshaper.com/Template:这个是关键,这后面的字符决定了我们要调用哪个框架里的内容,这个框架的位置和我们正在开发的主题一定要处于同一级目录,这些东西我们在上一篇文章中讲过,这里的内容不要进行修改,保持现在这样就很完美了 Template: thematicVersion:这个选项只对作者进行更新记录有些用处,如果你想分享你开发的主题,这里还是需要精心的设计的 Version: 1.0Tags:看样子是个标签,没什么实际的意义 Tags: Thematic . Thematic is © Ian Stewart http://themeshaper.com/ . / /以下的内容是引用Thematic的CSS样式表,看看下面的文件名就感觉Thematic提供的CSS很全面也很强大*// Reset browser defaults / @import url('../thematic/library/styles/reset.css'); /* Apply basic typography styles / @import url('../thematic/library/styles/typography.css'); / Apply a basic layout */ @import url('../thematic/library/layouts/2c-r-fixed.css'); / Apply basic p_w_picpath styles / @import url('../thematic/library/styles/p_w_picpaths.css'); /* Apply default theme styles and colors / / It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */ @import url('../thematic/library/styles/default.css'); / Prepare theme for plugins / @import url('../thematic/library/styles/plugins.css'); 大概看了一下这个styele.css文件我们就能体会到框架的好处及框架开发者的良苦用心。
我们在进行子主题开发时,只需要在这个样式表中设计我们的样式即可,如果在引入的Thematic中已经存在的选择符,我们在这个文件中重新定义一下这个选择符的样式即可。
例如我们想改变文章标题的大小,那么我们可以通过在wp-content\themes\thematicsamplechildtheme/style.css这个文件最下面加入以下代码就可以改变文章标题的样式/* Theme Name: A Thematic Child Theme Theme URI: Description: Use this theme to start your Thematic Child Theme development. Author: Ian Stewart Author URI: http://themeshaper.com/ Template: thematic Version: 1.0 Tags: Thematic . Thematic is © Ian Stewart http://themeshaper.com/ . / / Reset browser defaults */ @import url('../thematic/library/styles/reset.css'); / Apply basic typography styles / @import url('../thematic/library/styles/typography.css'); /* Apply a basic layout / @import url('../thematic/library/layouts/2c-r-fixed.css'); / Apply basic p_w_picpath styles */ @import url('../thematic/library/styles/p_w_picpaths.css'); / Apply default theme styles and colors / /* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous / @import url('../thematic/library/styles/default.css'); / Prepare theme for plugins */ @import url('../thematic/library/styles/plugins.css'); .entry-title { font-family:Arial,sans-serif; font-size:10px; font-weight:bold; line-height:26px; padding:0 0 7px 0; } 我们在这个文件的结尾处增加了.entry-title { font-family:Arial,sans-serif; font-size:26px; font-weight:bold; line-height:26px; padding:0 0 7px 0; } 就轻松的控制了文章标题的样式,让我们看看前后的变化
修改前默认的文章标题样式:
经过增加样式,修改后的效果:
如果我们想做一个文章列表,或许可以通过CSS来实现,不过这只是一种思维方式,实际上用函数来实现需要的功能更为可靠.entry-content,.entry-meta,.entry-utility{ display:none; } 我们在style.css中增加了这样的一段代码,刷新wordpress前台可以看出以下变化
未经修改的样式
修改后的样式
当然,这只是很简单的修改,利用样式表,我们可以做很多工作,有关CSS的知识我们不作为主要内容来介绍,获取这方面的知识。
|