个性化你的友情链接页面

LMS
折腾
1.1K+ 12

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

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

THE END

评论 12

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

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

  4. 没看到你的友链页面呀？在哪里？囧

    1. 不是我的，是我帮别人做的，刚好她换主题了，页面还没改过来，所以只能看图了。

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

  6. 她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她

  8. 为啥http://hisherry.com点评论ID链接不是新窗口打开链接呢？ :lol: :lol: （表情好难看，换一换呗）

发表评论

Submit