博客 » WordPress » WordPress 主题教程 #11：宽度和布局

WordPress 主题教程 #11：宽度和布局

Denis 2007年06月21日

宽度和布局是从零开始创建 WordPress 主题系列教程的第十一篇，这篇将介绍如何设置每个 DIV 的宽度和布局排版，并且也会展示如何让主题显示正确，并同时在 Firefox 和 IE 下兼容，显示一致。

在我们开始之前，打开 Xampp Control，主题文件夹，Firefox 浏览器，IE 浏览器，index.php和style.css这两个文件。

第1步：设置页面总体宽度

现在我们首先要确定的是主题的总体宽度。我们使用 750px；主题的大小取决于博客绝大多数访问者的屏幕分辨率。需要避免的是使用过大宽度的的主题，如果博客的读者都大多数使用 800px × 600px 的屏幕，这样的话，如果是使用 900px 宽的主题将会有 100多像素超出他们的屏幕，显然这是对用户很不友好的。

不管怎样，我们怎么样把主题的总体宽度设置为 750px 呢？

我们需要把现在主题中的所有的东西（header，container，sidebar 和 footer）放入一个 750px 的 DIV 标签中。

在 <body> 之后增加：<div id=”wrapper”>

在 </body> 之前增加：</div>

在 style.css 文件中输入以下代码：
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

在 CSS，# 号是通过 id 来定位页面中的元素，而点号是通过 class 来定位页面中的元素，如果你的代码是 <div class=”wrapper”>，那么就应该用 .wrapper 来替代 #wrapper 去定位 wrapper 这个 DIV 标签。

同时保存 index.php 和 style.css 文件。刷新 Firefox 和 IE 浏览器（按 F5）查看所做的改动。

详细解释：

margin: 0 auto 0 auto; 意思是（注意顺序）：0上页边空白，自动右页面空白，0下页边空白和自动左页面空白。从现在开始，记得设置左右页边空白为自动将使得居中对齐。
width: 750px; 显而易见是 750 像素。
text-align: left; 是让 wrapper DIV 中的文本向左对齐因为我们等下要要将 body{ text-align: left;} 改成 text-align: center;

第2步：自动页面居中

把 body{} 中的 text-align: left; 改成 text-align: center;。

为什么？（我假设你使用的是 Firefox 和 Internet Explorer 6）。你的布局可能你看起来是正确的，但对于使用早前版本的 IE 用户可能不正确。还记得设置左边和右边的页边空白为自动是居中吗？但是这并不是对所有的 IE 都适用，所以 body{ text-align: center; } 是让 wrapper DIV 居中在旧版本 IE 的一种解决方案。

（随便说一下，在 Firefox 和 IE 中文本大小是不同的，我们稍后解决。）

第3步：设置 header 宽度和布局

让 Header 浮到左边并且设置它的宽度为 750px：

#header{
float: left;
width: 750px;
}

第4步：设置 Container 宽度和布局

让 Container 浮到左边并且宽度为 500px：

#container{
float: left;
width: 500px;
}

第5步：设置 Sidebar 宽度和布局

让 Sidebar 浮到左边，宽度为240px，并且给它灰色的背景：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

#ffffff 是白色而background: #eeeeee; 是非常浅的灰色。我们给侧边栏增加一个背景颜色只是去查看当增加剩下的 10 像素之后的不同之处。

第6步：设置 Footer 的宽度和布局

让 Footer 浮到左边，左右两边都没有东西，并且宽度为：750px：

#footer{
clear: both;
float: left;
width: 750px;
}

Header 和 Footer 的样式有什么区别呢？答案是 footer{} 中有 clear: both;。它在那儿使得 Footer 不能和它上面的东西（如 Sidebar 或者 Container）连接起来。

保存并刷新浏览器。

第7步：给侧边栏增加其余的 10 像素

给侧边栏增加其余的 10 像素的页边空白。现在侧边栏的 CSS 应该是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

保存并刷新浏览器去查看 10 像素的空白增加到侧边栏的左边了。

margin: 0 0 0 10px; 具体的意思是：上边空白为0，右边空白为0，底部空白为0，左边空白为10像素。当大小为0的时候，px 单位不是必需的。

第8步（额外的步骤）：修正 IE 的双倍页边距 bug

Internet Explorer 有个双倍页边距的 bug，这样在 IE 下，我们的页面距就是 20像素，20像素的页边距可能会破坏布局并把侧边栏挤到页面的底部，因为一个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。为了解决这个问题，增加 display: inline; 到侧边栏。现在你的侧边栏应该是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

这里是现在的 index 和 style 文件的内容。

WordPress 主题教程

翻译自：http://www.wpdesigner.com/2007/03/12/wp-theme-lesson-11-widths-and-floats/，并根据中文习惯和个人理解做了修改！

标签：WordPress WordPress 主题教程

分享到 Google Buzz

33 条评论添加你的评论 →

scaredcrow » 评论跟踪

1. scaredcrow | 2007:06:21 - 23:06:10 | #

你好，我想问一下，我那个RECENT COMMENTS插件那里好像有点显示的问题，在IE6下显示是正常的，但是在IE7下，如果标题过长，就会重叠。。。能不能帮忙解决下啊？谢谢了。。。。期待中。。。
登陆回复该留言
Denis » 评论跟踪

2. Denis | 2007:06:22 - 00:18:07 | #

这个问题我可能帮不了你，因为我没有用这插件，现在也比较忙，没有时间去帮你研究它。不过我提供我的解决方案，本博客使用的Most Recent Comments 不是通过插件来实现的，而是通过函数实现：get_recent_comments.txt。把该函数复制到functions.php上，然后通过下面方式在Sidebar.php中调用它：
< ?php BX_get_recent_comments(7); ?>
登陆回复该留言
scaredcrow » 评论跟踪

3. scaredcrow | 2007:06:22 - 13:00:49 | #

哈哈！谢谢了。问题解决了。。。用了另一个插件。
不过还是再去试下你的方法
登陆回复该留言
kusanagi » 评论跟踪

4. kusanagi | 2007:08:01 - 22:33:46 | #

这一段是我的Recent Posts的代码想请教一下:)
后面的那个5是限制最近发表日志的字数,但仅对英文单词有效,也就是内容只显示5个词,但这个对中文的日志不起作用,想问下要怎样改才可以限制中文字数呢?
登陆回复该留言
kusanagi » 评论跟踪

5. kusanagi | 2007:08:01 - 22:35:51 | #

?php
$mycontent = getWords(get_the_content(), 5);?

- -没加括号
登陆回复该留言
Denis » 评论跟踪

6. Denis | 2007:08:01 - 22:59:24 | #

代码呢？
登陆回复该留言
kusanagi » 评论跟踪

7. kusanagi | 2007:08:02 - 12:09:57 | #

http://images.blogcn.com//2007/8/2/12/kofgeneration,20070802121330039.jpg

-_- 代码打不出来所以截了个图
登陆回复该留言
Denis » 评论跟踪

8. Denis | 2007:08:02 - 14:40:05 | #

看看 get_recent_comments.txt 中的第一个函数，或许就知道怎么做了
登陆回复该留言
Ks Home » 评论跟踪

9. Ks Home | 2007:08:20 - 10:53:00 | #

2010年以后LCD显示器将占领70%的显示器市场，所以你说用超过750px会给用户体验带来不便，这个在以后来说是不可能的
现在有多少显示器分辨率还是使用800×600呢
个人以为宽点好看些～～～
登陆回复该留言
新手 » 评论跟踪

10. 新手 | 2007:09:11 - 16:33:34 | #

我作出来的怎么都是靠左边请问是哪的问提?
登陆回复该留言
xBodhi » 评论跟踪

11. xBodhi | 2007:09:23 - 04:37:49 | #

怎么是每100像素一英寸呢……
登陆回复该留言
eagleguo998 » 评论跟踪

12. eagleguo998 | 2007:11:23 - 00:54:17 | #

IE与Opera没有办法正常解析你在这页里说的CSS效果。
Firefox效果正常。
初学者，能帮帮我吗？
登陆回复该留言
eagleguo998 » 评论跟踪

13. eagleguo998 | 2007:11:23 - 00:58:10 | #

我IE的版本是6.0.2900，
这个版本应该在你所说的IE6的行列内吧。不过还是不能正常居中显示。
登陆回复该留言
Denis » 评论跟踪

14. Denis | 2007:11:23 - 13:07:17 | #

@eagleguo998 这个是CSS的问题，好好学下 CSS 吧！
登陆回复该留言
- BlueDrifter » 评论跟踪
  
  15. BlueDrifter | 2008:06:01 - 18:06:08 | #
  
  雪山，之前的都很顺利，但是此章对于页面的定义我这里都没有效果。检查了CSS编码也没有错误，难道是因为不支持WP2.5.1？
  期待你的回复。
  登陆回复该留言
  - BlueDrifter » 评论跟踪
    
    16. BlueDrifter | 2008:06:02 - 13:47:22 | #
    
    终于找到原因了，原来是全角和半角搞错，导致所有的ID和Class定义未被识别。
    希望别人不要犯和我一样的错误。
    登陆回复该留言
    - 痞子C » 评论跟踪
      
      17. 痞子C | 2008:07:08 - 16:56:20 | #
      
      我就和你犯了一样的错误啊
      我在W3C监测里
      发现了46个错误啊，最后不得不再把雪山大哥的INDEX.PHP又复制了一遍~~
      登陆回复该留言
Persephone » 评论跟踪

18. Persephone | 2007:12:12 - 14:31:02 | #

呵呵，我跟 eagleguo998这位朋友正好相反，IE显示正常，FIREFOX反而显不出来。
登陆回复该留言
Justin » 评论跟踪

19. Justin | 2008:04:06 - 09:57:49 | #

代码怎么放到http://validator.w3.org/check上有42个error啊，我试的也会有这么多，怎么解决啊？
登陆回复该留言
- 痞子C » 评论跟踪
  
  20. 痞子C | 2008:07:08 - 16:58:39 | #
  
  是输入法没有调好啊
  暂时还是复制一下源文件吧~~
  登陆回复该留言
aylie » 评论跟踪

21. aylie | 2008:06:25 - 16:43:29 | #

学习了~
登陆回复该留言
hedy » 评论跟踪

22. hedy | 2008:07:09 - 10:06:34 | #

为什么提示未定义侧边栏呢？请问应该怎么改？
登陆回复该留言
hedy » 评论跟踪

23. hedy | 2008:07:09 - 10:10:33 | #

哦，好了，我把functions的s丢了，(*^__^*) 嘻嘻……
登陆回复该留言
xiami » 评论跟踪

24. xiami | 2008:08:20 - 21:35:43 | #

# text-align: left; 是让 wrapper DIV 中的文本向左对齐因为你会改变 body{ text-align: left;} 到 text-align: center;
在wrapper中为什么还要加个text-align:left;
为什么说会变成剧中对齐？
期待回答
登陆回复该留言
xiami » 评论跟踪

25. xiami | 2008:08:20 - 21:59:02 | #

为什么侧边栏用class有什么方便的地方吗？用id是不是也行作者为什么强调用class.
另外siderbar左边留个10px的空间，不留行吗
这直接导致了文章的第8步我看不懂。另外关于ie的bug什么的也不懂
期待回答！！！
登陆回复该留言
- 纪小年 » 评论跟踪
  
  26. 纪小年 | 2008:12:20 - 22:50:31 | #
  
  另外siderbar左边留个10px的空间，不留行吗
  关于这个问题我可以回答你，假如你不留那10px的空间，你会发现你的日志内容和你的侧边栏内容连在了一起，虽然他们的背景色不一样。
  登陆回复该留言
纪小年 » 评论跟踪

27. 纪小年 | 2008:12:20 - 22:53:26 | #

我的问题是：假如我的日志没有一行写满的的，那个侧边栏就会随着日志里面最长的哪一行而靠左
个人感觉这样好一些：
.sidebar{
float:right;←这里改成right
width:240px;
background:#eeeeee;
margin:0 0 0 10px;
display:inline;
}
登陆回复该留言
tintin » 评论跟踪

28. tintin | 2009:01:14 - 15:37:52 | #

忍不住想夸夸，写得真好，非常详细~~先感谢~~

小弟跟着步骤一步步走都完全没有问题，到这篇教程的时候，遇到了一个小问题：我发布了一篇日志，图片的宽度超过了container的宽500px，结果在IE下浏览时，右边的sidebar被挤到了日志的最下面，而不是与日志对齐；不过在FIREFOX下面一切正常，图片多出去的部分，被左边的sidebar遮住了。
开始以为是magin设置的10px有问题，结果改来改去也没办法，最后试了试登录后台把图片缩小，结果就可以了。
难道在写日志的时候，图片宽必须设成小于500px吗，还是小弟在哪里做错了，请大虾们指点，谢谢~~
登陆回复该留言
- Denis » 评论跟踪
  
  29. Denis | 2009:01:14 - 16:05:47 | #
  
  是这样的。
  登陆回复该留言
我是小弟 » 评论跟踪

30. 我是小弟 | 2009:02:20 - 12:58:13 | #

.sidebar{
float:left;——这里明明是left，为什么sidebar不显示在日志内容的下面，而显示在右边呢？不是要right才显示在右边吗？希望有人回答，谢谢了！
width:240px;
background:#eeeeee;
margin:0 0 0 10px;
}
登陆回复该留言
- Denis » 评论跟踪
  
  31. Denis | 2010:01:17 - 01:32:49 | #
  
  如果 DIV 的 float 设置为 left，那么他的 display 就不是 block 了，一个挨着一个排了。除非总体宽度超过了，才会到下边！
  登陆回复该留言
Twitter » 评论跟踪

32. Twitter | 2009:03:24 - 12:49:24 | #

雪山大哥，我跟着教程一步步做到这里，只出现过2个错误，不知能否帮忙解决下：
1、php_e()这个函数输出字符串时全部都不好用，提示错误函数未定义。
2、我得搜索框那步，始终是在第二行显示，不会和前面得那个点点一行显示，比较郁闷！
3、做到这里之后，我在火狐和IE6上测试，我得台式机上面是IE6整体居中了，火狐不居中，在我得笔记本上测试，火狐居中了，IE6上不居中，不知道是什么原因！
望雪上大哥抽时间解答下！谢谢！
登陆回复该留言
- Denis » 评论跟踪
  
  33. Denis | 2010:01:17 - 01:34:32 | #
  
  1. 写错了， _e 而不是 php_e
  2. 不知道你说什么
  3. 这个兼容性问题，直接靠你自己去搞！
  登陆回复该留言

发表评论

你必须登陆之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼：

你也可选择直接在本站注册。