首页 » 建站教程 » Blog教程 » Wordpress » 浏览内容

WordPress：将Blogroll 分为两栏（一）

2012-02-14 01:16 104 0 发表评论
标签：，

很多 Blogger 都会遇到这么一个问题: 当侧边栏某个列表中的项目过多时, 它看起来细长而不饱满, 浪费空间又不美观.
为解决这问题各施其法, 有的选择了一个三栏的主题, 感观上会和谐一点; 有的随机显示几个链接, 让它看起来不那么狭长; 有的是一不做二不休地, 首页不将它显示出来 (如: Blogroll 放 Links 页); 但还有一些人, 他们将列表的内容划分为两半, 空间得到充分利用, 界面也好看.
小弟也是看到别人的这个巧妙设计, 才得到启发的. 点子很好, 但我不能看别人代码呀, 只好自己想法子了…
半年前我写过一篇日志, 让侧边栏列表一分为二. 那是用 JavaScript 实现的, 是一个相当愚蠢的办法, 而且不能支持 Widget. 但其实可以用 PHP 生成我们想要的效果. 看! 看! 就是右图的效果…

计划:
整个教程将以 Blogroll 为例, 会分成几个部分开展.
第一部分, 也就是这次, 我将会分析一下页面结构, 为以后的部分做准备. 这是一个重要的环节, 因为要解决 IE 和其他浏览器间的不兼容现象. (过程中我们会见到 IE 的不可理喻)
第二部分, 我会尝试改写 WordPress 的源代码或者尝试自己写一个以达到我们的目标.
第三部分, 我将会介绍一下, 如何将第二部分的内容做成支持 Widget 的版本.
第四部分, … (先计划这么多吧, 完成了前面的再说.)
这次介绍的第一部分需要一些 HTML 基础和 CSS 知识, 你准备好了吗?

 

原始版本:
我们先得看看 Blogroll 目前的结构.

<h3>Widget Title</h3>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
	<li>Item 6</li>
</ul>

再来看看它的显示效果: Firefox, IE6/7
嗯, 好! 还蛮工整的, 但是列表的右边空空的, 又浪费空间又难看. 最好我们可以将它分成两栏, 这样的话, 用三行就能够将六项给显示了. 看来需要改造一下看看…

改造版本 1
本来是一行放一个, 而改造的目标是一行放两, 改造后的代码如下:

<h3>Widget Title</h3>
<ul>
	<li>
		<div style="float:left;width:50%;">item 1</div>
		<div style="float:left;width:50%;">item 2</div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 3</div>
		<div style="float:left;width:50%;">item 4</div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 5</div>
		<div style="float:left;width:50%;">item 6</div>
	</li>
</ul>

改造版 1 的显示效果: Firefox, IE6/7
为了突出主要的样式, 我将 style 属性直接加到标签里面了.
在 IE6 和 IE7 中已经得到我们想要的效果了, 很好! 但是在 Firefox, 甚至其他任何内核的浏览器中, 都错位了, 这是因为两个浮动的标签没有固定下来, 跟它下方的东西重叠在一起了. 那么, 继续改…

改造版本 2
在这个版本中, 我们需要将浮动的标签固定起来. 为此我们选用 CSS 中的 clear:both 来让它左右两边都没有东西 (将 clear 后面的东西挤下去), 改造后的代码如下:

<h3>Widget Title</h3>
<ul>
	<li>
		<div style="float:left;width:50%;">item 1</div>
		<div style="float:left;width:50%;">item 2</div>
		<div style="clear:both;"></div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 3</div>
		<div style="float:left;width:50%;">item 4</div>
		<div style="clear:both;"></div>
	</li>
	<li>
		<div style="float:left;width:50%;">item 5</div>
		<div style="float:left;width:50%;">item 6</div>
		<div style="clear:both;"></div>
	</li>
</ul>

改造版 2 的显示效果: Firefox, IE6/7
Firefox 中终于 fixed 了! 但这么一弄, 在 IE 中却多了一块来历不明的空白. 再改吧…

改造版本 3
网上很多人说, IE 中的 clear 是有高度的. 但我不这么觉得, 不信你将它的高度设为零看看…
怎么都好, 我确实不知道 IE 为什么要这样显示 (谁能告诉我?), 但我们可以将它解决掉, 只要在外面再套一层 DIV… 修改后的代码如下:

<h3>Widget Title</h3>
<ul>
	<li>
		<div>
			<div style="float:left;width:50%;">item 1</div>
			<div style="float:left;width:50%;">item 2</div>
			<div style="clear:both;"></div>
		</div>
	</li>
	<li>
		<div>
			<div style="float:left;width:50%;">item 3</div>
			<div style="float:left;width:50%;">item 4</div>
			<div style="clear:both;"></div>
		</div>
	</li>
	<li>
		<div>
			<div style="float:left;width:50%;">item 5</div>
			<div style="float:left;width:50%;">item 6</div>
			<div style="clear:both;"></div>
		</div>
	</li>
</ul>

改造版 3 的显示效果: Firefox, IE6/7
Bingo! 各浏览器中都没问题, 我们要的就是这个效果.

后记:
这就是我们要整出来的结构, 下回我们将用 PHP 写一个脚本, 让它自动生成.
你是不是已经看明白了? 如果你还没弄明白, 你可以下载演示代码回去温习一下.
如果你还有疑问或者好的建议, 请在此留言, 我们讨论讨论…

评论 共0条 (RSS 2.0) 发表评论

  1. 暂无评论，快抢沙发吧。

发表评论

  •   想要显示头像？
回到页首