看到论坛上有朋友在求助想将侧边栏上的友情链接 Widget 分成两列显示,因为侧边栏比较宽,而友链一般靠左侧显示后,右半部分留白就会显得很难看,如果将友情链接或者其他侧边栏 Widget 一分为二两列显示,那排版上就会充实地多了。
要将 Widget 分成两栏显示,我也搜集了一些资料,总结了以下三个方法,其中我将重点介绍和推荐最后一个方法:
1、WP-MulticolLinks 插件。这个是最简单的方法,看这插件的名字就知道其功能是针对友情链接多栏化的。但是我测试了一下该插件,有局限的地方,首先这个插件只能将友情链接 Widget 分为多栏,对其他的 Widget 无效;其次该插件启用后,只有最左侧一栏的友情链接有 li 属性,其他右侧一栏或者说剩余的友情链接则是光秃秃的。
2、修改"xoxo blogroll"类。用 firebug 可以看到侧边栏的友情链接 CSS 是受"xoxo blogroll"控制的,就是说只要修改这个属性就可以达到友情链接分两栏的效果了。但是问题又来了,我还有个内页的友情链接页面,其中的链接也是受这个属性控制的,一改就全乱了,而且我对 CSS 不是太熟,没敢乱动。
3、让 Widget 支持 PHP 语句。这个想法就是将 PHP 语句写在了 Widget 模块里。换句话说,就是写一个 PHP 文件,让 WordPress 将其识别成 Widget 插件,激活后便可以在 Widget 后台拖动了。该方法是zEUS提出的,我按照他的方法把友情链接 Widget 写成了小插件,点此下载(0.94K)用法和普通插件一样,上传后激活就可以使用了,只需再给这个自己创建的 Widget 加上 CSS 就行,下面附上两栏化的 CSS ,其中宽度可以根据不同主题的侧边栏宽度进行调整。
.diylink ul,.diylink ul li ul {
list-style:none;
margin:0;
}
.diylink ul li,.diylink ul li ul li {
float:left;
padding-left:20px;
width:150px;
margin:0;
}
聪明的童鞋们就会举一反三了,不只是友情链接 Widget 可以分列显示,日志分类和日志归档的 Widget 同样可以分列显示,只要将它们用 PHP 写在 Widget 里再配上 CSS 就行啦。这样就让你的侧边栏达到了与众不同的效果,够个性吧。
-
给 Wordpress 主题添加个性化小工具2011年01月16日 -
Wordpress 之链接平移 JQuery 特效2010年02月19日 -
Wordpress 免插件版侧边栏读者墙2009年10月24日 -
美化 Wordpress 之日历样式2009年08月9日
看不懂
顶顶
能告诉你的那个日志归类怎么做的吗?每三个月归类的!
你说的是日志归档的分列显示吗?那个只是用CSS控制的,li宽度33%就可以了
分3栏用CSS宽度比例控制,这个我知道的。有办法按照季度归档吗?也就是三个月。
这个我没有想过耶,等我想到了写篇文章出来吧
加牛加牛!等你写这个功能出来!一年12个月,归档列表太多了~
菜鸟一个,能帮忙详细介绍一下日志归档如何在侧边栏分列显示,搜了很久,找到的都是友情链接如何分列显示,拜托了,最好弄个傻瓜点的教程
友情链接的分列显示和归档的分列是一个道理呀,用CSS就可以了
能更加具体点吗?
这个学习了,看了下代码,想法就是需要去学习wordpress的代码了
纯路过,又一个看不懂的
好复杂,以后慢慢慢学习。
perfect!
我一般是用第一种啊!
Pingback: 将wordpress侧边栏分成2列 | 随便翻翻
什么效果都没有,而且小工具里也没有一个“DIY友情链接”的东东,郁闷之极!非常想要两列的效果
这是作为一个插件出现的,先看看有没有在你的插件列表中启用?
就是先下载的你那个插件,然后启动,再然后找那个DIY友情链接”的东东,怎么也没有,
你试试木木的方法吧:
http://immmmm.com/wordpress-links-sub-column-display.html
不过该方法在IE6下无效~
WP-MulticolLinks插件,看这名字就知道是干什么用的了吧,下载地址你搜索一下
很好的系列啊 哈 建议将来集合起来出本书那 就叫 让个性化来的更猛烈些吧 哈哈
都试用,也不行/
我在本地测试下行呢
你QQ多少我加你帮我们看看
101149488,常年隐身,呼我就行
对我来讲侧边栏可能不太适应博客要求!
还是尽量不要用插件好,否则侧栏会变得很慢
呵呵,最近很勤奋啊..支持下..
下个月就没时间勤奋啦,现在有时间多多更新,呵呵
保持原样吧!哈哈。。。。。。。。
您好!我试了一下不行/没反应呀
启用这个插件后,在你的小工具里会多一个“DIY友情链接”的widget,添加这个widget之后,再在CSS中加入我给出的代码
受不了啦,折腾这么长时间还是搞不定,按照你发的地址确实在IE6下无法显示
怎么办呢?
你这个方法是不是皮肤必须支持 Widget 功能才能用,我怎么下载小插件后没有 DIY友情链接” 呢
还有其他办法没有
恩,对,只有支持widget才能用
还有一个插件可以实现侧边栏一分为二,找到后回复你