分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress评论框如何通过QQ获取头像和昵称
  • WordPress评论框如何通过QQ获取头像和昵称

  • 评论各种插入QQ输入框
  • 需要添加到function.php文件中的代码
  • 重要代码
  • 后端处理的php代码
  • 总结
  • WordPress评论如何框通过QQ获取头像和昵称

    今天一个网友看到了某个教程,但是操作起来可能不是很顺畅,这里就不质疑其智商了。言归正传,这里首先需要说明的就是代码方面不知道原始作者是谁,反正我是从inlojv博客看到,有兴趣的可以自行百度其博客,也算是给别人一种动力吧。那么下面要说的需要大家注意了。

    本代码会写入部分内容到数据库里面去,根据代码提示,会写入部分数据到数据库中 wp_commentmeta 表中,具体表现形式如下: WordPress评论如何框通过QQ获取头像和昵称

    如果你并不介意的话,可以考虑开始看下面的教程了,看教程的时候一定要注意,请看注释内容,针对注释做出的修改还是很多的。

    评论各种插入QQ输入框

    <p class="comment-form-author">
    <label>QQ号</label>
    <input id="qq" class="bs-bb" name="author" type="text" value="<?php echo esc_attr($comment_author); ?>" size="30" maxlength="245" required="required" placeholder="QQ号" /> //请注意这里的id="QQ",如果你不知道如何修改最好不动
    </p>
    

    上面的代码添加到哪里呢?一般来说是保存到一个名为 comments.php文件中,当你看到下面的字段的时候: WordPress评论如何框通过QQ获取头像和昵称 (2)

    那么证明你就知道了位置了,接下来的步骤就是添加上面的代码到下面去: WordPress评论如何框通过QQ获取头像和昵称 (1)

    这里需要注意的就是,因为我的主题这边都是使用的 li 标签,而提供的代码中是 P 标签,那么你看你就需要根据你的主题来决定是使用 li 标签还是 p 标签了。其它的部分这里没有说明可以说的了,可以继续往下看了。

    感谢龙笑天博客指出问题,如果你直接上面的输入框加进去,可能会发生 QQ 号为必填字段,如果没有填写将会无法评论,同时,即使你删除了required=”required” 这个属性,那么也会出现评论提示要求填写用户名或者邮箱,问题出在这个代码中 value 居然是直接 esc_attr($comment_author) 的,那么这样就很尴尬了,解决办法就是删除之。

    那么整体来说,如果你想要用户好好评论的话,那么解决办法就是删除 value 对应引号中的内容,同时删除 required=”required” 属性。关于该属性具体详见: http://www.w3school.com.cn/html5/att_input_required.asp

    需要添加到function.php文件中的代码

    // 数据库插入评论表单的qq字段 
    add_action('wp_insert_comment','inlojv_sql_insert_qq_field',10,2);
    function inlojv_sql_insert_qq_field($comment_ID,$commmentdata) {
    $qq = isset($_POST['new_field_qq']) ? $_POST['new_field_qq'] : false;  
    update_comment_meta($comment_ID,'new_field_qq',$qq); // new_field_qq 是表单name值,也是存储在数据库里的字段名字
    }
    // 后台评论中显示qq字段
    add_filter( 'manage_edit-comments_columns', 'add_comments_columns' );
    add_action( 'manage_comments_custom_column', 'output_comments_qq_columns', 10, 2 );
    function add_comments_columns( $columns ){
    $columns[ 'new_field_qq' ] = __( 'QQ号' );        // 新增列名称
    return $columns;
    }
    function output_comments_qq_columns( $column_name, $comment_id ){
    switch( $column_name ) {
    case "new_field_qq" :
    // 这是输出值,可以拿来在前端输出,这里已经在钩子manage_comments_custom_column上输出了
    echo get_comment_meta( $comment_id, 'new_field_qq', true );
    break;
    }
    }
    

    上面是对于 QQ 号的一个数据写入,方便后期直接从数据库中提取,同事也在后台评论列表中添加了 QQ 一列: WordPress评论如何框通过QQ获取头像和昵称

    下面是就是过滤头像了,通过 QQ 号获取头像并且替换自带的头像,如果你的邮箱有头像也就是设置了 gravatar 头像,那么就显示自定义的 gravatar 头像,如果没有就显示 QQ 头像,貌似是这样的,因为没有测试过。

    /**
    * 修改后台头像 
    * 若有qq字段则显示qq头像,若没有则显示gravatar 
    * @INLOJV http://www.inlojv.com
    */
    add_filter( 'get_avatar', 'inlojv_change_avatar', 10, 3 );
    function inlojv_change_avatar($avatar){
    global $comment;
    if( get_comment_meta( $comment->comment_ID, 'new_field_qq', true ) ){
    $qq_number =  get_comment_meta( $comment->comment_ID, 'new_field_qq', true );
    $qqavatar = file_get_contents('http://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin='.$qq_number);
    preg_match('/http:(.*?)&t/',$qqavatar,$m); // 匹配 http: 和 &t 之间的字符串
    return '<img src="'.stripslashes($m[1]).'" class="avatar avatar-40 photo" width="40" height="40"  alt="qq_avatar" />';
    }else{
    return $avatar ;
    }	
    }
    

    上面代码中获取 QQ 头像的接口已经失效了,目前已经找到了最新接口,如下:

    最新QQ头像和昵称接口

    前几天我发布了一篇文章,是利用 QQ 直接获取 QQ 昵称和 QQ 头像以及QQ邮箱作为 WordP...

  • 2017-08-11
  • 0
  • 17
  •  
  • 重要代码

    此部分代码据原文所说是核心代码,我看了一下,确实也是比较重要的代码,那么这里我直接附上源代码,这里需要提醒的是一定要看注释。

    // 初始化
    $(function(){
    inlojv_js_getqqinfo();
    });
    // 设置cookie 
    function setCookie(a,c){var b=30;var d=new Date();d.setTime(d.getTime()+b*24*60*60*1000);document.cookie=a+"="+escape(c)+";expires="+d.toGMTString()}
    // 获取cookie
    function getCookie(b){var a,c=new RegExp("(^| )"+b+"=([^;]*)(;|$)");if(a=document.cookie.match(c)){return unescape(a[2])}else{return null}}
    // 核心函数
    function inlojv_js_getqqinfo(){
    // 获取cookie
    if(getCookie('user_avatar') && getCookie('user_qq') ){
    $('div.comment-user-avatar img').attr('src',getCookie('user_avatar'));
    $('#qq').val(getCookie('user_qq')); //因为第一段代码中id为QQ,所以这里是#qq
    }
    $('#qq').on('blur',function(){
    var qq=$('#qq').val(); // 获取访客填在qq表单上的qq数字	
    $('#email').val($.trim(qq)+'@qq.com'); // 将获取到的qq,改成qq邮箱填入邮箱表单	
    // ajax方法获取昵称
    $.ajax({
    type: 'get',
    url:'http://127.0.0.1/func_getqqinfo.php?type=getqqnickname&qq='+qq,  // func_getqqinfo.php是后端处理文件,注意路径,127.0.0.1 改成你自己的域名
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'portraitCallBack',
    success: function(data) {
    // console.log(data);
    $('#author').val(data[qq][6]);	// 将返回的qq昵称填入到昵称input表单上
    alert('已获取昵称!'); // 弹出警告
    setCookie('user_qq',qq);	// 设置cookie
    },
    error: function() {
    $('#qq,#author,#email').val(''); // 如果获取失败则清空表单
    alert('糟糕,昵称获取失败!请重新填写。'); // 弹出警告
    }
    });
    // 获取头像
    $.ajax({
    type: 'get',
    url: 'http://127.0.0.1/func_getqqinfo.php?type=getqqavatar&qq='+qq, // func_getqqinfo.php是后端处理文件,注意路径,127.0.0.1 改成你自己的域名!
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'qqavatarCallBack',
    success: function(data) {		
    $('div.comment-user-avatar img').attr('src',data[qq]);	// 将返回的qq头像设置到你评论表单区域显示头像的节点上,div.comment-user-avatar img表示头像节点img标签,改成你自己的!
    alert('已获取头像!'); // 弹出警告
    setCookie('user_avatar',data[qq]);	 // 设置cookie
    },
    error: function() {
    alert('糟糕,获取头像失败了!请重新填写。'); // 弹出警告
    $('#qq,#author,#email').val(''); // 清空表单
    }
    });
    });
    }
    

    这里主要说三点:

    1. 表单中 input id问题,如果你之前没有修改默认的评论表单,那么基本不用修改,如果你修改过的话,这里就需要统一一下了。
    2. 弹出警告部分,我个人尝试过,会很讨厌的弹出提示框,而且还出现了无限弹框的情况,所以为了避免这种情况,我个人建议,直接将所有弹出警告或者弹出提示的代码删除。
    3. 代码中的头像图片所在的 class 类名需要替换为自己的,同时 127.0.0.1 这个根据自己的情况修改为域名。

    这里大家比较关注的可能就是这个代码放在那里,我这边使用的是 DUX 主题,评论部分有一个 comment.js 来控制,那么我添加到这个里面是没有问题的,如果你和我是一样的主题,直接添加到这个文件中即可,如果你是别的主题,那么可能性就很多了,这里无法一一解释清楚。

    后端处理的php代码

    <?php
    header("content-Type: text/html; charset=utf-8");
    $type = @$_GET['type'] ? $_GET['type'] : '';
    if(empty($type)){
    exit;
    }
    if($type == "getqqnickname"){
    $qq = isset($_GET['qq']) ? addslashes(trim($_GET['qq'])) : '';
    if(!empty($qq) && is_numeric($qq) && strlen($qq) > 4 && strlen($qq) < 13){
    $qqnickname = file_get_contents('http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins='.$qq); // API
    if($qqnickname){
    $qqnickname = mb_convert_encoding($qqnickname, "UTF-8", "GBK");
    echo $qqnickname;
    }
    }
    }
    if($type == "getqqavatar"){
    $qq = isset($_GET['qq']) ? addslashes(trim($_GET['qq'])) : '';
    if(!empty($qq) && is_numeric($qq) && strlen($qq) > 4 && strlen($qq) < 13){
    $qqavatar = file_get_contents('http://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin='.$qq);  // API
    if($qqavatar){
    echo str_replace("pt.setHeader","qqavatarCallBack",$qqavatar);
    }
    }
    }
    

    上面这个部分没有什么值得说明的,将上面的代码保存为一个php文件,这个名字原作者推荐为:func_getqqinfo.php,并且提议与上面ajax请求的路径要一致。但是经过实践,这个不是硬性要求,需要注意的就是无论你修改了这个文件名或者保存的路径并不是原作者要求的路径,你都需要在核心代码中将“url:”后面的路径以及名称都修改一下,否则将会报错。

    总结

    这个功能整体实践起来我个人觉得不是很困难,可能需要尝试,刚刚开始尝试的时候,代码部分需要做一定的修改,经过我修改部分核心代码,应该适用于大部分常规站点。如果有不明白的请留言。

    另外,CSS 部分这里就不说了,毕竟每个主题都不一样,但是给的建议就是最开始说的,如果你是 li 标签,那么对应的 class 类名建议和之前的一样,比如之前 author 对应的类名为 comment-info ,那么这我推荐你也给一个同样的 class 类名,不知道这点大家是否明白呢?

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    WordPress评论框如何通过QQ获取头像和昵称

    支付宝(点击图片切换)

    扫码,支持我

    WordPress评论框如何通过QQ获取头像和昵称

    微信(点击图片切换)

    扫码,手机看

    WordPress评论框如何通过QQ获取头像和昵称
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    WordPress评论框如何通过QQ获取头像和昵称
    7 + 0 =
    1. 13楼
      懿古今
      最后评论时间:2017/08/11 21:25
      来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市西乡塘区 电信
      增加获取QQ头像之后代码多了很多,如果单单实现输入QQ号进行评论的话就简单多了
      • 帅气小琦琦
        最后评论时间:2017/08/18 10:36
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @懿古今 确实是这样的,所以我直接砍掉了这个功能
        帅气小琦琦    33分钟前回复
    2. 12楼
      老地儿
      最后评论时间:2017/08/16 11:47
      来自天朝的朋友 Safari浏览器 Android 5.0 ASUS_Z00ADA Build/LRX21V 四川省成都市 移动GSM/TD-SCDMA/LTE全省共用出口
      不错不错!
      老地儿 2天前回复
    3. 11楼
      BD影视分享网
      最后评论时间:2017/08/11 20:20
      来自天朝的朋友 谷歌浏览器 Windows 10 四川省自贡市 电信
      现在很多人就干攻击fulidui-com我的网站也被干了