WordPress主题前台页面添加用户头像

WordPress教程
22年11月4日
编辑

Joker织梦开发者

WordPress 主题默认的用户头像是采用 gravatar 头像，gravatar 头像是会球公认头像，使用非常广，很多程序都用它。但是，它必须要要它的官网去注册，这对于一些普通用户来说就不太方便J D V M { x H $了。前段时间，有个 Q 友问我：“wp 主题用户中心T O $ 0 p g { V e怎样在前端页面就可以添加自定义用户头像呢？” 这也就是我今天所要讲的内容。

其实，wp 主题要想实现在前台页面添加用户头像的功能，也不是个大难题，思路：我| + ^ : G们可以给 wordpress 主题数据库添加一个用户自定义字段，然后把前台上传的图片保存到这个自定义字段中，在前台模板中需要用户头像的地方，就调用这个自定义字段就可以了。

第一步：在 wp 主题用户中心的个人资料修改页面添加用户头像上传表单：

<form action="" method="post" enctype="multipa! R e ]rt/form-data">
<div class="change-photo-btn&quo_ + A T H k 3 O Nt;>
<div class="photoUplo\ 7 % y f 2 ead">
<span&gtn R E v S c ^ T;<i class=&q\ P 9 w ` ~uot;fa fa-upload"><a j \ ) H $ R/i> 上传图像</span>
<ind 6 2 ? / * 5 .put type="file" class="upload" nao S _ ! t B C _ 6me="simpH V 0 Y l 2 ele_local_avatar"/>
</div>
</div>

这里的 simple_local_avatar 就是用户头像自定义字段键名。注：上传图片的表单必须要加上 enctype="multipart/form-data" 这个，没有这个就无法上传。

第二步：在 wp 主题的 functions.php 文件中添加上传图片的处理函数代码：

//K 9 * N图片上传函数：上传单张图片
//参数1：3 ] z e h K图片信息; 参数2：存放图片路径
function upload_image($info,$path){
//获取图片后缀
$pre = strrchr($info["name"],&q1 Z C F ? B )uot;.");
$img_name = date("YmdHis").$pre;
//错误过滤
if($info[e ` ^ K n ) J"eI } o , ( ] = # urror"]>0){
switch($info[&quo[ d w q S f z N Nt;error"]){
case 1: echo "文件大小超过php.ini设置的大小 2M。"; break;
case 2: echo "文件大小超过表单设置的大小。"; break;
case 3: echo "文件* \ a @ m D p只有部分被上传。"; break;
ca{ q C d cse 4: echo "没有文件被上传。"; break;
case 6: echo &d j y t V , f g yq1 Y 0 p N m (uot;找不到临时文件夹。v m P L"; break;
case 7: echo "文件写入失败。"; break;
}J G Z ~
echo '<script>alert("返回添加图片页面。")i K ! G \; wiE v cndow.history.back(); </\ d @ { ; 6 p _script>';
exit;
}
//图片类型过滤
$pic_a\ q ] $ ? orr = array("image/U \ ` e 6 : D ] 9jpeg","image/jpg","image/pjpeg","image/p- V T d u Sng","image/x-png","image/gif");
if(!in_a~ t Yrray($info["type"],$pic_arr)r K * U41;W o O ?123;
echo '<script>alert(&quM 6 ~ kot;上传的文件必须是 jpg、png、gif格式的。");g @ ^ ^ \ window.history.back();</script>';
exit;
}
//图片大小过滤v w f * c & . F L
if($infoB p ]91;"size"]>(10*1024*1024)){
echo '<script>alert(&qK F Q K b ruot;上传图片的大小不f S ` a h R k 6能超过 10M。"); window.history.back();</script>';
exit;
&k = V g V _ ( 2 T#125;
if(is_uploaded_file($info[X q Y G & a _ ,;"tmp_name"]))&3 _ / v#123;
move_uploaded_file($info["tmp_n; c P p j x ` % Kame&qs 5 \ N auot;],$path.$img_name);
return $img_name;
B q F A 5 e l { p5;
}

第三步：上传图片并保g z X存到数据库：

$O 3 k 2path = WP_CONTENT_DIR.'/uploads/users_avagar/'; //在 uploads目录下创建一个 ux M } . 5 , f | )sers$ 7 \ w ? ] :_avagar目录
if(!is_dir($path\ w j j S o R {41;){
mkdir($path&u R h ) M#41;% _ h 7 L v c;
}
//组合图片url
$img_urL % F G V Ml['full'] = WP_CONTENT_URL.'/uploads/users_avagar/'.upload_imaU Y 2ge($f- - } Q { 5 D 0 wiles,$path);
update_user_m, } \ P S t O veta($uid,'simple_local_avatar',$img_uN ) J H j - E Trl); //写入G D t : |数据库

通过上面的 3 步，我们就对 wp 主题实现了用户在前台页面就可以上传修改自定义头像了，然后在需要调用. A 2 } &头像的地方，使用 get_user_meta() 方法来调用。不过，这种方法也有一个缺陷：就是没有跟 gravatar 头像调用方法通用，调用 gravatar 头像的方法：get_avatar(a A ^ @ u & f K) ，如查想使用 get_avatar 来调用我们这个自定义头像，可以添加一些判断处理，这里就不多做介绍了。