WordPress输入QQ号一键获取用户名及邮箱

少羽.
少羽.
少羽.
1603
文章
92
评论
2018年11月23日21:50:26 5 7.1K 2127字阅读7分5秒

经常浏览博客且常留言的小伙伴可能会发现一些网站上为了方便用户快速输入用户信息提供了一个“输入QQ号快速填写信息”的功能,功能不大但确实有利于增加博客留言的积极性。今天无意浏览博客的时候发现了这段代码的出处 —— 秋叶网络博客,遂记录之。希望能帮助到同样需要此功能的小伙伴们尽快部署上。

WordPress输入QQ号一键获取用户名及邮箱

在我实际的测试过程中,发现了一些小问题,于是仿造博客112的做法,对代码做了简单修改。好了,废话不多说,还是看下具体的部署方法。注意:对主题进行修改操作之前请自行备份需要修改的文件,以防误操作引起的网站崩溃!!!

自建API获取QQ信息

新建一个 PHP 文件,将下面代码丢进去,文件名可自取,这里以 get_qq_info.php 命名。创建完成后将 get_qq_info.php 文件丢到网站根目录下以用于以后调取,其实你也可以将它放在网站的任何一个目录下,只需要保证后面 JS 代码调取是路径正确即可。

<?php 
header('Content-Type: text/html;charset=utf-8');
    $QQ=$_GET["qq"];
    if($QQ!=''){
        $urlPre='http://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?g_tk=1518561325&uins=';
        $data=file_get_contents($urlPre.$QQ);
        $data=iconv("GB2312","UTF-8",$data);
        $pattern = '/portraitCallBack\((.*)\)/is';
        preg_match($pattern,$data,$result);
        $result=$result[1];
        echo $result;
    }else{
        echo "请输入qq号!";
    }
?>

好吧,其实这里面还是通过腾讯开放的接口获取到Q Q用户的真实昵称。

JavaScript脚本调用API

将以下代码添加到主题的主要 JS 文件中去,DUX主题添加到 /js/main.js 文件中即可,当然如果主题支持后台自定义代码也可以直接放在后台自定义代码位置,注意加上 script 标签。

function fn_qqinfo(){
    var qq_num=$('#qqinfo').val();
    if(qq_num){
        if( !isNaN(qq_num)){
        $.ajax({
        url:"http://blog.quietguoguo.com/api/qqinfo/get_qq_info.php",    //如果网站开启了HTTPS,记得这里要修改成https的链接
        type:"get",
        data:{qq:qq_num},
        dataType:"json",
            success:function(data){
                $("#email").val(qq_num+'@qq.com');
                $('#comment').focus();
                if(data==null){
                $("#author").val('QQ游客'); 
                }else{
                $("#author").val(data[qq_num][6]==""?'QQ游客':data[qq_num][6]);
                } 
            },
            error:function(err){
                $("#author").val('QQ游客');
                $("#email").val(qq_num+'@qq.com');
                $('#comment').focus();
            }
        });
        }else{
            $("#author").val('你输入的好像不是QQ号码');
            $("#email").val('你输入的好像不是QQ号码');
        } 
    }else{
         $("#author").val('请输入您的QQ号');
         $("#email").val('请输入您的QQ号');
    }
}

注意:如果网站开启 HTTPS 的话注意将上述代码中链接改为对应的 https 格式。

配置前端显示代码

将以下代码填入你主题的 comments.php 文件中:

<input class="你主题的对应样式" type="text" name="qqinfo" id="qqinfo" maxlength="12" value="" tabindex="5" placeholder="输入QQ号快速填写信息" onblur="fn_qqinfo()" /><span class="你主题的对应样式" >Q Q(选填)</span>

就我目前所使用的 DUX 主题而言将下面这段代码填到 comments.php 文件中的 ul 标签之后即可:

<li class="form-inline"><label class="hide" for="qqinfo">QQ</label><input class="ipt" type="text" name="qqinfo" id="qqinfo" maxlength="12" value="" tabindex="5" placeholder="输入QQ号快速填写信息" onblur="fn_qqinfo()" /><span class="text-muted" >Q Q(选填)</span></li>

至此,全部修改操作完成,少羽提示:注意刷新 CDN 缓存及浏览器缓存等,避免不能实时查看到效果。

继续阅读
少羽.
  • 本文由 发表于 2018年11月23日21:50:26
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
禁用 WordPress 5.5 图片延迟加载功能 WordPress

禁用 WordPress 5.5 图片延迟加载功能

WordPress 5.5除了不断优化修改区块编辑器之外,还增加了几个新功能,其中的图片延迟加载功能,经本人测试,除了在火狐下有效果,在Chromium内核的浏览器中无效,难道是开发人员也和我一样只用...
WordPress纯代码实现独立相册功能 WordPress

WordPress纯代码实现独立相册功能

其实,这篇文章很早准备发了,一直拖,拖,拖硬生生拖到了现在,今天整合闲着,就更新一下博客吧! 想到这个文章,我忘记发了,今天就补上 hhh 正文 思路是前段时间写模板琢磨出来的,模板写废了,也不准备写...
广告也精彩
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:5   其中:访客  5   博主  0
    • 评论 评论 0

      用户

      • Elvis Elvis 0

        测试一下评论效果

        • 贤哥 贤哥 0

          学习了

          • 落英缤纷 落英缤纷 1

            这个难度很高 学不会。。。