✅Cambia la Foto de Gravatar por Fotos de Perfil Personalizadas para tus Usuarios

WordPress, por defecto, utiliza Gravatar como sistema para asignar imágenes de perfil a los usuarios. Este servicio, basado en la asociación del correo electrónico del usuario con una imagen almacenada en sus servidores, es práctico para muchos casos. Sin embargo, presenta limitaciones importantes: si un usuario no tiene una cuenta en Gravatar, se muestra una imagen genérica predeterminada que no aporta personalidad ni facilita la identificación de usuarios en tu sitio. Además, WordPress no permite subir una imagen de perfil personalizada directamente desde el perfil del usuario, lo que puede ser frustrante en entornos más dinámicos.

Esta falta de personalización puede ser un inconveniente para sitios que manejan perfiles de usuario de manera intensiva, como intranets, sistemas CRM, sitios de membresías o comunidades online. En estas plataformas, es crucial contar con perfiles personalizados y fácilmente identificables para mejorar la experiencia del usuario y reforzar la identidad visual de cada miembro. Por ello, contar con una solución que permita a los usuarios cargar y gestionar sus propias imágenes de perfil directamente desde su perfil de WordPress puede marcar una gran diferencia.

El código que exploraremos en este artículo soluciona esta limitación de forma sencilla y efectiva. Permite a los administradores y a los usuarios subir imágenes personalizadas desde la página de edición de perfil en el administrador de WordPress. Estas imágenes se guardan en los metadatos del usuario y se muestran como avatar en lugar de la imagen predeterminada de Gravatar. Esto no solo mejora la personalización, sino que también elimina la dependencia de un servicio externo como Gravatar, ofreciendo una solución más autónoma y adaptable.

Esta funcionalidad es especialmente útil en entornos donde la identidad visual de los usuarios juega un rol importante, como en sistemas internos de gestión o comunidades con múltiples autores. Implementarla es fácil y no requiere conocimientos avanzados: con unas pocas líneas de código, podrás integrar esta característica y ofrecer una experiencia más profesional y personalizada a los usuarios de tu sitio web.

A continuación, te explico paso a paso cómo implementar la funcionalidad de reemplazo de Gravatar con imágenes personalizadas en WordPress:

1. Interceptar la Generación del Avatar Predeterminado

• Función Clave: replace_gravatar_with_custom_image
• Qué Hace:
  1. La función se engancha al filtro get_avatar de WordPress, que controla la generación de avatares.
  2. Identifica el usuario a través de $id_or_email. Este parámetro puede ser un ID de usuario, un objeto o un correo electrónico.
  3. Verifica si el usuario tiene una imagen personalizada guardada en sus metadatos (custom_profile_picture).
  4. Si existe una imagen personalizada, genera el HTML necesario para mostrarla como avatar.
  5. Si no hay una imagen personalizada, se mantiene el avatar predeterminado de Gravatar.
• Resultado: Los usuarios con imágenes personalizadas verán su foto en lugar del avatar de Gravatar.

2. Añadir un Campo en el Perfil del Usuario

• Función Clave: custom_user_profile_picture
• Qué Hace:
  1. Usa las acciones show_user_profile y edit_user_profile para añadir un nuevo campo en la página de perfil del usuario.
  2. Este campo incluye:
     • Un botón para abrir la biblioteca de medios de WordPress y subir una imagen.
     • Un campo oculto para almacenar la URL de la imagen seleccionada.
     • Una vista previa de la imagen para confirmar la selección.
• Resultado: El administrador o el usuario pueden subir una imagen personalizada desde el perfil.

3. Script para Gestionar la Biblioteca de Medios

• Dónde Está: Incluido como un <script> en la función anterior.
• Qué Hace:
  1. Utiliza la API de la biblioteca de medios de WordPress (wp.media) para permitir la selección de imágenes.
  2. Una vez que el usuario selecciona una imagen, la URL se guarda en el campo oculto y se muestra una vista previa.
• Resultado: Permite una experiencia fluida y visual para cargar imágenes.

4. Guardar la Imagen en los Metadatos del Usuario

• Función Clave: save_custom_user_profile_picture
• Qué Hace:
  1. Escucha las acciones personal_options_update y edit_user_profile_update para guardar la URL de la imagen.
  2. Verifica que el usuario tenga permisos para editar el perfil.
  3. Si se ha seleccionado una imagen, la URL se guarda en el meta key custom_profile_picture.
• Resultado: La imagen seleccionada se almacena de forma segura en los datos del usuario.

5. Cargar la Imagen Personalizada como Avatar

• Cómo Funciona:
  1. Cuando WordPress intenta mostrar el avatar de un usuario, la función replace_gravatar_with_custom_image revisa si hay una imagen personalizada.
  2. Si existe, sustituye el avatar de Gravatar con la imagen almacenada en los metadatos.
• Resultado: Los avatares personalizados se muestran automáticamente dondequiera que WordPress renderice un avatar, como comentarios o perfiles.

Resumen de la Implementación

1. Filtrar los avatares con replace_gravatar_with_custom_image para comprobar y usar imágenes personalizadas.
2. Añadir un campo de selección de imagen al perfil del usuario con la función custom_user_profile_picture.
3. Integrar un script de carga de imágenes para una experiencia amigable.
4. Guardar la URL de la imagen personalizada en los metadatos del usuario con save_custom_user_profile_picture.
5. Mostrar la imagen personalizada como avatar automáticamente en lugar de Gravatar.

Con esta implementación, mejorarás la experiencia del usuario al permitir que cada perfil tenga su propia imagen personalizada y única.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.

// Reemplazar el avatar predeterminado de Gravatar con la imagen personalizada del usuario
add_filter('get_avatar', 'replace_gravatar_with_custom_image', 10, 6);

function replace_gravatar_with_custom_image($avatar, $id_or_email, $size, $default, $alt, $args) {
    // Obtener el ID del usuario
    if (is_numeric($id_or_email)) {
        $user_id = (int) $id_or_email;
    } elseif (is_object($id_or_email) && !empty($id_or_email->user_id)) {
        $user_id = $id_or_email->user_id;
    } elseif (is_email($id_or_email)) {
        $user = get_user_by('email', $id_or_email);
        $user_id = $user ? $user->ID : null;
    } else {
        $user_id = null;
    }

    if ($user_id) {
        // Comprobar si el usuario tiene una imagen personalizada
        $custom_picture = get_user_meta($user_id, 'custom_profile_picture', true);

        if ($custom_picture) {
            // Si hay una imagen personalizada, generar el HTML del avatar
            $avatar = '<img alt="' . esc_attr($alt) . '" src="' . esc_url($custom_picture) . '" class="' . esc_attr($args['class']) . '" height="' . esc_attr($size) . '" width="' . esc_attr($size) . '" style="object-fit: cover;">';
        }
    }

    return $avatar;
}

// Agregar campo para seleccionar imagen personalizada en el perfil del usuario
add_action('show_user_profile', 'custom_user_profile_picture');
add_action('edit_user_profile', 'custom_user_profile_picture');

function custom_user_profile_picture($user) { ?>
    <h3>Foto de perfil personalizada</h3>
    <table class="form-table">
        <tr>
            <th><label for="custom_profile_picture">Seleccionar imagen</label></th>
            <td>
                <input type="hidden" name="custom_profile_picture" id="custom_profile_picture" value="<?php echo esc_attr(get_user_meta($user->ID, 'custom_profile_picture', true)); ?>">
                <button class="button" id="upload_image_button">Seleccionar imagen</button>
                <div id="custom_profile_preview" style="margin-top: 15px;">
                    <?php if ($image_url = get_user_meta($user->ID, 'custom_profile_picture', true)): ?>
                        <img src="<?php echo esc_url($image_url); ?>" style="width: 100px; height: 100px; object-fit: cover;">
                    <?php endif; ?>
                </div>
            </td>
        </tr>
    </table>
    <script>
        jQuery(document).ready(function($) {
            $('#upload_image_button').click(function(e) {
                e.preventDefault();
                var mediaUploader = wp.media({
                    title: 'Seleccionar Imagen de Perfil',
                    button: {
                        text: 'Usar esta imagen'
                    },
                    multiple: false
                });
                mediaUploader.on('select', function() {
                    var attachment = mediaUploader.state().get('selection').first().toJSON();
                    $('#custom_profile_picture').val(attachment.url);
                    $('#custom_profile_preview').html('<img src="' + attachment.url + '" style="width: 100px; height: 100px; object-fit: cover;">');
                });
                mediaUploader.open();
            });
        });
    </script>
<?php }

// Guardar la imagen personalizada en los metadatos del usuario
add_action('personal_options_update', 'save_custom_user_profile_picture');
add_action('edit_user_profile_update', 'save_custom_user_profile_picture');

function save_custom_user_profile_picture($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }

    if (isset($_POST['custom_profile_picture'])) {
        update_user_meta($user_id, 'custom_profile_picture', esc_url_raw($_POST['custom_profile_picture']));
    }
}

Lenguaje del código: PHP (php)

Si no quieres que otros usuarios que no sean administradores accedan al contenido general de la biblioteca de medios de WordPress y solo tengan acceso a sus propias imágenes y archivos, revisa este código.

En conclusión, la personalización de los avatares en WordPress es una mejora significativa para sitios donde la identidad de los usuarios es clave, como intranets, CRM, comunidades en línea o blogs colaborativos. Aunque Gravatar ofrece una solución básica para los perfiles de usuario, sus limitaciones pueden hacer que los perfiles se vean genéricos y desconectados.

Implementar este sistema para sustituir los avatares predeterminados de Gravatar con imágenes personalizadas no solo mejora la apariencia de tu sitio, sino que también refuerza la conexión de los usuarios con tu plataforma. Con este enfoque, cada usuario puede seleccionar su propia imagen directamente desde el perfil, guardándola de forma segura en los metadatos y eliminando la dependencia de servicios externos.

Nos vemos en el siguiente tutorial. Un saludo.