TypeCodes

WordPress中Gravatar头像缓存至本地服务器——暨博客优化实录

从11月24开始,博客开始进行优化。一来是博客的服务器不是很好,访问速度比较慢;二来,个人越来越倾向简洁、实用、便捷的博客主题。之前博客的界面有些地方比较繁复,比如右侧栏有两处同时实现类似“最新评论”的功能;另外,博客首页的图片过多,像右侧栏的粉丝墙和最新评论中的头像每次打开博客都需要从gravatar.com下载头像到本地的服务器,加长了响应速度,这点对用户的体验造成了很大的影响。所以,这次的优化主要就是针对这两个方面进行的。

(一)去繁存简,使用便捷

1、主要针对右侧栏的界面优化,去掉“同步微博vs公告栏”字样,修改CSS以突出订阅栏目的四个小图标。

右侧栏界面优化(对比图)

2、优化一些PHP程序,例如博客主题在判断后台是否开启了头像缓存功能时,使用如下代码 <?php if (get_option('swt_type') == 'Display') ?> 。我直接删除该条语句,并用接下来(二)中的方法开启gravatar头像本地服务器缓存。效果如下图所示,大家可以右键查看图片的路径是否改成了博客服务器的文件路径。

右侧栏“最新评论”的头像缓存

博客“留言吧”的头像缓存

(二)老生常谈,WordPress中的Gravatar头像本地服务器缓存,加快响应速度

先把下面的代码加入到主题的functions.php中,然后在需要的地方(例如,我的博客右侧栏的“读者粉丝墙”以及留言吧等等)调用这个my_avatar( )函数;然后在博客的主题下面新建一个avatar文件夹(用于保存头像),上传到空间后的权限是755。

//头像缓存 by vfhky
function my_avatar( $email, $size = '40', $default = '', $alt = '' ) {
  // $alt = (false === $alt) ? '' : esc_attr( $alt );
  $alt = ('' == $alt) ? '' :  $alt ;//用于设置当鼠标移到头像上显示提示文字
  $f = md5( strtolower( $email ) );//根据email的值来生成一个md5变量值,作为本地.jpg头像的名字
  $a = get_bloginfo('template_directory').'/avatar/'. $f. '.jpg';//需要在主题下面新建一个avatar文件夹
  $e = ABSPATH.'wp-content/themes/weisaysimple/avatar/'. $f. '.jpg';//缓存的头像的绝对路径
  $default_random_abs = ABSPATH .'wp-content/themes/weisaysimple/avatar/default/';//avatar文件夹下新建一个default文件夹,用于保存博客预先自定义的头像
  $default_random = array('default1.jpg', 'default2.jpg','default3.jpg','default4.jpg','default5.jpg','default6.jpg','default7.jpg','default8.jpg','default9.jpg','default10.jpg','default12.jpg','default13.jpg','default14.jpg','default15.jpg','default16.jpg','default17.jpg','default18.jpg'); //default文件夹下添加18个自己喜欢的头像,作为没有gravatar头像的人使用
  $default_random_num = array_rand($default_random, 1); //随机从上面18张头像中选出一张 
  $t = 432000; //设置头像更新时间为5
  if ( empty($default) ) $default = $default_random_abs.$default_random[$default_random_num];
  if ( !is_file($e) || (time() - filemtime($e)) &gt; $t ){ //当头像不存在或文件不超过5天才更新
  //$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);
  //$g中的值(也就是从gravatar.com获取的头像)复制到$e中保存(也就是缓存到本地服务器)
  $a = esc_attr($g);
  }
  if (filesize($e) &lt; 500) copy($default, $e);//如果没有gravatar头像(500不能改,粗糙地判断是否有gravatar头像),那么就把把$e中的值(也就是博客预先自定义的头像)复制到$e中保存(也就是缓存到本地服务器)
  echo "&lt;img title='{$alt}' alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' /&gt;";//直接输出头像
}

温馨提示:上述代码和预先自定义的头像我已经放到了博客的共享资源区(115网盘or百度云盘or谷歌托管代码),大家可以参考下。这步完成后,我们就可以在自己需要的地方调用了。例如,我博客中的contributes里面有段代码是调用get_avatar()函数来获取gravatar.com设置的头像的。

foreach ($wall as $comment){
  if( $comment-&gt;comment_author_url )
  $url = $comment-&gt;comment_author_url;
  else $url="#";
  $r="rel='external nofollow'";
  $tmp = "&lt;a href='".$url."' '".$r."' title='".$comment-&gt;comment_author." (留下".$comment-&gt;cnt."个脚印)'&gt;".get_avatar($comment-&gt;comment_author_email, 36)."&lt;/a&gt;";
  $output .= $tmp;//调用get_avatar()函数来获取gravatar.com设置的头像
}
echo $output ;

那么,现在我就可以使用刚在functions.php定义的my_avatar( )函数来获取本地服务器缓存的头像了,修改如下:

echo my_avatar($comment->comment_author_email, $size = '36' ,$default = '',$alt='');//其余代码省略,需要完整代码的话大家可以联系我
(三)结语:更简洁的界面、更快速的响应,更好的用户体验!

更快的响应速度,有木有!

在把博客的“留言吧”优化后,顺势把右侧栏的“读者粉丝墙”和“最新评论”优化。完后,博客是不是更好看、更想用、更好用了呢O(∩_∩)O哈哈~

Update 2012-12-30

在(二)中谈到的Gravatar头像本地服务器缓存,上面的代码造成了一个比较严重的问题。具体解决方案见最新关于WordPress中Gravatar头像缓存至本地服务器的文章《再议Gravatar头像缓存至本地服务器》

打赏支持

Comments »