!本文可能 超过2年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本文不保证相应的技术更新和实践可操作性。

高手可以绕道了.最近将博客首页修改为两列的随机友情链接,想想干脆写出来,大家看一下就明白了。当然你也可以用后台的 Widgets 来实现,但明显 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=40');?>

这样就用列表的方式调用了没有标题的40个随机的友情链接,你可以根据自己的情况进行修改。当然你还要根据自己的皮肤情况,添加到皮肤的 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=40');?></ul><divid="morelink"><ahref="http://www.yzjbj.com/links/">more&raquo;</a></div><divclass="fixed"></div></div></div>

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

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

<?phpif(is_home()){?><div>
<h3>Links</h3>
<div id="links">
<ul>
<?phpwp_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 文件中添加如下样式:

#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 右浮动,它就靠右对齐了。

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

转载请注明本文链接:http://www.yzjbj.com/01/460/html

-----------------------------华丽的正文结束了-------------------------------

标签: WordPress, 友情链接随机, 分列显示

友荐云推荐 相关文章:

16 个吐槽 »

  1. 我的链接不多,现在还不需要随机显示

  2. 总算有人一次性总结出来了,留待以后用。

  3. 边栏不大,两行不够~

  4. 我去研究一下

  5. 现在不再折腾了,这功能以前倒是想用的。。。

  6. 额。。 我用的是国货插件啦,, 不过内页的还不懂怎么弄呢。

  7. [...] 使用心得:wordpress 友情链接随机显示和分列显示 而成,有怪莫怪,哈哈。 [...]

  8. 谢谢,我用到了
    .-= 绍兴小杜最新发表的日志不用插件如何实现iNove 主题导航栏同时显示分类和页面 =-.

  9. 为什么我加入了那段代码,可是友情链接还是没有分列显示呢???

    1. 看到你的博客上已经分类显示了

      1. 嗯,是的,不过我是用其它方法实现的。呵呵

  10. sky sky

    有没有更好的呢,觉得还是会不很协调的

  11. 谢谢分享~ 用上了 好使!

  12. 这个我要用用,链接的地方不够啊

  13. [...] c11、wordpress 友情链接随机显示和分列显示 [...]

  14. [...] c11、wordpress 友情链接随机显示和分列显示 [...]

登出评论

Trackbacks/Pingbacks

  1. WordPress 友情链接随机显示、分列显示|细水长流 --- 2010-02-12 18:02:34
  2. Wordpress大杂烩 – 懒人博客 --- 2013-01-13 19:01:23
  3. Wordpress大杂烩 | 懒人博客 --- 2013-02-04 21:02:56