MOPVHS's Blog

零、有图有真相：

一、事情的开端：

本来逛完zchiy2k同学的博客准备睡觉了，然后zchiy2k同学留言说：

啊，你右边那个新评论提示框显示最新一条评论的效果是我最近刚好想做的~

原来有现成的了！而且跟我构思中的一样，真不错。不知你是用插件还是自己实现的？

接着想起ZERO同学(不知道他博客地址)也问过这个效果，那我就先用火柴棒撑住眼皮写出来分享吧~~~

顺便试试新改的文章样式…

二、说干就干

首先，强调下牛叉的原创作者：19同学

猛击跃迁到原文章：WORDPRESS带头像的最新留言

1、引入JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"  type="text/javascript"></script>

2、PHP代码，放在侧边栏中的：

<ul id="recentcomments">

<?php
global $wpdb, $comments, $comment;
$comments = $wpdb->get_results("SELECT comment_author, comment_author_email, comment_author_url, comment_ID, comment_post_ID, SUBSTRING(comment_content,1,65) AS comment_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 = '' ORDER BY comment_date_gmt DESC LIMIT 18");
if ($comments): foreach ($comments as $comment): $comment_author_19 = $comment->comment_author;
if ($comment_author_19 == "") {$comment_author_19 = "Anonymous";}
$order = array ("\r\n","\n","\r");
$order2 = array ("\"","\'");
$replace = '';
$tmpstr = str_replace($order2, "", str_replace($order, $replace, sprintf('%s', strip_tags($comment->comment_excerpt))));
$content = '<span class=\'recentcommentslink_author\'>' . $comment_author_19 . '</span> <span class=\'recentcommentslink_on\'>on</span> <span class=\'recentcommentslink_title\'>' . get_the_title($comment->comment_post_ID) . '</span><div class=\'recentcommentslink_excerpt\'>' . $tmpstr . '</div>';
echo '<li><div id="C_' . $comment->comment_ID . '_d" style="display:none">' . $content . '</div>' . '<a title="' . $comment_author_19 . ' on ' . get_the_title($comment->comment_post_ID) . '" id="C_' . $comment->comment_ID . '" href="' . get_permalink($comment->comment_post_ID) . '#comment-' . $comment->comment_ID . '" >' . get_avatar($comment->comment_author_email, 40) . '</a></li>';
endforeach;
endif;
?>

</ul>

PS：修改DESC LIMIT 18来调整显示最新评论的数量，或者你也可以自己写成函数调用。

若要过滤博主的评论，把第五行代码用下面这句替换即可：

$comments = $wpdb->get_results("SELECT comment_author, comment_author_email, comment_author_url, comment_ID, comment_post_ID, SUBSTRING(comment_content,1,65) AS comment_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 != 'MOPVHS' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 20");

记得把“MOPVHS”换成自己的名字哦~~~

3、插入这句代码：

<script type="text/javascript">jQuery(document).ready(function(){new tooltip_19(".recentcommentslink");})</script>

4、下面的代码可以用“<script type=”text/javascript”>和</script>”框起来，也可以单独写到JS文件里：

jQuery.noConflict();
var tooltip_19 = function(tid) {
	var xOffset = 10; var yOffset = 20; var t;
	jQuery("a" + tid).hover(function(e) {
		var aid = jQuery(this).attr("id");
		t = jQuery("#" + aid + "_d").html();
		jQuery("body").append("<div id='tooltip_19'>" + t + "</div>");
		jQuery("#tooltip_19").css("top", (e.pageY + yOffset) + "px").css("right", (jQuery(window).width() - e.pageX + xOffset) + "px").fadeIn("fast").show();
	}, function() {jQuery("#tooltip_19").remove();});
	jQuery("a" + tid).mousemove(function(e) {jQuery("#tooltip_19").css("top", (e.pageY + yOffset) + "px").css("right", (jQuery(window).width() - e.pageX + xOffset) + "px").show();});
};

4.1、19原文中提供的CSS代码：

#tooltip_19{position:absolute;border:1px solid #222222;background:#FFFFFF;padding:5px;color:#222222;display:none; z-index:23;}
#recentcomments li{float: left; padding:0px;}
.recentcommentslink_author{ font-weight:bold; font-size:1.2em;}
.recentcommentslink_on { padding: 0px 5px 0px 5px; font-style:italic;}
.recentcommentslink_title { color:#666666; font-size:0.8em;}
.recentcommentslink_excerpt {clear:both; color:#333333; font-size:0.9em; width:200px; padding:10px;}
.avatar {border: 1px solid #d3d3d3; background-color: #fff;padding: 1px; margin-bottom: 2px; margin-right: 10px;}

5、下面是我直接从19同学的CSS里翻出来的代码，稍微改了一下：

/*19_Tooltip*/
#tooltip_19{
position:absolute;
border:1px solid #999999;
background:#FFFFFF;
padding:5px;color:#666666;
display:none;
z-index:23;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: -5px 8px 15px 2px #666;
-moz-box-shadow: -5px 8px 15px 2px #666;
-webkit-box-shadow: -5px 8px 15px 2px #666;
}
.avatar {border: 1px solid #d3d3d3; background-color: #fff;padding: 1px; margin-bottom: 2px; margin-right: 10px;}
.recentcommentscontent {position:relative;}
.arrow{width:20px; height:24px; background: url({图片路径}images/arrow.gif) no-repeat; position: absolute; top:5px; right:-20px;}
#recentcomments {padding-left:20px;}
#recentcomments li{float: left;}
.recentcommentslink_on { padding: 0px 5px 0px 5px; font-style:italic; font-size:11px; color:#333333;}
.recentcommentslink_title { color:#666666; font-size:0.8em;}
.recentcommentslink_author{ font-weight:bold; font-size:1.2em; color:#333333;}
.recentcommentslink_excerpt {clear:both; color:#666666; font-size:0.9em; max-width:300px; width: auto; padding:10px; border-top:1px #666666 dotted; margin-top:10px;}
.recentcommentslink_excerpt img.avatar-40{margin-bottom:20px;float:left;}

三、困…关机面床…ZZZzzz…

预发布： Jul 27, 2010 @ 09:25

哇哦...下面还有,想不想看？

• 2010/08/18 -- jQuery)烟囱冒烟效果插件 (91)
• 2010/08/16 -- WordPress)借jQuery之力找出坐沙发的是谁 (81)
• 2010/08/14 -- WordPress)非跨页悬浮显示你回复之人的评论内容 (36)
• 2010/04/03 -- jQuery(点击链接文字后替换文字 (16)
• 2010/04/03 -- jQuery(Sweet Titles(美妙的标题提示 (5)
• 2010/03/30 -- jQuery(添加页面载入进度条 (17)