Question

我是我网站的管理员，但我无法为我的任何用户更改个人资料照片。它似乎只与Gravatar联系在一起。

如何制作，以便我自己更改此照片？有这个功能吗？我宁愿没有完整的插件也可以这样做。

Answer 1

By default, WordPress uses Gravatar for displaying user’s profile picture based on your email ID registered with Gravatar. WordPress has user profile page in dashboard which contains number of fields for entering user data, but it lacks image field for adding custom user avatar.

We can customize user avatar in following steps:

Step 1: Add script to page.

In this step we will add necessary Javascript to admin pages. First we will call wp_enqueue_media which enqueues all scripts, styles, settings, and templates necessary to use all media JavaScript APIs.

Another script will be for opening media uploader on button click and to insert attachment id in DOM.

please copy following script into a file and name that file as 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;
    } );
} );

Now, add noth scripts in admin as follows.

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');

Please note that uploader.js is saved in js folder in this theme, so you have to apply correct path of according to location of uploader.js in your theme.

Step 2: Adding uploder button to edit profile page.

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' );

In above code, show_user_profile, edit_user_profile and user_new_form hooks are used to add upload button, so that button will be visible to existing user’s profile page as well as when creating new users.

Input button is to open WordPress media uploader on click. Input hidden field is to store attachment id of insersted or selected image from media uploader of WordPress.

Step 3: Save the attachment image id to usermeta table in WordPress.

Usermeta table in WordPress is to store extra information related to user, here we will store attachment id of image for the user. Using that attachment id we can fetch all the data of concerned image.

For saving attachment id we will use profile_update and user_register hooks which will be fired when any new user is created or existing user is updated.

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');

That’s it and you have successfully added profile pic uploader button to profile page in dashboard of WordPress.

Reference: http://sharethingz.com/wordpress/custom-user-avatar-in-wordpress/

Answer 2

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

自定义用户个人资料照片

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

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

WP用户头像

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

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

Answer 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;
}

如何在Wordpress上更改用户的个人资料照片作为管理员？

3 个答案: