無作為
不僅僅是一種態度!

WordPress輸入QQ自動獲取用戶昵稱郵箱

最近逛WordPress博客網站的時候發現有些博客的評論框只需要輸入QQ即可直接獲取你的一些用戶資料,比如名稱,郵箱還有網站,表示非常的神器和方便呀。

于是這里也準備自己弄弄,以后有了這個功能相信大家會更加的樂意評論或者參與評論了,

因為WordPress的評論之前要么必須是會員,要么必須輸入郵箱和名稱,如果不設置的話可能垃圾郵件滿天飛了。

目前這個功能在很多emlog博客上都使用了,不過個人發現wordpress圈里還不太常見,

所以把這個功能做到wordpress上,由于每個人的主題評論表單結構節點名稱都不太一樣,

所以根據本教程你不一定能立刻達到想要的效果,要仔細看我下面代碼注釋。

評論框輸入QQ自動獲取用戶資料信息

步驟一:評論表單插入QQ字段

這個網上能找到代碼,前端找到你主題輸出昵稱、郵箱、網址的表單結構依樣畫葫蘆添加 input 標簽,這個大家自己找,
比如我的表單結構是:

<p class="comment-form-author">
 <label>昵稱</label>
 <input id="yuao-comt-author" class="bs-bb" name="author" type="text" value="<?php echo esc_attr($comment_author); ?>" size="30" 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.btilnp.live/");
 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 ;
	}	
}

到此基本上就大功告成了,如果你有一定的代碼基礎,也可以對js的處理部分進行與主題相匹配的改造,

這里無作為自己還沒有在自己網站上面測試,表示有時間的時候在弄,所以代碼不是最優化,

到時候可能還會更新,如果直接成功了,下面還會分享一些經驗,也可能會另開帖子和大家一起探討和分享!

歷史上的今天:
贊(21) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:www.btilnp.live無作為 » WordPress輸入QQ自動獲取用戶昵稱郵箱

留下評論 4

  1. #3

    測試

    1周前 (03-30)回復
  2. #2

    有點復雜。不會用。。

    拽英文3年前 (2017-08-04)回復
  3. #1

    這樣的話wordpress自帶的頭像的郵箱就不能用了吧

    茗血3年前 (2017-07-02)回復
    • @茗血 不沖突把 只是 后臺 使用文件獲取了信息而已

      無作為3年前 (2017-07-04)回復

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

广西风采快三