侧边栏分类列表规整化

星期四,七月2日, 2009 | 15:50:08分类：wordpress | 标签：theme、wordpress、原创、技术 |

想弄已久，一直没有得闲。今天难得有点点闲空，莫名其妙的就把侧边栏整掉了。于是惯例撰文记录之。

主要问题很简单：如各位所见这个主题的侧边栏分类列表是分两栏显示的，并且默认对二级分类支持的不好。于是一旦打开了二级分类，那么整个显示就会很混乱。原因是一级分类两列显示后，二级分类紧跟着一级分类下面也分两栏显示，于是就出现了二级分类相互重叠以及部分二级分类跑到框外面去的问题。

在群里兄弟们的帮助下，得知分两列的方法是设定width。将ul的宽度设为两倍，li的宽度设为ul的一半，然后貌似要开个浮动，就可以实现两列显示，代码可参见ul和li简单语句实现DIV+CSS分两列（多列）布局显示。这么一分析就很简单了，现在分两行显示是因为主题内将.rsidebar ul li ul的width设为255px，而将.categories ul li的width设为112px，于是实现了两列显示。

找到了问题根源，接下来就要考虑怎么改。一开始的思路是一级分类仍然分两列显示，但是二级分类不分列。然而实际效果很差。于是就想到了现在这样的模式，将一级分类不分列，二级分类分列显示。

修改步骤也很简单，wp_list_categories函数在输出子分类时，会加上“ul class=children”这样的标签。那么就针对这个来修改，把.categories ul li的width修改为255px，然后把.categories ul li ul.children的width也设为255px，再将.categories ul li ul.children li的width设为112px。目前的样式基本就完成了。

改完的CSS代码如下：

.categories ul li{
float:left;
width:255px;
line-height:16px;
}
.categories ul li ul.children {
width: 255px;
padding-left: 0px;
}
.categories ul li ul.children li{
width: 112px;
}

但是改完后感觉还是不是很好看，尤其原本分类名称长短不一，整个列表看起来很混乱。又根据群里兄弟们的建议，考虑将列表中的数字部分右对齐。就原理而言，就是想办法把文字部分的width定死。然而实际操作比较困难，因为wp_list_categories输出后的格式很死，基本没有什么修饰。唯一可以下手的，也就是文字部分有个“a href”而数字部分没有了。而翻阅css手册的话，说a属性并不是block级元素，因此无法对其设定width等属性。

经过本菜鸟全力GG以后，终于发现可以使用display:block的定义使得a部分被变为block级元素，然而block级元素的默认宽度是父级元素的宽度，并且占据一整行的页面空间。为了防止数字被打到下一行，又搜索到另一篇超级链接美化的文章里面，称设置链接元素为左浮动，并设置左边距，即可不占用一整行。实际测试也是如此。

因此，最终对列表内a属性的css定义如下：

.categories ul li ul.children li a{
display: block;
float: left;
margin-left: 0px;
width: 65px;
/*text-justify: distribute-all-lines;
text-align: justify;*/
}

可以看到里面有两行被注释掉的文字，那是因为实现后仍然觉得不是特别好看，因为当时第一个一级分类下的二级分类名有的是两个字，还是有些参差不齐。于是试图让文字两端对齐，因此尝试使用了text-justify和text-align的justify。然而测试下来的结果是text-align:justify单独使用好像没有任何效果，而text-justify在IE下可正常解析，FX下则无任何效果。最大的问题还是IE下正常解析依然不好看。最终还是妥协，决定将那两个两个字的二级分类名全部改为四个字。并将某个6个字的分类名也减缩到3个字。于是便是现在侧边栏的效果。

实际看起来，还是有点点不舒服，主要是中间的那些还是有点空。但是比以前还是要好一些的。于是心满意足的决定停止折腾。

以上，菜鸟瞎整CSS流程记录完毕。

喜欢本文，那就收藏到：

随机日志

16条评论关于 “侧边栏分类列表规整化”

泰奥朵拉 发表于：七月 2nd, 2009 20:14:49

比从前整齐、漂亮多了。不过，话说从前那个可以随着时间变色的Sandbox真是经典呢。
[回复这南瓜]
龙天发表于：七月 3rd, 2009 07:24:26

@泰奥朵拉: 唉唉那个sandbox，要是固定宽度就好了。自适应的确局限性还是太大。不过，他的思路大致可以掌握，其实可以移植到任意主题上。恩恩。。

PS：完了，学校曝光了。低调低调～～
[回复这南瓜]
goettingen 发表于：七月 3rd, 2009 07:29:35

大清早的来灌点水，又见看不懂的代码，让人敏感啊。。。
[回复这南瓜]
泰奥朵拉 发表于：七月 3rd, 2009 16:42:02

@龙天:恩，我知道。sandbox的技巧可以移植。呼呼。
那个主题不能固定宽度？不懂。不是改改代码那么简单么？
我认识一个特别好的朋友是天大的，天大的高才生们都很务实、能干。这是我的印象。
[回复这南瓜]
龙天发表于：七月 3rd, 2009 17:09:09

@goettingen: 不懂，来学吧 XD

@泰奥朵拉: 喂，楼上那只哥廷根，有人夸你呢 XD

就是说，那个主题是根据屏幕分辨率决定其最大宽度的，因此在大的屏幕分辨率下，主题会被拉的很宽。而且由于本身是为了分辨率自适应设计的，因此修改为固定宽度的话，看起来会有点不协调
[回复这南瓜]
泰奥朵拉 发表于：七月 3rd, 2009 17:56:29

@龙天:哦，原来哥廷根也是你的好同学啊。天大的高材生们一直让我很敬佩。
[回复这南瓜]
goettingen 发表于：七月 3rd, 2009 21:20:32

@龙天:你开发点中文代码，我就学，都快不会打汉字了。
[回复这南瓜]
goettingen 发表于：七月 3rd, 2009 21:21:40

大鬼，不知这句话有否让你同感惭愧……
[回复这南瓜]
龙天发表于：七月 3rd, 2009 21:54:59

@goettingen: 我不惭愧。我又不是高材生，哇哈哈哈……
[回复这南瓜]
泰奥朵拉 发表于：七月 4th, 2009 00:11:16

@龙天:敢問，兩位是什麽專業啊？
[回复这南瓜]

龙天小筑