全百科精品资源分享
免费优质资源下载平台

纯代码给WordPress主题前台页面添加用户自定义头像功能

播放按钮
全百科网免费发布推广信息
文章目录

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

解决问题

wordpress 主题默认的用户头像是采用 gravatar 头像,gravatar 头像是会球公认头像,使用非常广,很多程序都用它。但是,它必须要要它的官网去注册,这对于一些普通用户来说就不太方便了。

第一步

在 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” 这个,没有这个就无法上传。

第二步

在 wp 主题的 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 步,我们就对 wp 主题实现了用户在前台页面就可以上传修改自定义头像了,然后在需要调用头像的地方,使用 get_user_meta() 方法来调用。不过,这种方法也有一个缺陷:就是没有跟 gravatar 头像调用方法通用,调用 gravatar 头像的方法:get_avatar() ,如查想使用 get_avatar 来调用我们这个自定义头像,可以添加一些判断处理,这里就不多做介绍了。

Download WordPress Themes
Download Premium WordPress Themes Free
Download WordPress Themes
Premium WordPress Themes Download
lynda course free download
download huawei firmware
Download Nulled WordPress Themes
lynda course free download

搜一下 获取更多

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
全百科网 » 纯代码给WordPress主题前台页面添加用户自定义头像功能
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址