评论

收藏

[办公软件] thematic主题框架之子主题style.css详解

电脑办公 电脑办公 发布于:2021-06-24 13:08 | 阅读数:451 | 评论:0

  如果你还不了解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;  }
  就轻松的控制了文章标题的样式,让我们看看前后的变化
  修改前默认的文章标题样式:
DSC0000.jpg

  经过增加样式,修改后的效果:
DSC0001.jpg

  如果我们想做一个文章列表,或许可以通过CSS来实现,不过这只是一种思维方式,实际上用函数来实现需要的功能更为可靠
.entry-content,.entry-meta,.entry-utility{    display:none;  }
  我们在style.css中增加了这样的一段代码,刷新wordpress前台可以看出以下变化
  未经修改的样式
DSC0002.jpg

  修改后的样式

DSC0003.jpg 当然,这只是很简单的修改,利用样式表,我们可以做很多工作,有关CSS的知识我们不作为主要内容来介绍,获取这方面的知识。
关注下面的标签,发现更多相似文章