友情链接之页面美化版

  • A+
所属分类:随笔分享

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

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

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

其次加载jquery控制代码,用以获取Google服务器上缓存图标。
[code]$(".linkpage a").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http://[^/]+).*$/, '$1').replace( 'http://', '' )+">");
});[/code]
然后新建一个页面模板,具体可以参考之前的文章:我的淘宝。例如我新建的模板内容如下,并保存为links.php文件。
[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>[/php]
可能有童鞋有疑问,为什么会添加“ol”标签以及多出一些“div”、“body”、“html”等标签?具体原因我也说不明白,只是说为了通过w3c的xhtml验证,才会如此,如果没有这方面需求的朋友可以自行简化。

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

最后便是css样式控制了,这点完全需要自定义了,因为每个人的主题都不一样,想要显示什么样的效果就靠自己修改了,下面给出我的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;}[/css]
如此这般,这样终于大功告成了,而且也是符合w3c标准的。赶紧去看看效果吧,查看友情链接

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:60   其中:访客  60   博主  0

    • 星空有你 星空有你 4

      一看代码就头晕,哈哈。 :???:

        • admin admin 9

          @星空有你 还好cp 型 不用多想

          • 星空有你 星空有你 4

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

              • admin admin 9

                @星空有你 这个在header.php文件里设置title标签就可以了

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

                • admin admin 9

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

              • yesureadmin yesureadmin 5

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

                • 天天天蓝 天天天蓝 5

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

                  • yesureadmin yesureadmin 5

                    AD支持下,再过来

                    • 博客之星 博客之星 2

                      回帖先。

                      • 西门 西门 5

                        link页面chrome有错位。

                        • 宁怡 宁怡 5

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

                          • 爱情电影 爱情电影 1

                            代码高手。

                            • 团购网 团购网 4

                              呵呵谢谢我去弄弄看看

                              • 随便来个 随便来个 0

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