Como Personalizar o Avatar de Usuários no WordPress: Um Guia Completo

O WordPress utiliza por padrão o sistema Gravatar para exibir as imagens de perfil dos usuários. Neste guia, vamos aprender como permitir que os usuários façam upload de suas próprias imagens de perfil, substituindo o Gravatar padrão.

1. Introdução

O sistema padrão do WordPress utiliza o Gravatar para exibir avatares de usuários. Embora seja uma solução prática, muitas vezes os usuários preferem utilizar suas próprias imagens. Este tutorial mostrará como implementar um sistema personalizado de avatares.

2. Implementação do Sistema

2.1. Adicione o Código ao functions.php

Primeiro, abra o arquivo functions.php do seu tema e adicione o seguinte código:

// Adiciona campo de imagem ao perfil do usuário
function my_custom_user_profile_fields($user) {
    ?>
    <h3>Imagem Personalizada</h3>
    <table class="form-table">
        <tr>
            <th>
                <label for="custom_profile_image">Carregar Imagem</label>
            </th>
            <td>
                <input type="text" name="custom_profile_image" 
                       id="custom_profile_image" 
                       value="<?php echo esc_attr(get_the_author_meta('custom_profile_image', $user->ID)); ?>" 
                       class="regular-text" />
                <input type="button" id="custom_profile_image_button" 
                       class="button" value="Escolher Imagem" />
            </td>
        </tr>
    </table>
    <?php
}

2.2. Configurar a Função de Salvamento

function my_save_custom_user_profile_fields($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    if (isset($_POST['custom_profile_image'])) {
        update_user_meta($user_id, 'custom_profile_image', 
                        sanitize_text_field($_POST['custom_profile_image']));
    }
}

// Adiciona as ações necessárias
add_action('show_user_profile', 'my_custom_user_profile_fields');
add_action('edit_user_profile', 'my_custom_user_profile_fields');
add_action('personal_options_update', 'my_save_custom_user_profile_fields');
add_action('edit_user_profile_update', 'my_save_custom_user_profile_fields');

3. Configuração do Upload de Imagens

3.1. Implementar o Media Uploader

function my_enqueue_media_uploader($hook) {
    if ('profile.php' != $hook && 'user-edit.php' != $hook) {
        return;
    }
    wp_enqueue_media();
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var mediaUploader;
            document.getElementById('custom_profile_image_button')
                    .addEventListener('click', function(e) {
                e.preventDefault();
                if (mediaUploader) {
                    mediaUploader.open();
                    return;
                }
                mediaUploader = wp.media({
                    title: 'Escolher Imagem',
                    button: {
                        text: 'Escolher Imagem'
                    },
                    multiple: false
                });
                mediaUploader.on('select', function() {
                    var attachment = mediaUploader.state()
                                               .get('selection')
                                               .first()
                                               .toJSON();
                    document.getElementById('custom_profile_image')
                            .value = attachment.url;
                });
                mediaUploader.open();
            });
        });
    </script>
    <?php
}
add_action('admin_enqueue_scripts', 'my_enqueue_media_uploader');

4. Substituindo o Gravatar Padrão

function my_custom_user_avatar($avatar, $id_or_email, $size, $default, $alt) {
    $user_id = null;
    
    if (is_numeric($id_or_email)) {
        $user_id = (int) $id_or_email;
    } elseif (is_object($id_or_email)) {
        if (!empty($id_or_email->user_id)) {
            $user_id = (int) $id_or_email->user_id;
        }
    } else {
        $user = get_user_by('email', $id_or_email);
        $user_id = $user ? $user->ID : null;
    }

    if (!empty($user_id)) {
        $custom_avatar = get_user_meta($user_id, 'custom_profile_image', true);
        if ($custom_avatar) {
            $avatar = sprintf(
                '<img src="%s" alt="%s" width="%d" height="%d" class="avatar avatar-%d photo" />',
                esc_url($custom_avatar),
                esc_attr($alt),
                (int) $size,
                (int) $size,
                (int) $size
            );
        }
    }

    return $avatar;
}
add_filter('get_avatar', 'my_custom_user_avatar', 10, 5);

5. Testando o Sistema

Após implementar todas as funções:

1. Acesse o painel administrativo do WordPress
2. Vá até Usuários → Seu Perfil
3. Localize a seção “Imagem Personalizada”
4. Clique em “Escolher Imagem”
5. Selecione ou faça upload de uma nova imagem
6. Salve as alterações

A imagem personalizada agora substituirá o Gravatar padrão em todas as áreas do site onde o avatar do usuário é exibido.

6. Implementação avançada / validação de imagens

Para garantir que apenas imagens apropriadas sejam carregadas, vamos adicionar validações de tamanho e tipo de arquivo. Adicione o seguinte código ao seu arquivo functions.php:

6.1. Validação de Tipos e Tamanhos de Imagem

function validate_profile_image($image_url) {
    // Lista de tipos de arquivo permitidos
    $allowed_types = array(
        'image/jpeg',
        'image/png',
        'image/gif'
    );

    // Configurações de tamanho
    $max_size = 2 * 1024 * 1024; // 2MB em bytes
    $min_width = 200; // Largura mínima em pixels
    $min_height = 200; // Altura mínima em pixels
    $max_width = 2000; // Largura máxima em pixels
    $max_height = 2000; // Altura máxima em pixels

    // Obtém informações do arquivo
    $image_path = parse_url($image_url, PHP_URL_PATH);
    $image_info = @getimagesize($image_url);

    // Verifica se é possível obter informações da imagem
    if (!$image_info) {
        return array(
            'valid' => false,
            'error' => 'Não foi possível validar a imagem.'
        );
    }

    // Verifica o tipo de arquivo
    if (!in_array($image_info['mime'], $allowed_types)) {
        return array(
            'valid' => false,
            'error' => 'Tipo de arquivo não permitido. Use apenas JPG, PNG ou GIF.'
        );
    }

    // Verifica o tamanho do arquivo
    $file_size = filesize(ABSPATH . str_replace(get_site_url(), '', $image_url));
    if ($file_size > $max_size) {
        return array(
            'valid' => false,
            'error' => 'A imagem é muito grande. O tamanho máximo permitido é 2MB.'
        );
    }

    // Verifica as dimensões
    $width = $image_info[0];
    $height = $image_info[1];

    if ($width < $min_width || $height < $min_height) {
        return array(
            'valid' => false,
            'error' => "A imagem é muito pequena. Dimensões mínimas: {$min_width}x{$min_height} pixels."
        );
    }

    if ($width > $max_width || $height > $max_height) {
        return array(
            'valid' => false,
            'error' => "A imagem é muito grande. Dimensões máximas: {$max_width}x{$max_height} pixels."
        );
    }

    return array(
        'valid' => true,
        'error' => ''
    );
}

6.2. Implementando a Validação no Salvamento

Modifique a função de salvamento para incluir a validação:

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

    if (isset($_POST['custom_profile_image'])) {
        $image_url = sanitize_text_field($_POST['custom_profile_image']);
        
        // Se o campo estiver vazio, remove a imagem personalizada
        if (empty($image_url)) {
            delete_user_meta($user_id, 'custom_profile_image');
            return;
        }

        // Valida a imagem
        $validation = validate_profile_image($image_url);
        
        if (!$validation['valid']) {
            // Adiciona mensagem de erro
            add_action('admin_notices', function() use ($validation) {
                ?>
                <div class="error">
                    <p><?php echo esc_html($validation['error']); ?></p>
                </div>
                <?php
            });
            return;
        }

        // Salva a imagem se passou na validação
        update_user_meta($user_id, 'custom_profile_image', $image_url);
    }
}

6.3. Exibindo Feedback Visual no Upload

Adicione este JavaScript à função my_enqueue_media_uploader:

function my_enqueue_media_uploader($hook) {
    // ... código anterior mantido ...

    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var mediaUploader;
            var imageInput = document.getElementById('custom_profile_image');
            var uploadButton = document.getElementById('custom_profile_image_button');
            var feedbackDiv = document.createElement('div');
            feedbackDiv.style.marginTop = '10px';
            imageInput.parentNode.appendChild(feedbackDiv);

            function validateImageUrl(url) {
                if (!url) return;

                feedbackDiv.innerHTML = 'Verificando imagem...';
                feedbackDiv.style.color = '#666';

                var img = new Image();
                img.onload = function() {
                    // Verifica dimensões
                    if (this.width < 200 || this.height < 200) {
                        feedbackDiv.innerHTML = 'Aviso: A imagem deve ter no mínimo 200x200 pixels.';
                        feedbackDiv.style.color = '#d63638';
                        return;
                    }
                    if (this.width > 2000 || this.height > 2000) {
                        feedbackDiv.innerHTML = 'Aviso: A imagem deve ter no máximo 2000x2000 pixels.';
                        feedbackDiv.style.color = '#d63638';
                        return;
                    }
                    feedbackDiv.innerHTML = 'Imagem válida!';
                    feedbackDiv.style.color = '#00a32a';
                };
                img.onerror = function() {
                    feedbackDiv.innerHTML = 'Erro ao carregar a imagem.';
                    feedbackDiv.style.color = '#d63638';
                };
                img.src = url;
            }

            imageInput.addEventListener('change', function() {
                validateImageUrl(this.value);
            });

            // ... resto do código do Media Uploader ...
            
            mediaUploader.on('select', function() {
                var attachment = mediaUploader.state().get('selection').first().toJSON();
                imageInput.value = attachment.url;
                validateImageUrl(attachment.url);
            });
        });
    </script>
    <?php
}

7. Parâmetros de Validação

Os parâmetros de validação podem ser ajustados conforme suas necessidades:

• Tipos de arquivo permitidos: JPG, PNG e GIF
• Tamanho máximo: 2MB
• Dimensões mínimas: 200×200 pixels
• Dimensões máximas: 2000×2000 pixels

Para modificar estes parâmetros, ajuste as variáveis no início da função validate_profile_image:

// Configurações personalizáveis
$max_size = 2 * 1024 * 1024; // Altere para ajustar o tamanho máximo
$min_width = 200; // Altere para ajustar a largura mínima
$min_height = 200; // Altere para ajustar a altura mínima
$max_width = 2000; // Altere para ajustar a largura máxima
$max_height = 2000; // Altere para ajustar a altura máxima

8. Considerações de Segurança

• A validação acontece tanto no cliente (JavaScript) quanto no servidor (PHP)
• Arquivos são verificados quanto ao tipo MIME real
• Tamanho do arquivo é validado para evitar sobrecarga do servidor
• Dimensões são verificadas para garantir qualidade e performance
• Sanitização é aplicada em todos os dados recebidos

9. Solução de Problemas

Se encontrar problemas com a validação:

1. Verifique as permissões do diretório de uploads
2. Confirme se as funções GD ou ImageMagick estão ativas no PHP
3. Verifique os limites de upload no php.ini
4. Monitore o log de erros do PHP para mensagens específicas

Este sistema de validação ajuda a manter a qualidade das imagens de perfil e previne problemas comuns relacionados ao upload de arquivos inadequados.