O senhor está procurando uma maneira de adicionar imagens em destaque às postagens do seu blog no WordPress?
As imagens em destaque, também conhecidas como miniaturas de posts, são um recurso bem conhecido do WordPress suportado pela maioria dos temas. Elas são a imagem principal das postagens do seu blog e geralmente aparecem ao lado do título na sua página inicial e nas mídias sociais.
Neste artigo, mostraremos ao senhor como adicionar facilmente imagens em destaque ou miniaturas de publicações no WordPress.
Guia para iniciantes sobre 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 incorporado para imagens em destaque e as exibem de forma bonita em diferentes áreas do seu site. site do WordPress.
Como seres humanos, consideramos os elementos visuais mais atraentes do que o texto simples. As imagens em destaque ajudam o senhor a tornar as páginas do seu blog mais atraentes.
Elas também ajudam a desenvolver o envolvimento do usuário e aumentar as visualizações de página. Os mecanismos de pesquisa e os sites de mídia social também podem usar essas imagens e exibi-las nos resultados de pesquisa e nos feeds de notícias da mídia social.
Em geral, as imagens em destaque são usadas para posts de blog, mas o senhor também pode definir imagens em destaque para páginas e tipos de post personalizados.
Observação: Imagens em destaque não são o mesmo que imagens de capa. Veja a diferença entre imagem de capa e imagem em destaque em WordPress.
Dito isso, vamos dar uma olhada em como adicionar facilmente imagens em destaque no WordPress.
Tutorial em vídeo
Se o senhor preferir instruções por escrito, continue lendo.
Como adicionar miniatura de postagem ou imagem em destaque no WordPress
Para adicionar uma imagem em destaque a uma postagem do WordPress, basta editar ou criar uma nova postagem no blog.
Na seção editor de conteúdoo senhor encontrará a guia featured image (imagem em destaque) na coluna da direita.
O senhor precisa clicar na área “Set Featured Image” (Definir imagem em destaque), e isso abrirá o pop-up do carregador de mídia do WordPress.
Aqui, o senhor 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 “Set Featured Image” (Definir imagem em destaque).
O WordPress agora mostrará uma visualização da imagem em destaque na coluna da direita.
No entanto, a imagem em destaque real terá uma aparência diferente, dependendo do seu tema do WordPress.
Agora o senhor pode salvar ou publicar sua postagem ou visualizá-la para ver como a imagem em destaque aparecerá em seu site ativo.
Dependendo das configurações definidas pelo desenvolvedor do tema, a imagem em destaque aparecerá automaticamente com suas postagens.
Como encontrar e usar efetivamente as imagens em destaque
A próxima grande questão com a qual a maioria dos iniciantes se depara é onde encontrar imagens para usar como imagens em destaque.
O senhor 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, há vários recursos disponíveis que o senhor pode usar para encontrar imagens gratuitas para suas postagens no blog.
Nossos principais favoritos são:
- Shutterstock – Eles têm algumas imagens gratuitas, mas o valor real vem de seus planos pagos, que lhe dão acesso a toneladas de fotos, ilustrações, desenhos, vídeos e muito mais de alta qualidade.
- Unsplash – Um recurso on-line popular que publica imagens de alta resolução que podem ser usadas em seu site e em outros projetos.
- Espaço negativo – Uma coleção bem organizada de imagens livres de direitos autorais.
- Novo estoque antigo – Uma coleção de fotografias antigas de arquivos públicos.
Observação: Todas essas fontes fornecem imagens de alta resolução, o que significa que elas são grandes em tamanho e dimensões de arquivo. O senhor precisará otimizar as imagens para a Web antes de usá-las como imagens em destaque.
As imagens em destaque são gerenciadas pelo seu tema do WordPress. Para alterar a forma como o tema exibe as imagens em destaque, o senhor precisará de alguns conhecimentos básicos de CSS ou de codificação do WordPress.
Se o senhor se sente confortável com a codificação, continue lendo para obter mais dicas.
Guia do desenvolvedor de temas para imagens em destaque e miniaturas de posts no WordPress
A imagem em destaque é um recurso popular suportado por quase todos os temas do WordPress. Em raras situações, o senhor pode se deparar com um tema que não ofereça suporte a imagens em destaque ou pode não gostar da forma como ele trata as imagens em destaque.
Nesse caso, o senhor pode adicionar suporte a imagens em destaque ao seu tema ou alterar a forma como elas aparecem.
Se estiver à vontade para editar os arquivos de tema do WordPress e souber usar um pouco de CSS personalizado, o senhor poderá fazer isso sozinho.
Se o seu tema não for compatível com imagens em destaque, o senhor 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 do WordPress, o senhor precisa adicionar esta linha de código na seção functions.php arquivo:
add_theme_support( 'post-thumbnails' );
Não recomendamos editar diretamente o arquivo functions.php em seu site se o senhor não for um desenvolvedor. O menor erro pode quebrar o site e causar vários erros.
Uma maneira mais fácil de adicionar código personalizado é usar WPCode. É o melhor plugin de snippet de código para WordPress. O senhor pode gerenciar facilmente todos os trechos de código personalizados usando o plug-in e não precisa se preocupar em bagunçar seu site.
Primeiro, o senhor precisará instalar e ativar o plug-in WPCode. Se precisar de ajuda, consulte nosso guia sobre Como instalar um plugin do WordPress.
Após a ativação, o senhor pode ir para Code Snippets ” + Add Snippet no painel do WordPress. A partir daí, basta selecionar a opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)).
Em seguida, o senhor pode inserir seu código personalizado na área “Code Preview” (Visualização de código).
Não se esqueça de clicar no menu suspenso “Code Type” (Tipo de código) e selecionar “PHP Snippet” como o tipo.
Quando terminar, o senhor pode rolar para baixo e selecionar o método de inserção do seu código.
O WPCode usará a opção “Auto Insert” por padrão e executará o código em todos os lugares. No entanto, o senhor pode alterar o local e selecionar a execução do código em um local específico, como o cabeçalho, o rodapé, antes de um parágrafo e outros.
Há também um método Shortcode, no qual o senhor pode inserir manualmente um shortcode para executar o código.
Para este tutorial, o senhor pode usar o método padrão e inserir automaticamente o código em qualquer lugar.
Quando terminar, basta clicar no botão de alternância na parte superior para ativar o snippet e, em seguida, clicar no botão “Save Snippet”.
Esse código ativará o suporte a imagens em destaque para posts e páginas. Agora o senhor pode acessar o post ou a página editor de blocose o senhor verá a opção de imagem em destaque ativada.
No entanto, quando o senhor define uma imagem em destaque, ela não será exibida automaticamente no tema do WordPress. Para exibir imagens em destaque em seu tema, o senhor precisa editar seus modelos e adicionar esta linha de código onde deseja exibir a imagem em destaque:
<?php the_post_thumbnail(); ?>
Os arquivos nos quais o senhor adiciona o código acima variam de acordo com o seu tema. O senhor deverá adicionar o código dentro do loop da postagem.
Relacionado: Veja o Folha de dicas sobre hierarquia de temas do WordPress para entender melhor como os temas funcionam.
Configure o tamanho de suas imagens em destaque
O código acima é a função básica de que o senhor precisa para adicionar suporte a imagens em destaque e exibir imagens em destaque em seu tema. Para definir o tamanho da imagem para as imagens em destaque que o senhor carrega, é necessário adicionar esta linha de código ao arquivo functions.php ou ao snippet WPCode.
set_post_thumbnail_size( 50, 50);
Os parâmetros para set_post_thumbnail_size estão nesta ordem: largura, altura.
O senhor também pode definir tamanhos de imagem adicionais para usar com a função_post_thumbnail(). Por exemplo:
// Image size for single posts
add_image_size( 'single-post-thumbnail', 590, 180 );
Neste exemplo, adicionamos um novo tamanho de imagem chamado single-post-thumbnail com 590px de largura e 180px de altura.
Para usar esse tamanho de imagem em nosso tema, ainda precisaremos adicioná-lo ao arquivo de tema apropriado.
Para saber mais, consulte nosso guia sobre como adicionar tamanhos de imagem adicionais no WordPress para obter mais detalhes.
Se o senhor tiver carregado imagens em destaque anteriormente, mas elas ainda estiverem aparecendo em outro tamanho, será necessário 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 um tamanho de imagem específico.
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
Essa é a versão detalhada da funcionalidade completa. Há muitas outras coisas que o senhor pode fazer com as imagens em destaque.
Perguntas frequentes sobre imagens em destaque no WordPress
Como iniciante, o senhor pode se deparar com perguntas ou problemas ao usar imagens em destaque em seu blog. Aqui estão algumas das perguntas mais frequentes sobre imagens em destaque.
1. Por que a imagem em destaque está aparecendo duas vezes em minhas publicações?
Às vezes, os iniciantes adicionam uma imagem em destaque e depois adicionam a mesma imagem na parte de conteúdo do editor de postagens.
Tudo o que o senhor precisa fazer é remover a imagem da área de conteúdo e usar somente a meta box de imagem em destaque para adicionar a imagem em destaque. Para saber mais sobre esse 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 seus posts ou páginas. Normalmente, elas são usadas para separar diferentes seções de uma página ou publicação longa.
A imagem em destaque é a imagem representativa de um artigo. Ela aparece antes ou ao lado do conteúdo, mas não dentro do artigo em si.
Para saber mais sobre esse tópico, consulte nosso guia sobre a diferença entre a imagem de capa e a imagem em destaque no WordPress.
3. Como exibir imagens em destaque ao lado de posts recentes do blog?
O editor de blocos do WordPress vem com um bloco “Latest Posts” que permite que o senhor exiba posts recentes com miniaturas de posts.
O senhor também pode exibir postagens recentes com miniaturas em widgets da barra lateral usando o bloco Widget de postagens recentes estendido plugin. Para obter mais detalhes, consulte nosso artigo sobre Como exibir posts recentes no WordPress.
4. Como lembrar os autores de adicionar imagens 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 o senhor ou outro autor do seu blog esquecer de definir uma imagem e publicar o post, ele aparecerá sem uma imagem em destaque. Isso terá uma aparência ruim e inconsistente, o que não é bom para a experiência do usuário.
O senhor pode instalar e ativar o Lista de verificação do PublishPress que mostrará uma notificação quando alguém tentar publicar um post sem uma imagem em destaque.
Para obter mais detalhes, consulte nosso artigo sobre Como exigir imagens em destaque no WordPress.
Esperamos que este artigo tenha ajudado o senhor a aprender como adicionar imagens em destaque ou miniaturas de posts no WordPress. Talvez o senhor também queira dar uma olhada em nosso guia para iniciantes em SEO de imagens e nossas escolhas de especialistas para o melhores plug-ins de mídia social para sites WordPress.
Se o senhor gostou deste artigo, por favor, assine o nosso Canal do YouTube para ver tutoriais em vídeo sobre o WordPress. O senhor também pode nos encontrar em Twitter e Facebook.
