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

    收藏先,这个需求不大

    1. zwwooooo says:

      @winy
      有人要就可以了

  2. Dianso says:

    蛋疼的功能啊 :mrgreen:

    1. zwwooooo says:

      @Dianso
      有点蛋疼

  3. 幸福每一天 says:

    想请问下站长有什么方法能实现wordpress不同页面显示指定的标签? :wink: 谢谢!

    1. zwwooooo says:

      @幸福每一天
      加页面判断,如 is_home(), is_singular(), is_archive()...

  4. 晨光 says:

    折腾精神是可贵的呀

    1. zwwooooo says:

      @晨光
      广告:因为喜欢所以折腾

    2. 晨光 says:

      @zwwooooo
      确实如此!

  5. 郑永 says:

    网址和邮箱都木有错啊 :)

    1. zwwooooo says:

      @郑永
      因为我更正了

    2. 郑永 says:

      @zwwooooo
      晕~~~ 不好意思,我在浏览器的自动填表里核对了,应该没错,只是变成大写了。

  6. wmtimes says:

    不错。z大叔看来对wp已经是炉火纯青了

    1. zwwooooo says:

      @wmtimes
      折腾多点而已

  7. axiu says:

    加上的效果看着不错~有点专业网站的味道~~

    1. zwwooooo says:

      @axiu
      调用蛋疼啊

  8. A.shun says:

    收藏

  9. A.shun says:

    今天又没宕机, :mrgreen:

    1. zwwooooo says:

      @A.shun
      没有收到,忽略不计。

  10. IM路人 says:

    折腾无极限~~~~

    1. zwwooooo says:

      @IM路人
      无折腾不WP

  11. 期待functions.php 方式 :mrgreen:

    1. zwwooooo says:

      @蓝色离子
      霍霍,懒人还是挺多的

  12. 园子 says:

    这个应该不属于大众需求了
    呵呵。

    1. zwwooooo says:

      @园子
      嗯,有人需要即可

  13. smilebull says:

    暂不需要,Mark一下

  14. 死大葱 says:

    折腾吧…我刚刚换了主题换了域名,不知道这叫不叫折腾…

    1. zwwooooo says:

      @死大葱
      也是折腾的一部分

  15. 无冷 says:

    还是mark下,可能有用上

  16. Bee君 says:

    哇咔咔,我当然是期待懒人方式~~

    不过不知道theme会不会兼容

    1. zwwooooo says:

      @Bee君
      注意css即可。

  17. 公子 says:

    收藏下。。。

  18. 微故事 says:

    搞技术的伤不起,不懂代码的人飘过,为什么要制定数量呢。

    1. zwwooooo says:

      @微故事
      想一下就知道了。

  19. 郑永 says:

    请教一下,用 echo 输出的代码,如何可以把它还原回去,就是太多的echo,很烦,想还原到原始代码。

    1. zwwooooo says:

      @郑永
      很烦的话查查php的 echo 用法即可。

    2. zwwooooo says:

      @郑永
      你检查一下你的网站……这次我不帮你改了,免得你误认为你没有填错。

    3. 郑永 says:

      @zwwooooo
      厉害,看了下,的确是错了!!~~ ,不过你连这个细节都关注到了,太牛了。不会是正好去点了吧?有可能。。呵呵

  20. 郑永 says:

    兄弟,运用了你的方法以后,我又稍作了修改,原来你用的是鼠标放上去会显示层,但是我那里太急了,显示的信息被 content的层给遮住了,变成靠近边缘的信息被遮住,所以我换了另一种,就是用 title 美化的方法,这下好多了 :) 特来告诉你,我又努力一翻了,呵呵:)

    1. zwwooooo says:

      @郑永
      看了,很不错,用jQuery就更灵活了,css是有限制的,所以我在写css时已经想到这个overflow:hidden问题,特意left=0,本来我是想left设为负数的。慢慢折腾,看来你找到折腾的乐趣了。

回复给 Dianso ¬
取消回复

昵称 *

网址

B em del U Link Code Quote