Como adicionar imagens em destaque ou postar miniaturas no WordPress
As imagens em destaque, também conhecidas como miniaturas de postagem, são um recurso conhecido do WordPress suportado pela maioria dos temas.
Eles são a imagem principal das postagens do seu blog e geralmente aparecem ao lado do título da sua página inicial e das mídias sociais. Todos os temas populares do WordPress vêm com suporte integrado para imagens em destaque.
Neste artigo, mostraremos como adicionar facilmente imagens em destaque ou postar miniaturas no WordPress.
Guia para iniciantes para imagens em destaque no WordPress
As imagens em destaque são um recurso de tema do WordPress. Quase todos os temas do WordPress vêm com suporte integrado para imagens em destaque e as exibem lindamente em diferentes áreas do seu site WordPress .
Como humanos, achamos os elementos visuais mais atraentes do que o texto simples. As imagens em destaque ajudam você a tornar as páginas do seu blog mais atraentes.
Eles também ajudam você a criar engajamento do usuário e aumentar as visualizações de página. Os mecanismos de pesquisa e sites de mídia social também podem usar essas imagens e exibi-las nos resultados de pesquisa e no feed de notícias de mídia social.
A maioria das imagens em destaque são usadas para postagens de blog, mas você também pode definir imagens em destaque para páginas e tipos de postagem personalizados.
Nota: As imagens em destaque não são iguais à imagem da capa. Veja a diferença entre a imagem da capa e a imagem em destaque no WordPress.
Dito isto, vamos dar uma olhada em como adicionar facilmente imagens em destaque no WordPress.
Vídeo tutorial
Inscreva-se no WPBeginner
Se preferir instruções escritas, continue lendo.
Adicionando miniatura de postagem ou imagem em destaque no WordPress
Para adicionar uma imagem em destaque em uma postagem do WordPress, basta editar ou criar uma nova postagem no blog.
No editor de conteúdo , você encontrará a guia de imagem em destaque na coluna da direita.
Você precisa clicar na área ‘Definir imagem em destaque’, e isso abrirá o pop-up do carregador de mídia do WordPress.
A partir daqui, você pode carregar uma imagem do seu computador ou usar uma imagem existente da sua biblioteca de mídia. Depois de selecionar a imagem, basta clicar no botão Definir imagem em destaque.
O WordPress agora mostrará uma visualização da imagem em destaque na coluna da direita. No entanto, a imagem real em destaque pareceria diferente dependendo do seu tema do WordPress.
Agora você pode salvar ou publicar sua postagem e visualizá-la para ver como a imagem em destaque aparecerá em seu site ao vivo.
Dependendo das configurações definidas pelo desenvolvedor do tema, sua imagem em destaque aparecerá automaticamente com suas postagens.
Como encontrar e usar efetivamente as imagens em destaque?
Agora, a próxima grande questão que a maioria dos iniciantes encontra é onde encontrar imagens para usar como imagens em destaque?
Você não pode simplesmente usar a pesquisa de imagens do Google e usar qualquer imagem da internet. Essas imagens são protegidas por leis de direitos autorais e usá-las sem a devida permissão pode causar problemas legais.
Felizmente, existem vários recursos disponíveis que você pode usar para encontrar imagens gratuitas para seus posts.
Nossos principais favoritos são:
- Shutterstock – Eles têm algumas imagens gratuitas, mas o valor real vem de seus planos pagos, que dão acesso a toneladas de fotos, ilustrações, desenhos, vídeos e muito mais de alta qualidade. Isso é o que usamos para o site WPBeginner.
- Unsplash – Um recurso online popular que publica imagens de alta resolução que você pode usar em seu site e em outros projetos.
- Negative Space – Uma coleção bem organizada de imagens livres de direitos autorais.
- New Old Stock – Uma coleção de fotografias vintage de arquivos públicos.
Nota : Todas essas fontes fornecem imagens de alta resolução, o que significa que são grandes em tamanho e dimensões de arquivo. Você precisará otimizar imagens para a web antes de usá-las como imagens em destaque.
As imagens em destaque são tratadas pelo seu tema WordPress. Para alterar a forma como seu tema exibe imagens em destaque, você precisará de algumas habilidades básicas de codificação CSS ou WordPress.
Se você estiver confortável com a codificação, continue lendo para obter mais dicas.
Guia de desenvolvedores de temas para imagem em destaque e miniaturas de postagem no WordPress
A imagem em destaque é um recurso popular suportado por quase todos os temas do WordPress. Em raras situações, você pode encontrar um tema que não suporta imagens em destaque ou pode não gostar de como eles lidam com imagens em destaque.
Nesse caso, você pode adicionar suporte a imagens em destaque ao seu tema ou alterar sua aparência.
Se você se sente à vontade para editar arquivos de tema do WordPress e conhece um pouco de CSS personalizado, pode fazer isso sozinho.
Se o seu tema não for compatível com imagens em destaque, você não verá a opção de adicionar uma imagem em destaque no editor de conteúdo.
Para adicionar suporte a imagens em destaque em um tema WordPress, você precisa adicionar esta linha de código no arquivo functions.php do seu tema:
1 | add_theme_support( ‘post-thumbnails’ ); |
Este código habilitará o suporte a imagens em destaque para postagens e páginas. Agora você pode ir para posts ou editor de blocos de página e verá a opção de imagem em destaque ativada.
No entanto, quando você define uma imagem em destaque, ela não será exibida automaticamente no seu tema do WordPress. Para exibir imagens em destaque em seu tema, você precisa editar seus modelos e adicionar esta linha de código onde deseja exibir a imagem em destaque:
1 | <?php the_post_thumbnail(); ?> |
Os arquivos nos quais você adiciona o código acima variam de acordo com o seu tema. Você vai querer adicionar o código dentro do seu post loop.
Relacionado: Veja a folha de dicas da hierarquia de temas do WordPress para entender melhor como os temas funcionam.
O código acima é a função básica que você precisa para adicionar suporte a imagens em destaque e exibir imagens em destaque em seu tema. Para definir o tamanho da imagem para imagens em destaque que você carrega, você precisa adicionar esta linha de código ao seu functions.phparquivo.
1 | set_post_thumbnail_size( 50, 50); |
Os parâmetros para set_post_thumbnail_size estão nesta ordem: largura, altura.
Você também pode definir tamanhos de imagem adicionais para usar com a função the_post_thumbnail(). Por exemplo:
12 | // Image size for single postsadd_image_size( ‘single-post-thumbnail’, 590, 180 ); |
Neste exemplo, adicionamos um novo tamanho de imagem chamado single-post-thumbnail com 590px e 180px de altura.
Para usar esse tamanho de imagem em nosso tema, ainda precisaremos adicioná-lo ao arquivo de tema apropriado.
Confira nosso guia sobre como adicionar tamanhos de imagem adicionais no WordPress para obter mais detalhes.
Se você carregou imagens em destaque anteriormente, mas elas ainda estão aparecendo em algum outro tamanho, você precisa gerar novamente as miniaturas e os tamanhos das imagens para postagens mais antigas.
Abaixo está um exemplo da função de imagem em destaque com tamanho de imagem específico.
1 | <?php the_post_thumbnail( ‘single-post-thumbnail’ ); ?> |
Esta é a versão detalhada da funcionalidade completa. Há muitas outras coisas que você pode fazer com imagens em destaque.
Perguntas frequentes sobre imagens em destaque no WordPress
Como iniciante, você pode encontrar dúvidas ou problemas ao usar imagens em destaque em seu blog. A seguir estão apenas algumas das perguntas mais frequentes sobre imagens em destaque.
1. Por que a imagem em destaque está aparecendo duas vezes nas minhas postagens?
Às vezes, o iniciante adiciona uma imagem em destaque e, em seguida, adiciona a mesma imagem dentro da parte de conteúdo do editor de postagem.
Tudo o que você precisa fazer é remover a imagem da área de conteúdo e usar apenas a metabox da imagem em destaque para adicionar a imagem em destaque. Para saber mais sobre este tópico, consulte nosso artigo sobre como corrigir a imagem em destaque que aparece duas vezes no WordPress .
2. Qual é a diferença entre a imagem de capa e a imagem em destaque?
As imagens de capa são usadas na área de conteúdo de suas postagens ou páginas. Eles são normalmente usados para separar diferentes seções de uma longa página ou postagem.
A imagem em destaque é a imagem representativa de um artigo. Ele aparece antes ou ao lado do conteúdo, mas não dentro do artigo real.
Para saber mais sobre esse tópico, consulte nosso guia sobre a diferença entre imagem de capa e imagem em destaque no WordPress .
3. Como exibir imagens em destaque ao lado de postagens recentes do blog?
O editor de blocos do WordPress vem com um bloco ‘Últimas postagens’ que permite exibir postagens recentes com miniaturas de postagens.
Você também pode exibir postagens recentes com miniaturas em widgets da barra lateral usando o plugin Recent Posts Widget Extended . Para obter mais detalhes, consulte nosso artigo sobre como exibir postagens recentes no WordPress .
4. Como lembrar os autores de adicionar imagem em destaque no WordPress?
As imagens em destaque são exibidas com destaque em sua página inicial, página do blog e outras páginas de arquivo.
Se você ou outro autor em seu blog esqueceu de definir uma e publicou a postagem, ela aparecerá sem uma imagem em destaque. Isso parecerá ruim e inconsistente, o que não é bom para a experiência do usuário.
Você pode instalar e ativar o plug-in Exigir imagem em destaque , que mostrará uma notificação quando alguém tentar publicar uma postagem sem imagem em destaque.
Para obter mais detalhes, consulte nosso artigo sobre como exigir imagens em destaque no WordPress .
Esperamos que este artigo tenha ajudado você a aprender como adicionar imagens em destaque ou postar miniaturas no WordPress.
Você também pode conferir nosso guia para iniciantes em SEO de imagens , que mostra como otimizar suas imagens do WordPress para mecanismos de pesquisa.
Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook .