- 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标准的。赶紧去看看效果吧,查看友情链接。
2010年8月21日 16:10 31楼
一看代码就头晕,哈哈。
2010年8月21日 16:13 1层
@星空有你 还好cp 型 不用多想
2010年8月21日 16:16 1层
@星空有你 顺便请教个问题,你的网页收录显示都是文章标题|网站名称,我的怎么是文章标题-网站名称,这怎么设置的?
2010年8月21日 16:39 2层
@星空有你 这个在header.php文件里设置title标签就可以了
《title》
< ?php wp_title('|', true, 'right'); ?>分文网《/title》
2010年8月21日 16:41 2层
@星空有你 注意修改书名号为尖括号 去掉空格什么的
总之思路就是这样~~~
2010年8月23日 11:22 3层
@admin 嗯,多谢哈~
2010年8月22日 08:59 32楼
CSS里改了个双例显示,不想搞了
2010年8月22日 12:04 33楼
友情页面处理的很好, 我的就很乱都在一块
2010年8月22日 16:01 34楼
AD支持下,再过来
2010年8月22日 20:31 35楼
回帖先。
2010年8月22日 22:09 36楼
link页面chrome有错位。
2010年8月22日 23:14 37楼
链接命名不错。。你情我愿,,两情相悦。。
2010年8月23日 22:58 38楼
代码高手。
2011年1月10日 14:29 39楼
呵呵谢谢我去弄弄看看
2011年9月28日 17:46 40楼
其实你的代码中的和根本就是多余的吗。既然已经调用了函数,那还加那两个标签干嘛?难道你的主题中的footer.php中没有那两个标签吗?无语!我还以为你很专业呢~切~