友情链接分两栏，制作独立友链页面

By | 04/01/2010
89 Comments

　　最近闲的蛋疼，又小折腾了几下WordPress。虽是小折腾，但并不顺利。碰到了好几个问题，最后在万戈、包子等高人指点下终于一一解决，这里对两位大侠说声谢谢。我来做个记录，与菜鸟们分享一下吧。

一、博客边栏友情链接分栏显示

　　可以实现该功能的插件很多，但是几行CSS代码就可以搞定的为什么要用插件呢？

我的实现方法：通过查看源文件，发现我的主题里友情链接用到的类名是xoxo blogroll(xoxo 可以直接无视),在style.css搜索该类名blogroll未果,直接新增样式如下（第二个样式我的主题内就有，我直接修改的，大家根据情况自己修改）：

1
2
3
4
5
6
7
8
9
10
11
12
13

.blogroll{
width:250px;
display:block;
overflow:auto;/*记得清除浮动*/
zoom:1;/*兼容IE6*/
}
ul.list-blogroll li,li.widget_links li {
background:url(images/mini-blogroll.gif) no-repeat left center!important;
display:block;
float:left;
padding-left:20px!important;
width:105px;
}

　　注:如果想分成N列,就把li标签的宽度改成其父级标签的宽度-Margin-Padding等宽度再除以N,注意一定要留有余地多试几次，上面我只要将width:设置到106以上就不能分栏[因为（250-20X2）/2=105]。

　　参考地址：http://www.boxui.com/?p=715&replytocom=310

二、建立独立的友链页面

　　看到包子博客介绍才开始折腾这个的，方法非常简单：

1.复制一个当前模板的page.php，命名为linkpage.php。

2.给模板起个”linkpage”的名字，方法是在linkpage.php文件最上面加上如下代码：

1
2
3
4
5

<?php
/*
Template Name: linkpage
*/
?>

3.将<div id=”content”>与 </div><!—content–>之间内容清空，写成如下代码：

1
2
3
4
5

<div id=”content”>
    <div class=”linkpage”>
    <ul><?php wp_list_bookmarks(‘categorize=1&category_orderby=id&before=<li>&after=</li>&show_images=1&show_description=1&orderby=name&title_before=<h3>&title_after=</h3>’); ?></ul>
    </div>
</div><!–content–>

4.然后修改一下css,在所使用主题的style.css文件最下面加入代码：

1
2
3
4
5
6

/*———————Links Page———————–*/
.linkpage ul {list-style-type:none;overflow:auto;padding:5px 6px;height:1%;}
.linkpage ul li{color:#333;font-size:12px;margin-bottom:5px;}
.linkpage ul li ul li {float:left;width:125px;background-color:#FFF;border:1px solid #dadada;line-height:180%;margin:3px;text-align:center;}
.linkpage ul li ul li a {background-color:transparent;color:gray;display:block;text-decoration:none;}
.linkpage ul li ul li a:hover {background-color:gray;color:#FFF;font-weight:700;}

5.WordPress管理后台新建页面,模板选择“linkpage”。完工!
　　效果:https://b.xiacd.com/links/

以上操作如果正常只需要五分钟就可搞定，但是菜牛遇到三个小问题，解决办法与大家分享。

问题一：WP后台新建页面找不到模板选项。
　　解决办法：在后台先把主题换到默认主题，刷新页面，然后再换回原来主题刷新后台在属性下就可以看到页面模板选项了，这时选择刚建立的linkpage模板即可。

问题二：独立的链接页面数据正常，但是项目竖排，格式错乱。
　　菜牛按照以上步骤重新做了很多次仍不能解决，最后还是在吃饭时灵机一动想出来的。
　　问题出在分栏显示设置CSS项目.blogroll时设置了宽度250，这里你LI定位为135当然不足250的1/2，不能横排也就可以理解了。（可见理解代码多么重要！！！）
　　解决办法：将教程一（修改CSS分栏显示友情链接部分）处的width:250px;删除该行。
这里不用担心删除后li项目会跑出250px宽度，因为blogroll的父项Sidebar中一般设置了边栏宽度。

问题三：链接分组分类后，博客边栏显示所有的分类了。
　　如果只想显示友情链接组而其他隐藏组，只要到后台小工具(Widget)的链接小工具里设置一下即可。

89 thoughts on “友情链接分两栏，制作独立友链页面”

    1. 菜牛 Post author

      谢谢支持。竟然被你抢了沙发？

      Reply ↓
        1. 菜牛 Post author

          我也在犹豫啊。如果精简呢？

          Reply ↓
          1. 灵曦

            精简是必须的，现在肯定不利于收录，建议参考我BLOG~

          2. 菜牛 Post author

            不喜欢数字的，到底换成啥样的正在纠结中啊。

    1. 菜牛 Post author

      我看着也挺简单的。小问题要排查还是有点困难。下次就直接找北屯府上了。

      Reply ↓
    1. 菜牛 Post author

      很容易的，有些人不出问题，只要几分钟就可以解决了。

      Reply ↓
  7. flingyue

    “最近闲的蛋疼”,看到这句话，特地点进来留言：有意思。咱们都是闲的蛋疼的人，HOHO。
    博主有空，就回复个吧，WP遇到点小问题，想来请教一下。

    Reply ↓
    1. 菜牛

      有时候还是挺忙的，你有问题可以与我联系。方式么，关于里面有。

      Reply ↓
  8. flingyue

    这年头，专家不可信，真相可能出自瞎扯淡。

    改个字吧，把“专家”改为“砖家”

    Reply ↓
    1. 菜牛

      是啊。这样分两栏我用了大半年了。现在才想起来记录下来与大家分享。

      Reply ↓
    1. 菜牛

      一般都不麻烦啊。PHP代码不用动，只改主题里的Style.css即可。

      Reply ↓
    1. 菜牛

      有些人品好的，瞎整整一点问题都没有，我这个事多灾多难啊。

      Reply ↓
  17. baozi

    老菜,写没写过wlm的教程.
    我想用Godaddy的免费空间放图片.然后在wlm设置为图片空间.行不行

    Reply ↓
  18. Jclyn

    问个很白痴的问题啊
    linkpage.php弄好之后
    新建页面，选择模板
    然后叻
    怎样把链接弄到页面上啊
    一个一个搬？

    Reply ↓
    1. 菜牛 Post author

      Boblog能不能用我可不知道。

      Reply ↓
    1. 菜牛 Post author

      写的很乱，有不明白的可以留言。

      Reply ↓
    1. 菜牛 Post author

      嗯，发现新问题也请分享给大家哦。

      Reply ↓
    1. 菜牛 Post author

      兄弟过奖了，这个还没有考虑过。

      Reply ↓
    1. 菜牛 Post author

      喵喵红人，何须自己动手？自有高人给折腾打理。

      Reply ↓
    1. 菜牛 Post author

      快应用一下吧，学以致用嘛。。

      Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *