不用插件实现的奇妙读者墙

By
WP札记

根据 Zwwooooo 同学的提示,我把侧栏的好友来访由原来的显示最新评论者改成了月度按评论数量排序的读者强。当然不用插件,很方便,现在集成在function里面,调用也很方便。不过下午抽风觉得可以变得更好玩一点,想起来以前在老外一个网站上看到的鼠标滑过的JS特效,所以就照搬过来。效果见侧栏~~

comment_sort.jpg

预览如左图,实际操作见首页。

这个方法来自 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里面加入一个函数:

需要注意的是 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),内容大致如下:

步骤3、在header或者footer调用该CSS和JS代码。

加入:<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/hover-quickflips.css” />。并在适当位置加入如下代码:

步骤4、在主题中调用以上操作。

在侧边栏新建一个项目,适当位置调用函数get_recent_commenter($cmmt); //$cmmt可以为任意整数,比如16,20……

至此,本功能便实现了。不过这个东西的用处绝不仅限于此,有很多地方都可以用它来让主题变得更加生动有趣。

当然,如果有什么更新的办法,欢迎交流~~未尽事宜,欢迎留言指出。

Comments: 44

  1. 不错,这个东西真的很神奇

    2009年10月17日
    • 哈哈,是啊是啊~~

      2009年10月17日
  2. 哇塞!
    非常的不错.
    很好很强大.
    1987你属兔的吗?

    2009年10月18日
    • 是啊,鼠兔的。算起来也老大不小了~~

      2009年10月18日
  3. 效果真好 我也想弄个试试

    2009年10月18日
  4. 失败了啊,搞不定。。。。寻求帮助

    2009年10月19日
    • 说说情况,哪里遇到问题了?

      2009年10月19日
  5. 用google的GFC不就好了, 不过手动定制的更美观哈.

    2009年10月22日
    • 那个挺好的,其实我是觉得GFC挂在网站上看着不是很协调~~所以才没用到的。

      2009年10月22日
  6. :evil: 改这么多代码,还不如用插件啊。

    2009年11月30日
  7. 怎么屏蔽某个人啊

    2010年04月01日
  8. 哇噻!博主好强悍啊!佩服!

    2010年05月28日
  9. 折腾一下看看。

    2012年08月12日
  10. 不错 ~~~ :razz: :razz: :razz: :razz:

    2012年11月07日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: