2009年7月9日星期四

精品博客

精品博客

如何创建 WordPress 主题 CSS 样式表

Posted: 08 Jul 2009 01:44 PM PDT

原文：How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

原文作者：Ian Stewart

译文：如何创建 WordPress 主题 CSS 样式表

译文作者：Young

CSS 可以很复杂，也可以很简单。我开始学习 CSS 的时候，获得很多帮助，所以我也很乐意把经验告诉别人：从代码漂亮的例子中学习。

这里我们将为您布局一个 WordPress 主题 CSS 开发的数据库：

  • 一个使得主题适合所有浏览器的样式表，并且创建一个合理的标准；
  • 另外一个通过巧妙方式更改我们的排版布局的样式表；
  • 一个只适合 WordPress 属性的样式表（保持前面两个样式表的独立性以便以后用于非 WordPress 平台上）；
  • 6 个您能想到的适合所有普通博客和网站布局的流动样式表——并且每个样式表都可调整页面的宽度。

我们这里用到的所有代码都是开源的，符合 GPL 协议，并且都可以在 Your Theme Project 页面看到。您可以随便阅读、复制和粘帖其中任何的文件。

重要的事情先做，先在您的主题根目录下新建一个 "styles"文件夹，那 6 个样式表都会放在这个新文件夹里面，准备好制作那些 CSS 文件了吗？

Reset CSS

这个 Reset CSS 只是在 Eric Meyer 著名的 Reset CSS 基础上稍微做了点修改，它的作用在于使您的主题适合各种浏览器。

它很漂亮，照顾到了每个浏览者的兴趣，让您不必担心读者通过什么浏览器访问您的博客。

它的使用很简单，在 style.css 最顶部的注释下面添加以下代码：

?View Code PHP
1 2 
/* Reset default browser styles */ @import url('styles/reset.css');

重新加载你的网页，看看 reset.css 在各种浏览器下的表现（如果您可以的话），效果很奇妙，是吧？

Rebuild CSS

这个 Rebuild CSS 是我根据早期的 BluePrint CSS 样式表发明的，并且在 Thematic 主题里面加以完善了。这个 Rebuild CSS 的作用在于使页面的垂直边距有规律，方便调整。

我这个 Rebuild CSS 的特色是把两种不同的网页样式结合起来，即字体大小用 px，并采用相对行高，而其他的垂直边距（例如段落和列表）则使用 em。

这是什么意思呢？这方便您以后修改字体的大小——不需要做任何计算——其他的排版因素（例如段落和清单）就会自动调整垂直边距。

rebuild.css 的使用也很简单，在 reset.css 导入后添加以下代码：

?View Code PHP
1 2 3 
/* Rebuild default browser styles */   @import url('styles/rebuild.css');

基本的 WordPress 格式

WordPress 里面有我们每次都需要用到的格式，我所做的就是通过一个叫做 wp.css 的文件调用它们。

现在我们需要设定所有图片的排列方式——包括标题和画廊，同时设定引用的格式。您所需要做的只是为 blockquote 标签添加一个左对齐或者右对齐的 Class 属性。

您能猜测我们将如何使用 wp.css 吗？

?View Code PHP
1 2 
/* Basic WordPress Styles */ @import url('styles/wp.css');

您需要的所有布局

对您的新主题，我已经采取了坚如磐石的布局，这个布局建立在 Sandbox 主题的基础上并且适合您的新 HTML 结构。一共有 6 种布局，其中每一种布局都是流动的（即宽度可以伸缩到符合您的浏览器窗口大小），并且可以简单地固定布局的宽度。

这些布局的使用都很简单。在导入基本的布局注释语下面直接导入其中一个布局就好了，下面就是导入正文在中间的三栏布局的代码：

?View Code PHP
1 2 
/* Import a basic layout */ @import url('styles/3c-b.css');

最简单的固定布局宽度的方法是在 wrapper div 标签里面添加 width 和 margin 属性：

?View Code PHP
1 2 3 4 5 
#wrapper {    margin: 0 auto;   width: 960px; }

额外收获：格式化菜单

作为一种奖励，如果您从未创建一个无序的列表（由 wp_page_menu 自动生成的）并且想让这个列表好看一点，可以参考下面我创建 WordPress 主题时所用的代码：

?View Code PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 
#access {  	margin: 0 0 1.5em 0; 	overflow: auto;   } .skip-link { 	display: none; } .menu ul { 	list-style: none;   	margin: 0; } .menu ul ul { 	display: none;   } .menu li { 	display: inline; } .menu a {   	display: block; 	float: left; }

（以上代码插入于 style.css 文件中。——译者注）

很简单，但是毕竟我把您领入门了，祝您好运！

如何创建 WordPress 主题

这篇文章是如何创建 WordPress 主题教程系列的其中一部分，该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。

  1. 介绍；
  2. WordPress 主题开发工具；
  3. 创建一个 HTML 结构；
  4. 模板和目录结构；
  5. Header 模板；
  6. Index 模板；
  7. Single、Attachment 和 404 模板；
  8. Comments 模板；
  9. Search 和 Page 模板；
  10. Archive、Author、Category 和 Tag 模板；
  11. Sidebar 模板；
  12. 如何创建 WordPress 主题 CSS 样式表。

如果您对这个系列有任何的疑问或者建议，请留言告诉我。

-------------------------------------


© 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)