高手可以绕道了.最近将博客首页修改为两列的随机友情链接，想想干脆写出来，大家看一下就明白了。当然你也可以用后台的 Widgets 来实现，但明显 Widgets 可操作性不强，无法控制显示几个，随着链接的越来越多，看着那么多的链接会比较的头疼。

其实随机友链的实现也非常的简单（但是我弄了很久），调用一个 wordpress 的 wp_list_bookmarks 函数，然后用几行 CSS 控制样式实现两列显示就可以了！

那么首先介绍一下 wp_list_bookmarks 这个函数：函数基本调用方式如下：

<?php wp_list_bookmarks(); ?>

默认情况下会显示全部的链接，当然函数中还有很多的参数以供我们使用，如 orderby （链接排序方式），limit（最多显示几个链接），具体可以参考官方的说明文档。也可以去参考下：wp_list_bookmarks 函数详解。

那么今天介绍的只要用到几个参数就可以了，其余的都默认就OK！

<?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=40‘); ?>

这样就用列表的方式调用了没有标题的40个随机的友情链接，你可以根据自己的情况进行修改。当然你还要根据自己的皮肤情况，添加到皮肤的 sidebar.php 文件中。

只需要去找一下 sidebar.php 文件的规律，或者复制一个已经写好的模块，把其中的函数和标题替换了就OK！

<div class=“widget“>
<h3>Links</h3>
<div class=“content“ id=“links“>
<ul><?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=40‘); ?></ul><div id=“morelink“><a href=“http://www.yzjbj.com/links/“>more&raquo;</a></div><div class=“fixed“></div>
</div>
</div>

当然，其中除了添加相当的函数外，还添加了 more 的链接，用于显示所有的链接，修改为你自己的链接页面就行了。还为相应的 div 添加了 ID ，便于在 CSS 中进行控制。结合自己的模版添加到对应的位置就可以了！

另外如果你不想在所有的页面都显示，而只想在首页显示的话只需用 wp 的函数判断一下：

<?php if ( is_home() ) { ?>
<div>
<h3>Links</h3>
<div id=”links”>
<ul><?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=40‘); ?></ul><div id=”morelink”><a href=”http://www.yzjbj.com/links/”>more&raquo;</a></div><div></div>
</div>
</div><?php } ?>

我没有使用 if ( is_home() ) 的判断条件（因为我想在所有的页面都显示友情链接），即如果是首页的话才会显示如下的代码，其它页刚不会显示。当然扩展一下还有如：is_single() 文章页，is_page() Pages页，is_category() 存档页等，可以进行非常详细的控制。具体可参考官方文档。

现在就可以在首页随机显示40个链接了，但并没有分两行显示，这时就要用到强大的CSS来控制了。在你的 style.css 文件中添加如下样式：

#links li {
background:transparent none repeat scroll 0 50% ;
float:left ;
padding-left:0 ;
width:50% ;
}
#links li a{
background:transparent url(img/icons.gif) no-repeat scroll 0 -320px ;
padding-left:22px ;
}
#morelink a
{
float:right ;
}

当然，这是根据我自己的情况添加的，关键的就两个属性，一个是让 li float:left ，即左浮动，另外一个就是 width:50% ，让每个 li 占一半的宽度，很明显就是两列了，当然你也可以设置成25%，然后就是四列了！！然后又让 morelink 也就是那个 more 右浮动，它就靠右对齐了。

上面的都搞定后就是我博客现在的样子，大家可以根据自己的情况进行修改！

转载注明自筑梦院，本文地址：http://www.yzjbj.com/archives/01/460/html

订阅本站：http://feed.yzjbj.com，投稿等服务联系 sergeant212@163.com