WordPress默认支持Gravatar 头像，然而因为网络的原因，这个头像加载就会比较困难，所以国内用户使用的就会比较少。但是如果不提供头像上传功能，对于开启了用户中心的网站又不太友好，所以目前一般通过一些插件可以来实现这个功能，今天wpmee小编就与大家一起探讨一下纯代码WordPress如何添加用户头像上传功能…
WordPress默认支持Gravatar 头像，然而因为网络的原因，这个头像加载就会比较困难，所以国内用户使用的就会比较少。但是如果不提供头像上传功能，对于开启了用户中心的网站又不太友好，所以目前一般通过一些插件可以来实现这个功能，今天wpmee小编就与大家一起探讨一下纯代码WordPress如何添加用户头像上传功能？
新建 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%20echo%20$avatar_default;%20?>” 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’;
以上就是wpmee小编与大家一起探讨WordPress添加用户头像上传功能方法，希望能够帮助到大家。
评论(0)