为你的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，内容不填，标题填“读者墙”，然后把页面添加到菜单中即可。
搞定！
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
