本代码来源于:WordPress酷炫读者墙第二版CSS3代码
效果如下图 或者移步:我的读者墙
我只是根据HOTNEWS PRO主题更改了适配代码 使用其他主题请自行修改CSS3代码
第一步:用下面的代码替换掉读者墙页面文件内的全部内容
HOTNEWS PRO主题的对应文件为主题目录下的readers.php模板文件
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 |
<?php /* Template Name: 读者墙CSS3 */ ?> <?php get_header(); ?> <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?> <div id="map_box"> <div id="map_l"> <div class="browse">现在位置 ><a title="返回首页" href="<?php echo get_settings('Home'); ?>/">首页</a> ><?php the_title(); ?></div> </div> <div id="map_r"> <div id="feed"><a href="<?php echo get_option('swt_rsssub'); ?>" title="RSS">RSS</a></div> </div> </div> <div class="clear"></div> <div class="entry_box_s_l"> <!-- 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 80";//大家把管理员的邮箱改成你的,最后的这个80是选取多少个头像,大家可以按照自己的主题进行修改,来适合主题宽度 $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, $size = '36', $default = get_bloginfo('wpurl').'/avatar/default.png' ); $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 读者墙 --> <div class="clear"></div> <i class="lt"></i> <i class="rt"></i> </div> <div class="entry_sb_l"> <i class="lb"></i> <i class="rb"></i> </div> <?php endwhile; ?> <?php endif; ?> <?php get_footer(); ?> |
第二步:修改STYLE.CSS文件
在STYLE.CSS文件底部添加以下代码 此处已适配HOTNEWS PRO主题 其它主题请自行根据页面宽度修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** 读者墙CSS3 **/ .readers-list{line-height:18px;text-align:left;overflow:hidden;_zoom:1} .readers-list li{width:244px;float:left;*margin-right:-1px} .readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;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;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:50px;text-align:center;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:10px} .readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei} .readers-list a:hover strong{color:#EE8B17;left:0px;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-} |
第三步:新建读者墙页面
添加一个页面 模板选择读者墙CSS3 发布页面即可看到此效果
2014年05月22日 16:44 沙发
撸过看一下
2014年05月22日 20:58 板凳
灌水第一名也…
2014年05月22日 21:00 1层
@ioritree O大也不少 只是他换了几次邮件地址分散了 不过250真是个好数字 噗
2014年05月26日 09:25 地板
CSS3