1. <div id="11111"></div>

    1. <div id="11111"></div>

      1. <div id="11111"></div>

        WordPress评论AJAX实时显示Gravatar头像

        日期: 标签:WordPress教程 43 条留言
        如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

        感谢彭浩童鞋的投稿;为博客带去流量,欢迎投递分享优秀文章。代码源自:冰古

             虽然我的WordPress用的是多说的评论系统,评论头像是自动采集对应账号的头像,那么没有登陆时或者使用WordPress原生的评论系统时,我们都是获取的Gravatar上的头像,可是Gravatar头像是要提交评论以后才能看到的,我们能在填完邮件地址以后就看到么?类似这样的效果:

             那么怎么实现呢?先分析方法,实时获得头像的方法:使用ajax方式,当邮件输入框失焦的时候去拉取头像。其中邮箱对应的Gravatar地址为:http://www.gravatar.com/avatar/xxxx(xxxx为邮箱的md5加密值)

             显示头像的方法:在评论框输入邮箱的右面的一个合适的地方增加一个div,用来显示上一步中得到的头像。具体实现:

             1、因为我们在js中对邮箱进行md5加密,所以下载这个js丢到你的主题目录中。

        下载此文件

             2、在你主题的comments.php文件中适当位置,加入如下代码:

        <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&d=identicon&r=G" alt="gravatar" height="48" width="48" />
        </p>

             然后我们在文件的末尾加入相应的js代码:

        <!-- 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&d=identicon&r=G";
            newGravatar(new_ga);
        }
        function newGravatar(new_ga){
            ga.setAttribute('src', new_ga);
        }
        /* ]]> */
        </script>
        <!-- end real time gravatar -->

        收工~~~

        Have a nice job~

        -- 完 --

        本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
        原文出处:露兜博客 http://www.szeverich.net.cn/wordpress-ajax-gravatar.html
        露兜
        kaapass@outlook.com  QQ 825533758

        业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

        43 条留言

        点此留言
        1 2 528
        1. 云柯博客

          重新试了一遍

        1 2

        发表留言

        可以挣钱的游戏 845| 892| 292| 668| 406| 671| 536| 703| 864| 604| 291| 492| 698| 117| 574| 72| 687| 560| 670| 786| 515| 757| 887| 695| 142| 556| 319| 437| 90| 380| 374| 526| 455| 76| 420| 2|