读者墙血条之jq版本和php版本

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 &lt;= imgNum;i++){
                var num=$("#readerswall li").eq(i).attr('num');//测出每个人的评论数
                var t=num/maxNum*36;//评论数对应血条的宽度
                $("#readerswall  .active-degree").eq(i).width(t);//控制血条宽度
        };
});

大功告成,演示看这里:http://lms.im/friends-say

Update 2011-04-23

要是能再加一条根据回访次数来做另一个血条那就更好玩了,红的蓝的就齐了。想想而已,没这个技术啊。

作者: LMS

天行贱,君子自强自息。

标签

《读者墙血条之jq版本和php版本》有44个想法

        1. @冰剑 我都不知道嘀咕转哪里去了,我已经很久没登录嘀咕了,看来有时间得从你那把显示qq微博的方法偷过来,我也换换。 :mrgreen:

    1. @无冷 千万不要这么说,我也不会php,是冰剑那里有参考我参照着稍微改一下而已,叫我自己弄一点概念都没有,我都不知道这样写会不会有不安全的地方。

    1. @万戈 是的,我也觉得很好玩,要是能再加一条根据回访次数来做一个血条那就更好玩了,不过也只能你这样的水平的能搞的出来了,我只能想想。

        1. @ISayMe 实在不好意思,确实有这个情况存在,因为没有直接体现在页面上,所以一直都没发现这个问题,现在已经修改过来了,只要把代码里面第11行的两个$count换成$comment就可以了。

  1. 我放代码到侧边栏,最终显示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,是什么原因?

    1. @设计失控 可能和这个插件wp-php-widget的get_results()函数冲突,php我很差,你可以试着停用一下那个插件看看,如果停用后没问题的话,那就是插件冲突了,至于怎么解决,我真的不会了。

  2. 出现这个错误:Notice: Undefined offset: 0 in F:\wamp\www\usr\themes\Summer\functions.php on line 34
    34行代码为:
    $maxNum = $wall[0]->cnt;

发表评论

电子邮件地址不会被公开。 必填项已用*标注