Um dos recursos do WordPress que todo mundo fica ansioso em aprender é post thumbnail ou Imagem destacada, este recurso permite adicionar uma imagem vinculada ao post que podemos chamar em qualquer momento da nossa aplicação.
Imagens ajudam a valorizar o seu conteúdo e post thumbnail ou imagens destacadas vinculam uma imagem ao seu post que pode ser lido pelo seu tema em qualquer situação. Geralmente esse item aparece na listagem de posts ou no topo da página single como um banner.
Adicionando Post Thumbnail no seu tema WordPress
Para habilitar o recurso que apareceu desde as versões 2.9 do WordPress temos que adicionar no nosso arquivo functions.php o seguinte código:
add_theme_support( 'post-thumbnails' );
Code language: JavaScript (javascript)
Como adicionar código no WordPress?
Primeiramente, se iremos realizar uma alteração em produção precisamos realizar um backup da nossa aplicação. Especialmente se você não está familiarizado com código.
A opção mais simples é alterando o código do functions.php
esse processo é válido quando você possui um tema que não tem atualizações constantes. Caso contrário um tema filho ou um plugin será a melhor opção, porque as suas alterações não serão afetadas caso o tema principal seja atualizado.
Agora vamos acessar o painel do WordPress, crie um post e adicionar uma imagem destacada. Para isso no novo editor de blocos, a partir da versão 5.0 do WordPress a seleção de imagem destacada fica no menu lateral na área de edição de posts.
- Selecione as configurações de post no topo do menu lateral
- Clique em definir imagem destacada
Faça o upload de uma imagem e selecione a opção usar como imagem destacada(post thumbnail), para isso vamos clicar em definir imagem destacada e selecionar uma imagem da galeria ou enviar um novo arquivo.
Lembre-se caso o post já estiver publicado não esqueça de atualizá-lo. Adicionando a imagem destacada não significa, que a imagem já irá aparecer no seu post. Para a imagem aparecer no seu post é preciso chamar a template tag the_post_thumbnail()
em algum lugar do seu loop, no arquivo da página que você quer que apareça: index.php, single.php, category.php, search.php… O importante é estar no loop.
Carregando post thumbnail em um template
Agora vamos aplicar um thumbnail ao nosso tema no arquivo index.php
adicionamos o seguinte código:
<!-- get_header pra chamar o header.php -->
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<!-- em nosso loop vamos exibir apenas título e thumbnail -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="post">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a>
</h2>
<div class="entry">
<?php the_post_thumbnail(); ?>
</div>
</div>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<!-- get_footer pra chamar o footer.php -->
<!-- esse tema não tem sidebar chamo apenas o footer -->
<?php get_footer(); ?>
Code language: HTML, XML (xml)
No código acima chamamos um thumbnail ou com tamanho original, ou com o tamanho padrão caso tenha sido definido no admin. É um que puxa o título e o thumbnail, pode definir o tamanho do thumbnail quando carregado passando os seguintes parâmetros:
- the_post_thumbnail(‘thumbnail’): resolução thumbnail (default 150px x 150px )
- the_post_thumbnail(‘medium’): resolução média (default 300px x 300px max)
- the_post_thumbnail(‘large’): resolução alta (default 640px x 640px max)
- the_post_thumbnail( array(100,100) ): tamanhos personalizados onde passamos um
array
com os valores de altura e largura.
Carregando imagem destacada em um loop
Como no exemplo abaixo, nesse caso irei utilizar o mesmo código apenas modificando o esquema no loop:
<?php while ( have_posts() ) : the_post(); ?>
<div class="content">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a>
</h2>
<div class="entry">
<?php the_post_thumbnail(array(350,180)); ?>
</div>
</div>
<?php endwhile; ?>
Code language: HTML, XML (xml)
Nesse exemplo chamamos the_post_thumbnail(array(350,180))
carregamos um thumbnail com 350px de largura e 180px de altura.
Criando tamanhos personalizados para imagens destacadas
Os tamanhos padrão de imagem do WordPress são “Thumbnail” (miniatura), “Medium” (padrão), “Large” e “Full Size” (o tamanho original da imagem que você carregou). Esses tamanhos de imagem podem ser configurados no painel Mídia de administração do WordPress em > Configurações > Mídia. Você também pode definir o seu próprio tamanho com a função add_image_size
esta função é adicionada no arquivo functions.php.
A função add_image_size
recebe os seguintes parâmetros: add_image_size( 'nome', largura, altura , crop : true/false )
Considerando as funções adicionadas anteriormente, agora vamos adicionar um tamanho personalizado “meu-thumb” no nosso arquivo functions.php
ele vai ficar da seguinte forma:
<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'meu-thumb', 320, 280, true );
?>
Code language: HTML, XML (xml)
Resumindo a história adicionamos um novo tamanho com 320px x 280px se a imagem não atender a proporção vai ser cortada.
Carregando tamanhos personalizados via post thumbnail
Agora vamos chamar um thumb
com o tamanho que criamos “meu-thumb”:
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<div class="post">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
</h2>
<div class="entry"><?php the_post_thumbnail('meu-thumb'); ?></div>
</div>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>
Code language: HTML, XML (xml)
Verificando se o post tem imagem destacada
Dentro do WordPress temos a função has_post_thumbnail()
com ela podemos verificar se o post possui um thumbnail ou não. Assim adicionar um tratamento para o tal, por exemplo, carregar uma imagem extra. Para isso utilizamos o seguinte código:
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
// use uma imagem alternativa
}
Code language: JavaScript (javascript)
Para mais tutoriais sobre WordPress confira a página da categoria, ou alguns dos posts relacionados:
- Como utilizar Push notification com WordPress
- 5 formas de contribuir com a plataforma WordPress
- Como definir a largura máxima das imagens do WordPress
Ou confira uma playlist dedicada a WordPress no meu canal do Youtube:
Deixe um comentário para Fellyph Cancelar resposta