wordpress 3D版读者墙

萨龙龙 WordPress 12年前

2.33W 20 2

Salong主题采用的是HTML5/CSS3，整个主题都运用了CSS3的动画，而读者墙也不例外，加入CSS3的3D动画效果，让读者墙更加炫丽。

3D版的读者墙到现在应该不多见，最大的原因应该是兼容性的问题，我们应该放弃对太老的、过时的浏览器兼容性的工作，这种做法也是鼓励用户安装最新版本的浏览器，更好的体验HTML5/CSS3的优秀的特性。

Twitter彻底的放弃了IE6和IE7，bootstrap对IE7, IE8支持都不是很好。而Google Apps在未来几周内将放弃对微软IE9的支持，这是Google一贯执行的产品支持政策，如果你还在修复IE6，只能表示无语。Salong主题没有做任何浏览器兼容性的问题，绝大多数最新的浏览器都没有问题，IE9也能正常浏览，但CSS3的动画效果等属性是没有，勇敢地放弃IE9以下的浏览器，这是萨龙龙在制作主题中最爽的一件事。

随着浏览器的更新与性能的提升，不只CSS3的3D效果，相信更多的HTML5/CSS3的最新技术会融入到越来越多的网页中。

3D读者墙，最大的特点是使用了CSS3的3D动画效果，主要是CSS3的透视视图与3D转换，下面简单的介绍下：

1、复制主题下的page.php文件，重命名为：template-reader.php，将其中第一个<?php替换为：

< ?php
/*
* Template Name:读者墙
*/

2、在模板文件中查找：

<?php the_content(); ?>

在其下面添加3D读者墙PHP代码：

<?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 != 'longyizaifei@163.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 36";//把longyizaifei@163.com改成自己的邮箱，在读者墙中排除管理员。最后的数字36是在读者墙中显示的读者个数，根据情况修改！
$wall = $wpdb->get_results($query);
$maxNum = $wall[0]->cnt;
foreach ($wall as $comment)
{
if( $comment->comment_author_url )
$url = $comment->comment_author_url;
else $url="#";
$r="rel='external nofollow'";
$imgsize="36";//头像的大小，如果修改，CSS样式也得相应地修改。
$tmp = "<li><section class='reader'><div class='reader-box'><span class='avatar'><img src='http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($comment->comment_author_email) )."&size=".$imgsize ."&d=identicon&r=G' /> ".$comment->comment_author." +".$comment->cnt."</span><div class='site'><a target='_blank' href='".$url."'>查看 ".$comment->comment_author." 的站点</a></div></div></section></li>";
$output .= $tmp;
}
$output = "<ul class="readers-list">".$output."</ul>";
echo $output ;
?>

如果不是用HTML5编写的站点，请把上面的section标签改成div。

3、3D版的读者墙与网上的其它版本最大的区别是CSS样式，最新的CSS3特性在下面的CSS代码中都有注释：

/*读者墙*/
.reader-box .avatar,.reader .site a{ width: 170px; height: 36px; padding: 8px; display: block; border: 1px #fff solid; -webkit-box-shadow: 0 0 2px #ddd; -moz-box-shadow: 0 0 2px #ddd; box-shadow: 0 0 2px #ddd; }
.reader .site a{ background-color: #fff; }
.reader-box img { width:36px; height:36px; float: left; margin-right: 12px; }
.reader { perspective: 800px; /*perspective属性定义3D元素距视图的距离，只影响3D转换元素，而且本身不会受影响，其子元素会获得透视效果*/
width:188px; margin: 8px; float:left; }
.reader-box { position:relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; /*被转换的子元素保留其3D转换*/
-webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; /*3D转换的时间为1秒*/
text-align: center; line-height: 36px; }
.reader .site { position:absolute; top:0; -webkit-transform: rotateY(182deg) translateZ(1px); -moz-transform: rotateY(182deg) translateZ(1px); -ms-transform: rotateY(182deg) translateZ(1px); -o-transform: rotateY(182deg) translateZ(1px); transform: rotateY(182deg) translateZ(1px); /*沿着Y轴的3D旋转， 3D转换只用Z轴的值，将此元素反转180度，置于Z轴的背面。*/
color:#666; opacity:.0; -webkit-transition: 1s opacity; -moz-transition: 1s opacity; -ms-transition: 1s opacity; -o-transition: 1s opacity; transition: 1s opacity; /*3D转换的时间为1秒*/; }
.reader:hover .reader-box{ -webkit-transform: rotateY(182deg); -moz-transform: rotateY(182deg); -ms-transform: rotateY(182deg); -o-transform: rotateY(182deg); transform: rotateY(182deg); /*鼠标经过时，.rotate-box元素沿着Y轴3D旋转180度，同时.text元素反转180度，透明度为1，所以把默认显示的span元素覆盖*/; }
.reader:hover .site{ opacity:1; }

查看效果：3D读者墙（远方的雪山留言板）

3D版读者墙经过测试大多数最新的浏览器：Firefox、Chrome、Safari、Opera、360、猎豹等浏览器都是支持的，IE10以上才支持，如果考虑IE9以下的浏览器兼容性，萨龙龙觉得前端技术很难进步，即使有进步也苦了前端工程师。

本文由远方的雪山作者：萨龙龙发表，转载请注明来源！

关键词：3D读者墙, WordPress 使用

萨龙龙

文章：290 画廊：33 视频：37

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

云栖竹径骑行之旅（骑行西藏两周年）

三台山秋色

WordPress按角色获取可分页的用户列表并显示最新文章

WordPress 9年前 2
萨龙网络企业电子商务社区论坛主题Purity更新至2.2

WordPress 10年前 2
wordpress SEO终极插件-SEO Ultimate

WordPress 12年前 1
wordpress函数wp_get_attachment_metadata简码获取照片EXIF信息

WordPress 10年前 1
wordpress 3D版读者墙

WordPress 12年前 2
Concise主题更新至2.3前端用户中心和商城完美响应

WordPress 10年前 1

热评文章

最赞的文章

3d之家发布于： 2015-07-09 上午 01:44

回复

css3有太多不懂
- 萨龙龙发布于： 2015-07-09 上午 08:35
  
  回复
  
  可以学嘛
明月登楼发布于： 2014-11-21 下午 23:24

回复

我今天也建了一个“读者墙”页面，效果倒时有了，怎么在谷歌浏览器下只是竖着显示，没有并列几个的显示呀？什么情况，我没有改动任何代码呀！用的就是主题自带的页面模板！
- 萨龙龙发布于： 2014-11-23 上午 09:58
  
  回复
  
  我这边显示的没有问题，是不是你的谷歌浏览器版本低了？也有可能这个版本的样式没有更新，现在更新了！
德均吧发布于： 2014-04-27 下午 17:14

回复

要是能调用多说的头像就好了
德均吧发布于： 2014-04-27 下午 14:46

回复

谢谢博主的大力支持
Vespa发布于： 2014-01-03 上午 02:35

回复

额。。。3D效果出不来。。。搞不懂。。
单车岁月发布于： 2013-12-22 下午 18:17

回复

我的主题用不了，求指导……
- 萨龙龙发布于： 2013-12-22 下午 19:42
  
  回复
  
  你现在的读者墙都可以用，我的这个也不会有问题。
  - 单车岁月发布于： 2013-12-30 下午 23:19
    
    回复
    
    现在用的插件，function黏贴进去就报错，可能是主题自身的问题
Louis Han发布于： 2013-12-13 下午 16:26

回复

3D读者墙确实不常见啊不错
林肆发布于： 2013-12-04 下午 19:53

回复

我只知道绚丽是好事，带来的是电脑资源的消耗，而且不是所有浏览器都能看到效果的。我的设备太落后啦~
- 萨龙龙发布于： 2013-12-04 下午 20:09
  
  回复
  
  这个版本的读者墙如果浏览器不支持3D效果，也一样可以浏览，只是淡入淡出。
那时年少发布于： 2013-12-03 下午 15:23

回复

效果不错，
阿龍发布于： 2013-12-03 上午 10:52

回复

效果很赞~
天长地久发布于： 2013-12-02 下午 21:47

回复

应该很炫的
雅岚发布于： 2013-11-28 下午 13:35

回复

Mark之，以备筑墙之需，哈哈哈
- 萨龙龙发布于： 2013-11-28 下午 16:27
  
  回复
  
  你博客那么多读者，应该整一个读者墙。
FROYO发布于： 2013-11-27 上午 00:14

回复

厉害，一会儿试一下
- 萨龙龙发布于： 2013-11-27 上午 07:45
  
  回复
  
  现在也是在学习的过程，HTML5/CSS3还有太多高级的功能。

WordPress

wordpress 3D版读者墙

萨龙龙

相关文章

WordPress按角色获取可分页的用户列表并显示最新文章

萨龙网络企业电子商务社区论坛主题Purity更新至2.2

wordpress SEO终极插件-SEO Ultimate

wordpress函数wp_get_attachment_metadata简码获取照片EXIF信息