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

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

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

1.     <form action="" method="post" enctype="multipart/form-data">

2.     <!-- 用户图像 -->

3.     <div class="change-photo-btn">

4.     <div class="photoUpload">

5.        <span><i class="fa fa-upload"></i> 上传图像</span>

6.        <input type="file" class="upload" name="simple_local_avatar"/>

7.     </div>

8.     </div>

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

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

1. //图片上传函数：上传单张图片

2. //参数1：图片信息; 参数2：存放图片路径

3. function upload_image($info,$path){

4. //获取图片后缀

5. $pre = strrchr($info["name"],".");

6. $img_name = date("YmdHis").$pre;

7. //错误过滤

8. if($info["error"]>0){

9. switch($info["error"]){

10. case 1: echo "文件大小超过php.ini设置的大小 2M。"; break;

11. case 2: echo "文件大小超过表单设置的大小。"; break;

12. case 3: echo "文件只有部分被上传。"; break;

13. case 4: echo "没有文件被上传。"; break;

14. case 6: echo "找不到临时文件夹。"; break;

15. case 7: echo "文件写入失败。"; break;

16. }

17. echo '<script>alert("返回添加图片页面。"); window.history.back(); </script>';

18. exit;

19. }

20. //图片类型过滤

21. $pic_arr = array("image/jpeg","image/jpg","image/pjpeg","image/png","image/x-png","image/gif");

22. if(!in_array($info["type"],$pic_arr)){

23. echo '<script>alert("上传的文件必须是 jpg、png、gif格式的。"); window.history.back();</script>';

24. exit;

25. }

26. //图片大小过滤

27. if($info["size"]>(10*1024*1024)){

28. echo '<script>alert("上传图片的大小不能超过 10M。"); window.history.back();</script>';

29. exit;

30. }

31. if(is_uploaded_file($info["tmp_name"])){

32. move_uploaded_file($info["tmp_name"],$path.$img_name);

33. return $img_name;

34. }

35. }

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

1.     $path = WP_CONTENT_DIR.'/uploads/users_avagar/'; //在 uploads目录下创建一个 users_avagar目录

2.     if(!is_dir($path)){

3.     mkdir($path);

4.     }

5.     //组合 图片url

6.     $img_url['full'] = WP_CONTENT_URL.'/uploads/users_avagar/'.upload_image($files,$path);

7.     update_user_meta($uid,'simple_local_avatar',$img_url); //写入数据库

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