WordPress在评论框添加QQ获取用户名、邮箱、头像(WordPress主题开发中使用Ajax异步更新前端用户头像)
文章目录
WordPress在评论框添加QQ获取用户名、邮箱、头像
国内QQ比较流行,在评论框添加QQ并获取用户名头像等非常方便用户使用。
如何实现这个功能呢?下边就来看这个步骤吧:
先把一下的代码添加到主题的 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头像
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('/https:(.*?)&t/',$qqavatar,$m); // 匹配 http: 和 &t 之间的字符串
return '<img src="'.stripslashes($m[1]).'" class="avatar avatar-40 photo" alt="qq_avatar" />';
}else{
return $avatar ;
}
}
下载get_qqinfo.php的文件保存到当前主题的modules文件夹内,作为获取API的文件。
关注 私信
把下面的代码放到主题的JS文件里,可以是commen.js也 可以是main.js。
// 初始化
$(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') ){
//$('.comt-title img').attr('src',getCookie('user_avatar'));
$('#comt-qq').val(getCookie('user_qq')); //获取缓存QQ号
}
$('#comt-qq').on('blur',function(){
var qq=$('#comt-qq').val(); // 获取访客填在qq表单上的qq数字,其中#comt-qq表示QQ input标签上的id!
$('#email').val($.trim(qq)+'@qq.com'); // 将获取到的qq,改成qq邮箱填入邮箱表单,其中#email表示邮箱input标签上的id
// ajax方法获取昵称
$.ajax({
type: 'get',
url:jsui.uri+'/modules/get_qqinfo.php?type=getqqnickname&qq='+qq, //get_qqinfo所在位置,用于获取QQ信息
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'portraitCallBack',
success: function(data) {
// console.log(data);
$('#author').val(data[qq][6]); // 将返回的qq昵称填入到昵称input表单上
setCookie('user_qq',qq); // 设置cookie
},
error: function() {
$('#comt-qq,#author,#email').val(''); // 获取失败清空表单
}
});
// 获取头像
$.ajax({
type: 'get',
url:jsui.uri+'/modules/get_qqinfo.php?type=getqqavatar&qq='+qq, //get_qqinfo所在位置,用户获取QQ头像信息
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'qqavatarCallBack',
success: function(data) {
$('.comt-title img').attr('src',data[qq]); // 将返回的qq头像设置到你评论表单区域显示头像的节点上
setCookie('user_avatar',data[qq]); // 设置cookie
},
error: function() {
$('#comt-qq,#author,#email').val(''); // 获取失败清空表单
}
});
});
}
然后刷新文章页面,评论框此时可以获取QQ头像了。
WordPress主题开发中使用Ajax异步更新前端用户头像
html代码如下:
1 |
<div <span class="hljs-class"><span class="hljs-keyword">class</span>=\\\"<span class="hljs-title">file</span>\\\"> <<span class="hljs-title">span</span>>上传头像</<span class="hljs-title">span</span>> <<span class="hljs-title">input</span> <span class="hljs-title">type</span>=\\\"<span class="hljs-title">file</span>\\\" <span class="hljs-title">name</span>=\\\"<span class="hljs-title">addPic</span>\\\" <span class="hljs-title">class</span>=\\\"<span class="hljs-title">addPic</span>\\\" <span class="hljs-title">style</span>=\\\"\\\" <span class="hljs-title">id</span>=\\\"<span class="hljs-title">addPic</span>\\\" <span class="hljs-title">accept</span>=\\\".<span class="hljs-title">jpg</span>, .<span class="hljs-title">gif</span>, .<span class="hljs-title">png</span>\\\" <span class="hljs-title">resetonclick</span>=\\\"<span class="hljs-title">true</span>\\\" <span class="hljs-title">data</span>-<span class="hljs-title">nonce</span>=\\\"<?<span class="hljs-title">php</span> <span class="hljs-title">echo</span> $<span class="hljs-title">wp_create_nonce</span>; ?>\\\"></<span class="hljs-title">div</span>>//其中<?<span class="hljs-title">php</span> $<span class="hljs-title">wp_create_nonce</span> = <span class="hljs-title">wp_create_nonce</span>(\\\'<span class="hljs-title">wpshequ</span>-\\\'.<span class="hljs-title">get_current_user_id</span>());?></span> |
js(使用了JS中的FormData)代码如下:
1 |
<script type=<span class="hljs-string">\\\"text/javascript\\\"</span>> $(<span class="hljs-string">\\\"#addPic\\\"</span>).change(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{ <span class="hljs-keyword">var</span> _this = $(<span class="hljs-keyword">this</span>) <span class="hljs-keyword">var</span> nonce = _this.data(<span class="hljs-string">\\\"nonce\\\"</span>) <span class="hljs-keyword">var</span> file = e.currentTarget.files[<span class="hljs-number">0</span>]; <span class="hljs-built_in">console</span>.log(file) <span class="hljs-comment">//结合formData实现图片预览</span> <span class="hljs-keyword">var</span> sendData=<span class="hljs-keyword">new</span> FormData(); sendData.append(<span class="hljs-string">\\\'nonce\\\'</span>,nonce); sendData.append(<span class="hljs-string">\\\'action\\\'</span>,<span class="hljs-string">\\\'update_avatar_photo\\\'</span>); sendData.append(<span class="hljs-string">\\\'file\\\'</span>,file); $.ajax({ url: <span class="hljs-string">\\\"/wp-admin/admin-ajax.php\\\"</span>, type: <span class="hljs-string">\\\'POST\\\'</span>, cache: <span class="hljs-literal">false</span>, data: sendData, processData: <span class="hljs-literal">false</span>, contentType: <span class="hljs-literal">false</span> }).done(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>{ <span class="hljs-keyword">if</span> (res.status == <span class="hljs-number">1</span>) { layer.msg(res.msg, <span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ location.reload(); }); setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{location.reload()},<span class="hljs-number">1000</span>) }<span class="hljs-keyword">else</span>{ layer.msg(res.msg, <span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ location.reload(); }); } }).fail(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>{ layer.msg(<span class="hljs-string">\\\'网络错误\\\'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ location.reload(); }); }); });<span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span>//其中的弹窗提示使用了layer.js</span> |
php后端处理代码如下:
1 |
<span class="hljs-comment">// 上传头像avatar_photo</span><span class="hljs-function"><span class="hljs-keyword">function</span> mx_<span class="hljs-title">update_avatar_photo</span><span class="hljs-params">()</span></span>{ header(<span class="hljs-string">\\\'Content-type:application/json; Charset=utf-8\\\'</span>); <span class="hljs-keyword">global</span> $current_user; $uid = $current_user->ID; $nonce = !<span class="hljs-keyword">empty</span>($_POST[<span class="hljs-string">\\\'nonce\\\'</span>]) ? $_POST[<span class="hljs-string">\\\'nonce\\\'</span>] : <span class="hljs-keyword">null</span>; $file = !<span class="hljs-keyword">empty</span>($_FILES[<span class="hljs-string">\\\'file\\\'</span>]) ? $_FILES[<span class="hljs-string">\\\'file\\\'</span>] : <span class="hljs-keyword">null</span>; <span class="hljs-keyword">if</span> ($nonce && !wp_verify_nonce($nonce, <span class="hljs-string">\\\'wpshequ-\\\'</span> . $uid)) { <span class="hljs-keyword">echo</span> json_encode(<span class="hljs-keyword">array</span>(<span class="hljs-string">\\\'status\\\'</span> => <span class="hljs-string">\\\'0\\\'</span>, <span class="hljs-string">\\\'msg\\\'</span> => <span class="hljs-string">\\\'非法请求\\\'</span>));<span class="hljs-keyword">exit</span>; } $file_index = mb_strrpos($file[<span class="hljs-string">\\\"name\\\"</span>],<span class="hljs-string">\\\'.\\\'</span>); <span class="hljs-comment">//扩展名定位</span> <span class="hljs-comment">//图片验证</span> $is_img = getimagesize($file[<span class="hljs-string">\\\"tmp_name\\\"</span>]); <span class="hljs-keyword">if</span>(!$is_img && <span class="hljs-keyword">true</span>){ <span class="hljs-keyword">echo</span> json_encode(<span class="hljs-keyword">array</span>(<span class="hljs-string">\\\'status\\\'</span> => <span class="hljs-string">\\\'0\\\'</span>, <span class="hljs-string">\\\'msg\\\'</span> => <span class="hljs-string">\\\'上传文件类型错误\\\'</span>));<span class="hljs-keyword">exit</span>; } <span class="hljs-comment">//图片类型验证</span> $image_type = [<span class="hljs-string">\\\'image/jpg\\\'</span>, <span class="hljs-string">\\\'image/gif\\\'</span>, <span class="hljs-string">\\\'image/png\\\'</span>, <span class="hljs-string">\\\'image/bmp\\\'</span>, <span class="hljs-string">\\\'image/pjpeg\\\'</span>, <span class="hljs-string">\\\"image/jpeg\\\"</span>]; <span class="hljs-keyword">if</span>(!in_array($file[<span class="hljs-string">\\\'type\\\'</span>], $image_type) && <span class="hljs-keyword">true</span>){ <span class="hljs-keyword">echo</span> json_encode(<span class="hljs-keyword">array</span>(<span class="hljs-string">\\\'status\\\'</span> => <span class="hljs-string">\\\'0\\\'</span>, <span class="hljs-string">\\\'msg\\\'</span> => <span class="hljs-string">\\\'禁止上传非图片类型文件\\\'</span>));<span class="hljs-keyword">exit</span>; } <span class="hljs-comment">//图片后缀验证</span> $postfix = [<span class="hljs-string">\\\'.png\\\'</span>,<span class="hljs-string">\\\'.jpg\\\'</span>,<span class="hljs-string">\\\'.jpeg\\\'</span>,<span class="hljs-string">\\\'pjpeg\\\'</span>,<span class="hljs-string">\\\'gif\\\'</span>,<span class="hljs-string">\\\'bmp\\\'</span>]; $file_postfix = strtolower(mb_substr($file[<span class="hljs-string">\\\"name\\\"</span>], $file_index)); <span class="hljs-keyword">if</span>(!in_array($file_postfix, $postfix) && <span class="hljs-keyword">true</span>){ <span class="hljs-keyword">echo</span> json_encode(<span class="hljs-keyword">array</span>(<span class="hljs-string">\\\'status\\\'</span> => <span class="hljs-string">\\\'0\\\'</span>, <span class="hljs-string">\\\'msg\\\'</span> => <span class="hljs-string">\\\'上传后缀不允许\\\'</span>));<span class="hljs-keyword">exit</span>; } <span class="hljs-keyword">if</span> ( !<span class="hljs-keyword">empty</span>( $file ) ) { <span class="hljs-comment">// 获取上传目录信息</span> $wp_upload_dir = wp_upload_dir(); <span class="hljs-comment">// 将上传的图片文件移动到上传目录 md5纯命名图片</span> $info = pathinfo($file[<span class="hljs-string">\\\'name\\\'</span>]); $ext = <span class="hljs-keyword">empty</span>($info[<span class="hljs-string">\\\'extension\\\'</span>]) ? <span class="hljs-string">\\\'\\\'</span> : <span class="hljs-string">\\\'.\\\'</span> . $info[<span class="hljs-string">\\\'extension\\\'</span>]; $name = basename($file[<span class="hljs-string">\\\'name\\\'</span>], $ext); $basename = time().<span class="hljs-string">\\\'-\\\'</span>.substr(md5($name), <span class="hljs-number">0</span>, <span class="hljs-number">15</span>) . $ext; <span class="hljs-comment">//</span> $filename = $wp_upload_dir[<span class="hljs-string">\\\'path\\\'</span>] . <span class="hljs-string">\\\'/\\\'</span> . $basename; $re = rename( $file[<span class="hljs-string">\\\'tmp_name\\\'</span>], $filename ); $attachment = <span class="hljs-keyword">array</span>( <span class="hljs-string">\\\'guid\\\'</span> => $wp_upload_dir[<span class="hljs-string">\\\'url\\\'</span>] . <span class="hljs-string">\\\'/\\\'</span> . $basename, <span class="hljs-string">\\\'post_mime_type\\\'</span> => $file[<span class="hljs-string">\\\'type\\\'</span>], <span class="hljs-string">\\\'post_title\\\'</span> => preg_replace( <span class="hljs-string">\\\'/\\\\.[^.]+$/\\\'</span>, <span class="hljs-string">\\\'\\\'</span>, $basename ), <span class="hljs-string">\\\'post_content\\\'</span> => <span class="hljs-string">\\\'\\\'</span>, <span class="hljs-string">\\\'post_status\\\'</span> => <span class="hljs-string">\\\'inherit\\\'</span> ); $attach_id = wp_insert_attachment( $attachment, $filename ); <span class="hljs-keyword">require_once</span>( ABSPATH . <span class="hljs-string">\\\'wp-admin/includes/image.php\\\'</span> ); $attach_data = wp_generate_attachment_metadata( $attach_id, $filename ); wp_update_attachment_metadata( $attach_id, $attach_data ); <span class="hljs-keyword">if</span>($attach_id){ update_user_meta($uid, <span class="hljs-string">\\\'wp_user_avatar\\\'</span>, $attach_id); <span class="hljs-keyword">echo</span> json_encode(<span class="hljs-keyword">array</span>(<span class="hljs-string">\\\'status\\\'</span> => <span class="hljs-string">\\\'1\\\'</span>, <span class="hljs-string">\\\'msg\\\'</span> => <span class="hljs-string">\\\'上传成功\\\'</span>));<span class="hljs-keyword">exit</span>; } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">echo</span> json_encode(<span class="hljs-keyword">array</span>(<span class="hljs-string">\\\'status\\\'</span> => <span class="hljs-string">\\\'0\\\'</span>, <span class="hljs-string">\\\'msg\\\'</span> => <span class="hljs-string">\\\'上传失败\\\'</span>));<span class="hljs-keyword">exit</span>; } } <span class="hljs-keyword">echo</span> json_encode(<span class="hljs-keyword">array</span>(<span class="hljs-string">\\\'status\\\'</span> => <span class="hljs-string">\\\'0\\\'</span>, <span class="hljs-string">\\\'msg\\\'</span> => <span class="hljs-string">\\\'文件错误\\\'</span>));<span class="hljs-keyword">exit</span>;}add_action(<span class="hljs-string">\\\'wp_ajax_mx_update_avatar_photo\\\'</span>, <span class="hljs-string">\\\'mx_update_avatar_photo\\\'</span>);add_action(<span class="hljs-string">\\\'wp_ajax_nopriv_mx_update_avatar_photo\\\'</span>, <span class="hljs-string">\\\'mx_update_avatar_photo\\\'</span>); |
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » WordPress在评论框添加QQ获取用户名、邮箱、头像(WordPress主题开发中使用Ajax异步更新前端用户头像)