为你的WordPress博客添加CSS3炫酷读者墙

为你的WordPress博客添加CSS3炫酷读者墙，也就是把你文章的评论最活跃的读者显示在单独的一个页面，先看看效果吧：

1.复制主题的page.php，另存为readerwall.php，然后在其顶部添加代码

1 2 3 4 5

< ?php /* Template Name: Reader wall */ ?>

2.接着改文件下面找到

1	< ?php the_content('');?>

在它的前面添加下面的代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!-- start 读者墙  Edited By iSayme--> <?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 != '这里改成你自己的邮箱' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 39";//大家把管理员的邮箱改成你的,最后的这个39是选取多少个头像，大家可以按照自己的主题进行修改,来适合主题宽度     $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').'/avatar/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 ; ?> <!-- end 读者墙 -->

3.在主题的style.css文件中添加下面的css样式（我修改过，你也可以根据你自己的主题修改相应的代码）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

.readers-list {     line-height: 18px;     text-align: left;     overflow: hidden;     _zoom: 1 }   .readers-list li {     width: 200px;     float: left;     *margin-right: -1px }   .readers-list a, .readers-list a:hover strong {          background-image: -webkit-linear-gradient(#f8f8f8, #f2f2f2);     background-image: -moz-linear-gradient(#f8f8f8, #f2f2f2);     background-image: linear-gradient(#f8f8f8, #f2f2f2) }   .readers-list a {     position: relative;     display: block;     height: 36px;     margin: 4px;     font-size:12px;     padding: 4px 4px 4px 44px;     color: #999;     overflow: hidden;     border: #ccc 1px solid;     border-radius: 2px;     box-shadow: #eee 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: 10px }   .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: #EE8B17;     font: bold 12px/36px microsoft yahei }   .readers-list a:hover strong {     color: #EE8B17;     right: 150px;     top: 0;     text-align: center;     border-right: #ccc 1px solid;     height: 44px;     line-height: 40px }   .readers-list {     line-height: 18px;     text-align: left;     _zoom: 1;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     -o-text-overflow: ellipsis; }

4.新建一个页面，模板选择readerwall.php，内容不填，标题填“读者墙”，然后把页面添加到菜单中即可。
搞定！