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

LMS
3.8K+ 44

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://muxer.cn/friends-say

Update 2011-04-23

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

文章目录
THE END

评论 44

  1. :sad: 用多说的可以用吗?

    1. 没用过多说的不懂哦,不过感觉应该可以吧。

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

    1. 我这个是在typecho上演变而来用在wordpress上的,和typecho不通用。

  3. 老大,有JQ版代码吗?
    无冷的站打不开了!
    谢谢!

    1. 。。没有留底哦,还真没有了。

  4. :razz: 不错。喜欢哦。后续用上。

  5. 哈哈!已经用上了,很不错哦。

  6. 我放代码到侧边栏,最终显示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我很差,你可以试着停用一下那个插件看看,如果停用后没问题的话,那就是插件冲突了,至于怎么解决,我真的不会了。

    1. 只有图片的东西,应该不会乱码,可能你保存文件的时候编码没选择utf8.

  7. 从icold那飘过来的,支持一下的同时也备个案! :mrgreen:

  8. 太有创意了....尤其是红蓝的想法。。。

    1. 记得把代码里面的邮件地址换成你自己管理员的邮件地址哦,不然排除不了博主自己的回复。

      1. 为什么我的读者墙的图片的alt标签只有"层楼"没有计数呢?

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

  9. 发现我上镜啦!上镜啦!o(∩_∩)o 哈哈

  10. 读者强现似乎流行很久了,以前也喜欢用,现在不怎么用了。

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

      1. 回访次数的比较蛋疼,没有数据库去记录回访次数。

  11. php是学的真差,过来copy了

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

  12. 杀一个花。。

    发现你是嘀咕用户。。
    哈哈。。

    1. 嘀咕是很早以前用的,那时候加到博客后就一直懒得去换了,我看你博客上那个qq微博的我很喜欢,嘿嘿。

      1. 我用嘀咕也有很久了,自从嘀咕转型后就没怎么用过了,现在一直在QQ微博。

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

          1. 嘀咕都成了地理位置分享的服务了,不是微博了。
            QQ微博那方法是通用的,和程序无关了。

            1. 那最好,我就怕要针对wp修改,我php其实连入门的书都没看完。

              1. 我还没入门呢。。
                不过懂其他的语言,折腾起来也就是函数不同而已。

发表评论

Submit