Home » WordPress

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

17 02月 2010 Views: No Comment Tags:

高手可以绕道了,呵呵!最近有不少人问到博客首页两列的随机友情链接是如何实现的,想想干脆写出来,大家看一下就明白了。当然你也可以用后台的 Widgets 来实现,但明显 Widgets 可操作性不强,无法控制显示几个,随着链接的越来越多,看着那么多的链接会比较的头疼。
另外如果你是用 iNove 的话,我的建议是你不要启用任何的 Widgets ,因为侧边栏的调用函数作者已经写好了,而且我认为非常的合理,如首页调用随机文章,文章页调用最新文章等等。像我现在的主题就是0个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=16'); ?>

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

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

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

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

#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.xiaorsz.com/wordpress-random-link-2-row-shows/

原创文章如转载,请注明:转载自Xixis Blog [ http://www.xixis.net/ ]
本文链接地址:http://www.xixis.net/archives/link-wordpress-random-sub-column-shows-the.html

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.