Imagens em destaque são frequentemente a primeira coisa que as pessoas notam em um blog. Elas chamam a atenção, atraem leitores e definem o tom do seu post.
Mas em alguns temas do WordPress, clicar na imagem em destaque não leva os visitantes a lugar nenhum. Em vez de abrir seu post, ela simplesmente fica lá.
Isso pode não parecer um grande problema, mas pode deixar os visitantes confusos e torná-los menos propensos a continuar lendo. Este é um problema pequeno, mas sério.
Felizmente, há uma solução simples. Vou mostrar como tornar as imagens em destaque clicáveis no WordPress para que seus visitantes tenham a experiência fluida que esperam.
Por que Vincular Imagens em Destaque a Posts no WordPress?
A razão é simples. Os visitantes esperam que as imagens funcionem como links. Quando veem uma imagem em destaque, naturalmente querem clicar nela para abrir o post completo.
Imagens em destaque geralmente são grandes, coloridas e ocupam mais espaço, então os visitantes tendem a notá-las primeiro. Elas também facilitam para as pessoas tocarem em seus posts ao usar um telefone ou tablet.
Mas se suas imagens em destaque não forem clicáveis, isso pode confundir os visitantes. 😕
Eles podem tentar tocar na imagem, esperando que ela abra o post, apenas para perceber que nada acontece. Essa pequena frustração pode fazer com que alguns usuários saiam do seu site mais rapidamente, o que pode prejudicar seu engajamento.
Isso também torna seu site menos acessível. Imagens maiores são mais fáceis de clicar ou tocar para todos, especialmente para pessoas com dificuldades motoras ou que usam telas menores.
Embora muitos temas do WordPress modernos vinculem a imagem destacada ao post, alguns ainda não o fazem. Se o seu tema for um deles, mostrarei exatamente como corrigi-lo.
Na seção a seguir, ensinarei como vincular automaticamente imagens destacadas a posts no WordPress. E aqui está tudo o que abordarei neste guia:
- Vincular Automaticamente Imagens Destacadas a Posts no WordPress
- Dica Bônus: Otimize Suas Imagens Destacadas para Velocidade
- Perguntas Frequentes: Vincular Automaticamente Imagens Destacadas a Posts do WordPress
- Mais Guias sobre o Uso de Imagens no WordPress
Vamos começar.
Vincular Automaticamente Imagens Destacadas a Posts no WordPress
Este método exige que você adicione código aos seus arquivos do WordPress. Se você nunca fez isso antes, consulte nosso guia para iniciantes sobre como colar trechos da web no WordPress.
Embora você possa adicionar o código ao functions.php do seu tema, recomendo usar um plugin de trechos de código em vez disso. É muito mais seguro, fácil de gerenciar e suas alterações não serão perdidas se você atualizar ou trocar de tema.
Nossa principal escolha é o WPCode, o melhor plugin de snippets de código para WordPress. Ele permite adicionar e gerenciar código personalizado sem tocar nos arquivos do seu tema, para que você não corra o risco de quebrar seu site.
Além disso, é confiável por muitas de nossas marcas parceiras por sua confiabilidade e facilidade de uso. Você pode aprender mais em nossa análise completa do WPCode.
Primeiro, você precisa instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, siga nosso tutorial sobre como instalar um plugin do WordPress para instruções passo a passo.
💡 Observação: Para este tutorial, você pode usar a versão gratuita do WPCode. Se precisar de recursos avançados como agendamento de código, lógica condicional e um histórico completo de revisões, você pode explorar a versão WPCode Pro.
Após o plugin ser ativado, você pode navegar para Snippets de Código » Adicionar Novo em sua área de administração do WordPress.
Em seguida, você verá a página ‘Adicionar Snippet’.
Você pode passar o mouse sobre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clicar no botão ‘+ Adicionar Snippet Personalizado’.
Na próxima tela, você selecionará o tipo de código para o seu snippet.
Aqui, você desejará clicar na caixa ‘Snippet PHP’.
Isso o levará ao editor do WPCode.
A primeira coisa a fazer aqui é dar um nome ao seu snippet de código. Isso é apenas para sua referência, então pode ser qualquer coisa que ajude você a entender rapidamente para que serve o snippet.
Em seguida, cole um dos dois snippets de código a seguir na caixa ‘Pré-visualização do Código’. Você só precisa usar um.
O primeiro é uma opção simples que torna a imagem destacada clicável em todos os lugares, incluindo em arquivos, na página inicial e em páginas de posts individuais:
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
O segundo método funciona um pouco diferente. Ele garante que a imagem destacada não seja clicável quando um visitante já está naquela página de post específica, o que é melhor para a experiência do usuário.
Isso é útil se você quiser apenas vincular imagens destacadas em visualizações não únicas, como a página inicial, o índice do blog ou páginas de categoria em seu blog WordPress:
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
if (! is_singular()) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
} else {
return $html;
}
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
Recomendo o segundo trecho para a melhor experiência do usuário, mas qualquer um deles resolverá o problema! 👍
Depois de adicionar o trecho, veja como ele pode ficar no seu editor WPCode:
Em seguida, vamos rolar a página até a seção ‘Inserção’.
Você pode deixar no método ‘Inserção Automática’, para que ele insira e execute automaticamente o trecho de código no lugar certo.
Por último, mude o seletor de ‘Inativo’ para ‘Ativo’.
Em seguida, clique no botão ‘Salvar Trecho’.
Pronto. Agora suas imagens destacadas serão automaticamente vinculadas aos seus posts.
Dica Bônus: Otimize Suas Imagens Destacadas para Velocidade
Agora que suas imagens destacadas são clicáveis, é uma boa ideia garantir que elas carreguem rapidamente. Imagens grandes e não otimizadas podem deixar seu site lento, prejudicando tanto a experiência do usuário quanto seu ranking de SEO.
Antes de fazer o upload de uma imagem destacada para o WordPress, recomendo redimensionar a imagem para se adequar à largura do conteúdo do seu tema e comprimi-la para reduzir o tamanho do arquivo. Você pode fazer isso facilmente com uma ferramenta de edição de imagem ou um plugin de compressão de imagem.
Existem outras técnicas úteis também.
Por exemplo, você pode habilitar o carregamento preguiçoso (lazy loading), usar formatos de imagem de próxima geração (como WebP) e habilitar uma CDN para entrega mais rápida em diferentes locais.
Para saber mais, confira nosso guia completo sobre como otimizar imagens para desempenho na web.
Perguntas Frequentes: Vincular Automaticamente Imagens Destacadas a Posts do WordPress
Agora, vamos esclarecer algumas preocupações comuns sobre o link de imagens destacadas no WordPress.
Por que minhas imagens destacadas não são clicáveis por padrão?
Se suas imagens destacadas são clicáveis ou não, depende inteiramente do seu tema WordPress. Alguns temas modernos incluem isso por padrão, enquanto outros o omitem.
É seguro adicionar este código ao arquivo functions.php do meu tema?
Eu entendo – editar o arquivo do tema pode parecer arriscado. E, honestamente, é um pouco. Um pequeno erro de digitação no arquivo functions.php pode bloquear o acesso ao seu site ou causar a ‘tela branca da morte‘.
É por isso que recomendo usar um plugin como o WPCode. É uma maneira muito mais segura e amigável para iniciantes de adicionar código ao seu site.
Adicionar este snippet de código deixará meu site lento?
Boas notícias – não, não deixará. O código usa um recurso padrão do WordPress que o torna extremamente leve e eficiente. Você não notará nenhuma diferença na velocidade ou desempenho.
Mais Guias sobre o Uso de Imagens no WordPress
Espero que este artigo tenha ajudado você a aprender como vincular automaticamente imagens destacadas às postagens no WordPress. Se você achou este guia útil, temos outros tutoriais que podem ajudá-lo a melhorar como você usa imagens em seu site WordPress:
- Imagem de Capa vs Imagem Destacada no Editor de Blocos do WordPress
- Como definir uma imagem destacada padrão no WordPress
- Como Adicionar Imagens em Destaque ou Miniaturas de Postagem no WordPress
- Como Corrigir Imagem Destacada Não Aparecendo no WordPress
- Como Adicionar Legendas a Imagens em Destaque no WordPress
- WebP vs PNG vs JPEG: O Melhor Formato de Imagem para WordPress
- Como Escolher o Melhor Software de Design Web
- Guia para Iniciantes sobre Tamanhos de Imagem no WordPress
- Guia para Iniciantes em SEO de Imagens
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.
Fredrick John
Funcionou como mágica, obrigado.
WPBeginner Support
De nada!
Admin
Nelson Nchopereu
Como faço para colocar minha imagem destacada de forma que, quando o link da postagem for compartilhado no WhatsApp ou Facebook, ele vá com a imagem destacada?
Obrigado
WPBeginner Support
Para isso, cobrimos em nosso guia abaixo que inclui informações de meta social:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
Admin
Anas
Ótimo, senhor, funcionou…
WPBeginner Support
Thank you, glad our content was helpful
Admin
Rohit Sharma
Como o wpbeginner projeta suas imagens em destaque e miniaturas do YouTube?
Quais ferramentas / aplicativos / softwares vocês usam?
Eles parecem muito incríveis..
Não consegui encontrar isso na sua postagem do blueprint do site.. então pensei em perguntar aqui..
Aguardando sua resposta..!
WPBeginner Support
Unless I hear otherwise, we use Camtasia for our videos and Photoshop or Affilinty designer for the article thumbnails
Admin
özkan
Olá,
Tenho tanta inveja de todas essas pessoas que dizem que funciona.
Não funciona para o meu site. Alguém pode me ajudar com isso?
Obrigado.
WPBeginner Support
Você pode querer entrar em contato com o suporte do seu tema para ver se há alguma configuração específica do tema que possa estar substituindo isso.
Admin
Faizan
Funcionou! Obrigado
Carlos Alberto Romay
Olá! Artigo incrível, preciso fazer o oposto; descobrir COMO evitar que qualquer link de imagem, título ou texto leve a qualquer URL, como posso fazer isso? Quero dizer, você acessa meu site, vê o blog, mas você NÃO PODE clicar em nenhuma imagem, texto ou título, isso é possível? obrigado
Jennifer
Olá, Muito obrigado.
Eu usei isso no meu site.
Como adicionar link a algumas miniaturas em tamanho específico?
pete
funciona para mim obrigado!!
Stuart Campbell
Como posso usar este método para que a imagem destacada link para outra URL? O que estou perdendo aqui? Obrigado
Sandeep
No meu blog, as imagens em destaque não são clicáveis. Isso torna um pouco difícil para o usuário navegar para os blogs.
Acho que o tema que estou usando não suporta isso.
Mas o código que você mencionou acima eu vou tentar.
Eu vou tentar, se funcionar, será ótimo.
Susan Howarth
Thank you so much for this!! I was worried this issue would take a lot of time and energy to figure out. After a quick copy and paste of your code, and it worked perfectly!
Deepak
funcionou, gostaria de saber como fechar a instrução php? quando eu uso isso no final } meu site dá erro 500
Ivan
Funcionou bem! Ótimo! Obrigado
modo seyoum
estou procurando a melhor maneira de adicionar links a uma imagem em destaque. por exemplo - se você clicar no link abaixo, verá a imagem do cabeçalho e, em seguida, dois links na área de conteúdo. eu preferiria que esses dois links aparecessem no cabeçalho de uma forma que não comprometa nenhum design responsivo. tenho algumas ideias, mas gostaria de ouvir de uma perspectiva diferente...
jeet sandhu
Olá, tenho uma consulta diferente. Tentei exibir posts específicos em páginas específicas usando o plugin 'post in page'. Mas as imagens em destaque que defini para os posts não aparecem na página. Quero dizer, apenas o título do post está aparecendo, mas eu quero que as imagens em destaque de todos os posts sejam exibidas também! Você pode me sugerir alguma maneira ou plugin que possa me ajudar a conseguir isso. Pesquisei a internet inteira; ninguém tem a resposta. Serei grato se você puder me ajudar.
malik aadil
Sou um novo blogueiro, este artigo me ajudou muito
Eu estava usando links nas imagens, mas o problema era que as imagens estavam abrindo, mas não estavam indo para o artigo vinculado
WPBeginner Support
Oi Malik,
We are glad you found this article helpful
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
Admin
Sulman Qamar
hey dear ,
here isn’t concerning solely featured pictures however additionally concerning committal to writing . …
in some model that’s operating.. most of your data is nice on behalf of me and my members ..
we follow principally .:)
in this richest article I actually have found totally different sort of data ..
Hope you best for your blogging future
~salman qamar
Dale Reardon
Olá,
Muito obrigado por este código útil.
Existe uma maneira (posso incomodá-lo pelo código da função) de também adicionar uma tag ALT ao link da imagem com o título do post vinculado como texto alternativo?
Tenho deficiência visual e, no momento, o link apenas diz o nome do arquivo da imagem, o que nem sempre é útil.
Obrigado,
Dale.
Ankit Agarwal
Obrigado por este tutorial. Tentei isso no meu blog, mas percebi que a imagem que está sendo mostrada na miniatura não é minha imagem em destaque, mas sim a primeira imagem que estou usando no post. Provavelmente porque estou usando o plugin MotoPress page builder. e
Parece haver um conflito entre este código e o plugin Motopress.
Dale Reardon - My Disability Matters
Olá,
Isso funcionou fantasticamente.
Apenas mais uma consulta – meu site é sobre questões de deficiência:
então eu quero que as coisas sejam acessíveis e eu mesmo sou cego, então aprecio todos os sites que fazem a sua parte.
Existe uma maneira de atribuir texto ALT a este link de imagem composto pelo título da página para a qual ele está vinculando? No momento, meu leitor de tela apenas lê o nome do arquivo da imagem, o que às vezes não é muito útil.
Sua ajuda é muito apreciada.
Dale.