Email输入框处实时显示gravatar头像+email验证+动态信息提醒
不知道有没有人发现，我的评论输入框处最近几天和一周前有了些许改变。之前只有老访客（发表过评论，浏览器中保存有cookie）来时资料输入框会显示头像，并会折叠起来。但是现在即使新访客第一次来，也会看到一个显示gravatar头像的小区域，当然，默认它显示的是“神秘人头像”。这是干什么的？
答案：这是一个实时预览自己Gravatar头像的，当你输入自己email后就会在这里实时显示你的头像！当然，这个想法冒出时我网上搜索了一下，还真有人搞过，你可以百度搜索“实时显示gravatar”，别人介绍有很简单的实现方法。本文最下面也有我写的jQuery代码，一行搞定！！
但我下面的js代码结合了其它功能，不光显示email头像，还结合了实时显示输入名字，提示文字，email验证检测等小功能。
我这里代码比较啰嗦，因为我要照顾两种情况，一种是老访客，即访问时折叠显示资料框，还有隐藏/显示按钮，另一种新访客正常显示资料输入框。这两种的提示文字也不一样，比如老访客显示welcome back，新访客你就不能这样问候他们了。另外资料输入框中还有提示文字“your email””your name”等文字，是受到搜索框中添加提示文字启发，给资料输入框也加入了提示文字。因为我不想动以前的代码，所以为了不破坏这种效果，也要考虑到这一点。
我的comments.php中资料输入处代码：
1: <div id="real-avatar" class="comment-avatar">//定义头像显示位置
2: <?php echo get_avatar($useremail,'32'); ?>//用WP内置函数取得头像，，如果你用常规的avatar头像获取url样式，并定义其一个ID，下面的js代码会简单很多，不过我更喜欢WP默认函数调用。
3: </div>
4: <div id="welcome"> //这个是显示问候语的
5: /*老访客显示welcome back 用户名*/
6: <?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) { ?>
7: <?php printf(__('<span id="commentwelcome">Welcome back </span><strong><span id="author-name">%s</span></strong>. '), $comment_author) ?>
8: <?php } else { ?>
9: /*新访客则显示一段我自定义的文字*/
10: <?php printf(__('<span id="commentwelcome1">Hi, I know you have something to tell me. Please leave me a reply</span><strong><span id="author-name">%s</span></strong>. '), $comment_author) ?></div><?php endif; ?>
11: <?php } ?></div>
12: /*请注意这两种不同定义中的commentwelcome和commentwelcome1，我的js代码中靠判断这两值的有无来区别老访客和新访客的*/
当然，我这里贴的是大概结构，有一些我省去了，这里只是为了让你更能理解下面我的js代码为何要写那么麻烦。
下面是我写的JavaScript代码（为什么不用jQuery呢，嗯，我也写了jQuery代码，但是发现只是取得对象时简单了，但是下面这段代码麻烦在情况判断上，并不能减少多少工作量，而且我好久没写过原生JavaScript，怕再不用就忘光了），比较繁琐，如果你只是想要实现 实时显示头像，则不必看了，只需网上搜一下别人写的即可，但是他们的都是转载一个叫冰古的人的，他的代码调用gravatar头像那里有些问题；如果也想要兼容你的原来的折叠资料输入框，我的代码你可以参考一下。写的很繁琐，因为照顾到两种不同样式，以及不破坏之前的输入框提示文字，还要动态改变头像右边的文字，真的很麻烦。
这段代码包括了email验证，url自动加上http://，动态判断不同情况显示不同问候语等。注意其中的MD5()函数是调用我网上找的一个给字符串MD5加密函数，你需要网上找一下，因为这个网上也很多，我就不贴了。
JavaScript代码：
1: <script type="text/javascript">
2: //声明所需变量
3: var real_avatar = document.getElementById("real-avatar");
4: /*因为用WP的默认函数get_avatar()获取的avatar头像，所以这里只能这样取得头像，先获取ID，再取得此容器下img数组的第一个，即取得了avatar头像*/
5: var chang_avatar = real_avatar.getElementsByTagName("img")[0];
6: var an = document.getElementById("author-name");
7: var welcome = document.getElementById("commentwelcome");
8: var welcome1 = document.getElementById("commentwelcome1");
9: var email = document.getElementById("email");//取得Email输入框
10: var author = document.getElementById("author");//作者输入框
11: var httpurl = document.getElementById("url");//网址输入框
12: //定义触发动作，当失去焦点时触发函数
13: author.onblur = changAuthor;
14: email.onblur = changeAvatar;
15: httpurl.onblur = setHttp;
16:
17: function changeAvatar() {//定义改变头像函数
18: email_value = email.value.toLowerCase();//取得email值并转为小写（大小写md5值不一样，gravatar是用小写email MD5值验证头像的，如果输入大写，则不会正确匹配头像）
19: email_md5 = MD5(email_value);//这里是将email值转为MD5，这里还需要一个转MD5函数，这里就不贴了，网上有。
20: reMail = /^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/; //email验证正则表达式
21: test_email_value = reMail.test(email_value);//验证email值，返回值为true或false
22: //定义获取gravatar头像的url，这里包括了大小和等级，还有默认图片
23: new_ga = "http://www.gravatar.com/avatar.php?gravatar_id=" + email_md5 + "&size=32&d=identicon&r=G&default=http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32";
24: if (email_value != "") {//如果email输入框不为空
25: email.className = email.className.replace(" searchtip", "");//这里是去除email输入框的seachtip属性
26: if (test_email_value) {//email验证通过，输入的是一个正确的email
27: chang_avatar.setAttribute('src', new_ga);//将头像地址重设为匹配此email的avatar头像地址
28: document.getElementById("submit").disabled=false;//将提交按钮禁用属性去除
29: //接下来是判断作者输入框值，显示提示文字
30: if (author.value == "Your Name"){//如果输入框为提示文字 Your Name
31: if (welcome) {//如果是老用户，即浏览器中有cookie，有折叠隐藏资料输入框按钮的
32: welcome.innerHTML = "Please input your name"//将提示文字设置为“Please input your name”
33: } else {//第一次访问用户
34: welcome1.innerHTML = "Please input your name"
35: }
36: } else {//作者输入框值如果不为“Your Name”，即输入了用户名
37: if (welcome) {//老访客显示 welcome
38: welcome.innerHTML = "Welcome back ";
39: an.innerHTML = author_name;//访客名字处显示作者输入框处值
40: } else {
41: welcome1.innerHTML = "Thank you, ";//新访客显示“thank you”
42: an.innerHTML = author_name;
43: }
44: }
45: } else {//如果email验证失败
46: document.getElementById("submit").disabled=true;//将提交按钮禁用
47: if (welcome) {//这里还是区分老访客和新访客
48: if (author.value == "Your Name") {//再次判断作者输入框值
49: welcome.innerHTML = "Please input your name and a right email";//提醒输入名字和一个正确的email
50: } else {//作者输入框有内容且不为Your Name，则只提醒输入正确email
51: welcome.innerHTML = "Please input a right email ";
52: }
53: } else {//这里是新访客显示内容
54: if (author.value == "Your Name") {
55: welcome1.innerHTML = "Please input your name and a right email";
56: } else {
57: welcome1.innerHTML = "Please input a right email, ";
58: }
59: }
60: }
61: } else {//如果email输入框为空
62: email.className += " searchtip";//添加searchtip属性，方便css定义提示文字颜色
63: email.value = "Your Email"//将email值设置为提示文字 Your Email
64: }
65: }
66:
67: function changAuthor() {//更改作者名字函数
68: author_name = author.value;//定义作者输入框的值
69: if (author_name != "") {//如果输入框不为空
70: author.className = author.className.replace(" searchtip", "");//同上面那个改变avatar函数，这里去除输入框的searchtip属性
71: if (welcome && test_email_value) {//若果验证通过email
72: welcome.innerHTML = "Welcome back "
73: } else if (welcome1 && test_email_value) {
74: welcome1.innerHTML = "Thank you, "
75: } else {//如果没通过email验证，输入了错误email或者还没有输入（值为Your Email）
76: if (welcome) {
77: if (email.value == "Your Email"){//如果还未输入
78: welcome.innerHTML = "Welcome back ";
79: } else {//输入了错误email
80: welcome.innerHTML = "Please input a right email ";
81: }
82: } else {//新访客
83: if (email.value == "Your Email"){
84: welcome1.innerHTML = "Thank you, ";
85: } else {
86: welcome1.innerHTML = "Please input a right email, ";
87: }
88: }
89: }
90: an.innerHTML = author_name;
91: } else {//如果作者输入框为空
92: if (welcome) {
93: welcome.innerHTML = "Please input your name";//则提示输入名字
94: author.className += " searchtip";//加上search属性，并将值设为 Your Name
95: author.value = "Your Name"
96: } else {//新访客则将提示文字初始化为原始值，当然，你也可以换个提示文字
97: welcome1.innerHTML = "Hi, I know you have something to tell me. Please leave me a reply";
98: author.className += " searchtip";
99: author.value = "Your Name"
100: }
101: an.innerHTML = ""//清除作者名字显示区域
102: }
103: }
104:
105: function setHttp() {//设置http://函数
106: var tips = httpurl.value.substr(0, 7).toLowerCase();//取得输入值的前七位，并转为小写
107: if (tips == "http://") {}//如果匹配“http://”，无动作
108: else if (httpurl.value != "") {//如果不匹配 “http://”，输入值也不为空
109: httpurl.value = "http://" + httpurl.value//则将输入值前加入"http://"一同返回
110: } else {//如果输入框为空
111: httpurl.className += " searchtip";//加上提示文字
112: httpurl.value = "http://"
113: }
114: }
115: </script>
其实上面的代码有些是为了兼容以前的js代码，因为要对同一个对象再次操作，所以难免会破坏之前的一些定义。只是要实现头像实时显示，则只需十来行代码即可实现。用jQuery则一行即可：
1: $('#email').blur(function(){$('#real-avatar .avatar').attr('src','http://www.gravatar.com/avatar.php?gravatar_id=' + MD5($('#email').val())) + '&size=32&d=identicon&r=G&default=http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32';})
这一行jQuery代码就足够了。用jQuery是不是很简单，呵呵。
我写的代码中用到了email验证，但是并不是防止Spam用的，只是善意的提醒email有没书写正确，因为我有时就写错了email格式，结果提交后又给返回，内容还得重新输入。这里给用户一个小提示，可以告诉他email有没写对，配合gravatar实时显示，也可以验证email有没写错，是不是自己的email。第三个函数setHttp()是给输入的地址加上http://，虽然即使没有http://，WP也可正确识别。这里只是提高访客体验。
我上次说过上一篇日志是本年度最后一篇，但是由于过两天有些事情要忙，正好又有人邮件问我有关这方面代码（没想到才几天居然就有人能发现我博客这一点改变。。
），我就在这里贴出来吧，希望能帮到一些需要这个功能的朋友。
当然，以上这些有些人可能会觉得很无聊，这个也确实是很无聊的功能，但是我坚信细节处的改变对于访客体验的提高是不容置疑的。
最后提示：很重要的一个给字符串md5加密函数我没有写出，请自行网上搜索，并添加到你的js代码前边。如果函数名不是MD5()，请更改相应处的函数名。
还有一点我也要提一下，最近两周来不知是因为了到年关了还是怎么了，几乎每天都会收到一两封向我索要主题的邮件，尤其是最近几天。有人喜欢这款主题我很高兴，因为这款的配色并不是大众能接受的，因为之前批评过我主题配色的人不在少数。之前我有过准备发布，但是后来我因为要加入后台管理，所以索性又重新写了模板代码，并且加入了好些其他东西，如广告管理，文章动态加载等，即使现在也一直在抽时间改进。所以模板代码很乱，因为时不时就要改动，后台设置也要相应跟上，一直没有整理。所以可以说，这款主题还未完成，有些功能要正常使用还需配合我的修改。但是我会努力使它尽早完成，现在主要就是后台管理功能还未完成。之前邮件索要主题的我都给予了回复，这里再说一下，因为每天收到的邮件很多，怕有漏掉未回复的。所以，请不要再给我发邮件索要主题，如果真的喜欢，请继续关注我的博客。我会尽量快点提供下载的。
Post url: http://qiqi.boy.im/31. You can ReTweet This Post.
33 Responses to this post.
Comments (32) Trackbacks (1)[...] 实现方法：万戈：《Wordpress 记录评论者 gravatar 头像》qiqiboy：Email输入框处实时显示gravatar头像+email验证+动态信息提醒 [...]