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. mopvhs says:

    扔进Evernote里放着先~~~ :evil:

    1. zwwooooo says:

      @mopvhs
      慢慢折腾

    2. 王3峰 says:

      @zwwooooo
      折腾也是我的人生信条啊。

  2. 晓兵 says:

    这个蛮不错滴,来折腾折腾。

    1. zwwooooo says:

      @晓兵
      个性化功能

  3. 小灰 says:

    果断收藏之,以后研究之 = =

    1. zwwooooo says:

      @小灰
      慢慢折腾

  4. 爱佳软 says:

    博主这个评论分页是如何实现的?不是默认的分页功能,没有/comment-page/2

    1. zwwooooo says:

      @爱佳软
      ajax评论翻页

    2. 王3峰 says:

      @zwwooooo
      我觉得你可以把pingback的评论单列出来,列在一起显得有点乱。

    3. zwwooooo says:

      @王3峰
      其实你看看评论框下面就不会这样说了,霍霍

    4. 王3峰 says:

      @zwwooooo
      看到了。呵呵。

  5. 王3峰 says:

    对评论多的页面来说确实不错。

  6. 秦大少 says:

    这个先收藏下,以后可能会用的到。现在没心情折腾WP了……

  7. Jeven says:

    真羡慕你们懂技术的,想要什么功能加什么功能,我只能干瞪眼

    1. zwwooooo says:

      @Jeven
      折腾多了就懂点了

  8. liveme says:

    这创意是很好,可是这应该会影响到博客载入速度,想想看,每篇文章都有至少三五个头像,首页一般8篇左右,所以首页就要载入三四十个头像了。
    不过有需要的话,也不介意。

    1. zwwooooo says:

      @liveme
      文章已说可以举一反三,你可以定义只有前面一些文章显示

  9. fish says:

    本地折腾了一下,发现一个问题,就是如果我最新的5条评论都是同一个人,那它就显示5个头像是同一个人的 :?:

    1. zwwooooo says:

      @fish
      嗯,应该要考虑一下,可以加个判断

  10. melvinliu says:

    第五行

      $my_email=get_bloginfo ('admin_email'); //排除管理员的评论

    在我这测试无效(Ver 3.2.1),改成

    $my_email=get_the_author_email(); //只排除本文作者的评论

    才行,并且这样对于多作者博客来讲更合理。

    1. zwwooooo says:

      @melvinliu
      这里是针对单人博客,都用加多判断即可

  11. 1陌凡 says:

    :evil: 我有一本页面被评论之后不显示出来,后台可看到。。。不知道咋整

    1. zwwooooo says:

      @陌凡
      是不是被审核什么的?

  12. iPhoto主题使用指南 | iCold.Me says:

    [...] 主题集成了首页评论者头像,最多允许显示5名评论者头像,若是不想使用,主题设置中的:相关插件 — – 勾选’关闭首页显示评论’ [...]

  13. 踏雪 says:

    这篇文章 里面调用的 评论列表.$fc_comment->comment_date 这句话怎么写 可以输出时间格式是年月日,而不是年月日时分秒啊?

    1. zwwooooo says:

      @踏雪
      你是前几天找我的?那么问题就已经解决了。

发表评论

昵称 *

网址

B em del U Link Code Quote