最新公告
  • 欢迎您光临牛品源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
    • 网站公告
    • 热门标签
    • 资源专题
    • 资源存档
    • 联系我们
    牛品源码
    10年
    专注建站行业优质资源供应商
    升级SVIP
    登录 / 注册
    站长资源平台
    • 技术学习大厅
      • NET教程489
      • PHP教程429
      • C语言C++560
      • JAVA教程1742
      • Python教程447
      • 前端教程1297
      • 云计算教程465
      • 操作系统1028
      • 数据库教程923
      • 零基础视频教程14
      • WordPress教程111
        • WordPress子主题1
        • WordPress模板128
      • 其他教程104
        • CMS教程107
        • DEDECMS教程28
        • 编程办公84
    • 网站模板仓库
      • DEDECMS模板81
      • 帝国CMS模板88
      • 织梦模板源码192
      • 其它CMS模版12
      • 企业网站模板870
      • 响应式模板243
      • Discuz模板196
      • 单页模板212
      • 后台模板429
      • 模板素材243
      • 专题模板209
      • 简历模板345
    • 模板主题
      • PPT模板1832
      • 主题模板3833
      • 公司模板119
      • 动物模板41
      • 商务模板1505
      • 国外模板265
      • 科技模板169
      • 背景模板189
      • 自然模板151
      • 节日模板709
      • 行业模板718
      • 通用模板513
    • 设计学院
      • PPT模板1832
      • PSD素材3826
      • 设计素材3422
      • ppt素材645
      • ppt图表559
      • ppt特效428
      • 图片素材3138
      • 摄影剪辑34
    • 网站源码
      • 办公/软件/电脑420
      • 商城/淘客/网店264
      • 小说/新闻/博客163
      • 支付/金融/货币347
      • 电影/视频/音乐172
      • 会员/推广/交流94
      • 企业/公司/政府863
      • 亲测网站源码40
      • 小程序源码649
      • 影视网站源码15
      • 网站源码14270
      • 其它源码221
        • 汽车/车行/交通22
        • 资源/下载/技术62
        • 域名/空间/建站56
        • 个人网站27
        • 支付源码5
        • 防红源码7
    • 代码特效
      • CSS代码96
      • HTML5实例169
      • HTML编辑器24
      • css/div/h5特效230
      • 名站特效321
      • 图片特效558
      • 在线客服92
      • 常用特效986
      • 广告代码32
      • 图片代码322
    • 站长资讯
      • 云计算领域22
      • 大数据领域36
      • 网络推广156
      • 站长访谈173
      • 网站运营153
      • 搜索优化867
      • 健身养生32
      • 两性相关49
      • 其他分享55
      • 职场关系37
      • 自我提升76
      • 长点知识29
      • 新媒体运营15
    • QQ工具箱
      • QQ签名1611
      • QQ头像101
      • QQ皮肤155
      • QQ表情216
      • QQ网名4154
      • QQ说说507
      • 技术工具23
      • 学习测试16
      • 微信技巧20
      • QQ技巧25

    WordPress评论获取QQ头像和昵称教程

    2020-06-28 CMS教程 17 已收录
    当前位置:牛品源码 > 学习教程 > CMS教程 > WordPress评论获取QQ头像和昵称教程
    正文概述

    最近去朋友的WordPress博客留言时,看到朋友博客的留言板有个特别好玩的功能,就是输入QQ号码一键可以获取到QQ头像和QQ昵称,我觉得特别的有意思,于是在网上搜了搜相关的WordPress教程,相关的内容挺多的。

    为了以后方便使用,先整理记录下来。具体的效果就如下图所示:

    WordPress评论获取QQ头像和昵称教程

    步骤一:插入QQ字段到评论表单

    这个网上能找到代码,在主题的评论页面找到你主题输出昵称、邮箱、网址等表单结构依样添加  input 标签,比如我的表单结构是:

    <p class=\"comment-form-author\">
    	<label>昵称</label>
    	<input id=\"yuao-comt-author\" name=\"author\" type=\"text\" value=\"<?php echo esc_attr($comment_author); ?>\" maxlength=\"245\" required=\"required\" placeholder=\"必填\" />
    </p>
    

    添加QQ结构照着复制就行了,昵称等文本改成QQ,注意name属性值要改成new_field_qq,下面传参要用到。前端代码加了input,后端就要添加字段用来存储前端提交到数据库的QQ信息。

    下方代码请添加到主题中functions.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表单填入qq号之后,ajax会向后端发送get请求,将qq号传给后端API文件进行处理,处理完毕再把信息返回到前端,依靠js把信息(昵称和头像)输出到前端评论表单上。
    而当访客评论完毕,刷新页面时,昵称和头像显示在评论表单上,这时候就要用到cookie操作。

    下方为前端处理的js代码(主题需要jQuery支持):

    // 初始化
    $(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\'));
    			$(\'#yuao-comt-qq\').val(getCookie(\'user_qq\'));
    	}
    
    	$(\'#yuao-comt-qq\').on(\'blur\',function(){
    		var qq=$(\'#yuao-comt-qq\').val(); // 获取访客填在qq表单上的qq数字,其中#yuao-comt-qq表示QQ input标签上的id,改成你自己的!	
    		$(\'#yuao-comt-email\').val($.trim(qq)+\'@qq.com\'); // 将获取到的qq,改成qq邮箱填入邮箱表单,其中#yuao-comt-email表示邮箱input标签上的id,改成你自己的!		
    		// 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);
    				$(\'#yuao-comt-author\').val(data[qq][6]);	// 将返回的qq昵称填入到昵称input表单上,其中#yuao-comt-author表示昵称input标签上的id,改成你自己的!
    				alert(\'已获取昵称!\'); // 弹出警告
    				setCookie(\'user_qq\',qq);	// 设置cookie
    			},
    			error: function() {
    				$(\'#yuao-comt-qq,#yuao-comt-author,#yuao-comt-email\').val(\'\'); // 如果获取失败则清空表单,注意input标签上的id,改成你自己的!
    				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(\'糟糕,获取头像失败了!请重新填写。\'); // 弹出警告
    				$(\'#yuao-comt-qq,#yuao-comt-author,#yuao-comt-email\').val(\'\'); // 清空表单
    			}
    		});
    	});
    }
    

    下面是后端处理的php代码(需用到两个api),新建一个func_getqqinfo.php文件,将文件放到网站根目录与上面ajax请求的路径要一致!

    <?php
    header(\"content-Type: text/html; charset=utf-8\");
    $type = @$_GET[\'type\'] ? $_GET[\'type\'] : \'\';
    if(empty($type)){
    	//header(\"Location:http://www.wpToo.com/\");
    	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);
    		}
    	}
    }
    

    步骤三:让QQ头像显示在评论列表和后台评论上

    一般情况下,WordPress的评论头像默认是gravatar,所以我们用get_avatar过滤器来对默认头像的调用方式进行改造。以下代码加入到主题的functions.php里

    /**
     * 修改后台头像 
     * 若有qq字段则显示qq头像,若没有则显示gravatar 
     */
    
    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 ;
    	}	
    }
    

    WordPress评论获取QQ头像和昵称教程,到这里基本就完成了,如果你有一定的代码基础,也可以对js的处理部分进行与主题相匹配的改造。

    有什么不懂的也可以添加我们的QQ WordPress交流群和大家一起交流

    WordPress建站交流群:8424781
    

     

    RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
    牛品源码 » WordPress评论获取QQ头像和昵称教程

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台

    普通

    分享到:
    上一篇
    WordPress如何给古腾堡编辑器添加自定义模块
    下一篇
    WordPress正确引入加载JS、css文件的方法

    相关推荐

    WordPress如何添加用户自定义上传头像功能

    WordPress如何添加用户自定义上传头像功能

    WordPress添加网站文章内容页字数统计代码

    WordPress添加网站文章内容页字数统计代码

    WordPress如何调用当前文章作者头像

    WordPress如何调用当前文章作者头像

    WordPress不同分类调用不同文章模板教程

    WordPress不同分类调用不同文章模板教程

    发表评论 取消回复

    站长交流群

    互联网站长技术交流群
    共同学习,共同进步,共同成长!

    QQ交流群
    标签
    MYSQL数据库 (923) nosql数据库 (923) Oracle数据库技术 (923) PHP源码 (2111) PHP源码下载 (2108) ppt免费下载 (1832) ppt图片 (1832) ppt文档下载 (1832) PPT模板 (1833) ppt素材 (1832) ppt背景 (1850) psd分层 (3826) PSD图片下载 (3826) psd源文件 (3826) PSD素材 (3826) PSD素材下载 (3826) PSD设计素材 (3826) windows从入门到精通 (1028) [db:标签] (17158) 企业ppt (1832) 企业模板下载 (1582) 企业源码 (1324) 企业网站模板 (1324) 公司网站模板 (1327) 前端开发教程 (1297) 办公ppt (1832) 图片素材 (3143) 操作系统 (1028) 操作系统技术 (1028) 操作系统教程 (1028) 数据库 (985) 服务器教程 (1028) 模板 (1029) 移动网页前端开发 (1297) 网站前端开发 (1297) 网站模板下载 (1582) 网站源码 (2178) 网站源码现下载 (2108) 网页前端开发教程 (1297) 背景图片下载 (3138) 设计图片素材 (6560) 设计素材 (3424) 设计素材下载 (3422) 设计素材免费下载 (3422) 高清图片下载 (3138)
    • 265会员总数(位)
    • 66769资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1892稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    牛品源码

    加入本站会员
    开启尊贵特权之体验 本站资源支持会员下载专享,普通注册会员只能原价购买资源或者限制免费下载次数,付费会员所有资源可无限下载。并可享受资源折扣或者免费下载。

    本站导航
    友情链接
    开通会员享受折扣优惠
    © 2025 All rights reserved 京ICP备18888888号 京公网安备 188888888

    • SVIP
      升级SVIP会员

      限时钜惠
      终身SVIP仅需39元

      立即开通

    • 客服
      工作时间

      工作日:9:00 - 23:00
      节假日:9:00 - 23:00

      点击咨询客服

    • QQ群

    • 建站

    • 优化

    • 全屏

    牛品源码
    • 登录
    • 注册
    忘记密码?
    牛品源码
    • 技术学习大厅 ►
      • NET教程489
      • PHP教程429
      • C语言C++560
      • JAVA教程1742
      • Python教程447
      • 前端教程1297
      • 云计算教程465
      • 操作系统1028
      • 数据库教程923
      • 零基础视频教程14
      • WordPress教程111 ►
        • WordPress子主题1
        • WordPress模板128
      • 其他教程104 ►
        • CMS教程107
        • DEDECMS教程28
        • 编程办公84
    • 网站模板仓库 ►
      • DEDECMS模板81
      • 帝国CMS模板88
      • 织梦模板源码192
      • 其它CMS模版12
      • 企业网站模板870
      • 响应式模板243
      • Discuz模板196
      • 单页模板212
      • 后台模板429
      • 模板素材243
      • 专题模板209
      • 简历模板345
    • 模板主题 ►
      • PPT模板1832
      • 主题模板3833
      • 公司模板119
      • 动物模板41
      • 商务模板1505
      • 国外模板265
      • 科技模板169
      • 背景模板189
      • 自然模板151
      • 节日模板709
      • 行业模板718
      • 通用模板513
    • 设计学院 ►
      • PPT模板1832
      • PSD素材3826
      • 设计素材3422
      • ppt素材645
      • ppt图表559
      • ppt特效428
      • 图片素材3138
      • 摄影剪辑34
    • 网站源码 ►
      • 办公/软件/电脑420
      • 商城/淘客/网店264
      • 小说/新闻/博客163
      • 支付/金融/货币347
      • 电影/视频/音乐172
      • 会员/推广/交流94
      • 企业/公司/政府863
      • 亲测网站源码40
      • 小程序源码649
      • 影视网站源码15
      • 网站源码14270
      • 其它源码221 ►
        • 汽车/车行/交通22
        • 资源/下载/技术62
        • 域名/空间/建站56
        • 个人网站27
        • 支付源码5
        • 防红源码7
    • 代码特效 ►
      • CSS代码96
      • HTML5实例169
      • HTML编辑器24
      • css/div/h5特效230
      • 名站特效321
      • 图片特效558
      • 在线客服92
      • 常用特效986
      • 广告代码32
      • 图片代码322
    • 站长资讯 ►
      • 云计算领域22
      • 大数据领域36
      • 网络推广156
      • 站长访谈173
      • 网站运营153
      • 搜索优化867
      • 健身养生32
      • 两性相关49
      • 其他分享55
      • 职场关系37
      • 自我提升76
      • 长点知识29
      • 新媒体运营15
    • QQ工具箱 ►
      • QQ签名1611
      • QQ头像101
      • QQ皮肤155
      • QQ表情216
      • QQ网名4154
      • QQ说说507
      • 技术工具23
      • 学习测试16
      • 微信技巧20
      • QQ技巧25
    2025年6月
    一 二 三 四 五 六 日
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30  
    « 5月    
    ×
    • 首页

    • 签到

    • 切换

    • 客服

      牛品源码公告:

      终身SVIP限时39元 会员专享优质资源 内容持续上新
      本站资源支持会员下载专享,普通注册会员只能原价购买资源或者限制免费下载次数,付费会员所有资源可无限下载。并可享受资源折扣或者免费下载。
      声明:本站发布的文章及附件仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负。 本站所有资源不带技术支持,下载资源请24小时内删除,如用于违法用途,或者商业用途,一律使用者承担。