wordpress 友情链接随机、分列显示

已为老胡 2009-05-09 AM 1709℃ 1条

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

    另外如果你是用 iNove 的话,我的建议是你不要启用任何的 Widgets ,因为侧边栏的调用函数作者已经写好了,而且我认为非常的合理,如首页调用随机文章,文章页调用最新文章等等。像我现在的主题就是0个Widgets,然后另外自己加了一个友情链接的函数而已。

    其实随机友链的实现也非常的简单,调用一个 wordpress 的 wp_list_bookmarks 函数,然后用几行 CSS 控制样式实现两列显示就可以了!

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

<?phpwp_list_bookmarks();?>

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

    那么我们今天介绍的只要用到几个参数就可以了,其余的都默认就OK!我是这样写的:

<?phpwp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=16');?>

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

    只需要去找一下 sidebar.php 文件的规律,或者复制一个已经写好的模块,把其中的函数和标题替换了就OK!我是这样添加的:

<divclass="widget"><h3>Links</h3><divclass="content"id="links"><ul><?phpwp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=16');?></ul><divid="morelink"><ahref="http://www.xiaorsz.com/friend-link/">more&raquo;</a></div><divclass="fixed"></div></div></div>

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

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

<?phpif(is_home()){?><div class="widget">
<h3>Links</h3>
<div class="content" id="links">
<ul>
<?phpwp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=16');?></ul><div id="morelink"><a href="http://www.xiaorsz.com/friend-link/">more&raquo;</a></div><div class="fixed"></div>
</div>
 </div>
<?php}?>

    我加了 if ( is_home() ) 的判断条件,即如果是首页的话才会显示如下的代码,其它页刚不会显示。当然扩展一下还有如:is_single() 文章页,is_page() Pages页,is_category() 存档页等,可以进行非常详细的控制。具体可参考官方文档

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

#linksli{background:transparentnonerepeatscroll050%;float:left;padding-left:0;width:50%;}#linkslia{background:transparenturl(img/icons.gif)no-repeatscroll0-320px;padding-left:22px;}#morelinka{ float:right;}

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

    上面的都搞定后就是我博客现在的样子,大家可以根据自己的情况进行修改!如有疑问请留言,我会尽量帮忙解决……哈哈!

标签: 友情链接

非特殊说明,本博所有文章均为博主原创。

评论啦~



唉呀 ~ 仅有一条评论


  1. 朵未
    朵未

    好方法,终于改成功了。收藏了。多谢!

    回复 2010-04-17 19:07