最近在更新一个主题的时候也加入了该功能效果,实现的方法是通过加载 javascript 的 md5 函数转换捕获的邮箱输入框的输入的 email 地址,然后组合成对应的 gravatar 头像链接,最后用 setAttribute 改变 img 的 src 地址。

实现WordPress评论输入邮箱即时显示gravatar头像

操作步骤:

1 、下载 js 文件,并上传至当前企业网站模板主题文件夹

js-md5-gravatar.zip

2 、编辑当前主题的 comments.php 文件,在要即时显示头像对应的文件位置添加代码:

<span%20style="color: #000000; font-weight: bold;"><?php <span%20style="color: #000088;">$email <span%20style="color: #339933;">= <span%20style="color: #009900;">(<span%20style="color: #000088;">$user_ID<span%20style="color: #009900;">) ? get_the_author_meta<span%20style="color: #009900;">(<span%20style="color: #0000ff;">'user_email'<span%20style="color: #339933;">, <span%20style="color: #000088;">$user_ID<span%20style="color: #009900;">) <span%20style="color: #339933;">: <span%20style="color: #000088;">$comment_author_email<span%20style="color: #339933;">;<span%20style="color: #000000; font-weight: bold;">?><img id="real-time-gravatar" src="http://www.gravatar.com/avatar/<span%20style="color: #000000; font-weight: bold;"><?php <span%20style="color: #b1b100;">echo <span%20style="color: #990000;">md5<span%20style="color: #009900;">(<span%20style="color: #000088;">$email<span%20style="color: #009900;">)<span%20style="color: #339933;">;<span%20style="color: #000000; font-weight: bold;">?>?s=60&d=identicon&r=G" alt="gravatar 头像" />

<span%20style="color: #ff0000;"> 注:代码中的 60 表示图像图片的大小

3 、在 comments.php 文件第一行添加以下调用代码:

<script type="text/javascript" src="<span%20style="color: #000000; font-weight: bold;"><?php bloginfo<span%20style="color: #009900;">(<span%20style="color: #0000ff;">'template_url'<span%20style="color: #009900;">)<span%20style="color: #339933;">; <span%20style="color: #000000; font-weight: bold;">?>js-md5.js"></script><script type="text/javascript" src="<span%20style="color: #000000; font-weight: bold;"><?php bloginfo<span%20style="color: #009900;">(<span%20style="color: #0000ff;">'template_url'<span%20style="color: #009900;">)<span%20style="color: #339933;">; <span%20style="color: #000000; font-weight: bold;">?>/gravatar.js"></script>

<span%20style="color: #ff0000;"> 注:如果 js 文件路径有改动,请修改相应的路径位置

保存文件,刷新网页后,测试成功。