读者墙
好久不见技术文，今儿个重操旧趣，又堕落了一下午，终于把读者墙弄好了。效果如上图所示，实际演示地址：我的读者墙。参考文章：无插件实现读者墙(非wp-reader-wall)（链接失效）、WordPress酷炫读者墙第二版CSS3代码（链接失效）。
网上流行的读者墙有清爽版（只有头像，一般挂在侧边栏）、绚丽版（我这个读者墙的原版，悬停动作绚丽无比）和血条版（头像底下有个红条，根据评论次数显示长短）。其实还有个插件叫 wp-reader-wall，但据说不支持3.0以上的 wp 版本了。之前在网上偶然看到过读者墙，有人留言说读者墙怎么弄，博主说随便百度一下一堆，但实际上今天我找了很久，不是代码失效，就是需要修改。折腾了一下午，终于搞定。下面就归纳总结一下此方法，原代码参考文章里有，喜欢的直接去复制，我这次贴的是我的版本的代码（包括 css）。
建立读者墙页面（reader-wall.php）
1) 复制 page.php，打开后在最开头添加
<?php
/*
Template Name: Reader wall
*/
?>
2) 搜索 the_content，这个表示文章内容，在以下完整代码（比如我的是：
<div class="postContent">
<?php the_content("More"); ?>
</div><!-- post content end -->`）
之后添加
<?php
$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 != '作者邮箱1' AND comment_author_email != '作者邮箱2' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 100";
$wall = $wpdb->get_results($query);
$maxNum = $wall[0]->cnt;
foreach ($wall as $comment)
{
$width = round(40 / ($maxNum / $comment->cnt),2);
if( $comment->comment_author_url )
$url = $comment->comment_author_url;
else $url="#";
$avatar = get_avatar( $comment->comment_author_email, $size = '36', $default = 'http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32' );
$tmp = "<li><a target=\"_blank\" href=\"".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br>".$comment->comment_author_url."</a></li>";
$output .= $tmp;
}
$output = "<ul class=\"readers-list\">".$output."</ul>";
echo $output ;
?>
解释一下：
| 作者邮箱是为了屏蔽作者的评论，可以并列多个邮箱；
| ORDER BY cnt DESC LIMIT 100 中的 100 是要显示的读者人数，请根据自己的版面设计更改；
| $default = 'http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32' 是评论者无头像时候显示的头像，我用了 wp 自带的默认头像；
| 其他的自己看着改吧。
3) 保存为 reader-wall.php，或者其他喜欢的名字。
修改样式（style.css）
以上截图显示的 css 代码如下，请将此段代码添加至 style.css 的最后：
/* readers wall */
.readers-list{line-height:60px;text-align:left;overflow:hidden;_zoom:1}
.readers-list li{width:130px;float:left;*margin-right:-1px}
.readers-list a,.readers-list a:hover strong{background-color:#fff;background-image:-webkit-linear-gradient(#fff,#fff);background-image:-moz-linear-gradient(#fff,#fff);background-image:linear-gradient(#fff,#fff)}
.readers-list a{position:relative;display:block;height:36px;margin:4px;padding:4px 4px 4px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:0px;box-shadow:#fff 0 0 2px}
.readers-list img,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}
.readers-list img{width:36px;height:36px;float:left;margin:0 8px 0 -40px;border-radius:2px}
.readers-list em{color:#666;font-style:normal;margin-right:5px}
.readers-list strong{color:#ddd;width:40px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei}
.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none}
.readers-list a:hover img{opacity:.6;margin-left:0}
.readers-list a:hover em{color:#fff;font:bold 12px/36px microsoft yahei}
.readers-list a:hover strong{color:#6699CC;right:80px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}
代码比较紧密，大家慢慢看，自己摸索着改吧。喜欢原来样式（特别是渐变）的，请到参考文章里拷贝，难得使用了 CSS3，所以效果也是很不错的。
最后就是把 reader-wall.php 上传到主题目录下，然后新建页面，在模板里选择 reader-wall，保存一下就 ok 了！