WordPress 默许支持 Gravatar 头像,但是国内用户运用的比拟少,而且由于网络的一些缘由,该头像效劳加载可能比拟艰难。 WordPress 默许又没有提供头像上功用,关于一些开启了用户中心的网站,这样显然不太友好。网上处理这个问题,普通是经过 Simple Local Avatars 或者 WP User Avatar 等插件来完成的,一些传说中纯代码的计划也是直接引入 Simple Local Avatars 插件中的单文件。个人总觉得这样怪怪的,于是本人研讨了下,便有了此文。
文件的上传主要运用了 media_handle_upload() 关于该函数的运用请戳这里>>> WordPress学习——media_handle_upload()详解。
新建 fn_local_avatar.php 文件
一切内容都写在一个文件了,详细内容如下:
<?php function _edit_user_avatar_profile($user){ $avatar = get_user_meta($user->ID, 'avatar', true); $user_cap = current_user_can( 'upload_files' ) ? 'YES' : 'NO'; $avatar_default = $avatar ? $avatar : get_template_directory_uri().'/img/avatar-default.png'; ?> <h2>用户头像</h2> <table class="form-table" cellspacing="0"> <tbody> <tr id="user_avatar" class="user-avatar" valign="center"> <th scope="row"><label for="avatar">自定义头像</label></th> <td class="user-avatar-img"> <img id="user-avatar-new" src="<?php echo $avatar_default; ?>" alt="本地头像"/> </td> <td class="user-avatar-wrap"> <input type="hidden" name="avatar" id="avatar" class="regular-text" value="<?php echo $avatar; ?>"> <?php if ( current_user_can( 'upload_files' ) ) { ?> <!-- 有 upload_files 权限媒体库选择图片文件 --> <span class="desc">在媒体库当选择一个图片作为头像:</span> <div class="user-avatar-btn wp-media-buttons"> <div data-user_cap="<?php echo $user_cap; ?>" data-item_type="url" class="media-library-upload button add_media">添加图片</div> </div> <?php } ?> <!-- 无 upload_files 权限计算机上传图片文件 --> <span class="desc">从计算机中上传一张图片作为头像:</span><br /> <div class="user-avatar-btn wp-media-buttons"> <input type="file" name="local-avatar-upload" id="local-avatar-upload" class="local-avatar-upload" /> <?php wp_nonce_field( 'local-avatar-upload', 'local-avatar-upload_nonce' ); ?> </div> </td> </tr> </tbody> </table> <?php } add_action('show_user_profile', '_edit_user_avatar_profile', 1); add_action('edit_user_profile', '_edit_user_avatar_profile', 1); // 媒体库选择文件更新 avatar 值(用户有 upload_files 权限) function _edit_user_avatar_profile_update($user_id){ if(current_user_can('edit_users') || get_current_user_id() == $user_id){ $avatar = $_POST['avatar'] ? : ''; if($avatar){ update_user_meta($user_id, 'avatar', $avatar); }else{ delete_user_meta($user_id, 'avatar'); } } } add_action('personal_options_update','_edit_user_avatar_profile_update'); add_action('edit_user_profile_update','_edit_user_avatar_profile_update'); // 用户上传文件更新 avatar (用户无 upload_files 权限) function _upload_user_avatar_profile_update($user_id){ $user_id = get_current_user_id(); // check nonces if( empty( $_POST['local-avatar-upload_nonce'] ) || ! wp_verify_nonce( $_POST['local-avatar-upload_nonce'], 'local-avatar-upload' ) ){ return; } // 判别 media_handle_upload() 能否存在 if ( ! function_exists( 'media_handle_upload' ) ){ require_once( ABSPATH . 'wp-admin/includes/media.php' ); } // 自定义头像上传途径( Upload 文件夹下的途径 ) function avatar_upload_dir( $dir ) { $sub_dir = get_currentuserinfo()->ID; return array( 'path' => $dir['basedir'] . '/avatars/' . $sub_dir, 'url' => $dir['baseurl'] . '/avatars/' . $sub_dir, 'subdir' => '/avatars/' . $sub_dir, ) + $dir; } add_filter( 'upload_dir', 'avatar_upload_dir'); $avatar_id = media_handle_upload( 'local-avatar-upload', 0, array(), array( 'mimes' => array( 'jpg|jpeg|jpe' => 'image/jpeg', 'gif' => 'image/gif', 'png' => 'image/png', ), 'test_form' => false )); remove_filter( 'upload_dir', 'avatar_upload_dir' ); if(!is_numeric($avatar_id)){ return; } // 未上传文件的话直接返回 if ( is_wp_error( $avatar_id ) ) { // // 图片上传错误处置信息 function user_avatar_upload_errors( WP_Error $errors ) { $error_message = function_exists('get_error_message') ? $avatar_id->get_error_message() : "未知错误,请认真检查文件!"; $avatar_upload_error = '<strong>' . __( 'Avatar 头像上传错误:'.gettype($avatar_id) , 'local-avatar-upload' ) . '</strong> ' . esc_html( $error_message ); $errors->add( 'avatar_error', $avatar_upload_error ); } add_action( 'user_profile_update_errors', 'user_avatar_upload_errors' ); return; }else{ $avatar_url = wp_get_attachment_image_src( $avatar_id, 'full')[0]; update_user_meta($user_id, 'avatar', $avatar_url); } } add_action( 'personal_options_update', '_upload_user_avatar_profile_update' ); add_action( 'edit_user_profile_update', '_upload_user_avatar_profile_update' ); // 确保配置文件表单具有正确的编码类型, 普通默许的 enctype="application/x-www-form-urlencoded";不能用于上传文件 function user_edit_form_tag() { echo 'enctype="multipart/form-data"'; } add_action( 'user_edit_form_tag', 'user_edit_form_tag' ); // 用户有上传权限调用 wp.media 库 function admin_enqueue_scripts(){ if ( current_user_can( 'upload_files' ) ){ wp_enqueue_media(); } } add_action('admin_enqueue_scripts', 'admin_enqueue_scripts'); add_action('admin_footer', function(){ ?> <style type="text/css"> .form-table .user-avatar-img{ display: inline-block; width: 120px; height: 120px; margin: 0; padding: 0; border: 1px solid #999; border-radius: 9px; overflow: hidden; } .form-table .user-avatar-img img{ width: 100%; height: 100%; } .form-table .user-avatar-wrap { display: inline-block; width: auto; height: 110px; margin: 0; padding: 5px 20px; border: 0; } .form-table .user-avatar-wrap .user-avatar-btn{ width: 80px; margin: 5px 0; padding: 0; border: 0; font-size: 14px; } </style> <script> (function($){ // 有 upload_files 权限媒体库选择图片文件 $('body').on('click', '.media-library-upload', function(e) { // 阻止事情默许行为 e.preventDefault(); var user_cap = $(this).data('user_cap'); if (user_cap=="NO"){alert("负疚,你没有上传图片的权限!")} var item_type = $(this).data('item_type'); var input_tag = $('#avatar'); var img_tag = $('#user-avatar-new'); //唤起 WordPress 默许媒体上传 custom_uploader = wp.media.frames.local_avatar_frame = wp.media({ title: '选择图片', library: { type: 'image' }, button: { text: '选择图片' }, multiple: false }); wp.media.frames.local_avatar_frame.on('select', function() { var attachment = wp.media.frames.local_avatar_frame.state().get('selection').first().toJSON(); var img_value = (item_type == 'url') ? attachment.url : attachment.id; // 将图像途径赋值给 input 的 value input_tag.val(img_value); img_tag.attr('src', img_value); }); wp.media.frames.local_avatar_frame.open(); }); // 无 upload_files 权限本地上传图片文件 $('body').on('change', '.local-avatar-upload', function(e) { var file = this.files[0]; // 限制文件类型 var fileType = /^image\//; if ( !fileType.test(file.type) ) { alert("请选择一张图片!"); $(this).val('') return; } //限制文件大小 var imgSize = file.size; if(imgSize> 200*1024){ alert('上传的图片不得大于200KB!'); $(this).val('') return false; } // 预览图片 filePath = URL.createObjectURL(file); $('#user-avatar-new').attr('src', filePath); }); })(jQuery) </script> <?php });
代码中根本上都做了注释了,便当大家了解,有需求的小同伴能够在此根底上做些修正。
引入 fn_local_avatar.php
将代码丢到主标题录下,然后在主题 functions.php 中直接引入即可,引入代码如下,留意修正途径!
// 后台自定义上传头像 require get_template_directory() . '/functions/fn_local_avatar.php';
以上。
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
© 版权声明
本站网络名称:
孤勇者社区
本站永久网址:
https://www.gyzsq.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 共1条
![头像](/wp-content/themes/zibll/img/avatar-default.png)
欢迎您留下宝贵的见解!
- 最新
- 最热
只看作者