WordPress酷炫CSS3读者墙

首页
教程
资源
转载
WordPress酷炫CSS3读者墙

2017年7月26日
- 教程
- 资源
- 转载
YJSY0 评论

这个读者排行榜原先是一个插件中安装，今天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(); ?>

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

如下是最终的效果图：

标签：CSS3 读者墙资源转载

分享文章

已复制

发表评论取消回复

您的邮箱地址不会被公开。必填项已用 * 标注

评论 *

显示名称 *

邮箱 *

网站

在此浏览器中保存我的显示名称、邮箱地址和网站地址，以便下次评论时使用。

上一篇给站点添加了插件页

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

壹锦水韵高度专注于企业与品牌形象高端设计领域,兼具国际视野与本土文化的设计理念.充分与高端时尚融合.我们的服务贯穿品牌建设始终,让品牌形象建设更加合理化,系统化.打造更加一致性的品牌口碑,让品牌市场领域更加专业.

壹锦水韵

Qq Weixin Weibo Wordpress

标签云

301 CSS3 HTTP HTTPS Nginx系统 WordPress 主题云服务器创意协议博客原创教程整站环境部署百度美化认证资源足迹

原创14 篇帖子
教程10 篇帖子
设计3 篇帖子
资源11 篇帖子
转载5 篇帖子

WordPress酷炫CSS3读者墙

发表评论取消回复

壹锦水韵

最新动态

Nginx服务器上安装SSL证书

Nginx系统WordPress部署安装

Ubuntu系统安装Apache2和phpMyAdmin

标签云

为您的下一个项目订制令人惊叹的主题

最新动态

Nginx服务器上安装SSL证书

Nginx系统WordPress部署安装

Ubuntu系统安装Apache2和phpMyAdmin

标签云

WordPress酷炫CSS3读者墙

您可能还喜欢

发表评论 取消回复

壹锦水韵

最新动态

标签云

为您的下一个项目订制令人惊叹的主题

最新动态

标签云

标签

发表评论取消回复