¿Cómo cambio la foto de perfil de un usuario como administrador en WordPress?

5 minutos de lectura

Soy el administrador de mi sitio web, pero no puedo cambiar la foto de perfil de ninguno de mis usuarios. Parece estar conectado solo a Gravatar.

¿Cómo lo hago para poder cambiar esta foto yo mismo? ¿Hay una función para hacer esto? Preferiría no tener un complemento completo para hacerlo.

De forma predeterminada, WordPress usa Gravatar para mostrar la imagen de perfil del usuario según su ID de correo electrónico registrado con Gravatar. WordPress tiene una página de perfil de usuario en el tablero que contiene una cantidad de campos para ingresar datos de usuario, pero carece de un campo de imagen para agregar un avatar de usuario personalizado.

Podemos personalizar el avatar del usuario en los siguientes pasos:

Paso 1: Agregar script a la página.

En este paso, agregaremos el Javascript necesario a las páginas de administración. Primero, llamaremos a wp_enqueue_media, que pone en cola todos los scripts, estilos, configuraciones y plantillas necesarias para usar todas las API de JavaScript de medios.

Otro script será para abrir el cargador de medios al hacer clic en el botón e insertar la identificación del archivo adjunto en DOM.

copie el siguiente script en un archivo y nombre ese archivo como 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;
    } );
} );

Ahora, agregue noth scripts en admin de la siguiente manera.

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

Tenga en cuenta que uploader.js se guarda en la carpeta js en este tema, por lo que debe aplicar la ruta correcta según la ubicación de uploader.js en su tema.

Paso 2: Añadir el botón de subir para editar la página de perfil.

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="https://stackoverflow.com/questions/39254742/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="https://stackoverflow.com/questions/39254742/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' );

En el código anterior, los ganchos show_user_profile, edit_user_profile y user_new_form se usan para agregar el botón de carga, por lo que ese botón será visible en la página de perfil del usuario existente, así como al crear nuevos usuarios.

El botón de entrada es para abrir el cargador de medios de WordPress al hacer clic. El campo oculto de entrada es para almacenar la identificación del archivo adjunto de la imagen insertada o seleccionada del cargador de medios de WordPress.

Paso 3: guarde la identificación de la imagen del archivo adjunto en la tabla usermeta en WordPress.

La tabla Usermeta en WordPress es para almacenar información adicional relacionada con el usuario, aquí almacenaremos la identificación del archivo adjunto de la imagen para el usuario. Usando esa identificación de archivo adjunto, podemos obtener todos los datos de la imagen en cuestión.

Para guardar la identificación del archivo adjunto, usaremos los ganchos profile_update y user_register que se activarán cuando se cree un nuevo usuario o se actualice un usuario existente.

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

Eso es todo y ha agregado con éxito el botón de carga de fotos de perfil a la página de perfil en el tablero de WordPress.

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

Avatar de usuario de Naresh Kumar P
Naresh Kumar P.

Para cambiar la foto de perfil de los usuarios en el panel de administración de WordPress, el uso del complemento es la mejor y más fácil opción.

Foto de perfil de usuario personalizada

Agregue una foto de perfil de usuario personalizada a un perfil de usuario de WordPress

https://wordpress.org/plugins/foto-de-perfil-de-usuario-personalizado/

Avatar de usuario de WP

Utilice cualquier imagen de su biblioteca multimedia de WordPress como un avatar de usuario personalizado. Agregue su propio avatar predeterminado.

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

  • @Will Nicholls. ¿Ha obtenido su resultado como se requiere en la pregunta utilizando los complementos como se sugiere? 🙂 Si sientes algún obstáculo, comparte conmigo y te ayudaré.

    – Naresh Kumar P.

    31 de agosto de 2016 a las 17:01

Pruebe este código y colóquelo en el archivo 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;
}

¿Ha sido útil esta solución?