前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都显示了可都和博友们的不对呢,研究好了好久还是没有结果。
       由于大前端没有写具体的代码教程,于是乎我这里就共享出来,教大家怎么制作这非常绚丽的读者墙。

演示地址可见:http://zhezixi.com/index.php/reader-wall

一:制作reader-wall读者墙页面
1:复制PAGE.php页面,改名为readerwall.php,然后在其顶部添加代码

<?php
/*
Template Name: Reader wall
*/
?>

2:打开刚创建插入读者墙页面,搜索

<?php the_content('');?>

在它前面加入以下代码设置好读者墙!

<!-- start 读者墙-->
<?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 39";//大家把管理员的邮箱改成你的,最后的这个39是选取多少个头像,大家可以按照自己的主题进行修改,来适合主题宽度 $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->comment_author_email, $size = '36', $default = get_bloginfo('wpurl').'/avatar/default.jpg' ); $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 读者墙 -->

二:添加超酷CSS3代码美化读者墙页面
3:在风格目录下的style.css插入以下代码美化读者墙页面

.readers-list{line-height:18px;text-align:left;overflow:hidden;_zoom:}
.readers-list li{width:200px;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:40px;text-align:right;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:}
.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei}
.readers-list a:hover strong{color:#EE8B17;right:150px;top:;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}

WordPress酷炫CSS3读者墙代码的更多相关文章

  1. html5+css3酷炫音频播放器代码

    1. [代码][JavaScript]代码         (function($){    jQuery.fn.extend({        "initAudio" : fun ...

  2. [Asp.net 开发系列之SignalR篇]专题二:使用SignalR实现酷炫端对端聊天功能

    一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...

  3. 一分钟搞定触手app主页酷炫滑动切换效果

    代码地址如下:http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想这 ...

  4. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  5. 简单CSS3实现炫酷读者墙

    如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...

  6. 简单使用CSS3实现炫酷读者墙效果

    读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...

  7. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  8. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  9. css3实现酷炫的3D盒子翻转效果

    简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...

随机推荐

  1. python脚本后台运行

    问题描述: 环境: CentOS6.4 一个用python写的监控脚本test1.py,用while True方式一直运行,在ssh远程(使用putty终端)时通过以下命令启动脚本: python t ...

  2. Linq语法学习

    关键词: select from where in into join on equals orderby descending DefaultIfEmpty() thenby submitChang ...

  3. shell两数之间的算术运算

    #!/bin/bash read -p "请输入第一个数:" a read -p "请输入第二个数:" b echo "$a+$b=$[$a+$b]& ...

  4. 《明解c语言》已看完,练习代码此奉上

    2016年9月20日至2016年11月12日,从学校图书馆借来的<明解c语言>看完了. 大三第一个学期,前8周,有c语言程序设计的课.课本是学校里的老师编写出版的,为了压缩空间,减少页面, ...

  5. JS--遍历对象

    var person = { Name:"Frank", Age:23 } Object.keys(person).forEach(function(key){ console.l ...

  6. LK产品如何提高通信速率

    之前做LK,由于采用自定义协议,485通信.为了避免通信撞车,采用主控轮询.从机应答的通信方式. 当设备规模扩大,需要轮询的子设备和参数变多时,轮询周期就会加长,人机交互时,系统反应缓慢. 分析主控轮 ...

  7. WebStorm

    1,简介 WebStorm 10是一款强大的HTML5编辑工具,是 JetBrains 推出的一款商业的 JavaScript 开发工具.功能强大的前端专用IDE,拥有即时编辑(chrome).自动完 ...

  8. pcl曲面网格模型的三种显示方式

    pcl网格模型有三种可选的显示模式,分别是面片模式(surface)显示,线框图模式(wireframe)显示,点模式(point)显示.默认为面片模式进行显示.设置函数分别为: void pcl:: ...

  9. 搭建一套自己实用的.net架构(3)【ORM-Dapper+DapperExtensions】

    现在成熟的ORM比比皆是,这里只介绍Dapper的使用(最起码我在使用它,已经运用到项目中,小伙伴们反馈还可以). 优点: 1.开源.轻量.小巧.上手容易. 2.支持的数据库还蛮多的, Mysql,S ...

  10. Maven学习笔记

    1.Maven安装 Maven和ant同为apache出版的构建工具,与gradle是一类东西,与C语言中的make是同一类产品.从apache官网上下载maven的zip安装包,解压即可使用,需要把 ...