不用插件实现的奇妙读者墙
根据 Zwwooooo 同学的提示，我把侧栏的好友来访由原来的显示最新评论者改成了月度按评论数量排序的读者强。当然不用插件，很方便，现在集成在function里面，调用也很方便。不过下午抽风觉得可以变得更好玩一点，想起来以前在老外一个网站上看到的鼠标滑过的JS特效，所以就照搬过来。效果见侧栏~~
预览如左图，实际操作见首页。
这个方法来自 Jon Raasch ，具体在他的博客上有详细介绍，有点E文的可以去看看。不想麻烦就看我操作吧。
首先说明的是这个方法与菜单滑动效果（常见于inove主题）有冲突。我是早就不想用那个滑动菜单了，所以就把它直接禁止了，如果想二者兼顾，可以自己找方法。主要用到的是JS1.3.2，可以引用google的库：http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js。好处我就不多说了。
还需要下载：QuickFlip2.js。把它直接存入你主题JS文件所在的文件夹就可以，主要是方便调用。
步骤1、建立功能模块，需要再function.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 |
function get_recent_commenter($cmmt) { global $wpdb; $identity="comment_author"; $passwordpost = " AND post_password=''"; $userexclude = " AND user_id='0' and comment_author != '阿修'"; $approved = " AND comment_approved='1'"; $interval = 30; $shownumber = $cmmt; $counts = $wpdb->get_results("SELECT COUNT(" . $identity . ") 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 MONTH(comment_date)=MONTH(now()) and YEAR(comment_date)=YEAR(now())" . $userexclude . $passwordpost . $approved . ") AS tempcmt GROUP BY " . $identity . " ORDER BY cnt DESC LIMIT " . $shownumber);//以上为zwwooooo同学的代码 $output = ''; $position = 1;//显示排名 foreach ($counts as $count) { $p = 'avatar/'; $f = md5(strtolower($count->comment_author_email)); $a = $p . $f .'.jpg'; $e = ABSPATH . $a; if (!is_file($e)){ //当头像不存在就更新 $a = get_bloginfo('home'). '/avatar/default.jpg'; } else $a = get_bloginfo('home').'/'. $p . $f .'.jpg'; $output .= $before . '<div class="quickFlip"><div class="panel1">'.$position.'</div><div class="panel2" style="background-image:url('. $a .');background-repeat:no-repeat;text-align:center;" title="'. $count->comment_author.' ('. $count->cnt . '评论)">'. $count->comment_author.'</div></div>' . $after; $position ++; } echo $output; } |
需要注意的是 foreach ($counts as $count)
{ $p = ‘avatar/’;
$f = md5(strtolower($count->comment_author_email));
$a = $p . $f .’.jpg’;
$e = ABSPATH . $a;
if (!is_file($e)){
//当头像不存在就更新
$a = get_bloginfo(‘home’). ‘/avatar/default.jpg’; }
else $a = get_bloginfo(‘home’).’/’. $p . $f .’.jpg’;
这一段代码是调用本地的avatar缓存，这个方法在 Willin Kan 这里有介绍。很方便。如果不想这么调用，可以直接把该段去掉，之后把”$output=…”这一段改成如下形式(理论代码，未经实际操作）：
$output .= $before . ‘<div class=”quickFlip”><div class=”panel1″>’.$position.'</div><div class=”panel2″ title=”‘. $count->comment_author.’ (‘. $count->cnt . ‘评论)”>’.get_avatar(count->comment_author_email,46).'</div></div>’ . $after;
步骤2、定义CSS样式。
可以新建一个文件，保存到CSS文件夹下（一般在主题目录下就可以，名称可以叫quickflips.css），内容大致如下：
|
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 |
.quickFlip { height: 60px; width: 60px; float: left; } .panel1, .panel2, .panel3 { height: 60px; width: 60px; position: absolute; overflow: hidden; text-align: center; color: #FFF; font-size: 10px; font-family: "Trebuchet MS", Verdana, Sans-serif, sans; padding-top:50px; } .panel1 { background-color: #FFBA00; z-index: 10; } .panel2 { background-color: #95BD28; color: #333; } |
步骤3、在header或者footer调用该CSS和JS代码。
加入：<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/hover-quickflips.css” />。并在适当位置加入如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script xml:space="preserve" type="text/javascript"> //<![CDATA[ // $(function() { // for performance first init the quickFlip $('.quickFlip').quickFlip(); // set up a hover effect for each of the quickflip wrappers for ( var i = 0; i &amp;lt; $.quickFlip.wrappers.length; i++ ) { var thisOne = $.quickFlip.wrappers[i]; $( thisOne.wrapper ).hover( function(ev) { var $target = $(ev.target); // make sure it isn't a child node if ( !$target.hasClass('quickFlip') ) $target = $target.parent(); $target.quickFlipper(); // //]]> </script> |
步骤4、在主题中调用以上操作。
在侧边栏新建一个项目，适当位置调用函数get_recent_commenter($cmmt); //$cmmt可以为任意整数，比如16，20……
至此，本功能便实现了。不过这个东西的用处绝不仅限于此，有很多地方都可以用它来让主题变得更加生动有趣。
当然，如果有什么更新的办法，欢迎交流~~未尽事宜，欢迎留言指出。
不错，这个东西真的很神奇
哈哈，是啊是啊~~
哇塞!
非常的不错.
很好很强大.
1987你属兔的吗?
是啊，鼠兔的。算起来也老大不小了~~
效果真好 我也想弄个试试
失败了啊，搞不定。。。。寻求帮助
说说情况，哪里遇到问题了？
用google的GFC不就好了, 不过手动定制的更美观哈.
那个挺好的，其实我是觉得GFC挂在网站上看着不是很协调~~所以才没用到的。
怎么屏蔽某个人啊
哇噻！博主好强悍啊！佩服！
折腾一下看看。
不错 ~~~
