WordPress酷炫CSS3读者墙，排名按年度、本月、本周划分的小方法 – 爱CSS

关闭边栏(ESC)打开边栏(ESC)

这个读者排行榜原先是一个插件中安装，今天DIY成一个模板页面，其实这个页面在张戈的博客中有介绍过，本站是从他的插件版改过来的，加上自己的CSS样式，分享给WP爱好者们。同时感谢张戈的分享。

一、先在主题Page文件夹下新建一个php文件，把下面的代码复制上去保存。

<?php 
/**
 * Template Name: 读者墙
 */
get_header(); ?>
<style>
    @media(min-width:1024px){
.readers-list li{/*修改width百分比可以调整头像列数，默认33.33%，即3列*/
	width:33.33%;
	float:left;
	*margin-right:-1px;
	list-style:none !important;
	line-height:18px !important;height:50px;
position:relative;
}}
@media(max-width:1023px){.readers-list{padding-left:10px;}.readers-list li{/*修改width百分比可以调整头像列数，默认33.33%，即3列*/
	width:100%;
	float:left;
	*margin-right:-1px;
	list-style:none !important;
	line-height:18px !important;height:50px;
position:relative;
}}

.readers-list {
	line-height:18px;
	text-align:left;
	overflow:hidden;
	_zoom:1
}
.readers-list >li>a{overflow:hidden;outline:none}
.readers-list >li>a>a {
	border-radius:4px;
	display:block;
	margin:4px;
	padding:4px 4px 4px 44px;
	color:#999;
	overflow:hidden;
	border:#ccc 1px solid;
	border-radius:4px;
	box-shadow:#eee 0 0 2px
	white-space: nowrap;
	text-overflow: ellipsis;;outline:none
}
.readers-list img,.readers-list em,.readers-list strong {
	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
        -ms-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.readers-list img {
	width:36px;
	height:36px;
	float:left;
	margin:0 8px 0 -40px;
	box-shadow:inset 0 -1px 0 #3333sf;
	-webkit-box-shadow:inset 0 -1px 0 #3333sf;
	-webkit-transition:1s;
	-webkit-transition:-webkit-transform 1s ease-out;
	transition:transform 1s ease-out;
	-moz-transition:-moz-transform 1s ease-out
}
.readers-list em {
	color:#666;
	font-style:normal;
	margin-right:10px;
        position:absolute;
        left:60px;top:10px;width:200px;
}
.readers-list span {
	position: absolute;
	left: 60px;
	top: 28px;color:#999;width:200px;overflow:hidden;opacity:1;-webkit-transition:all .3s ease-out;
}
.readers-list>li >a>strong {
	color:#ddd;
	width:40px;
	text-align:right;
	position:absolute;
	right:20px;
	top:10px;
	font:bold 14px/16px microsoft yahei
}
.readers-list a:hover strong {
	right: calc(100% - 54px);
	background: #F4F4F4;
	width: 50px;
	top: 4px;
	border-radius: 4px 0 0 4px;
	border: 1px solid #ccc;
	height: 46px;
	text-align: center;
	line-height:46px;
	color: #EE8B47;
}
.readers-list a:hover  span{left:180px;opacity:0}
.readers-list a:hover em{-webkit-transform:translate(80px,8px);font-size:16px;color: #EE8B47;}
.readers-list a img{-webkit-transition:all .3s ease-out;}
.readers-list a:hover img {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
	border-radius:30px !important;
-webkit-transform:translateX(60px);
transform:translateX(60px)
}
.diy-bt {
	position: relative;
	width: 170px;
	background: #DC214C;
	color: #fff;
	display: inline-block;
	margin: 10px!important;
	font-size: 16px!important;
	text-align: center;
	height: 36px;
	line-height: 36px!important;
	border-left: 10px solid #A31838;
	box-sizing: content-box;
}
.diy-bt::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 20px 18px 0;
	border-color: #DC214C transparent #DC214C transparent;
	left: 170px;
}
</style>
<main class="container" id="main">
	<div class="page-common row">
		<?php if (have_posts()): ?>
			<?php while (have_posts()) : the_post(); ?>
				<h1 class="page-title"><?php the_title(); ?></h1>
				<article class="page-content">
					<?php the_content(); ?>
				</article>
			<?php endwhile;  ?>
		<?php endif; ?>
		
		<?php
   $readers.='<p class="diy-bt">年度评论排行 TOP18</p>';
   global $wpdb;
   $query1="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 between date_sub(now(),interval 1 year) and now() AND user_id='0' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 18"; 
    $wall = $wpdb->get_results($query1); 
    if(empty($wall)) {echo '<p>暂无年度评论数据！</p>';}
    $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 = '32');    
        $tmp = "<li><a rel=\"nofollow\" alt=\"avatar头像\" target=\"_blank\" href=\"/go?url=".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br><span>".$comment->comment_author_url."</span></a></li>";   
        $output1 .= $tmp;   
     }    
    $output1 = "<ul class=\"readers-list\">".$output1."</ul>";
    $readers.=$output1;   
$readers.='<div class="clear"></div><br />';



    $readers.='<p class="diy-bt">本月评论排行 TOP9</p>';
    global $wpdb;
    $query2="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 date_format(comment_date,'%Y-%m')=date_format(now(),'%Y-%m') AND user_id='0' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 9";   
    $wall = $wpdb->get_results($query2); 
    if(empty($wall)) {echo '<p>暂无本月评论数据！</p>';}
    $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 = '32');    
        $tmp = "<li><a rel=\"nofollow\" alt=\"avatar头像\" target=\"_blank\" href=\"/go?url=".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br><span>".$comment->comment_author_url."</span></a></li>";   
        $output2.= $tmp;   
     }    
    $output2 = "<ul class=\"readers-list\">".$output2."</ul>";    
    $readers.=$output2;   
    $readers.='<div class="clear"></div><br />';



    $readers.='<p class="diy-bt">本周评论排行 TOP9</p>';
    global $wpdb;
    $query3="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 yearweek(date_format(comment_date,'%Y-%m-%d')) = yearweek(now()) AND user_id='0' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 9";   
    $wall = $wpdb->get_results($query3);
    if(empty($wall)) {echo '<p>暂无本周评论数据！</p>';}
    $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 = '32');    
        $tmp = "<li><a rel=\"nofollow\" alt=\"avatar头像\" target=\"_blank\" href=\"/go?url=".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br><span>".$comment->comment_author_url."</span></a></li>";   
        $output3 .= $tmp;   
     }    
    $output3 = "<ul class=\"readers-list\">".$output3."</ul>";    
    $readers.=$output3;

    echo $readers;

?>

	</div>
</main>
<?php get_footer(); ?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

<?php

/**

* Template Name: 读者墙

get_header(); ?>

<style>

@media(min-width:1024px){

.readers-list li{/*修改width百分比可以调整头像列数，默认33.33%，即3列*/

width:33.33%;

float:left;

*margin-right:-1px;

list-style:none !important;

line-height:18px !important;height:50px;

position:relative;

}}

@media(max-width:1023px){.readers-list{padding-left:10px;}.readers-list li{/*修改width百分比可以调整头像列数，默认33.33%，即3列*/

width:100%;

float:left;

*margin-right:-1px;

list-style:none !important;

line-height:18px !important;height:50px;

position:relative;

}}

.readers-list {

line-height:18px;

text-align:left;

overflow:hidden;

_zoom:1

}

.readers-list >li>a{overflow:hidden;outline:none}

.readers-list >li>a>a {

border-radius:4px;

display:block;

margin:4px;

padding:4px 4px 4px 44px;

color:#999;

overflow:hidden;

border:#ccc 1px solid;

border-radius:4px;

box-shadow:#eee 0 0 2px

white-space: nowrap;

text-overflow: ellipsis;;outline:none

}

.readers-list img,.readers-list em,.readers-list strong {

-webkit-transition:all .3s ease-out;

-moz-transition:all .3s ease-out;

-ms-transition:all .3s ease-out;

transition:all .3s ease-out

}

.readers-list img {

width:36px;

height:36px;

float:left;

margin:0 8px 0 -40px;

box-shadow:inset 0 -1px 0 #3333sf;

-webkit-box-shadow:inset 0 -1px 0 #3333sf;

-webkit-transition:1s;

-webkit-transition:-webkit-transform 1s ease-out;

transition:transform 1s ease-out;

-moz-transition:-moz-transform 1s ease-out

}

.readers-list em {

color:#666;

font-style:normal;

margin-right:10px;

position:absolute;

left:60px;top:10px;width:200px;

}

.readers-list span {

position: absolute;

left: 60px;

top: 28px;color:#999;width:200px;overflow:hidden;opacity:1;-webkit-transition:all .3s ease-out;

}

.readers-list>li >a>strong {

color:#ddd;

width:40px;

text-align:right;

position:absolute;

right:20px;

top:10px;

font:bold 14px/16px microsoft yahei

}

.readers-list a:hover strong {

right: calc(100% - 54px);

background: #F4F4F4;

width: 50px;

top: 4px;

border-radius: 4px 0 0 4px;

border: 1px solid #ccc;

height: 46px;

text-align: center;

line-height:46px;

color: #EE8B47;

}

.readers-list a:hover span{left:180px;opacity:0}

.readers-list a:hover em{-webkit-transform:translate(80px,8px);font-size:16px;color: #EE8B47;}

.readers-list a img{-webkit-transition:all .3s ease-out;}

.readers-list a:hover img {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

-ms-transform:rotate(360deg);

transform:rotate(360deg);

border-radius:30px !important;

-webkit-transform:translateX(60px);

transform:translateX(60px)

}

.diy-bt {

position: relative;

width: 170px;

background: #DC214C;

color: #fff;

display: inline-block;

margin: 10px!important;

font-size: 16px!important;

text-align: center;

height: 36px;

line-height: 36px!important;

border-left: 10px solid #A31838;

box-sizing: content-box;

}

.diy-bt::before {

content: '';

position: absolute;

width: 0;

height: 0;

border-style: solid;

border-width: 18px 20px 18px 0;

border-color: #DC214C transparent #DC214C transparent;

left: 170px;

}

</style>

<?php if (have_posts()): ?>

<?php while (have_posts()) : the_post(); ?>

<?php the_content(); ?>

</article>

<?php endwhile; ?>

<?php endif; ?>

<?php

$readers.='<p class="diy-bt">年度评论排行 TOP18</p>';

global $wpdb;

$query1="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 between date_sub(now(),interval 1 year) and now() AND user_id='0' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 18";

$wall = $wpdb->get_results($query1);

if(empty($wall)) {echo '<p>暂无年度评论数据！</p>';}

$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 = '32');

$tmp = "<li><a rel=\"nofollow\" alt=\"avatar头像\" target=\"_blank\" href=\"/go?url=".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br><span>".$comment->comment_author_url."</span></a></li>";

$output1 .= $tmp;

}

$output1 = "<ul class=\"readers-list\">".$output1."</ul>";

$readers.=$output1;

$readers.='<div class="clear"></div><br />';

$readers.='<p class="diy-bt">本月评论排行 TOP9</p>';

global $wpdb;

$query2="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 date_format(comment_date,'%Y-%m')=date_format(now(),'%Y-%m') AND user_id='0' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 9";

$wall = $wpdb->get_results($query2);

if(empty($wall)) {echo '<p>暂无本月评论数据！</p>';}

$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 = '32');

$output2.= $tmp;

}

$output2 = "<ul class=\"readers-list\">".$output2."</ul>";

$readers.=$output2;

$readers.='<div class="clear"></div><br />';

$readers.='<p class="diy-bt">本周评论排行 TOP9</p>';

global $wpdb;

$query3="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 yearweek(date_format(comment_date,'%Y-%m-%d')) = yearweek(now()) AND user_id='0' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 9";

$wall = $wpdb->get_results($query3);

if(empty($wall)) {echo '<p>暂无本周评论数据！</p>';}

$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 = '32');

$output3 .= $tmp;

}

$output3 = "<ul class=\"readers-list\">".$output3."</ul>";

$readers.=$output3;

echo $readers;

</div>

</main>

<?php get_footer(); ?>

二、在后台新建一个页面，模板选：读者墙即可！

如下是最终的效果图：

评论：11条

评论加载中...

模版林
我想问下是什么主题都可以吗？

浙江省杭州市天天网吧(江干区采荷路40号) 2018-03-14 17:37 回复
- icss
  回复模版林的评论
  
  这个是不分主题的
  
  广东省佛山市电信 2018-03-14 21:33 回复
小潘
厉害了，这个功能要是能在下面添加留言板功能就更好了，这样在这个页面留言之后还能看到留言者的排行数据。

河北省石家庄市联通 2017-06-12 18:38 回复
- icss
  回复小潘的评论
  
  哈你的提议很好
  
  广东省佛山市电信 2017-06-12 19:36 回复
WP博客
感觉还是那么回事

广东省佛山市电信 2017-05-10 20:15 回复
- icss
  回复WP博客的评论
  
  还可以吧，哈
  
  广东省佛山市电信 2017-05-10 20:16 回复
伍林堂工作室
对的，没什么效果什么数据都没有

江苏省南通市电信 2017-05-09 17:15 回复
- 伍林堂工作室
  回复伍林堂工作室的评论
  
  QQ上聊吧，我浏览器太卡了。
  
  江苏省南通市电信 2017-05-09 17:37 回复
- icss
  回复伍林堂工作室的评论
  
  这个是从评论中取数据的呀，你评论有数吗
  
  广东省佛山市电信 2017-05-09 17:36 回复
伍林堂工作室
没有什么效果https://www.taoisms.org/reader

江苏省南通市电信 2017-05-09 17:10 回复
- icss
  回复伍林堂工作室的评论
  
  不会吧，没弄成功吗，今天又弄了个说说的文章类型。
  
  广东省佛山市电信 2017-05-09 17:14 回复

jQuery判断页面滚动条滚动方向

wordpress 评论有回复时发邮件通知

网页底部区域固定在最底部

鼠标过经图片时的遮罩效果

CSS中一些容易漏掉了知识点

HTML与CSS书写规范

CSS动画中的线条过渡动画

多个半透明层切换的首页效果

发表评论取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

【童心致敬•礼赞祖国】红红中国心浓浓爱国情

jQuery判断页面滚动条滚动方向

wordpress 评论有回复时发邮件通知

发表评论 取消回复

发表评论取消回复