Old

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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25502

107 comments

  1. 小邪 小邪 Google Chrome 14.0.835.15 Google Chrome 14.0.835.15 Windows 7 x64 Edition Windows 7 x64 Edition

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

    沙发
  2. 小h 小h Google Chrome 13.0.782.107 Google Chrome 13.0.782.107 Windows 7 Windows 7

    大叔早~

    板凳
  3. 郑永 郑永 Firefox 5.0 Firefox 5.0 Windows XP Windows XP

    哎呀,做到地板了。

    地板
  4. ......
  5. mopvhs mopvhs Firefox 5.0 Firefox 5.0 Windows 7 Windows 7

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

    41楼
  6. 晓兵 晓兵 Internet Explorer 9.0 Internet Explorer 9.0 Windows 7 x64 Edition Windows 7 x64 Edition

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

    42楼
  7. 小灰 小灰 Google Chrome 12.0.742.122 Google Chrome 12.0.742.122 Windows XP Windows XP

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

    43楼
  8. 爱佳软 爱佳软 Firefox 6.0 Firefox 6.0 Windows 7 Windows 7

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

    45楼
  9. 王3峰 王3峰 Firefox 6.0 Firefox 6.0 Windows 7 Windows 7

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

    46楼
  10. 秦大少 秦大少 Google Chrome 13.0.782.215 Google Chrome 13.0.782.215 Windows 7 Windows 7

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

    47楼
  11. Jeven Jeven ChromePlus 1.6.2.0 ChromePlus 1.6.2.0 Windows 7 Windows 7

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

    48楼
  12. liveme liveme Google Chrome 13.0.782.218 Google Chrome 13.0.782.218 Windows 7 Windows 7

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

    49楼
    • zwwooooo zwwooooo Firefox 6.0.1 Firefox 6.0.1 Windows 7 x64 Edition Windows 7 x64 Edition

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

  13. fish fish Google Chrome 12.0.742.112 Google Chrome 12.0.742.112 Windows 7 Windows 7

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

    50楼
    • zwwooooo zwwooooo Firefox 6.0.2 Firefox 6.0.2 Windows 7 x64 Edition Windows 7 x64 Edition

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

  14. melvinliu melvinliu Google Chrome 14.0.835.202 Google Chrome 14.0.835.202 Windows 7 Windows 7

    第五行

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

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

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

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

    51楼
  15. 陌凡 陌凡 360Safe Explorer 360Safe Explorer Windows 7 Windows 7

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

    52楼
  16. iPhoto主题使用指南 | iCold.Me - pingback on 2012/01/05/ 13:47
    53楼
  17. 1踏雪 踏雪 Firefox 10.0.2 Firefox 10.0.2 Windows 7 x64 Edition Windows 7 x64 Edition

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

    54楼
    • zwwooooo zwwooooo Firefox 11.0 Firefox 11.0 Windows 7 x64 Edition Windows 7 x64 Edition

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

Leave a Reply