添加WordPress评论输入邮箱实时显示Gravatar头像功能

这个不是什么新鲜的功能了,这个功能即是实现当留言评论时,你输入email后,就会实时显示你的Gravatar头像。对于提高用户体验是有非常的帮助,特别是用户评论量非常大的用户。Jeff 本来也考虑在本站DeveWork.com 的主题上实现它,但看到需要加载7kb左右的javascript文件,我就不干了——虽然7kb不大,但我在意。自己也权衡一下是否为自己的主题添加这个功能吧~

实现原理:实时显示是用JavaScript来实现的,Gravatar图片的链接没有什么秘密,很简单就能得到,“http://www.gravatar.com/avatar/”加上用md5转换email得到的一组字符串,就是该email对应的Gravatar头像图片。关键的是JavaScript没有内置md5加密函数,但也很幸运,早就有人编写了JavaScript的md5函数。既然有了md5函数,那实现实时显示Gravatar头像也就变得简单了,只需用onchange捕获email输入框中的变化,然后用hex_md5函数转换email地址并组合成对应的Gravatar图片链接,最后用setAttribute改变img的src地址就搞定了。

网络上一共有两种方法,都是大同小异的,由于不同主题的相关代码不同,如实添加代码后功能是否有效还需要多调试,要善于利用浏览器的开发者工具。

效果演示:点击查看

实现方法一:

1、打开主题的comments.php文件,在适当的位置,如我的主题是下面代码的上方:

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>

加入下面的代码:

<p> <?php $useremail = ($user_ID) ? get_the_author_meta('user_email', $user_ID) : $comment_author_email;?> <img id="real-time-gravatar" src="http://www.gravatar.com/avatar/<?php echo md5($useremail);?>?s=48&amp;d=identicon&amp;r=G" alt="gravatar" height="48" width="48" /> </p>

PS:上面代码中的48可以修改为你想要的Gravatar头像的大小尺寸。

2、接下来,同样是在comments.php中,拉到最后一个输入框(input标签)的位置(这个位置是最佳的),也就是:

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> <label for="url"><small>Website</small></label></p>

在这段代码的下面,加入:

<!-- real time gravatar --> <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js-md5.js"></script> <script type="text/javascript"> /* <![CDATA[ */ var ga = document.getElementById("real-time-gravatar"); var email = document.getElementById("email"); var Ka=navigator.userAgent.toLowerCase(); var chrome = Ka.indexOf('webkit') != -1;   if (chrome) email.onblur = changeGravatar; else email.onchange = changeGravatar;   function changeGravatar(){ email_value = email.value; email_md5 = hex_md5(email_value); new_ga = "http://www.gravatar.com/avatar/" + email_md5 +"s=48&amp;d=identicon&amp;r=G"; newGravatar(new_ga); }   function newGravatar(new_ga){ ga.setAttribute('src', new_ga); } /* ]]> */ </script> <!-- end real time gravatar -->

PS:上面代码中的48,同样改成你想要的Gravatar头像的大小尺寸。

3、下载js-md5.js,并把它上传到主题文件夹中。完成!

实现方法二:

1. 将如下代码加到functions.php文件,在评论框里加上默认头像。

add_filter('comment_form_top', 'show_gravatar'); function show_gravatar() { global $current_user; get_currentuserinfo(); echo get_avatar( $current_user->user_email , 40 ); // 40是指头像的尺寸,第4步也一样 }

2、用CSS设置下头像的位置,这里就固定在右上角。

#commentform { position: relative } #commentform .avatar { position: absolute; top: 0; right: 20px }

3、下载md5-min.js,保存到主题文件夹里。

4. 重命名刚才的文件为gravatar.js,在这个文件的最后追加如下代码:

if (document.getElementById("email")) { document.getElementById("email").onblur = function () { if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.value)) document.getElementById("commentform").getElementsByTagName("img")[0].src = "http://www.gravatar.com/avatar/" + hex_md5(this.value) + "?d=mm&s=40"; }; };

如果找到email输入框则当光标焦点移出email输入框时,用正则测试输入的是否是email格式,如果是就将之前插入的图片地址改为新生成的地址。

5. 打开footer.php,添加如下代码:

<?php if ( is_singular() && comments_open() ) { ?> //判断是不是单独的post页面且评论打开 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/gravatar.js"></script> <?php } ?>

本文非原创,方法一来源:点击查看,感谢原作者。方法二未知。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React第三方组件1(路由管理之Router的使用③传参)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

33730
来自专栏前端架构与工程

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有...

26590
来自专栏python学习指南

Python爬虫(十九)_动态HTML介绍

JavaScript JavaScript是网络上最常用也是支持者对多的客户端脚本语言。它可以收集用户的跟踪数据,不需要重载页面直接提交表单,在页面嵌入多媒体文...

21950
来自专栏小程序的道路

小程序生命周期

小程序并不是 HTML5 应用,而是更偏向于传统的 CS 架构,它是基于数据驱动的模式,一切皆组件(视图组件)。下面是小程序与普通 Web App 的对比。 ...

15510
来自专栏Jerry的SAP技术分享

使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

75320
来自专栏数据小魔方

excel中的超链接函数

今天跟大家分享在excel中超链接函数的用法! ▼ 其实excel中想要达到超链接效果有很多种方法:直接手工设置、超链接函数、开发工具、VBA等都可以实现。但是...

51190
来自专栏Android知识点总结

01-React搭建react环境及SCSS的配置

63620
来自专栏iKcamp

微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

第二章:小程序中级实战教程之预备篇    项目结构设计 教学视频地址:https://v.qq.com/x/page/q05544lzelw.html ...

22770
来自专栏每日一篇技术文章

weex-06-程序的入口文件app.js

app.js 这个是我们打包时的入口文件,为什么这样说呢?我们看一下打包配置文件webpack.config.json中的部分内容

35820
来自专栏思考的代码世界

Python网络数据采集之采集JavaScript|第09天

21250

扫码关注云+社区

领取腾讯云代金券