由于本站QQ登录的回调接口有点小问题,所以为了更加方便访客在博文下方留言,我决定开放访客留言功能。但是需要补全的信息框比较多,为了更快速的让访客表达自己的想法,所以我决定在评论框处添加《填入QQ自动补全评论者信息》的功能。网上也有相当多的教程,不过为了适配自己的主题,还是得适当地做一些修改。

WordPress开发日志|评论框添加填入QQ自动补全评论者信息功能插图
WordPress开发日志

QQ信息API

以前做了一个API平台,结果主机商跑路了,带着我的数据一同消失在了茫茫人海之中,不过获取QQ信息这部分的接口我还保存在磁盘上,可以直接拿出来用。代码也很简单,我就直接贴出来:

<?php
// header
header("Content-Type:application/json");

// 获取扣扣号
$qq = (isset($_GET['qq']))?$_GET['qq']:$_POST['qq'];

// 过滤
if (trim(empty($qq))) {
        echo json_encode(array('status' => 'error','msg' => '未传入QQ号'),320);
}else{
        // 获取QQ用户信息
        $urlPre='https://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];
        $qqnickname = json_decode($result, true)["$qq"][6];
        $qqheadimg = "https://q1.qlogo.cn/g?b=qq&nk=".$qq."&s=100&t=1547904810";

        // 开始判断这个扣扣号是不是有真实用户信息返回
        if ($qqnickname) {
                // 如果有,就可以返回JSON数据
                echo json_encode(array('status' => 'success','msg' => '获取用户信息成功','nickname' => $qqnickname,'headimg' => $qqheadimg),320);
        }else{
                //如果没有,那么只能返回获取失败
                echo json_encode(array('status' => 'error','msg' => '获取用户信息失败'),320);
        }
}
?>

利用QQ空间的接口来获取到目标的QQ信息,不过如果QQ用户关闭了QQ主显,那么将无法获取到其他信息,所以后续在JSON数据中添加一个错误情况,避免前端出现展示错误。

前端修改

为了方便调试,我决定在本地对评论框进行修改和测试,F12将评论框的代码复制下来,贴到HTML文件里,接着咱们来对它进行改造。

JavaScript添加

我们引入JQuery库来帮助我们完成本次js文件的构造,昨天BootCDN挂了,所以我推荐大家将JQuery拉到本地,或者用Staticfile CDN来替换,比较靠谱:

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
WordPress开发日志|评论框添加填入QQ自动补全评论者信息功能插图1
JavaScript

为了方便信息的获取,我们需要使用ajax来请求我们所需要的信息,例如下面的请求代码:

      $.ajax({
        url: "/qq_data.php",    //如果网站开启了HTTPS,记得这里要修改成https的链接
        type: "get",
        data: { qq: qq_num },
        dataType: "json",
        success: function (data) {
          var json = data;
          if (data == null) {
            $("#author").val('QQ游客');
          }
          else if (json.status != "error") {//成功获取
            $("#author").val(json.nickname == "" ? 'QQ游客' : json.nickname);
            $("div[class='comment-avatar-author flex-avatar w-32 me-3 ']").children()[0].src = 'https://thirdqq.qlogo.cn/g?b=oidb&k=nMfnfkyAIv73hicY24YMwVA&s=40&t=' + qq_num;
            $("#email").val(qq_num + '@qq.com');
            $('#comment').focus();
            get_yiyan();
            my_status = 1;
          }
          else {
            $("#qq_num").val("");
            my_status = 0;
          }
        },
        error: function (err) {
          $("#author").val('QQ游客');
          $("#email").val(qq_num + '@qq.com');
          my_status = 0;
        }
      });

这一部分代码算是本次改造评论框的核心部分,需要注意一点的是在于元素的选择上,由于JQuery给出的元素选择和JS原生的有些许不同,所以这方面还是得自己拿捏一下。这个主题的评论框class属性后有一个空格,试了各种办法最后终于解决了。所以在你们自己添加时需要注意一下class属性是否正确。

后面我添加了一个layer的提示框,可以提醒评论者QQ是否填写正确。

评论框架

为了方便节约时间,我直接将前端的评论框复制了一遍,并排在了一起,效果如下图所示:

WordPress开发日志|评论框添加填入QQ自动补全评论者信息功能插图2
评论区

我感觉还可以,如果你有什么稀奇古怪的想法, 也可以自己加,不过我建议先在本地测试,修改好了在添加到自己的网站上,代码我就贴上通用的:

  <input id="qq_num" onblur="get_qqinfo();" placeholder="请输入您的QQ账号">QQ账号
  <input id="author">名称
  <input id="email">邮箱
  <input id="url" placeholder="网站地址">网站
  <div class="comment-textarea mb-3">
    <textarea id="comment" name="comment" class="form-control" rows="3"></textarea>
  </div>

在输入QQ账号的输入框这里,我建议将get_qqinfo()放置输入框失去焦点时自动执行,如果你非要添加个获取按钮,那样也行。后续的话,我可能会考虑再添加一个滑动按钮,滑动后才能获取QQ信息,避免频繁请求。

问题拓展

后续还有一个问题需要自行解决,如果你的主题较为强大,那么你就可以直接忽略这一点。

在评论者提交评论后,一般主题会保留cookies方便下次提交评论时一键填写,所以我们也需要将QQ号一同保存至cookis中,或者重写写一个js来获取之前填写的QQ邮箱转换为QQ账号,避免影响整体的美感。

主题自带ajax提交评论也需要注意,不要函数冲突,否则会很麻烦,排查也需要花费时间,降低生成力。

效果展示

输入QQ账号后,自动获取用户名,邮箱地址以及头像,并且自动填充评论框的内容(方便留言),网址可以自行添加,并且头像将外链至您的站点。所以高质量的评论非常重要,如果恶意灌水会被自动屏蔽,填充博文感想之时,又为您的站点做了外链,是一件不可多得的美事。

WordPress开发日志|评论框添加填入QQ自动补全评论者信息功能插图3