更改iNove主题侧栏连接为双栏

闲来无事,发了发牢骚,看着侧栏连接越来越多,把管理都撑到最底下去了,看着也影响侧栏的美观,所以就想了点办法将侧栏变为双列显示,然后最多随即显示20个,也就是侧栏最多显示20个,但是这20个都是在所有的连接中随机选择的。其余的都放在连接页面,参考了几位博友的连接协议,自己再发挥了一下,搞了一个连接页面,链接页面会全部显示所有连接,但排名是随机的。这样没有排名,也是比较好的。其中连接页面的随机排名是iNove主题自带的连接模板的功能,直接新建页面就可以了,这里主要说下将单列边栏改为双列边栏的方法和代码。效果见效果图。

事先声明下,因为本人不懂CSS,所以改的话,里面很可能有很多不符合规范的地方,但是在IE6,火狐,chrome,IE7还有IE8都显示正常,所以应该不用担心,如果担心的话,那还是不用的好吧。


其中参考了William Hua的Blog的一篇相关的日志,但是他用的是Hot Friends这款插件,也是在这款插件的基础上修改的。但是我觉着自己博客速度已经很够呛了,所以不敢再用更多的插件了。所以自己捣鼓捣鼓出来这个东西,希望对大家有帮助。

首先声明一下,此方法对于iNove 1.3版本,如果是其他的主题或者版本不保证可用。

打开你主题的style.css文件,找到sidebar样式表的相关定义项目,比如:

1
2
3
#tag_cloud a {
	line-height:130%;
}

这些代码之后,添加

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
27
28
29
30
31
32
33
34
#linkcat {
	background:#F7F7F7;
	width:300px;
	float:right;
	font-size:95%;
	line-height:145%;
	overflow:hidden;
}
#linkcat li {
	background:url(img/icons.gif) 0 -320px no-repeat;
	padding-left:22px;
	list-style:none;
	margin-top:5px;
	/*font-size:95%;*/
}
#linkcat .content, 
#linkcat li {
	font-size:12px;
}
 
#linkcat-2 li {
        background:transparent none repeat scroll 0 50%;
        float:left;
        padding-left:0;
        width:50%;
}
#linkcat-2 li a{
        background:transparent url(img/icons.gif) no-repeat scroll 0 -320px;
        padding-left:22px;
}
#morelink a
{
  float:right;
}

当然你可能会问,此css文件中已经定义了一个linkcat了,这里怎么还可以再用,因为我不懂,所以也解答不上来,但是其可以正常工作,也可能是一个是class另一个是id所以不冲突可以用,但是这样应该不和规范。
做好之后保存,下一步,打开你的sidebar.php文件,找到

1
<!-- sidebar south START -->

紧跟其后添加

1
2
3
4
5
6
7
<div id="southsidebar" class="sidebar">
<div class="widget">
<ul><?php wp_list_bookmarks('orderby=rand&limit=20'); ?></ul>
<div id="morelink"><a href="你的博客链接页面连接">全部&raquo;</a></div>
<div class="fixed"></div>
</div>
</div>

说明:wp_list_bookmarks('orderby=rand&limit=20');为调用博客链接的函数,orderby=rand&limit=20意思为随机显示,最多显示20个。之后去你的后台新建页面,模板选择links,将上文中"你的博客链接页面连接"该为你新建这个页面的网址,OK,上传吧,看看效果。如果你看到有两个连接了,那么请去掉你之前添加的链接,或者去主题--小工具--取消你的连接小工具。

14条回应:“更改iNove主题侧栏连接为双栏”

  1. 狂舞网络说道:

    这个主题使用的人也太多了。

  2. 一米说道:

    狂舞网络 :

    这个主题使用的人也太多了。

    呵呵,是的啊,但是改了很多,现在懒得换了,等别人都换了,我就不多了,哈哈。

  3. thepplway求真说道:

    Invite your friends 你这个什么代码,还有怎么可以显示每篇文章的阅读数目?

  4. 一米说道:

    thepplway求真 :

    Invite your friends 你这个什么代码,还有怎么可以显示每篇文章的阅读数目?

    这个是Google 的Google friendconnect 你可以网上搜搜怎么装。每篇文章的阅读数目可以用这个插件:WP-PostViews 地址:http://lesterchan.net/portfolio/programming/php/

  5. thepplway求真说道:

    这些我都知道,但是装不了,晕

  6. 一米说道:

    thepplway求真 :

    这些我都知道,但是装不了,晕

    你要按着它的说明来的,激活插件之后,还要将相应的代码放到主题文件中相应的位置才可用的。

  7. thepplway求真说道:

    那好你去我的网站看看然后慢慢一步一步教我,谢谢了。

  8. 一米说道:

    thepplway求真 :

    那好你去我的网站看看然后慢慢一步一步教我,谢谢了。

    那我要怎么联系你呢?但你的好像是MU做的博客,可能不是很好修改。

  9. thepplway求真说道:

    同名:thepplway@ Gmail.com

  10. 月夜说道:

    呵呵,方法很好,我最近也在想着修改呢,我那单栏友链实在是有点太郁闷。

  11. 月夜说道:

    一米 :

    thepplway求真 :
    那好你去我的网站看看然后慢慢一步一步教我,谢谢了。

    那我要怎么联系你呢?但你的好像是MU做的博客,可能不是很好修改。

    囧,你们都版聊了。不如QQ一下呢,呵呵。

  12. 一米说道:

    thepplway求真 :

    同名:thepplway@ Gmail.com

    你给我发邮件吧。

    月夜 :

    一米 :

    thepplway求真 :
    那好你去我的网站看看然后慢慢一步一步教我,谢谢了。

    那我要怎么联系你呢?但你的好像是MU做的博客,可能不是很好修改。

    囧,你们都版聊了。不如QQ一下呢,呵呵。

    哈哈,这样简单啊,还显得我博客评论多,啊哈哈。

  13. thepplway求真说道:

    一米 :

    thepplway求真 :
    同名:thepplway@ Gmail.com

    你给我发邮件吧。

    晕一米你的email我找不到我的thepplway在gmail点com
    月夜 :

    一米 :

    thepplway求真 :
    那好你去我的网站看看然后慢慢一步一步教我,谢谢了。

    那我要怎么联系你呢?但你的好像是MU做的博客,可能不是很好修改。

    囧,你们都版聊了。不如QQ一下呢,呵呵。

    哈哈,这样简单啊,还显得我博客评论多,啊哈哈。

  14. 等待思索说道:

    学习了。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注