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头像缓存至本地服务器》。

TypeCodes