如何以 Wordpress 管理员身份更改用户的个人资料照片?

How do I change a user's profile photo as the admin on Wordpress?

我是我网站的管理员,但我无法更改任何用户的个人资料照片。好像只能绑定Gravatar

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

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

自定义用户个人资料照片

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

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

WP用户头像

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

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

默认情况下,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中不添加任何脚本如下。

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。

第三步:将附件图片id保存到WordPress的usermeta table。

Usermeta table在WordPress中是用来存储与用户相关的额外信息的,这里我们为用户存储图片的附件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/

尝试此代码并放入 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;
}