我们在很多博客网站的留言板或其他页面都能看到有读者墙这个功能模块，主要是显示评论数最多的前几位读者，以此激励读者踊跃评论，也方便博主自己访问这些活跃读者的博客。本文就介绍一下如何在 wordpress 现有的页面中添加读者墙。
如在留言板中添加读者墙，假如这个留言板的网址是 https://boke.yigujin.cn/page/dzbqb/，那么具体添加读者墙的步骤如下：
1、下载所使用主题中的 page.php 文件和 style.css 文件。
2、复制所使用主题中的 page.php 文件，改名为 page-dzbqb.php，然后打开这个文件并在其中找到
- <?php the_content(); ?>
在它的上面或下面（区别在于读者墙是在留言板内容的上面或下面显示）添加如下代码：
- <div id="dzq">
- <?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 != '[email protected]' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 15";
- $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 = get_bloginfo('wpurl').'/default.jpg');
- $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 ;
- ?>
- </div>
3、把以上代码中的 comment_author_email != ‘[email protected]’邮箱地址改为自己的邮箱地址，以排除博主本人。同时，以上代码中的 LIMIT 15 是显示评论数最多的前 15 名读者，如需要显示更大或更少的读者直接修改这个 15 即可。
4、在 style.css 文件最后面插入以下代码美化读者墙。
- /* 读者墙 */
- #dzq ul{margin: 0 0 0 24px;}
- #dzq .readers-list{font-size:12px;line-height:18px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;whitewhite-space:nowrap;}
- #dzq .readers-list li{list-style: none;margin:0;width:230px;float:left;*margin-right:-1px}
- #dzq .readers-list a,#dzq .readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2)}
- #dzq .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:2px;box-shadow:#eee 0 0 2px}
- #dzq .readers-list img,#dzq .readers-list em,#dzq .readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}
- #dzq .readers-list img{width:36px;height:36px;float:left;margin:0 8px 0 -40px;border-radius:2px}
- #dzq .readers-list em{color:#666;font-style:normal;margin-right:10px}
- #dzq .readers-list strong{color:#ddd;width:40px;text-align:rightright;position:absolute;rightright:6px;top:4px;font:bold 14px/16px microsoft yahei}
- #dzq .readers-list a:hover{border-color:#BA4C32;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none}
- #dzq .readers-list a:hover img{opacity:.6;margin-left:0}
- #dzq .readers-list a:hover em{color:#BA4C32;font:bold 14px/36px microsoft yahei}
- #dzq .readers-list a:hover strong{color:#BA4C32;rightright:170px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}
5、读者墙默认是一行显示三个读者，如果页面宽度不够，只需修改
- #dzq .readers-list li{list-style: none;margin:0;width:230px;float:left;*margin-right:-1px}
中的 width:230px;即可，如一行只显示 1 个或 2 个读者，只需要把这个 230px 改小为 200px 或更小即可；如一行显示 3 个读者后还剩余有很多空间，可将 230px 改小为 250px 或更大即可；
6、将 page-dzbqb.php 文件和 style.css 文件上传到我们所使用的主题文件夹中，次数刷新一下留言板页面，看看是不是已经有了读者墙模块？
至此，我们在 wordpress 现有的页面中添加读者墙已经完成。如果想要让读者墙变成按年月周排序的话，请参考『纯代码实现按年、月、周评论排行的读者墙』。