现在的位置: 首页 > Wordpress > WP技巧 > 正文
友情链接之页面美化版
2010年08月20日 WP技巧 ⁄ 共 1485字 评论数 60 ⁄ 被围观 7,649+

话说已经有好久没有折腾Wordpress了,不过已经看上好多实用的功能或效果了,准备一一去实现。不知道有多少人看过我的“友情链接”页面,估计和我的RSS订阅人数一样的寥寥无几。不过也为了给自己留下个记号,一起来分享下实现过程。

方法来自木木童鞋,自己只是稍作修改。

首先确认已经加载jquery库,如果不清楚如何加载,可以参考之前的文章:利用jQuery实现侧边栏Tab切换效果

其次加载jquery控制代码,用以获取Google服务器上缓存图标。

$(".linkpage a").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http://[^/]+).*$/, '$1').replace( 'http://', '' )+">");
});

然后新建一个页面模板,具体可以参考之前的文章:我的淘宝。例如我新建的模板内容如下,并保存为links.php文件。

<?php
/*
Template Name: Links
*/
?>
<?php get_header(); ?>
<div class="linkpage">
<ol>
<?php wp_list_bookmarks();?>
</ol>
</div>
</div>
<div id="footer">
<?php get_footer(); ?>
</div>
<!--/footer-->
</body>
</html>

可能有童鞋有疑问,为什么会添加“ol”标签以及多出一些“div”、“body”、“html”等标签?具体原因我也说不明白,只是说为了通过w3c的xhtml验证,才会如此,如果没有这方面需求的朋友可以自行简化。

接着便是新建一个友情链接的页面了,这点无需多说,和创建普通页面方法一样。内容为空即可,只是在模板选择上需要选择刚刚新建的links.php模板。

最后便是css样式控制了,这点完全需要自定义了,因为每个人的主题都不一样,想要显示什么样的效果就靠自己修改了,下面给出我的css参考,具体效果可以看我的友情链接

/*linkpage*/
.linkpage {display:inline;float:left;margin:3px 20px;padding:0 5px;width:100%;}
.linkpage h3{line-height:20px;}
.linkpage ul{margin:0;padding:0 6px;list-style-type:none;overflow:hidden;}
.linkpage img{float:left;height:16px;width:16px;padding:3px 0 3px 3px;}
.linkpage ul li{float:left;width:141.3px;text-align:center;margin:5px;line-height:180%;background-color:#E9EAEA;border:1px solid #808080;}
.linkpage ul li a{color:#666667;display:block;}
.linkpage ul li a:hover{background-color:#FFF;color:gray;font-weight:700;}

如此这般,这样终于大功告成了,而且也是符合w3c标准的。赶紧去看看效果吧,查看友情链接



目前有 60 条留言 其中:访客:60 条, 博主:0 条

  1. 星空有你 : 2010年08月21日16:10:18  31楼

    一看代码就头晕,哈哈。 😕


    • 管理员
      admin : 2010年08月21日16:13:13  地下1层

      还好cp 型 不用多想

    • 星空有你 : 2010年08月21日16:16:56  地下1层

      顺便请教个问题,你的网页收录显示都是文章标题|网站名称,我的怎么是文章标题-网站名称,这怎么设置的? 😕


      • 管理员
        admin : 2010年08月21日16:39:57  地下2层

        这个在header.php文件里设置title标签就可以了

        《title》
        < ?php wp_title('|', true, 'right'); ?>分文网《/title》


      • 管理员
        admin : 2010年08月21日16:41:15  地下2层

        注意修改书名号为尖括号 去掉空格什么的
        总之思路就是这样~~~

        • 星空有你 : 2010年08月23日11:22:49  地下3层

          嗯,多谢哈~ 😉

  2. yesureadmin : 2010年08月22日08:59:13  32楼

    CSS里改了个双例显示,不想搞了

  3. 天天天蓝 : 2010年08月22日12:04:18  33楼

    友情页面处理的很好, 我的就很乱都在一块

  4. yesureadmin : 2010年08月22日16:01:54  34楼

    AD支持下,再过来

  5. 博客之星 : 2010年08月22日20:31:46  35楼

    回帖先。

  6. 西门 : 2010年08月22日22:09:55  36楼

    link页面chrome有错位。

  7. 宁怡 : 2010年08月22日23:14:38  37楼

    链接命名不错。。你情我愿,,两情相悦。。

  8. 爱情电影 : 2010年08月23日22:58:50  38楼

    代码高手。

  9. 团购网 : 2011年01月10日14:29:31  39楼

    呵呵谢谢我去弄弄看看

  10. 随便来个 : 2011年09月28日17:46:22  40楼

    其实你的代码中的和根本就是多余的吗。既然已经调用了函数,那还加那两个标签干嘛?难道你的主题中的footer.php中没有那两个标签吗?无语!我还以为你很专业呢~切~


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×