带头像显示的最新评论代码 - 完善篇

2010.7.5 Edit:最新的参考带头像显示的最新评论代码 - 蛋疼篇

因为昨天大修了主题的评论样式,从原来的 5 级嵌套改为 2 级嵌套,也保留了以前 5 级嵌套的现示,2级嵌套使用了 Jinwen 的思路,所以 2 级嵌套评论后的评论都是 @ 方式显示跟随在2级后门。

由此问题就来了,一直使用的最新评论代码不能显示或者转换带连接开头的评论内容,致使只要带有链接 @ 方式开头的评论内容显示不了,可 Jinwen 那里的最新评论可以显示带连接的评论内容。

我前几天请教过 Jinwen ,Jinwen说他用的是插件,于是只能自个折腾了,最后在国人开发的 WP Kit CN 这个插件找到了解决办法——加个截断函数。

下面我从头说起,来说明“最新评论代码”完善过程:

我在《用代码武装你的wordpress [part 1]》这篇文章贴过“最新评论代码 - Recent Comments”的代码,这是最基本的“最新评论”代码,支持中文摘录评论长度,代码如下:

<h2>Recent Comments</h2> <ul> <?php global $wpdb; $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,comment_author_email, SUBSTRING(comment_content,1,16) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' AND user_id='0' ORDER BY comment_date_gmt DESC LIMIT 10"; $comments = $wpdb->get_results($sql); $output = $pre_HTML; foreach ($comments as $comment) {$output .= "\n<li>".get_avatar(get_comment_author_email(), 32).strip_tags($comment->comment_author).":<br />" . " <a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . "\">" . strip_tags($comment->com_excerpt)."</a>...</li>";} $output .= $post_HTML; echo $output; ?> </ul>

说明:

  • comment_date_gmt DESC LIMIT 10 中的 10 是指要显示的评论个数
  • SUBSTRING(comment_content,1,16) 中的 16 是指每条评论的中文文字个数
  • ('comment_author_email'), 32) 中的 32 是指头像的图片大小

不要迷恋分割线,分割线只是个传说

一直用到上个月底才换为 willin 修改过的最新评论代码,我稍微改了一些如下:

<h2>Recent Comments</h2>
<ul class="recentcomments">
<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,comment_author_email, SUBSTRING(comment_content,1,18) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != 'zwwooooo' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10";
$comments = $wpdb->get_results($sql);
foreach ($comments as $comment) {
$output .= "\n<li>".get_avatar(get_comment_author_email(), 32)."<a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . "\">" . strip_tags($comment->com_excerpt)."</a>...</li>";
}
$output = convert_smilies($output);
echo $output;
?>
</ul>

说明:

  • comment_date_gmt DESC LIMIT 10 中的 10 是指要显示的评论个数
  • SUBSTRING(comment_content,1,18) 中的 18 是指每条评论的中文文字个数
  • ('comment_author_email'), 32) 中的 32 是指头像的图片大小
  • zwwooooo 改为你自己的用户名(就是不显示自己的评论)
  • 加了个 class “recentcomments”,可以在css里面定义样式

如果你使用了 Willin 的头像缓存代码,那么可以修改如下:

<h2>Recent Comments</h2>
<ul class="recentcomments">
<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,comment_author_email, SUBSTRING(comment_content,1,18) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != 'zwwooooo' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10";
$comments = $wpdb->get_results($sql);
foreach ($comments as $comment) {
$a= get_bloginfo('wpurl') .'/avatar/'.md5(strtolower($comment->comment_author_email)).'.jpg';
$output .= "\n<li><img src='". $a ."' alt='' title='".$comment->comment_author."' class='avatar' /><a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . "\">" . strip_tags($comment->com_excerpt)."</a>...</li>";
}
$output = convert_smilies($output);
echo $output;
?>
</ul>

说明:

  • comment_date_gmt DESC LIMIT 10 中的 10 是指要显示的评论个数
  • SUBSTRING(comment_content,1,18) 中的 18 是指每条评论的中文文字个数
  • 头像的图片大小自行在style.css增加个名为“recentcomments”的 class 定义(例如width:32px; height:32px;)
  • zwwooooo 改为你自己的用户名(就是不显示自己的评论)
  • 参数 $a 是缓存路径

不要迷恋分割线,分割线只是个传说

现在是文章的重点,为了能显示带链接开头的评论,我找了很多插件,都是不能显示带连接开头的评论内容,后来突然想到国产的 WP Kit CN 这个插件,一试它可以显示带连接的评论,这下有眉目了。

经过翻看它的代码,发现它是自定义了一个截断函数:function cut_str($string, $sublen, $start = 0, $code = 'UTF-8'),于是发挥 CP 党的精神直接挪到我的主题 function.php 里面,经测试 is OK!小高兴了一下,所以就有了这篇文章了。

下面是继续贴代码:

第一步:把下面的代码加到主题文件的 function.php 里面

function cut_str($string, $sublen, $start = 0, $code = 'UTF-8')
{
 if($code == 'UTF-8')
 {
 $pa = "/[\x01-\x7f]|[\xc2-\xdf][\x80-\xbf]|\xe0[\xa0-\xbf][\x80-\xbf]|[\xe1-\xef][\x80-\xbf][\x80-\xbf]|\xf0[\x90-\xbf][\x80-\xbf][\x80-\xbf]|[\xf1-\xf7][\x80-\xbf][\x80-\xbf][\x80-\xbf]/";
 preg_match_all($pa, $string, $t_string);
 if(count($t_string[0]) - $start > $sublen) return join('', array_slice($t_string[0], $start, $sublen))."...";
 return join('', array_slice($t_string[0], $start, $sublen));
 }
 else
 {
 $start = $start*2;
 $sublen = $sublen*2;
 $strlen = strlen($string);
 $tmpstr = '';
 for($i=0; $i<$strlen; $i++)
 {
 if($i>=$start && $i<($start+$sublen))
 {
 if(ord(substr($string, $i, 1))>129) $tmpstr.= substr($string, $i, 2);
 else $tmpstr.= substr($string, $i, 1);
 }
 if(ord(substr($string, $i, 1))>129) $i++;
 }
 if(strlen($tmpstr)<$strlen ) $tmpstr.= "...";
 return $tmpstr;
 }
}

第二步:修改过的最新评论代码(调用第一步的截断函数)

<h2>Recent Comments</h2>
<ul class="recentcomments">
<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,comment_author_email, comment_content AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != 'zwwooooo' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 12";
$comments = $wpdb->get_results($sql);
foreach ($comments as $comment) {
$output .= "\n<li>".get_avatar(get_comment_author_email(), 32)."<a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . "\">" . cut_str(strip_tags($comment->com_excerpt),18)."</a></li>";
}
$output = convert_smilies($output);
echo $output;
?>
</ul>

说明:

  • comment_date_gmt DESC LIMIT 12 中的 12 是要显示的评论数量
  • cut_str(strip_tags($comment->com_excerpt),18) 中的 18 是每条评论要显示的文字数量
  • zwwooooo 是用户名,目的是不显示此用户的评论,改为自己的用户名吧
  • recentcomments 为自定义 class
  • get_avatar(get_comment_author_email('comment_author_email'), 32) 中的 32 是头像大小

如果你使用 Willin 的头像缓存代码,那么代码如下:

<h2>Recent Comments</h2>
<ul class="recentcomments">
<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,comment_author_email, comment_content AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != 'zwwooooo' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 12";
$comments = $wpdb->get_results($sql);
foreach ($comments as $comment) {
$a= get_bloginfo('wpurl') .'/avatar/'.md5(strtolower($comment->comment_author_email)).'.jpg';
$output .= "\n<li><img src='". $a ."' alt='' title='".$comment->comment_author."' class='avatar' /><a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . "\">" . cut_str(strip_tags($comment->com_excerpt),18)."</a></li>";
}
$output = convert_smilies($output);
echo $output;
?>
</ul>

OK,折腾完,又无聊去了 = =

延伸折腾:不是bug的解决方法《带头像显示的最新评论代码 - 链接 Bug 修正

zww
or
oooo

“带头像显示的最新评论代码 - 完善篇”有158条评论

  1. 郑永 says:

    seo搞的很不错啊,一搜索就又到你网站来了 :) 内容很优秀。

    1. zwwooooo says:

      @郑永 呃~我写文章从来没注意过seo问题,或许我有几篇文章是写这个代码的吧

  2. 郑永 says:

    再次请教一下,为什么侧边输出评论,不能屏蔽自己的评论呢?貌似因为读者墙已经调用了,所以下面就无法执行呢?

    1. zwwooooo says:

      @郑永 你没仔细看文章?找到

      AND comment_author != 'zwwooooo'

      这里面的zwwooooo就是博主自己的用户名,你改为你的就行了

  3. 迈向成功的脚步 » 解决无法隐藏博主的最新评论 says:

    [...] 为了调整评论的事情,又折腾起来了,以前那段评论调用代码已经很满意了,但是最近想换个花样,所以再次折腾,平时折腾起来也就加下代码,改下代码,这次还真遇到一个奇怪的事情,希望知道的童鞋留言告之其原理,虽然解决了,但还是疑点多多!在还没解决之前,google了一下,参照ZWWoOoOo的带头像显示的最新评论代码 - 完善篇 不行,好换个看看,继续google,万戈的Wordpress 隐藏博主的最新留言 又不行,好了,不继续了,仔细看下代码,都差不多,只是美观问题,我感觉还是很喜欢zwwooooo现在的侧边最新评论,前面是头像,右上面是内容,右下面是作者,看起来很不错,就是不知道他肯共享具体样式么?呵呵,话撤回来,无非最重要的就是那句:comment_author != ‘郑 永’ ,但是大家仔细观察一下下面的两段个代码,comment_author != ‘zhengyong’ 和前面说的有何区别?就因为这个问题,刚开始因为不知道,一直以为填zhengyong就可以了,因为上面那段代码是可以的,大家可以想象一下,这一折腾我试了多少个代码,甚至在想是否因为一个页面调用了两次,所以才出现问题的?但就在刚才我去万戈的Wordpress 隐藏博主的最新留言看到他的例子填的是中文名字,于是我就好奇的填中文名字-郑永,结果还是不行,这就怪了,突然马上想到万戈的名字应该不会在后台填写姓万名戈吧?我猜这也不是他真名吧!说到名字,再说说Zwwooooo,我猜他是第4个起zwwo这个名字的人,因为前三个都被抢了,超典型的抢注名字啊!话撤回来,于是我就在我名字中间加个空格,这代码还真牛了,真能识别姓名出来,就这样解决了,大家要是有遇到同类事情,多试试自己的用户名吧。 [...]

  4. [...] avatar 头像缓存代码我屏蔽了,因为有些主机支持的不是很好,如果你要使用可以参考这篇文章 http://zww.me/archives/24711, 代码在 function.php 。侧边栏的最新评论也可以使用缓存,可以参考 http://zww.me/archives/24736 [...]

  5. 阿邙 says:

    几天谷歌更新了方向链接貌似,
    32个20几个都是你这里过去的..

    可恶的是,给俺pr弄成0了..

    1. zwwooooo says:

      @阿邙 为啥你的pr会变成0?

    2. 阿邙 says:

      @zwwooooo 俺也不知道是为啥... 郁闷中,.

    3. 阿邙 says:

      @zwwooooo 难道是换主机太频繁了..

    4. zwwooooo says:

      @阿邙 也许,而且刚好碰到pr更新,嘿嘿

  6. StartOver says:

    WordPress 主題製作學習筆記:主題其他功能完善(完)...

    自從 SO Personal 主題上線之後,我就開始了一連串的主題製作學習筆記系列文章,直到本篇,已經是第十篇了,我想,也該做個完結,尤其在 WordPress 3.0 新版本即將上線之前。本篇文章主要介紹 SO Personal 主題的其他功能,雖然都是很小的一些技巧,但是記錄於此,除了給自己做個筆記之外,也希望能分享給所有對於 WordPress 主題製作有興趣的朋友們;順便跟大家說聲: SO Personal 主題即將正式公開發佈,屆時大家便可自由下載使用!......

  7. 阿邙 says:

    有很多人用了你提供的很迷茫啊
    该更新一下了
    显示的头像都是默认的谜样人物
    http://kan.willin.org/?p=1278&cpage=1#comment-4436
    这里willin给出了答案。。

    1. zwwooooo says:

      @阿邙 测试一下,的确是有问题,函数参数错误,囧~

  8. [...] ,其中提到过类似的方法,不过那个我还是不很满意, 于是决定试用zww《带头像显示的最新评论代码 - 完善篇》 中提到的Willin修改过的最新评论代码. [...]

  9. says:

    看来还得来这里找,终于找到答案了

    1. zwwooooo says:

      @洁 呵呵,搞定就好

  10. wei says:

    你好,我用了这段代码,可以显示评论,但没有评论的用户名,只有评论的内容,请问哪里可以改吗?谢谢!

    1. zwwooooo says:

      @wei

      $output .= "\n<li>".get_avatar(get_comment_author_email(), 32)."<a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . "\">" . cut_str(strip_tags($comment->com_excerpt),18)."</a></li>";
      改为:
      $output .= "\n<li>".get_avatar(get_comment_author_email(), 32). $comment->comment_author .":<br/><a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . "\">" . cut_str(strip_tags($comment->com_excerpt),18)."</a></li>";
      注意:这里面的<br/>是换行,可能需要更改css,如果你不想换行,就把<br/>去掉

    2. wei says:

      @zwwooooo 谢谢!
      还有问一下博主这里的评论样式怎么实现啊?我看了你这里的文章,试了一下之后发现只开两层嵌套评论,子评论中的reply按钮就没了。。。

    3. zwwooooo says:

      @wei wp的设定本来就是这样,我这用jQuery改了,去jinwen那里,他写过,但不一定适合你。

    4. arik says:

      @zwwooooo
      缓存版带评论者用户名的怎么改呢?

    5. zwwooooo says:

      @arik
      改用户名?改什么用户名?

    6. arik says:

      @zwwooooo
      我说,缓存版的怎样显示评论者用户名呢? :shock:

    7. zwwooooo says:

      @arik
      你还是参考这篇 http://zww.me/archives/25188
      或者用get_comments()函数的这篇 http://zww.me/archives/25317 (注:我博客目前用的是这个方法)

  11. 主题Squash | 采薇 says:

    [...] 3. 最新评论(参考自om《带头像显示的最新评论代码 - 完善篇》); [...]

  12. 阿溪 says:

    OK啦!!
    终于!!
    感谢zwwooooooooooooo大锅啊!

    1. zwwooooo says:

      @阿溪
      不用客气

  13. [...] 侧边栏的改法参考这里。下面对自己的具体改发做下笔记,由于对PHP无任何基础,因此如读者发现不足之处,请告知。 [...]

  14. Wayne says:

    学习。另外请问博主用的代码插件是那个呢?风格挺好。

    1. zwwooooo says:

      @Wayne
      我是直接贴高亮后的html代码,木有插件。

  15. WordPress Theme:zww Line (beta 2) | xperience says:

    [...] avatar 头像缓存代码我屏蔽了,因为有些主机支持的不是很好,如果你要使用可以参考这篇文章 http://zww.me/archives/24711,代码在 function.php 。侧边栏的最新评论也可以使用缓存,可以参考 http://zww.me/archives/24736 [...]

  16. 延迪 says:

    我用了代码,没反应!不知是什么问题?

    1. zwwooooo says:

      @延迪
      认真检查一下,这代码验证过的了

  17. [...] 继续找,发现可以不用插件就可以实现。参考了ZWWoOoOo的带头像显示的最新评论代码 – 完善篇,成功实现了这个功能。 [...]

  18. toptpe says:

    大侠,怎么让鼠标放到评论者头像上就可以显示评论者的名称啊?

    1. zwwooooo says:

      @toptpe
      要用到头像缓存,参考 http://zww.me/archives/25296

  19. 测试下,如果我的名字很长,那么侧边评论是怎么显示的!

    1. zwwooooo says:

      @秦天SEO(TSKY.CC)如果我的名字很长
      很长也就这样显示,如果太长我当垃圾处理。这次就算了,给你看看效果。

  20. [...] 这里主要记录一下用代码替换Wp-recentcomments插件的步骤,方法来自于ZWWoOoOo达人。 [...]

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote