Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como alterar o tamanho da imagem do Gravatar no WordPress

Deseja alterar o tamanho da imagem do Gravatar no WordPress?

Um Gravatar é uma imagem usada para representar um comentarista ou autor de postagem de blog. Os temas do WordPress mostram os Gravatares em um tamanho definido, mas você pode preferir torná-los menores ou maiores para se adequar melhor ao design do seu site.

Neste artigo, mostraremos a você como alterar o tamanho das imagens do Gravatar no WordPress.

How to change the Gravatar image size in WordPress

Por que alterar o tamanho da imagem do Gravatar no WordPress?

Gravatar significa Globally Recognized Avatar (Avatar reconhecido globalmente). Trata-se de um serviço da Web que permite criar um perfil e associar imagens de avatar ao seu endereço de e-mail.

A maioria dos temas do WordPress mostra um Gravatar ao lado do comentário do usuário. Alguns temas também exibem um Gravatar na caixa de biografia do autor.

Mesmo que um usuário não tenha uma conta Gravatar, seu site ainda mostrará um dos Gravatares padrão do WordPress.

The default WordPress Gravatar

Às vezes, você pode querer alterar o tamanho dos Gravatars do seu tema. Por exemplo, talvez queira torná-los maiores para que se destaquem, chamando a atenção do visitante para a seção de comentários do site.

Dito isso, vamos dar uma olhada em como você pode alterar o tamanho da imagem do Gravatar no seu site WordPress. Basta usar os links rápidos abaixo para ir para o método que você deseja usar:

Método 1: Alterar o tamanho do Gravatar usando o Full Site Editor (somente temas de blocos)

Se estiver usando um tema baseado em blocos, como o ThemeIsle Hestia Pro ou o Twenty Twenty-Three, você poderá alterar o tamanho do Gravatar usando o editor completo do site.

Esse método não funciona com todos os temas, portanto, se você não estiver usando um tema habilitado para blocos, recomendamos usar o método 2.

No painel do WordPress, vá para Appearance Editor.

Opening the WordPress full-site editor (FSE)

Agora você chegará ao editor completo do site e verá várias configurações para editar diversas partes do seu site WordPress.

Para alterar o tamanho do Gravatar em seus comentários do WordPress, clique no ícone da barra de pesquisa na parte superior do painel esquerdo.

Opening the WordPress full site editor's command palette or search bar

Nesse ponto, basta procurar a parte do modelo Comments.

Clique nele quando o encontrar.

Looking for the Comments template part in the WordPress full site editor

Na próxima página, você verá algumas informações sobre a parte do modelo Comments.

Para editar a parte do modelo Comments, clique no botão de lápis. Em seguida, você será direcionado para a interface de edição.

Clicking the pencil button to edit the Comments template part

Agora você pode clicar em qualquer um dos gravatares na visualização ao vivo.

No menu à direita, você pode selecionar a guia “Block” (Bloquear) se ela ainda não estiver selecionada.

Changing the Gravatar image size using the full site editor

Agora você pode aumentar ou diminuir os gravatares arrastando o controle deslizante “Image Size” (Tamanho da imagem).

À medida que você move o controle deslizante, todos os Gravatars são atualizados automaticamente, de modo que você pode experimentar tamanhos diferentes para ver qual é o melhor.

Changing the size of a Gravatar using the full site editor (FSE) in WordPress

Além disso, fique à vontade para ativar a configuração “Link para o perfil do usuário”. Quando um usuário clicar no Gravatar, ele será direcionado para a página de perfil do comentarista em seu site.

Quando estiver satisfeito com as alterações feitas, clique no botão “Save” (Salvar).

Saving resized Gravatars using the full-site editor (FSE)

Agora, se você visitar qualquer seção de comentários no seu site WordPress, verá as alterações ao vivo.

Método 2: Alterar o tamanho do Gravatar editando o comments.php (todos os temas)

Se você não estiver usando um tema de bloco do WordPress, poderá alterar o tamanho do Gravatar para comentários do WordPress editando o código do tema.

Esse método exige que você edite os arquivos do tema, portanto não é a opção mais amigável para iniciantes. Entretanto, esse método deve funcionar para a maioria dos temas do WordPress.

Primeiro, você precisará se conectar ao seu site WordPress usando um cliente FTP, como o FileZilla, ou pode usar o gerenciador de arquivos do cPanel da sua hospedagem WordPress.

Se esta é a primeira vez que você usa FTP, consulte nosso guia completo sobre como se conectar ao seu site usando FTP.

Quando estiver conectado, você precisará acessar /wp-content/themes/ e abrir a pasta do seu tema atual do WordPress.

An example of an FTP client

Uma vez aqui, abra o arquivo comments.php e procure a função wp_list_comments. Dentro dessa função, você encontrará theavatar_size, que define o tamanho do Gravatar.

Veja um exemplo de como isso pode parecer:

<?php
wp_list_comments(
    array(
        'avatar_size' => 60,
        'style'       => 'ol',
        'short_ping'  => true,
    )
);
?>

Você pode simplesmente alterar o avatar_size para o tamanho que deseja usar. No trecho de código acima, isso significaria alterar 60 para outro número.

Os gravatares são quadrados, portanto o WordPress usará o mesmo valor para a largura e a altura da imagem. Isso significa que você só precisa digitar um número.

Depois de fazer essa alteração, certifique-se de salvar e carregar o arquivo de volta na sua conta de hospedagem do WordPress. Quando terminar, você poderá visitar seu blog do WordPress para ver a alteração em ação.

Se a imagem do Gravatar não tiver sido alterada, isso pode ser devido ao cache. Para saber mais, consulte nosso guia sobre como corrigir a não atualização imediata do WordPress.

Se o Gravatar ainda não for alterado, o CSS do seu tema pode estar substituindo as configurações no arquivo comments.php. Nesse caso, você precisa tentar o próximo método.

Método 3: Alterar o tamanho do Gravatar editando style.css (todos os temas)

Para verificar se o CSS do seu tema está substituindo o arquivo comment.php, você pode usar a ferramenta Inspect do seu navegador. As etapas variam de acordo com o navegador que você está usando, mas no Chrome, basta clicar com o botão direito do mouse ou pressionar Ctrl e clicar no Gravatar e selecionar “Inspecionar”.

Using the Inspect tool to find out Gravatar size

Isso mostrará o código HTML e CSS da página em um novo painel.

Nesse código, você precisa se concentrar no painel inferior e procurar a classe ou classes CSS para o avatar do autor do comentário.

Em nosso exemplo, eles são .comment-author e .avatar, e contêm propriedades CSS para os valores de altura e largura do Gravatar. Sabemos disso porque, quando passamos o mouse sobre os trechos de código CSS, o Gravatar é destacado na visualização.

Finding the CSS classes for the Gravatar

Veja a seguir a aparência do código em nosso tema. Observe que ele pode parecer diferente no seu:

.comment-author .avatar {
height: 42px;
position: relative;
top: .25em;
width: 42px;
}

Se o tamanho do Gravatar no código CSS for diferente do que você especificou no arquivo comments.php, isso significa que o arquivo style.css do seu tema está substituindo suas alterações.

Para editar o arquivo style.css, você precisa usar o WPCode, que é um plug-in de snippet de código que facilita a inserção de código personalizado no tema. Com isso, você pode editar o arquivo style.css sem acessá-lo diretamente, reduzindo a chance de cometer erros.

Além disso, você precisará manter aberta a guia em que está a ferramenta de inspeção. Isso serve para que você possa copiar e colar o código CSS do Gravatar do autor do comentário no WPCode e editá-lo posteriormente.

Primeiro, instale o WPCode em seu site do WordPress. Para obter mais informações, leia nosso guia sobre como instalar um plug-in do WordPress.

Em seguida, vá para Code Snippets + Add Snippet e selecione ‘Add Your Custom Code (New Snippet)’. Clique no botão “Usar snippet”.

Adding custom code in WPCode

Depois disso, digite um nome para seu novo código CSS. Pode ser algo simples como “Alterar tamanho do Gravatar”.

Quanto ao tipo de código, selecione “CSS Snippet”.

Changing the Gravatar size with WPCode

Agora, copie e cole os trechos de código CSS do seu tema original para o tamanho do Gravatar na caixa Code Preview (Visualização de código).

Uma vez feito isso, você pode alterar os valores de altura e largura dentro do código. Em nosso exemplo, alteramos para 50px. Certifique-se de que os tamanhos de altura e largura sejam os mesmos.

Changing the Gravatar size values in WPCode

Depois disso, role para baixo até a seção Inserir.

Certifique-se de que o método “Auto Insert” esteja selecionado. Quanto ao local, basta escolher “Site Wide Footer” para que seu CSS personalizado possa substituir o código CSS existente.

Choosing Site Wide Footer location in WPCode

Depois disso, basta clicar no botão de alternância no canto superior direito para tornar o código “Ativo” e clicar em “Salvar snippet”. Se você visitar seu blog ou site do WordPress, verá suas imagens Gravatar atualizadas.

Agora, recomendamos tentar alterar o tamanho do Gravatar no arquivo comments.php antes de usar o método CSS mais fácil.

Em primeiro lugar, o CSS pode, às vezes, fazer com que os gravatares pareçam borrados, especialmente se você fizer com que os avatares sejam muito maiores do que a imagem original.

Em segundo lugar, alterar o tamanho da imagem no comments.php geralmente ajuda seu site a carregar mais rapidamente. Isso ocorre porque o navegador ainda precisa fazer o download da imagem em tamanho real e, em seguida, usar o CSS para redimensioná-la para exibição. Isso pode resultar em um desempenho mais lento do site.

Dica profissional: Tem muitos comentários e Gravatars para exibir em suas postagens de blog? Considere a possibilidade de carregar seus Gravatars de forma preguiçosa para que seu site seja carregado mais rapidamente.

Método 4: Alterar o tamanho do Gravatar para biografias de autores com o código

Se você administra um site WordPress com vários autores, uma caixa de autor pode ajudar os leitores a saber mais sobre o autor do post.

Se quiser adicionar esse recurso ao seu site, confira nosso guia sobre como adicionar uma caixa de informações do autor em publicações do WordPress.

Muitas biografias de autores mostram o Gravatar do escritor junto com sua biografia. Para alterar o tamanho padrão do Gravatar nas caixas de biografia do autor, você precisa encontrar o arquivo do tema que adiciona a biografia.

Basta conectar-se ao seu site usando um cliente FTP, como o FileZilla, ou o gerenciador de arquivos da sua hospedagem do WordPress. Quando estiver conectado, vá para /wp-content/themes/ e abra a pasta do seu tema atual do WordPress.

Depois disso, você precisa abrir a pasta template-parts.

Editing template parts in a WordPress theme using an FTP client

Agora você precisa encontrar o arquivo que contém o código get_avatar. Geralmente, você encontrará esse código em um arquivo de parte do modelo chamado author-bio.php, arquivo single.php, arquivo functions.php ou similar.

Veja um exemplo de como esse código pode ficar:

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

No snippet acima, você pode simplesmente alterar o número 85 para o tamanho que deseja usar.

Em outros temas, o código pode ter a seguinte aparência:

get_avatar( get_the_author_meta( 'user_email' ), 85);

Você pode simplesmente substituir o número pelo valor que deseja usar para tornar o Gravatar maior ou menor.

Depois de alterar o tamanho, não se esqueça de salvar suas alterações. Em seguida, você pode visitar seu site para ver a nova caixa de biografia do autor em ação.

Se os Gravatares não tiverem sido alterados, você precisará procurar a classe avatar no arquivo style.css seguindo o mesmo processo descrito no Método 3. Depois de encontrar essa classe, você poderá criar um novo snippet de WPCode e digitar os novos valores de altura e largura do Gravatar.

Saiba mais maneiras de melhorar sua seção de comentários

Deseja levar seus comentários do WordPress para o próximo nível? Confira estes guias para personalizar sua seção de comentários:

Esperamos que este tutorial tenha ajudado você a aprender como alterar o tamanho da imagem do Gravatar no WordPress. Talvez você também queira saber como estilizar o formulário de comentários do WordPress ou conferir nossa lista dos melhores plug-ins de comentários do WordPress.

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

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

3 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph

    Thanks for that tutorial. My theme is very minimalistic and simple but graphic elements, and all of that is important for my aesthetic reasons. The only problem was pictures of commenters. They were too small and look almost like an error. Thanks to this guide, I can fix it and make everything look better.

    • WPBeginner Support

      Glad our guide could help :)

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.