Press "Enter" to skip to content

个性化你的友情链接页面

Last updated on 2013年12月27日

我们的师傅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模板创建链接页面就可以了。

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

12 Comments

  1. Ansonyi
    Ansonyi 2012年03月3日

    为啥http://hisherry.com点评论ID链接不是新窗口打开链接呢? 😆 😆 (表情好难看,换一换呗)

  2. sherry
    sherry 2012年03月5日

    在此表示诚挚的谢意!

  3. eric
    eric 2012年03月5日

    她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她

  4. 松鼠男
    松鼠男 2012年03月7日

    哈哈,忽然发现你这个友链的样式也是与众不同啊。挺有个性的说

  5. 松鼠男
    松鼠男 2012年03月7日

    没看到你的友链页面呀?在哪里?囧

    • LMS
      LMS 2012年03月8日

      @松鼠男 不是我的,是我帮别人做的,刚好她换主题了,页面还没改过来,所以只能看图了。

  6. 谷子猫
    谷子猫 2012年03月9日

    一直觉得wp的程序太复杂..太可怕、、、

  7. WindSays
    WindSays 2012年09月4日

    我是从google来的,上午建立了一个链接页面,正在找怎么显示链接描述。

发表评论

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