WORDPRESS带头像的最新留言

By19.Published on二月 22, 2010 12:16. 22 Views .
很差差一般好非常好 (1 次评分, 平均: 5.00 out of 5)
Loading ... Loading ...

提供下侧边栏的最新留言

显示头像为主,类似代码很多,我也只是加了一个JS的提示效果~简单写下我的方法。在需要插入最新留言的地方加入:

1
<ul id="recentcomments">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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 class="recentcomments"><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 . '" class="recentcommentslink" href="' . get_permalink($comment->comment_post_ID) . '#comment-' . $comment->comment_ID . '" >' . get_avatar($comment->comment_author_email, 40) . '</a></li>';
endforeach;
endif;
?>
1
</ul>
1
<script type="text/javascript">jQuery(document).ready(function(){new tooltip_19(".recentcommentslink");})</script>

修改DESC LIMIT 18来调整最新评论数量,或者你也可以自己写成函数调用,之后加入下面的JS和CSS就行了:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"  type="text/javascript"></script>
1
2
3
4
5
6
7
8
9
10
11
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();});
};
1
2
3
4
5
6
7
#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;}

即右侧~可以自己调整显示框的样式,我这里加了一个简单的箭头。

本文来自: http://www.ll19.com/wp_recent_comments.html

{ Tags: }
这篇文章发布于 2010年02月22日,星期一,12:16 下午,归类于 Diary。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论,或者从您的站点trackback

19 Responses to “ WORDPRESS带头像的最新留言 ”

  1. sdiy sdiy 说: ( Has commented 2 times in LL19.com )

    请问下博主 如果评论比较长的话 怎么换行呢?

    • 19. 19. 说: ( Admin commented )

      会根据你的DIV的宽度自动换行,IE6除外,具体IE6为什么不能自动换行我也懒得去弄清楚了~

      @sdiy:


回复分页(Comments pages):     « 早前评论   

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。