2011年08月12日 107条评论

WordPress每篇文章显示指定数量的评论者头像及评论内容

这是“郑永”童鞋最近需求/折腾的功能效果,也跟我提起过,但最近几天较忙木有回复评论,我也是昨天才看到他的评论的。去他博客时,发现他以“不达到目的不罢休的折腾精神”自己根据老主题的 comments.php 代码顺藤摸瓜地折腾出来,精神可嘉,WP就需要这种折腾精神,有兴趣的朋友可以去这里围观,霍霍。

不过,我个人觉得这样稍微麻烦点,倒不如直接用 get_comments() 函数获取评论来的简单。今晚刚好有空,就顺便折腾下,有需要的可以参考折腾。

或许文章标题表述的还是不够清楚,这里再陈述一下:博客首页文章列表里面的每篇文章显示指定数量的最新评论者头像和评论内容,而且评论内容是鼠标 hover 头像时浮窗显示。

具体的演示我就懒得做了,效果图如下(我测试时用的是 zBench 主题)

下面是实现步骤和代码

1. 打开所用主题的首页php文件,通常是 index.php(有些主题是 home.php,具体根据自己主题修改),然后找到下面类似的函数:

<?php the_content(); ?>

PS:有些主题是调用摘录的,就是这样的 <?php the_excerpt(); ?>

2. 把下面的 php 代码扔到上面找到的函数下面,注意根据自己需求设置代码中的参数

<?php $nums=5; //要显示几个评论
 $get_comments_num=30; //获取最大评论数,主要用来排除博主的评论。
 $fc_comments = get_comments('status=approve&type=comment&number='.$get_comments_num.'&post_id='.get_the_ID());
 if ( !empty($fc_comments) ) {
     $my_email=get_bloginfo ('admin_email'); //排除管理员的评论
     $i = 1; ?>
     <div class="fc_comments">
         <ul><?php
             $commentcount = $fc_comments->comment_count;
             $fc_output='';
             foreach ($fc_comments as $fc_comment) {
                 if ($fc_comment->comment_author_email != $my_email) {
                     $fc_avatar=get_avatar($fc_comment->comment_author_email,60);
                     $fc_output .= '<li><a href="'
                     .get_comment_link( $fc_comment->comment_ID, array('type' => 'all')).'">'
                     .$fc_avatar
                     .'</a><ul><li>'
                     .$fc_avatar
                     .'<p>'
                     .'<strong>'.$fc_comment->comment_author.'</strong> '
                     .$fc_comment->comment_date
                     .'</p><p>'
                     .convert_smilies(strip_tags($fc_comment->comment_content))
                     .'</p></li></ul></li>';
                     if ($i == $nums || $i == $commentcount) break; //评论数量达到退出遍历
                     ++$i;
                 }
             }
             echo $fc_output;
             if ($fc_output) echo '<li class="fc_more">', comments_popup_link('','','&raquo; more...'), '</li>';?>
         </ul>
     </div><?php
 } ?>

3. 然后就可以工作了……哦,CSS 样式参考,根据自己主题可以做适量修改

.fc_comments ul,.fc_comments ul ul p{margin:0;padding:0;}
.fc_comments ul li{position:relative;list-style:none;float:left;line-height:18px;margin-right:5px;}
.fc_comments ul li.fc_more{line-height:16px;padding-top:8px;}
.fc_comments ul li img.avatar{width:20px;height:20px;margin:0;padding:1px;border:1px solid #ddd;}
.fc_comments ul li img.avatar:hover{border-color:#999;}
.fc_comments ul li:hover > ul{display:block;}
.fc_comments ul ul{display:none;position:absolute;bottom:40px;left:0;}
.fc_comments ul ul li{width:280px;padding:5px;border:2px solid #999;background-color:#fff;}
.fc_comments ul ul li img.avatar{float:left;width:32px;height:32px;margin-right:5px;}

4. 真的没有了

PS1: 浮窗效果我用 css 实现,自然就是不支持 IE6 了,对 IE6 喜欢/藕断丝连的朋友还是放过它吧,让它安静的走开(离去)!如果你要炫的效果,那么就用 jQuery 吧,这里就不写了。

PS2: 其实还可以用 wp_list_comments() 函数来实现的,不过要另外写回调函数,有意思的朋友可以折腾一下,不是很难。

后话:其实我个人不喜欢加这个功能,因为我稍微有点速度控,每篇文章都调用一定数量的评论,当然会增大服务器的压力,直接影响的就是速度,当然,如果单页文章列表数量不多的话可以考虑,而且主机给力的话,这点速度影响是感觉不到的。

另外,由于众所周知的原因,gravatar头像的服务器在国内偶尔会抽风 + 速度慢,所以最好给头像加缓存,具体方法参考我以前的文章:《willin 的简单gravatar 头像缓存》、《让willin简单头像缓存函数my_avatar()真正支持alt

预告:懒人方式 - 直接扔到  functions.php 的方式,待续…… (不是很多人需要,“懒人方式”放弃折腾)

zww
or
oooo

“WordPress每篇文章显示指定数量的评论者头像及评论内容”有107条评论

  1. 小邪 says:

    嗷嗷嗷嗷 大叔我来鸟。。。

    1. zwwooooo says:

      @小邪
      你来鸟沙发啊

  2. 小h says:

    大叔早~

    1. zwwooooo says:

      @小h
      早,差不多吃午饭了

  3. 郑永 says:

    哎呀,做到地板了。

  4. 郑永 says:

    太厉害了,速度真快!这方法先收藏了,很给力!

  5. 如果是在文章页,下面本来就有评论,如果在首页,岂不是图像太多?

    1. zwwooooo says:

      @yesureadmin
      这是首页文章列表用的,呵呵呵。其实你可以举一反三,何必每篇文章都显示呢?你可以在最新一篇文章那里显示,如果还木有评论也可以再加个判断提示“沙发空闲中”等等,这里贴的是基本的调用代码,可以自己慢慢扩展

  6. 郑永 says:

    又仔细看了下,真好啊,不仅加上了指定数量的评论,而且还去掉了作者的评论,太完美了,对方网站也只是利用了css隐藏了多余的头像,并没有做到数量限制。这下可以好好利用你这个简单的来用在最新一篇文章上了。你的是最新评论头像,我更喜欢最早的评论显示在上面,也就是沙发,此时点击头像,就可以进入留言者的网站,以沙发来诱发大家积极评论,呵呵。

    1. zwwooooo says:

      @郑永
      反过来也是可以的,控制一下函数即可。

  7. 郑永 says:

    60 是头像大小?我改之,无反应~

    1. zwwooooo says:

      @郑永
      css控制,因为有2个头像,我用了个参数获取头像,免得重复调用。

    2. 郑永 says:

      @zwwooooo
      昨晚冲忙入睡,没看见是css控制,呵呵。今天稍作修改,日期那排加了一个换行,看起来比较好看点。我那里新文章正好可以用你这个,原来那个是css控制评论数量,影响速度,你这个才给力啊!正好可以用上了。

  8. 郑永 says:

    谢谢了,我先去睡觉了 :) 懂代码真快。

    1. zwwooooo says:

      @郑永
      对了,你在我这留得网址有错,是你的邮箱,下次更改一下。

  9. 有点蓝 says:

    盛事一件……又有新折腾了。 :twisted:

  10. phoetry says:

    好偏门的需求-.- 这样太影响速度了

    1. zwwooooo says:

      @phoetry
      其实……不一定要全部文章显示,可以如最新那篇显示一下,当然还是有点蛋疼 :mrgreen:

  11. cangzhang says:

    看不懂……有时间在学习php吧

    1. zwwooooo says:

      @cangzhang
      慢慢折腾学习

  12. schiy says:

    这下不文囧来的吧 :smile:
    这个功能对有需要的人来说挺个性的呢~~

    1. zwwooooo says:

      @schiy
      就是文囧昨晚才花了些时间调试然后写了这篇文章……

  13. 小年 says:

    高,实在是高!!!!

  14. 球犯 says:

    点广告的飘过 哈哈哈哈 折腾精神不灭啊~

    1. zwwooooo says:

      @球犯
      折腾才不会无聊

  15. 张扬扬 says:

    这个没有多大的必要对俺来说

    1. zwwooooo says:

      @张扬扬
      嗯嗯,需要者才去折腾

  16. jixiangac says:

    感觉这个创意不错,点击头像进入别人博客,可以诱惑别人抢前几位,~hohoho ~ :grin:

    1. zwwooooo says:

      @jixiangac
      嘻嘻,这里的代码里面头像链接是评论……当然可以改

  17. ZWWWOOOOO博主写的wordpress相关文章读起来流畅,代码也干净漂亮:) :smile: :smile:

  18. Demon says:

    收藏吧。有需要再来。
    好久没写代码的文章了哦。今天终于看到了。哈哈。

    1. zwwooooo says:

      @Demon
      呵呵,难得折腾了

  19. 期待懒人方式 :mrgreen:

    1. zwwooooo says:

      @空空裤兜
      慢慢来吧,忙啊

  20. LL.CX says:

    功能不错,实在高

    1. zwwooooo says:

      @LL.CX
      有人可能需要

回复给 yesureadmin ¬
取消回复

昵称 *

网址

B em del U Link Code Quote