个性化你的友情链接页面

我们的师傅Sherry同学历经艰辛,最终又将博客程序换回了wordpress。在帮她将旧的wordpress博客数据合并到新的博客中后,又给她按照要求的样子,做了个友情链接link页面,页面包含了链接分类显示,博客ico图标,链接描述等内容,效果如下图:

链接

下面说明一下步骤:

一、在主题文件夹下创建link.php文件,

1、模板代码:

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

2、链接内容显示代码:

<ul id="linkp">
<?php wp_list_bookmarks('orderby=id&categorize=1&show_description=1&title_li='); ?>
</ul>

上面单引号里的内容意思是:按id排序,显示链接分类,显示链接描述。

3、显示链接ico:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
 $("#linkp a").each(function(e){
  $(this).prepend("<img src='http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+"' alt='favicon' />");
});
});
</script>

4、加上css:

#linkp li.linkcat{float:left;display:inline;width:310px;margin-right:20px;margin-bottom:20px;}
#linkp ul{padding:10px 0;}
#linkp ul li{color:#AAA;padding-bottom:10px;text-indent:2em;}
#linkp li a{display:block;height:20px;line-height:16px;font-weight:bold;border-bottom:1px solid #ccc;margin-bottom:5px;padding-bottom:2px;text-indent:0;}
#linkp li a img{float:left;padding-right:5px;}

二、使用上面的link.php模板创建链接页面就可以了。

记得在添加链接的时候加上链接描述。

作者: LMS

天行贱,君子自强自息。

标签

《个性化你的友情链接页面》有12个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注