WordPress酷炫CSS3读者墙

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

壹壹创意
2017年7月26日
0 评论

这个读者排行榜原先是一个插件中安装，今天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 读者墙资源转载

发表评论取消回复

上一个WordPress 4.7 Beta 2

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

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

电子邮箱

联系我们

在线时间

WordPress酷炫CSS3读者墙

发表评论取消回复

壹壹创意设计网

最新动态

网站进行美化

博客LOGO在不同的样式下显示

部署HTTPS(SSL)后设置301跳转将HTTP跳转到HTTPS

标签云

网站进行美化

博客LOGO在不同的样式下显示

最近的帖子

网站进行美化

博客LOGO在不同的样式下显示

部署HTTPS(SSL)后设置301跳转将HTTP跳转到HTTPS

下面栏可能会有所帮助!

网站登录

在线注册

联系支持

电子邮箱

联系我们

在线时间

WordPress酷炫CSS3读者墙

分享文章

您可能还喜欢

发表评论 取消回复

壹壹创意设计网

最新动态

标签云

最近的帖子

下面栏可能会有所帮助!

发表评论取消回复