777° 2012964字0条评论

读者墙

读者墙
读者墙

好久不见技术文,今儿个重操旧趣,又堕落了一下午,终于把读者墙弄好了。效果如上图所示,实际演示地址:我的读者墙。参考文章:无插件实现读者墙(非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 了!

EOF
510°
这样一个麻烦
Comments
Write a Comment
点击加载Disqus