WordPress酷炫CSS3读者墙
这个读者排行榜原先是一个插件中安装,今天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(); ?>
二、在后台新建一个页面,模板选:读者墙即可!
如下是最终的效果图:
发表评论