Como Exibir Gravatar do E-mail do Usuário no WordPress

Gravatar é um serviço web que conecta o endereço de e-mail de um usuário a um avatar online.

O WordPress exibe automaticamente os Gravatars dos visitantes na seção de comentários, mas você pode querer adicioná-los a outras áreas do seu site também. Isso pode ajudar a criar uma experiência de usuário mais visualmente atraente e aumentar o engajamento.

Neste artigo, mostraremos como exibir facilmente um Gravatar do e-mail do usuário no WordPress, explorando vários métodos para oferecer opções flexíveis.

O que é Gravatar e Por que Exibi-lo?

Gravatar é a sigla para Globally Recognized Avatar (Avatar Reconhecido Globalmente) e permite que as pessoas vinculem uma imagem ao seu endereço de e-mail.

Se um site suporta Gravatar, ele pode buscar a imagem da pessoa e exibi-la ao lado do nome dela. Por exemplo, quando um usuário deixa um comentário com seu e-mail em um site WordPress, o WordPress exibirá o Gravatar dessa pessoa ao lado do comentário.

Gravatars podem incentivar os usuários a participar da conversa, construir um senso de comunidade e tornar suas páginas mais interessantes. Tudo isso junto pode ajudá-lo a obter mais comentários em seus posts do WordPress.

Dependendo de como seu site está configurado, o WordPress pode exibir Gravatars em outros locais, como a biografia do autor. No entanto, você pode querer alterar onde os Gravatars dos usuários aparecem em seu blog ou site WordPress. Por exemplo, você pode exibir o Gravatar do usuário na barra de ferramentas do seu site ou no perfil do usuário.

Dito isso, vamos ver como você pode exibir o Gravatar a partir de um e-mail de usuário no WordPress. Simplesmente use os links rápidos abaixo para pular para o método de sua preferência:

• Método 1: Editar seu tema WordPress (Melhor para consistência)
• Método 2: Usando um Shortcode Personalizado do WordPress (Completamente personalizável)
• Bônus: Carregar Gravatars de forma preguiçosa em comentários do WordPress

Método 1: Editar seu tema WordPress (Melhor para consistência)

Primeiro, você pode adicionar um Gravatar ao seu tema WordPress usando código. Esta é uma boa opção se você quiser exibir um Gravatar no mesmo local em todo o seu site, como na barra lateral ou acima do cabeçalho. No entanto, você precisará editar seus arquivos de modelo, então não é o método mais amigável para iniciantes.

Este método exibe o Gravatar da pessoa que está atualmente logada em seu site. Isso é útil para sites de associação, lojas online ou qualquer outro site onde o usuário precise fazer login em uma conta.

Para adicionar um Gravatar ao seu tema, você precisará colar algum código nos arquivos do seu tema. Se você nunca fez isso antes, confira nosso guia para iniciantes sobre como colar trechos da web no WordPress.

A maneira mais fácil de adicionar trechos de código ao seu site WordPress é usando o WPCode. É o melhor plugin de trechos de código para WordPress que permite adicionar PHP, CSS, JavaScript e muito mais ao seu site.

Primeiro, você precisará instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, visite a página Trechos de Código » + Adicionar Trecho » no painel do WordPress. Aqui, você verá todos os trechos prontos que o WPCode pode adicionar ao seu site.

Simplesmente passe o mouse sobre ‘Adicionar Seu Código Personalizado (Novo Trecho)’ e clique no botão ‘Usar Trecho’ quando ele aparecer.

Para começar, digite um título para o trecho de código. Isso é apenas para sua referência, então você pode usar o que quiser.

Depois disso, abra o menu suspenso ‘Tipo de Código’ e selecione ‘Trecho PHP’.

Agora você pode colar o seguinte no editor de código:

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
	echo $getuseremail;
	
} 

Este código cria uma função simples que permite adicionar um Gravatar em qualquer lugar dos seus arquivos de tema do WordPress.

Após colar o código, role até a seção ‘Inserção’ e selecione ‘Inserir Automaticamente’. Você também precisará abrir o menu suspenso ‘Localização’ e escolher ‘Executar em Todos os Lugares’.

Com isso feito, role até o topo da página e clique no interruptor ‘Inativo’ para que ele mostre ‘Ativo’ em vez disso.

Em seguida, simplesmente clique no botão ‘Salvar Snippet’.

Agora, você pode exibir o Gravatar do usuário em qualquer lugar do seu site WordPress usando a seguinte função:

<?php wpbeginner_display_gravatar(); ?>

Simplesmente adicione esta função ao arquivo de template correto. Por exemplo, se você quiser exibir o Gravatar do usuário no cabeçalho do seu site, geralmente você editará o arquivo header.php.

No entanto, isso pode variar dependendo do seu tema WordPress. Para ajudá-lo a encontrar o arquivo de template correto para suas necessidades, dê uma olhada em nossa folha de dicas sobre hierarquia de templates do WordPress.

Método 2: Usando um Shortcode Personalizado do WordPress (Completamente personalizável)

Você também pode adicionar um Gravatar a qualquer página, post ou área pronta para widgets criando um shortcode personalizado.

Esta é uma boa escolha se você quiser controlar exatamente onde os Gravatars aparecem em cada página ou se quiser exibir essas imagens em locais diferentes em todo o seu site.

Assim como o método 1, essa abordagem mostrará o Gravatar do usuário atual. Se preferir, você pode mostrar o Gravatar atribuído a um endereço de e-mail específico fazendo uma alteração simples no código.

Isso é útil se você tem o endereço de e-mail de uma pessoa e deseja exibir o Gravatar dela em seu site, mas ela não é um usuário registrado.

A maneira mais fácil de criar shortcodes personalizados é usar o WPCode. Melhor ainda, você não precisa editar os arquivos do seu tema, tornando este um método muito mais amigável para iniciantes.

Se você ainda não o fez, precisará instalar o WPCode. Você também precisará criar um novo snippet de código personalizado seguindo o mesmo processo descrito acima.

Com isso feito, dê um nome ao snippet de código e escolha 'PHP Snippet' como o tipo de código.

Em seguida, cole o seguinte PHP no editor de código:

function wpb_display_gravatar($atts) { 
extract(shortcode_atts(array('wpb_user_email' => '',), $atts ));

if ($wpb_user_email == '') { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
} else {
	$getuseremail = $wpb_user_email; 

    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
  
    echo '<img src="' . $usergravatar . '">'; 
}
}
add_shortcode('wpb_gravatar', 'wpb_display_gravatar');

Este código cria um shortcode [wpb_gravatar] que você pode adicionar a qualquer página, postagem ou área pronta para widgets.

Quando estiver pronto, role até a seção 'Inserção' e certifique-se de que 'Inserir Automaticamente' esteja selecionado. Você também precisará abrir o menu suspenso 'Localização' e escolher 'Executar em Todos os Lugares' se ainda não estiver selecionado.

Finalmente, role até o topo da tela e clique no alternador 'Inativo' para que ele mostre 'Ativo' em vez disso. Você pode então clicar em 'Salvar Snippet' para tornar seu código ativo.

Agora você pode exibir o Gravatar do usuário em qualquer página, postagem ou área pronta para widgets usando o seguinte shortcode:

[wpb_gravatar]

Para mais informações sobre como inserir o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.

Se você quiser exibir o Gravatar de um usuário específico, basta adicionar o endereço de e-mail dele ao shortcode:

[wpb_gravatar wpb_user_email="john.smith@example.com"]

Se você não estiver satisfeito com a aparência do Gravatar, poderá estilizar usando CSS personalizado. Por exemplo, você pode adicionar o seguinte trecho de código CSS à folha de estilo do seu tema do WordPress:

.wpb_gravatar {
padding: 3px;
margin: 3px;
background:#FFFFFF;
border:3px solid #eee;
}

Para mais detalhes sobre como adicionar CSS ao WordPress, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.

Se preferir, você pode adicionar CSS personalizado usando o Personalizador do WordPress. No painel, vá em Aparência » Personalizar.

No menu do lado esquerdo, clique em ‘CSS Adicional’.

Você pode então colar o CSS personalizado no pequeno editor de código.

Com isso feito, basta clicar em ‘Publicar’.

Agora, se você visitar seu site, verá seu Gravatar com o novo estilo.

Para ainda mais dicas sobre como personalizar Gravatars em seu site, veja nosso guia sobre como alterar o tamanho da imagem do Gravatar padrão no WordPress.

Como Adicionar um Shortcode Personalizado Usando o Editor de Site Completo

Se você estiver usando um dos temas mais recentes baseados em blocos, poderá adicionar o shortcode a qualquer modelo ou parte de modelo. Isso permite que você exiba o Gravatar do usuário em todo o seu site sem precisar editar os arquivos de modelo.

Por exemplo, você pode adicionar o shortcode ao modelo de blog do seu site ou à parte do modelo de cabeçalho.

Para começar, vá para Appearance » Editor no painel do WordPress.

Por padrão, o editor de site completo exibe o modelo inicial do seu tema, mas você pode adicionar shortcodes a qualquer modelo ou parte de modelo, como o cabeçalho ou o rodapé.

Para ver todas as opções disponíveis, basta selecionar ‘Modelos’ ou ‘Partes de Modelo’.

Agora você pode clicar no modelo ou na parte de modelo que deseja editar.

Como exemplo, adicionaremos o shortcode ao modelo da página 404, mas os passos serão exatamente os mesmos, independentemente do modelo que você selecionar.

O WordPress agora mostrará uma prévia do modelo ou parte do modelo.

Para adicionar o shortcode, clique no pequeno ícone de lápis.

Com isso feito, clique no ícone azul '+' no canto superior esquerdo.

Na barra de pesquisa, digite ‘Shortcode’.

Quando o bloco correto aparecer, arraste e solte-o no modelo do tema.

Agora você pode colar ou digitar o shortcode [wpb_gravatar] neste bloco.

Depois disso, clique no botão ‘Salvar’.

Agora, simplesmente visite seu blog WordPress para ver o Gravatar em ação.

Bônus: Carregar Gravatars de forma preguiçosa em comentários do WordPress

Depois de adicionar Gravatars em vários lugares do seu site, é uma boa ideia carregar esses Gravatars de forma preguiçosa nos comentários do WordPress.

Isso ocorre porque a maioria dos Gravatars é exibida na seção de comentários e pode diminuir a velocidade do seu site, especialmente em artigos com muitos comentários.

Para carregar Gravatars de forma preguiçosa, basta instalar e ativar o plugin a3 Lazy Load. Para mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, acesse a página Configurações » a3 Lazy Load no painel do WordPress e expanda a aba ‘Lazy Load Images’.

Em seguida, simplesmente alterne o interruptor ao lado da opção ‘Gravatars’ para ‘On’. Depois disso, clique no botão ‘Salvar Alterações’ para armazenar suas configurações.

Agora, todos os Gravatars nas biografias de autores e comentários serão carregados de forma preguiçosa para aumentar o desempenho do site. Para mais instruções, veja nosso tutorial sobre como carregar Gravatars de forma preguiçosa nos comentários do WordPress.

Esperamos que este artigo tenha ajudado você a aprender como exibir Gravatar a partir de e-mails de usuários em seu site WordPress. Você também pode querer ver nosso tutorial sobre como notificar usuários quando seu comentário for aprovado no WordPress e nosso guia sobre como adicionar quick tags nos formulários de comentários do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.