侧边栏最新评论非插件法

Posted by Harid四月 - 5 - 2011 Leave comments   320 views 

这两天抽空又在折腾星期九了,想把它的YSlow评分弄高一点,一番折腾后,YSlow评分确实有了很大的提高,现在在有百度、谷歌联盟以及51统计的JS代码在的前提下,以YSlow的“Small Site or Blog”的标准,星期九YSlow是Grade A,Score 96。去掉这几个JS文件,基本上能达到99了。不过,让我头疼的是,在IE下貌似又无法正常访问了,具体原因没有细查,无非是JS与CSS吧!

在整合图片、剔除无用CSS、JS的同时,我又删除了几个插件:WP-Syntax(我真觉得没必要)、Wp-recentcomments、Ajax the Views。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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;
	}
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h3>Recent Comments</h3>
	<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_email != '******@ninthday.net' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 6";
		$comments = $wpdb->get_results($sql);
		foreach ($comments as $comment) {
			$a= 'http://www.ninthday.net/avatar/'.md5(strtolower($comment->comment_author_email)).'.jpg';
			$output .= "\n<li><img src='". $a ."' alt='Ninthday_Gravatar' title='".$comment->comment_author."' class='avatar avatar-32 photo' /><a href=\"" . htmlspecialchars(get_comment_link( $comment->comment_ID )) . "\" title=\"on " .$comment->post_title . "\">" . cut_str(strip_tags($comment->com_excerpt),14)."</a><br/><span class='commentAuthor'>By".$comment->comment_author."</span></li>";
		}
		$output = convert_smilies($output);
		echo $output;
	?>
	</ul>

注意,其中:

comment_date_gmt DESC LIMIT 6 中的 6 是要显示的评论数量;

cut_str(strip_tags($comment->com_excerpt),14) 中的 14 是每条评论要显示的文字数量;

******@ninthday.net是自己的邮箱,目的是不显示以此邮箱发表的评论;

“ $a ”变量是头像的URL,如果没有启用缓存的话将其右边的值改为“

'http://0.gravatar.com/avatar/'. md5( strtolower( $comment->comment_author_email) ). '?s=32&r=G';

”,其中32是头像尺寸;

第三步:往style.css里添加CSS控制符:

1
2
3
4
#sidebar .recentcomments img.avatar{width:33px;height:33px;float:left;position:relative;border:1px solid #ddd;margin:0 5px 0 0;padding:2px;}
#sidebar ul.recentcomments{list-style:none;padding-left:0;display:block;}
#sidebar ul.recentcomments li{margin:5px 0 0;line-height:16px;height:32px;overflow:hidden;}
#sidebar .commentAuthor{color:#999;}

效果见侧边栏>>

对应的缓存图片的代码如下,这是willin大师的缓存函数,因为方便,我把返回值改成了只返回图片URL而非带<img>标签的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function my_avatar( $email, $size = '32', $default = '', $alt = '' ) {
	$alt = esc_attr( $alt );
	$f = md5( strtolower( $email ) );
	$w = get_bloginfo('wpurl'); // 如果想放在 wp-content 路徑之下, 改為 $w = WP_CONTENT_URL;
	$a = $w. '/avatar/'. $f. '.jpg';
	$e = ABSPATH. 'avatar/'. $f. '.jpg'; // 如果想放在 wp-content 路徑之下, 改為 $e = WP_CONTENT_DIR. '/avatar/'. $f. '.jpg';
	$t = 1209600; //設定14天, 單位:秒
	if ( empty($default) ) 
		$default = $w. '/avatar/default.jpg';
	if ( !is_file($e) || (time() - filemtime($e)) > $t ){ //當頭像不存在或文件超過14天才更新
		$r = get_option('avatar_rating');
		//$g = sprintf( "http://%d.gravatar.com", ( hexdec( $f{0} ) % 2 ) ). '/avatar/'. $f. '?s='. $size. '&d='. $default. '&r='. $r; // wp 3.0 的服務器
		$g = 'http://www.gravatar.com/avatar/'. $f. '?s='. $size. '&d='. $default. '&r='. $r; // 舊服務器 (哪個快就開哪個)
		copy($g, $e); $a = esc_attr($g); //新頭像 copy 時, 取 gravatar 顯示
	}
	if (filesize($e) < 500) 
		copy($default, $e);
	/* echo "<img title='{$alt}' alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";*/
	echo $a;
}

另外还有一种很好的缓存图片的方法,见《缓存Gravatar头像》。

   声明:本文采用 BY-NC-SA 协议进行授权 | 星期九
   原创文章转载请注明:转自《侧边栏最新评论非插件法

分享本文: 腾讯微博 QQ空间 人人网 百度空间 开心网 新浪微博 Google Reader 豆瓣
Comments(26) Leave comments
  1. Gravatar
    博士牌民工 Internet Explorer Internet Explorer 8.0 Windows Windows XP

    不折腾WORDPRESS好久了

  2. Gravatar
    淘宝返利网 Internet Explorer Internet Explorer 8.0 Windows Windows 7

    博客做起真的是不怎么容易

    希望能与博主建立讲好的关系,以后多多交流!!!

    对了,你的博客做的很好。

  3. Gravatar
    鱼柳柳Nuffnang Internet Explorer Internet Explorer 8.0 Windows Windows 7

    :!: 这个功能好~~~~~~~~我想把最近文章和评论的代码都放进去 一直还没弄 谢谢星期九~

    还有 我给你发邮件了 期待回复~

    • Gravatar Harid  @  四月 13th, 2011 at 00:52 replied.

      @鱼柳柳Nuffnang, 在很多博客里看到拿福能的广告了。

      • Gravatar 鱼柳柳Nuffnang  @  四月 13th, 2011 at 11:51 replied.  | #4

        @Harid, 哈哈 那你也支持一下吧~ 我们都是自己一个一个博主的联系,看到你们又回复真的超级开心!!!

评论分页
4 + 1 =  (required)
 疑问 鼓掌 难过 呲牙 强 微笑 快哭了 坏笑 汗 奋斗 撇嘴 OK 偷笑 委屈 尴尬 傲慢 握手 玫瑰 胜利 大哭 抱拳
启用云输入法:      

NOTICE1: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!

NOTICE2: 请申请gravatar头像(http://en.gravatar.com),木有头像的会显示为“小怪物”头像,将难以通过审核!

NOTICE3: 如果您能消除一下评论框旁边的邻居的寂寞的话,Harid将不胜感激,你懂的!^_^