WordPress开发 - 怎么在前台页面添加自定义用户头像功能?

主题默认使用的 gravatar头像 在国内不怎么方便(虽然全球都在用),为了适应国内的环境,我们得来修改下,这次分享的WordPress开发教程是在前台操作的,有点麻烦

主题默认使用的 gravatar头像 在国内不怎么方便(虽然全球都在用),为了适应国内的环境,我们得来修改下,这次分享的WordPress开发教程是在前台操作的,有点麻烦,需要简便后台操作的可以看这篇文章《纯代码实现用户添加自定义头像功能

思路:我们可以给 wordpress主题数据库添加一个用户自定义字段,然后把前台上传的图片保存到这个自定义字段中,在前台模板中需要用户头像的地方,就调用这个自定义字段就可以了。

WordPress开发 - 怎么在前台页面添加自定义用户头像功能?-Npcink
背景图片 - 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开发教程:

WordPress开发 - 怎么在前台页面添加自定义用户头像功能?-Npcink
WordPress开发 - 怎么在前台页面添加自定义用户头像功能?-Npcink

纯代码实现用户添加自定义头像功能 - wordpres开发

有没有什么办法可以让用户自己选择头像呢?这篇wordpress开发教程就来教你
最后更新: 2020-03-27
WP开发

wordpress开发 - 怎么移除头部不必要的元素标签?

2020-3-24 0:49:53

WP开发

WordPress开发 - 怎么在评论区添加电话和微信等表单功能?

2020-3-25 16:34:46

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,未经Npcink作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 1355471563 或 点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索