主題默認使用的 gravatar頭像 在國內不怎么方便(雖然全球都在用),為了適應國內的環境,我們得來修改下,這次分享的WordPress開發教程是在前臺操作的,有點麻煩,需要簡便后臺操作的可以看這篇文章《純代碼實現用戶添加自定義頭像功能》
思路:我們可以給 wordpress主題數據庫添加一個用戶自定義字段,然后把前臺上傳的圖片保存到這個自定義字段中,在前臺模板中需要用戶頭像的地方,就調用這個自定義字段就可以了。

第一步:在 wp 主題用戶中心的個人資料修改頁面添加用戶頭像上傳表單:
<form action="" method="post" enctype="multipart/form-data">
<!-- 用戶圖像 -->
<div class="change-photo-btn">
<div class="photoUpload">
<span><i class="fa fa-upload"></i> 上傳圖像</span>
<input type="file" class="upload" name="simple_local_avatar"/>
</div>
</div>
這里的 simple_local_avatar
就是用戶頭像自定義字段鍵名。注:上傳圖片的表單必須要加上 enctype=”multipart/form-data”
這個,沒有這個就無法上傳。
第二步:在WordPress主題的 functions.php 文件中添加上傳圖片的處理函數代碼:
//圖片上傳函數:上傳單張圖片
//參數1:圖片信息; 參數2:存放圖片路徑
function upload_image($info,$path){
//獲取圖片后綴
$pre = strrchr($info["name"],".");
$img_name = date("YmdHis").$pre;
//錯誤過濾
if($info["error"]>0){
switch($info["error"]){
case 1: echo "文件大小超過php.ini設置的大小 2M。"; break;
case 2: echo "文件大小超過表單設置的大小。"; break;
case 3: echo "文件只有部分被上傳。"; break;
case 4: echo "沒有文件被上傳。"; break;
case 6: echo "找不到臨時文件夾。"; break;
case 7: echo "文件寫入失敗。"; break;
}
echo '<script>alert("返回添加圖片頁面。"); window.history.back(); </script>';
exit;
}
//圖片類型過濾
$pic_arr = array("image/jpeg","image/jpg","image/pjpeg","image/png","image/x-png","image/gif");
if(!in_array($info["type"],$pic_arr)){
echo '<script>alert("上傳的文件必須是 jpg、png、gif格式的。"); window.history.back();</script>';
exit;
}
//圖片大小過濾
if($info["size"]>(10*1024*1024)){
echo '<script>alert("上傳圖片的大小不能超過 10M。"); window.history.back();</script>';
exit;
}
if(is_uploaded_file($info["tmp_name"])){
move_uploaded_file($info["tmp_name"],$path.$img_name);
return $img_name;
}
}
第三步:上傳圖片并保存到數據庫:
$path = WP_CONTENT_DIR.'/uploads/users_avagar/'; //在 uploads目錄下創建一個 users_avagar目錄
if(!is_dir($path)){
mkdir($path);
}
//組合 圖片url
$img_url['full'] = WP_CONTENT_URL.'/uploads/users_avagar/'.upload_image($files,$path);
update_user_meta($uid,'simple_local_avatar',$img_url); //寫入數據庫
通過上面的 3 步,我們就對wordPress主題實現了用戶在前臺頁面就可以上傳修改自定義頭像了,然后在需要調用頭像的地方,使用 get_user_meta()
方法來調用。不過,這種方法也有一個缺陷:就是沒有跟 gravatar 頭像調用方法通用,調用 gravatar 頭像的方法:get_avatar()
,如查想使用 get_avatar 來調用我們這個自定義頭像,可以添加一些判斷處理,這里就不多做介紹了。
- 參考來源: http://naivet.xintheme.cn/wp_course/13.html
這套教程對于需要開發前臺用戶中心很有用處,如果只是簡單的想要個自定義頭像功能,那么可以參考這篇wordpress開發教程: