WordPress读者墙应该没人会陌生,简单的概括就是把那个avatar头像根据评论次数降序的排列出来,很多人用这东西。不过在头像下面加一个血条用的人估计不多,这是我在无冷博客上看到的,那个排列出来确实挺壮观的。
关于读者墙血条jQ版本见无冷博客:http://meapo.net/add-readerswall-again/
下面介绍的是php版本,这个版本是我在冰剑博客上看到《水榜之血条》的Typecho版本php代码上演化而来的,在Wordpress上测试可用,非常感谢冰剑同学的分享精神。
先来看看我的成果:
下面是代码:
php部分,我没有做成放在functions.php文件了,而是哪里需要复制到哪里,基本上就一个页面需要,看着越来越长的functions文件我实在是下不了手啊:
$admin_email = '这里填admin的email,不显示该email的头像'; $limit = '这里填显示头像的个数'; $face_size = '40';//这里填头像大小 $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_author_email != $admin_email AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT $limit"; $wall = $wpdb->get_results($query); $maxNum = $wall[0]->cnt; $output = '<div id="readerswall"><h2>Most Active Friends</h2><ul class="gavaimg">'; foreach ($wall as $comment){ $width = round($face_size / ($maxNum / $comment->cnt),2); if( $comment->comment_author_url ){ $url = $comment->comment_author_url; }else{ $url="#"; } $output .= '<li><a href="'.$comment->comment_author_url.'" target="_blank" title="'.$comment->comment_author.' 做了 '.$comment->cnt.' 次重要讲话">' . get_avatar($comment->comment_author_email, $face_size) . '</a><div class="active-bg"><div class="active-degree" style="width:'.$width.'px"></div></li>'; } $output .= '</ul></div>'; echo $output ;
然后是CSS,css基本无变化,我只是把他的蓝色魔法血条改成了红色的真正的blood:
#readerswall li{width:40px;height:46px;margin:0 10px 10px 0;padding:5px; float:left;list-style:none;border: 1px solid #DFDFDF; -moz-border-radius:2px;-khtml-border-radius: 2px; -webkit-border-radius: 2px;border-radius: 2px;} #readerswall img{width:40px;height:40px;display:block;} #readerswall .active-bg{width:40px;height:2px;_font-size:0;margin-top:5px;background:#DFDFDF; } #readerswall .active-degree{background:red;width:40px;height:2px;_font-size:0;}
无冷的这段jq就不用了(抄下来以备后用):
$(function(){ var imgNum=$("#readerswall li").length-1;//测图片总数,用来循环 var maxNum=$("#readerswall li").eq(0).attr('num');//测出最多的留言数 for(var i=0;i <= imgNum;i++){ var num=$("#readerswall li").eq(i).attr('num');//测出每个人的评论数 var t=num/maxNum*36;//评论数对应血条的宽度 $("#readerswall .active-degree").eq(i).width(t);//控制血条宽度 }; });
大功告成,演示看这里:http://muxer.cn/friends-say
Update 2011-04-23
要是能再加一条根据回访次数来做另一个血条那就更好玩了,红的蓝的就齐了。想想而已,没这个技术啊。
文章目录
THE END
用多说的可以用吗?
没用过多说的不懂哦,不过感觉应该可以吧。
出现这个错误:Notice: Undefined offset: 0 in F:\wamp\www\usr\themes\Summer\functions.php on line 34
34行代码为:
$maxNum = $wall[0]->cnt;
我这个是在typecho上演变而来用在wordpress上的,和typecho不通用。
老大,有JQ版代码吗?
无冷的站打不开了!
谢谢!
。。没有留底哦,还真没有了。
不错。喜欢哦。后续用上。
哈哈!已经用上了,很不错哦。
我放代码到侧边栏,最终显示Fatal error: Call to a member function get_results() on a non-object in /home/kevin/public_html/wp-content/plugins/wp-php-widget/wp-php-widget.php(52) : eval()’d code on line 3,是什么原因?
可能和这个插件wp-php-widget的get_results()函数冲突,php我很差,你可以试着停用一下那个插件看看,如果停用后没问题的话,那就是插件冲突了,至于怎么解决,我真的不会了。
为啥我的乱码。。。。。
只有图片的东西,应该不会乱码,可能你保存文件的时候编码没选择utf8.
从icold那飘过来的,支持一下的同时也备个案!
icold是啥?
太有创意了....尤其是红蓝的想法。。。
我也copy一下.哈哈
记得把代码里面的邮件地址换成你自己管理员的邮件地址哦,不然排除不了博主自己的回复。
为什么我的读者墙的图片的alt标签只有"层楼"没有计数呢?
实在不好意思,确实有这个情况存在,因为没有直接体现在页面上,所以一直都没发现这个问题,现在已经修改过来了,只要把代码里面第11行的两个$count换成$comment就可以了。
发现我上镜啦!上镜啦!o(∩_∩)o 哈哈
嗯,倒数第一!
这个果然很壮观
那你也试试吧
读者强现似乎流行很久了,以前也喜欢用,现在不怎么用了。
这个还挺有创意的
是的,我也觉得很好玩,要是能再加一条根据回访次数来做一个血条那就更好玩了,不过也只能你这样的水平的能搞的出来了,我只能想想。
回访次数的比较蛋疼,没有数据库去记录回访次数。
哦,看来这个想法不现实。
恩,php版本不错~
嘿嘿,对着冰剑的修改的。
看来不错呢
php是学的真差,过来copy了
千万不要这么说,我也不会php,是冰剑那里有参考我参照着稍微改一下而已,叫我自己弄一点概念都没有,我都不知道这样写会不会有不安全的地方。
杀一个花。。
发现你是嘀咕用户。。
哈哈。。
嘀咕是很早以前用的,那时候加到博客后就一直懒得去换了,我看你博客上那个qq微博的我很喜欢,嘿嘿。
我用嘀咕也有很久了,自从嘀咕转型后就没怎么用过了,现在一直在QQ微博。
我都不知道嘀咕转哪里去了,我已经很久没登录嘀咕了,看来有时间得从你那把显示qq微博的方法偷过来,我也换换。
嘀咕都成了地理位置分享的服务了,不是微博了。
QQ微博那方法是通用的,和程序无关了。
那最好,我就怕要针对wp修改,我php其实连入门的书都没看完。
我还没入门呢。。
不过懂其他的语言,折腾起来也就是函数不同而已。
你知道,我其实是读会计的。
盖楼帝,
该盖的还是要盖的。