虽然WordPress早在2.5的版本中就内置了Gravatar支持，似乎也没有人在添加评论form的旁边加上它。我似乎是第一个？呵呵，如有先行者，恕我孤陋寡闻。
功能：在添加评论的表单旁边显示gravatar头像预览，登录用户直接取其email，而未登陆用户则首先尝试从cookie取得email，若cookie中部存在，则在其输入email之后，取得email值即时更新预览。
首先说明，本文不介绍排版，即不介绍CSS布局，不过你可以参考我的评论form布局。
第一步，在主题的comments.php中，找到评论框合适的位置，添加gravatar预览：
[code lang=’php’]
[/code]
第二步，仍旧在comments.php中，给email输入的input绑定blur事件，在其失去焦点的时候更新gravatar头像预览：
onblur="updateAvatarPreview(this.value)"
第三步，下载Paul Johnston的JavaScript md5脚本，放在网站中合适的目录（我是放在当前主题的scripts子目录中）。
第四步，修改主题的header.php文件，在head标签内加入如下代码：
[code lang=’php’]
[/code]
is_singular函数在当前页面为单篇文章、单个页面或者单个附件的时候返回true，这些一般都是有评论的页面，所以正好合适。而另一个条件 (!$user_ID) 则是因为有用户登录的时候，不需要填写Email，也就不需要客户端更新的代码了。根据email的md5 hash值生成图片链接的代码，在末尾加了个参数”s=32″，是指定头像的大小，这个可以参考gravatar的官方说明。
JavaScript代码中要根据“avatar-preview”这个id来找到头像的预览并且更新它，因此这两个地方要统一。另外md5的JavaScript文件位置也要和引用的url统一起来，这样才能成功调用。
开始的时候考虑了一下要不要做成插件形式，想了想，评论框的修改还是得手动修改才够灵活，于是作罢。谁要是自己做主题，也可以按照这个教程把这个功能添加上。如有不清楚的地方，请在下面留言。
Leave a Reply