为你的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 { 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 { 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; 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，内容不填，标题填“读者墙”，然后把页面添加到菜单中即可。
搞定！