作为 WordPress 的管理员，我如何更改用户的个人资料照片？答案

【问题标题】：How do I change a user's profile photo as the admin on Wordpress?作为 WordPress 的管理员，我如何更改用户的个人资料照片？
【发布时间】：2017-01-08 08:19:52
【问题描述】：

我是我网站的管理员，但我无法更改任何用户的个人资料照片。它似乎只与 Gravatar 挂钩。

如何制作才能自己更改这张照片？有这样做的功能吗？我宁愿没有一个完整的插件来这样做。

【问题讨论】：

标签： wordpress profile avatar

【解决方案1】：

默认情况下，WordPress 使用 Gravatar 根据您在 Gravatar 注册的电子邮件 ID 显示用户的个人资料图片。 WordPress 在仪表板中有用户个人资料页面，其中包含用于输入用户数据的字段数量，但缺少用于添加自定义用户头像的图像字段。

我们可以通过以下步骤自定义用户头像：

第 1 步：将脚本添加到页面。

在这一步中，我们将向管理页面添加必要的 Javascript。首先，我们将调用 wp_enqueue_media，它将使用所有媒体 JavaScript API 所需的所有脚本、样式、设置和模板排入队列。

另一个脚本将用于在按钮单击时打开媒体上传器并在 DOM 中插入附件 ID。

请将以下脚本复制到一个文件中，并将该文件命名为 uploader.js

    jQuery( document ).ready( function() {

    /* WP Media Uploader */
    var _shr_media = true;
    var _orig_send_attachment = wp.media.editor.send.attachment;

    jQuery( '.shr-image' ).click( function() {

        var button = jQuery( this ),
                textbox_id = jQuery( this ).attr( 'data-id' ),
                image_id = jQuery( this ).attr( 'data-src' ),
                _shr_media = true;

        wp.media.editor.send.attachment = function( props, attachment ) {

            if ( _shr_media && ( attachment.type === 'image' ) ) {
                if ( image_id.indexOf( "," ) !== -1 ) {
                    image_id = image_id.split( "," );
                    $image_ids = '';
                    jQuery.each( image_id, function( key, value ) {
                        if ( $image_ids )
                            $image_ids = $image_ids + ',#' + value;
                        else
                            $image_ids = '#' + value;
                    } );

                    var current_element = jQuery( $image_ids );
                } else {
                    var current_element = jQuery( '#' + image_id );
                }

                jQuery( '#' + textbox_id ).val( attachment.id );
                                console.log(textbox_id)
                current_element.attr( 'src', attachment.url ).show();
            } else {
                alert( 'Please select a valid image file' );
                return false;
            }
        }

        wp.media.editor.open( button );
        return false;
    } );
} );

现在，在 admin 中添加 no 脚本，如下所示。

function shr_add_admin_scripts(){ 
        wp_enqueue_media();
        wp_enqueue_script('shr-uploader', get_stylesheet_directory_uri().'/js/uploader.js', array('jquery'), false, true );
    }
    add_action('admin_enqueue_scripts', 'shr_add_admin_scripts');

请注意，uploader.js 保存在本主题的 js 文件夹中，因此您必须根据主题中的 uploader.js 的位置应用正确的路径。

第 2 步：添加上传按钮以编辑个人资料页面。

function shr_extra_profile_fields( $user ) {

    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'shr_pic', true): false;

    if( !empty($profile_pic) ){
        $image = wp_get_attachment_image_src( $profile_pic, 'thumbnail' );

    } ?>

    <table class="form-table fh-profile-upload-options">
        <tr>
            <th>
                <label for="image"><?php _e('Main Profile Image', 'shr') ?></label>
            </th>

            <td>
                <input type="button" data-id="shr_image_id" data-src="shr-img" class="button shr-image" name="shr_image" id="shr-image" value="Upload" />
                <input type="hidden" class="button" name="shr_image_id" id="shr_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
                <img id="shr-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo  empty($profile_pic) ? 'display:none;' :'' ?> max-width: 100px; max-height: 100px;" />
            </td>
        </tr>
    </table><?php

}
add_action( 'show_user_profile', 'shr_extra_profile_fields' );
add_action( 'edit_user_profile', 'shr_extra_profile_fields' );
add_action( 'user_new_form', 'shr_extra_profile_fields' );

在上面的代码中，show_user_profile、edit_user_profile 和 user_new_form 钩子用于添加上传按钮，以便在现有用户的个人资料页面以及创建新用户时可以看到该按钮。

输入按钮是点击打开 WordPress 媒体上传器。输入隐藏字段是存储从WordPress的媒体上传器插入或选择的图像的附件ID。

第 3 步：将附件图片 ID 保存到 WordPress 中的 usermeta 表中。

WordPress中的Usermeta表是用来存储用户相关的额外信息的，这里我们将存储用户图片的附件id。使用该附件 ID，我们可以获取相关图像的所有数据。

为了保存附件 ID，我们将使用 profile_update 和 user_register 钩子，当创建任何新用户或更新现有用户时将触发它们。

function shr_profile_update($user_id){

    if( current_user_can('edit_users') ){
        $profile_pic = empty($_POST['shr_image_id']) ? '' : $_POST['shr_image_id'];
        update_user_meta($user_id, 'shr_pic', $profile_pic);
    }

}
add_action('profile_update', 'shr_profile_update');
add_action('user_register', 'shr_profile_update');

就是这样，您已成功将个人资料图片上传按钮添加到 WordPress 仪表板的个人资料页面。

参考：http://sharethingz.com/wordpress/custom-user-avatar-in-wordpress/

【讨论】：

【解决方案2】：

为了在 WordPress 的管理面板中更改用户的个人资料照片，插件的使用是最好和最简单的选择。

自定义用户个人资料照片

将自定义的用户个人资料照片添加到 WordPress 用户个人资料

https://wordpress.org/plugins/custom-user-profile-photo/

WP用户头像

使用 WordPress 媒体库中的任何图像作为自定义用户头像。添加您自己的默认头像。

https://wordpress.org/plugins/wp-user-avatar/

【讨论】：

@Will Nicholls。您是否按照建议使用插件获得了问题中要求的输出。 :) 如果您觉得有任何障碍与我分享，我会帮助您。

【解决方案3】：

试试这段代码并放入function.php文件

add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = 'http://pngimages.net/sites/default/files/user-png-image-15189.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}

【讨论】：