WordPress添加自定义头像上传功能

管理员
管理员
管理员
246
文章
27
评论
2020年6月20日16:24:44 评论 758 5998字

WordPress 默认支持 Gravatar 头像,然而国内用户使用的比较少(网络的一些原因,该头像服务加载可能比较困难。)WordPress 默认又没有提供头像上功能,对于一些开启了用户中心的网站,这样显然不太友好。网上解决这个问题,一般是通过 Simple Local Avatars 或者 WP User Avatar 等插件来实现的,一些传说中纯代码的方案也是直接引入 Simple Local Avatars 插件中的单文件。Wordpress添加自定义头像上传功能

文件的上传主要使用了 media_handle_upload()

新建 fun_local_avatar.php 文件

所有内容都写在一个文件了,具体内容如下:

  1. <?php
  2. function _edit_user_avatar_profile($user){
  3. $avatar = get_user_meta($user->ID, 'avatar', true);
  4. $user_cap = current_user_can( 'upload_files' ) ? 'YES' : 'NO';
  5. $avatar_default = $avatar ? $avatar : get_template_directory_uri().'/img/avatar-default.png';
  6. ?>
  7. <h2>用户头像</h2>
  8. <table class="form-table" cellspacing="0">
  9. <tbody>
  10. <tr id="user_avatar" class="user-avatar" valign="center">
  11. <th scope="row"><label for="avatar">自定义头像</label></th>
  12. <td class="user-avatar-img">
  13. <img id="user-avatar-new" src="<?php echo $avatar_default; ?>" alt="本地头像"/>
  14. </td>
  15. <td class="user-avatar-wrap">
  16. <input type="hidden" name="avatar" id="avatar" class="regular-text" value="<?php echo $avatar; ?>">
  17. <?php if ( current_user_can( 'upload_files' ) ) { ?>
  18. <!-- 有 upload_files 权限媒体库选择图片文件 -->
  19. <span class="desc">在媒体库中选择一个图片作为头像:</span>
  20. <div class="user-avatar-btn wp-media-buttons">
  21. <div data-user_cap="<?php echo $user_cap; ?>" data-item_type="url" class="media-library-upload button add_media">添加图片</div>
  22. </div>
  23. <?php } ?>
  24. <!-- 无 upload_files 权限计算机上传图片文件 -->
  25. <span class="desc">从计算机中上传一张图片作为头像:</span><br />
  26. <div class="user-avatar-btn wp-media-buttons">
  27. <input type="file" name="local-avatar-upload" id="local-avatar-upload" class="local-avatar-upload" />
  28. <?php wp_nonce_field( 'local-avatar-upload', 'local-avatar-upload_nonce' ); ?>
  29. </div>
  30. </td>
  31. </tr>
  32. </tbody>
  33. </table>
  34. <?php
  35. }
  36. add_action('show_user_profile', '_edit_user_avatar_profile', 1);
  37. add_action('edit_user_profile', '_edit_user_avatar_profile', 1);
  38. // 媒体库选择文件更新 avatar 值(用户有 upload_files 权限)
  39. function _edit_user_avatar_profile_update($user_id){
  40. if(current_user_can('edit_users') || get_current_user_id() == $user_id){
  41. $avatar = $_POST['avatar'] ? : '';
  42. if($avatar){
  43. update_user_meta($user_id, 'avatar', $avatar);
  44. }else{
  45. delete_user_meta($user_id, 'avatar');
  46. }
  47. }
  48. }
  49. add_action('personal_options_update','_edit_user_avatar_profile_update');
  50. add_action('edit_user_profile_update','_edit_user_avatar_profile_update');
  51. // 用户上传文件更新 avatar (用户无 upload_files 权限)
  52. function _upload_user_avatar_profile_update($user_id){
  53. $user_id = get_current_user_id();
  54. // check nonces
  55. if( empty( $_POST['local-avatar-upload_nonce'] ) || ! wp_verify_nonce( $_POST['local-avatar-upload_nonce'], 'local-avatar-upload' ) ){
  56. return;
  57. }
  58. // 判断 media_handle_upload() 是否存在
  59. if ( ! function_exists( 'media_handle_upload' ) ){
  60. require_once( ABSPATH . 'wp-admin/includes/media.php' );
  61. }
  62. // 自定义头像上传路径( Upload 文件夹下的路径 )
  63. function avatar_upload_dir( $dir ) {
  64. $sub_dir = get_currentuserinfo()->ID;
  65. return array(
  66. 'path' => $dir['basedir'] . '/avatars/' . $sub_dir,
  67. 'url' => $dir['baseurl'] . '/avatars/' . $sub_dir,
  68. 'subdir' => '/avatars/' . $sub_dir,
  69. ) + $dir;
  70. }
  71. add_filter( 'upload_dir', 'avatar_upload_dir');
  72. $avatar_id = media_handle_upload( 'local-avatar-upload', 0, array(), array(
  73. 'mimes' => array(
  74. 'jpg|jpeg|jpe' => 'image/jpeg',
  75. 'gif' => 'image/gif',
  76. 'png' => 'image/png',
  77. ),
  78. 'test_form' => false
  79. ));
  80. remove_filter( 'upload_dir', 'avatar_upload_dir' );
  81. if(!is_numeric($avatar_id)){ return; } // 未上传文件的话直接返回
  82. if ( is_wp_error( $avatar_id ) ) { //
  83. // 图片上传错误处理信息
  84. function user_avatar_upload_errors( WP_Error $errors ) {
  85. $error_message = function_exists('get_error_message') ? $avatar_id->get_error_message() : "未知错误,请仔细检查文件!";
  86. $avatar_upload_error = '<strong>' . __( 'Avatar 头像上传错误:'.gettype($avatar_id) , 'local-avatar-upload' ) . '</strong> ' . esc_html( $error_message );
  87. $errors->add( 'avatar_error', $avatar_upload_error );
  88. }
  89. add_action( 'user_profile_update_errors', 'user_avatar_upload_errors' );
  90. return;
  91. }else{
  92. $avatar_url = wp_get_attachment_image_src( $avatar_id, 'full')[0];
  93. update_user_meta($user_id, 'avatar', $avatar_url);
  94. }
  95. }
  96. add_action( 'personal_options_update', '_upload_user_avatar_profile_update' );
  97. add_action( 'edit_user_profile_update', '_upload_user_avatar_profile_update' );
  98. // 确保配置文件表单具有正确的编码类型, 一般默认的 enctype="application/x-www-form-urlencoded";不能用于上传文件
  99. function user_edit_form_tag() {
  100. echo 'enctype="multipart/form-data"';
  101. }
  102. add_action( 'user_edit_form_tag', 'user_edit_form_tag' );
  103. // 用户有上传权限调用 wp.media 库
  104. function admin_enqueue_scripts(){
  105. if ( current_user_can( 'upload_files' ) ){
  106. wp_enqueue_media();
  107. }
  108. }
  109. add_action('admin_enqueue_scripts', 'admin_enqueue_scripts');
  110. add_action('admin_footer', function(){
  111. ?>
  112. <style type="text/css">
  113. .form-table .user-avatar-img{
  114. display: inline-block;
  115. width: 120px;
  116. height: 120px;
  117. margin: 0;
  118. padding: 0;
  119. border: 1px solid #999;
  120. border-radius: 9px;
  121. overflow: hidden;
  122. }
  123. .form-table .user-avatar-img img{
  124. width: 100%;
  125. height: 100%;
  126. }
  127. .form-table .user-avatar-wrap {
  128. display: inline-block;
  129. width: auto;
  130. height: 110px;
  131. margin: 0;
  132. padding: 5px 20px;
  133. border: 0;
  134. }
  135. .form-table .user-avatar-wrap .user-avatar-btn{
  136. width: 80px;
  137. margin: 5px 0;
  138. padding: 0;
  139. border: 0;
  140. font-size: 14px;
  141. }
  142. </style>
  143. <script>
  144. (function($){
  145. // 有 upload_files 权限媒体库选择图片文件
  146. $('body').on('click', '.media-library-upload', function(e) {
  147. // 阻止事件默认行为
  148. e.preventDefault();
  149. var user_cap = $(this).data('user_cap');
  150. if (user_cap=="NO"){alert("抱歉,你没有上传图片的权限!")}
  151. var item_type = $(this).data('item_type');
  152. var input_tag = $('#avatar');
  153. var img_tag = $('#user-avatar-new');
  154. //唤起 WordPress 默认媒体上传
  155. custom_uploader = wp.media.frames.local_avatar_frame = wp.media({
  156. title: '选择图片',
  157. library: { type: 'image' },
  158. button: { text: '选择图片' },
  159. multiple: false
  160. });
  161. wp.media.frames.local_avatar_frame.on('select', function() {
  162. var attachment = wp.media.frames.local_avatar_frame.state().get('selection').first().toJSON();
  163. var img_value = (item_type == 'url') ? attachment.url : attachment.id;
  164. // 将图像路径赋值给 input 的 value
  165. input_tag.val(img_value);
  166. img_tag.attr('src', img_value);
  167. });
  168. wp.media.frames.local_avatar_frame.open();
  169. });
  170. // 无 upload_files 权限本地上传图片文件
  171. $('body').on('change', '.local-avatar-upload', function(e) {
  172. var file = this.files[0];
  173. // 限制文件类型
  174. var fileType = /^image\//;
  175. if ( !fileType.test(file.type) ) {
  176. alert("请选择一张图片!");
  177. $(this).val('')
  178. return;
  179. }
  180. //限制文件大小
  181. var imgSize = file.size;
  182. if(imgSize> 200*1024){
  183. alert('上传的图片不得大于200KB!');
  184. $(this).val('')
  185. return false;
  186. }
  187. // 预览图片
  188. filePath = URL.createObjectURL(file);
  189. $('#user-avatar-new').attr('src', filePath);
  190. });
  191. })(jQuery)
  192. </script>
  193. <?php
  194. });

代码中基本上都做了注释了,方便大家理解,有需要的小伙伴可以在此基础上做些修改。

引入 fun_local_avatar.php

将代码丢到主题目录下,然后在主题 functions.php 中直接引入即可,引入代码如下,注意修改路径!

  1. // 后台自定义上传头像
  2. require get_template_directory() . '/functions/fun_local_avatar.php';

以上。

weinxin
扫码关注微信公众
幂彀社区,一个关注互联网、平面设计等领域个人博客;致力于打造一个优秀的资源共享学习平台。
管理员
  • 本文由 发表于 2020年6月20日16:24:44
  • 转载请务必保留本文链接:https://www.teelm.com/2020/06/20/15065.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: