Tutorial Post Thumbnail (imagem destacada)

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.

5 dicas para post thumbnail
5 dicas para post thumbnail

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.

  1. Selecione as configurações de post no topo do menu lateral
  2. Clique em definir imagem destacada
como adicionar imagens destacada no novo editor WordPress
como adicionar imagens destacada no novo editor WordPress

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.

Enviando uma imagem para ser o post thumbnail
Enviando uma imagem para ser o post Thumbnail

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:

Ou confira uma playlist dedicada a WordPress no meu canal do Youtube:


Publicado

em

,

por

Comentários

30 respostas para “Tutorial Post Thumbnail (imagem destacada)”

  1. Avatar de Mauricio Prandi

    eu coloquei o código no functions.php e agora não estou mais conseguindo acessar minha área administrativa. Está aparecendo a mensagem:

    Parse error: syntax error, unexpected ‘<' in /home/blogganh/public_html/wp-content/themes/Runone/functions.php on line 11

    O que eu faço?? Como conserto este erro ??

    Por favor me ajude, pois não faço idéia do que tenho que fazer para ter de volta meu blog.

    1. Avatar de Fellyph

      Olá Mauricio pode ser algum desses problemas :
      – ter algum “;” faltando
      – depois do ?> ter algum espaço( remova todos os espaços depois do “?>”, você também pode deixar sua taga ” no final do seu arquivo functions.php
      – por último só pode ter uma tag no functions.php

      *se não funcionar cola o código do functions.php no pastie.org e manda o link

  2. Avatar de Mauricio Prandi

    Deu certo Fellyph, meu blog voltou a funcionar normalmente.

    Valeu !

  3. Avatar de Agnaldo Luz
    Agnaldo Luz

    olá Fellyph, eu quero que pegue apenas os três últimos posts, como faço?

    1. Avatar de Fellyph

      Olá Agnaldo antes do loop vc precisa adicionar um filtro ao loop, com a função query_posts http://codex.wordpress.org/functions_reference/query_posts

  4. Avatar de Caroline Varizo

    Souuu hiper leiga, pra não dizer ignorante, quando se trata de tecnologia/computação/informática. Ai não entendi direito qual a utilidade: tipo, onde vai aparecer no meu blog e exatamente pra que serve. Mas o meu maior problema é que você cita o wordpress na versão 3.0 e 3.1, e como faço pra saber qual a versão do meu?
    E caso não seja essa, como fazer um update?
    Ai por favor me ajuda. Em todos esses fóruns e pgs de ajudas q já entrei falando sobre mil e uma dúvida, nínguém nunca me respondeu!!!!

  5. Avatar de Fellyph

    Olá Caroline sobre a questão do Thumbnail é uma funcionalidade de vincular uma imagem a um post, uma imagem que é desvinculada ao texto do post. Então quando vc cria uma arquivo para seu tema o index.php ou single.php, por exemplo. Dentro do loop onde são carregadas as informações como título do post, conteúdo ou data. Além dessas infos podemos carregar o thumbnail(imagem destacada) que vc adicionou na hora que criou o post.

    Um exemplo prático no site :
    http://www.rosenbaum.com.br/

    As imagens na parte inferior da home são thumbnails. No código da home tem chamadas para exibir thumbnail do post.

    A versão do wordpress acho que o mais fácil é acessando o painel do seu blog como na imagem a seguir : http://www.thepicky.com/images/2009/09/wordpress-dashboard.png

    Copiando do doc wordpress:

    Actualização Automática

    Se está a actualizar uma versão 2.7 ou superior, pode usar a actualização automática:

    Abra o ficheiro wp-admin/update-core.php no seu browser e siga as instruções.
    Queria mais talvez? Não há!

    Actualização Manual

    Antes de actualizar o quu quer que seja, verifique que fez cópias de segurança dos ficheiros que modificou, por exemplo index.php.
    Elimine os ficheiros do WordPress, guardando os que modificou.
    Faça upload dos novos ficheiros.
    Abra /wp-admin/upgrade.php no seu browser.

  6. Avatar de Eder
    Eder

    Olá Fellyph,
    Manjo pouco de wordpress e menos ainda de php.
    Queria uma ajuda se possível. Estou montando um portfólio e em minhas publicações a imagem destacada do thumbnail está entrando automaticamente no post, mostrando a imagem duplicada na postagem.
    Você conhece qual seria a raiz disso que pra mim está sendo um problema?

    1. Avatar de Fellyph

      É necessário saber em que comento o thumbnail aparece, se é na home ou na single, por exemplo.
      Ai neste caso editar o respectivo arquivo do tema que está aparecendo dois thumbnails pode ser que a função está sendo acionada mais de uma vez.

  7. Avatar de Rafael Gonçalves

    Oi Felipe, estou com o mesmo problema indicado pelo Eder… as imagens aparecem duplicadas no Post, depois que eu insiro a imagem destacada. Utilizo o tema Elegantzine.

    Poderia sugerir alguma soluçao?

    Valeu.

  8. Avatar de Rafael Gonçalves

    perguntei… e a curiosidade apesar de ser leigo me ajudou a encontrar o problema… Muti feliz aqui porque comecei a usar WP a menos de duas semanas.

    Acessei a funçao post-single.php , e apaguei o codigo abaixo:

    get_option(‘featured_image_width_single’), $theme->get_option(‘featured_image_height_single’)),
    array(“class” => $theme->get_option(‘featured_image_position_single’) . ” featured_image”)
    );
    }
    ?>

    Fiz um teste aqui e funcionou…

    O que me diz Farley? Sera que terei problemas em outras funçoes?

  9. Avatar de Fellyph

    Rafael acho que falta mais alguma coisa nessa linha de código que vc passou no comentário. tem “)” a mais. Caso do meu exemplo eu crio um tema do zero então os conflitos são mais fáceis de administrar. Mas vc pode navegar entre as páginas para verificar algum tipo de problema.

  10. Avatar de Rodrigo
    Rodrigo

    Olá, estou tendo problemas para alinhar a thumbnail com o texto do post. Ao invez de o texto aparecer alinhado, logo ao lado da thum (Tem espaço), ele vai para a proxima linha. O que posso fazer?
    Outra coisa, ja tem no css o seguitne codigo: float:left;
    mas nada ainda! :/
    O que posso fazer? obrigado.

  11. Avatar de Renato Oliveira

    Opa!!!

    Rolou perfeitamente, very thanks guy!!!

  12. Avatar de Ste Costa

    Olá.
    usei o auto post thumbnail sem saber no que ia dar.
    Como faço para tirar os thumbnails???? Não quero que fique aparecendo mais e não sei tirar =(

    1. Avatar de Fellyph

      Olá Ste Costa,

      No caso do plugin vc pode desabilitar, ai ele para de exibir o thumbnail.

  13. Avatar de vanessa
    vanessa

    Oi Fellyph,
    eu estou com uma dúvida faz muito tempo e não consigo achar a resposta em lugar nenhum,
    eu uso um tema no meu wordpress que os thumbs tem um formato quadrado, eu não gosto disso pq eles distorcem a imagem, eu gostaria que eles ficassem no formato retangular, proporcional à foto,
    aqui neste post eu descobri como alterar os tamanhos dos thumbs, mas tenho uma dúvida, eu tenho foto tanto vertical quanto horizontal, eu consigo adiconar no functions.php um novo tamanho em que eu coloque o tamanho de um dos lados da foto e outro lado ele faça um cálculo proporcional? Por exemplo, um thumb em que a aresta maior seja 200px e a menor seja calculada automática, pq desta forma ele funcionária tanto para imagens verticais como para horizontais.
    obrigada!

  14. Avatar de Fellyph

    Olá Vanessa, uma opção que você pode cadastrar dois tamanhos e utilizar campos customizados. Ai vc cadastra o valor horizontal ou vertical, na página que vc carrega o thumbnail vc adiciona uma condicional para carregar tamanhos diferentes.

  15. Avatar de vanessavolk

    Oi Fellyph
    Obrigada pela sua ajuda! Eu conseguira adicionar esta condicional apenas se fosse criar uma página nova ou um post com este thumb, certo?
    no caso dos thumbs automáticos tb? por exemplos, os que são resultado de busca, ou qndo alguém clica em uma categoria,
    nestes casos eu consigo alterar o tamanho dos thumbs tb?
    obrigada!

  16. Avatar de thiagotasca
    thiagotasca

    Eder, pra resolver esse seu problema de imagens duplicadas, não faça o upload da imagem destacada (thumbnail) pelo post onde vc colocou a galeria de fotos, faz o upload da thumb pelo painel midias do wordpress, em seguida vai no seu post e clica em adicionar a imagem destacada e vai na aba “arquivos de midia”, e usa a imagem que vc upo por la, ai ela não duplica na galeria !

  17. Avatar de jardelskt

    da hora o post, mas tenho uma duvida… se puderem me ajudar?

    estou colocando um tamanho de imagem 310 x 160, mas quando adiciono uma imagem destacada ela não preenche o espaço.
    a imagem não está cortando ela esta diminuindo na proporção, como faço pra ela cortar no tamanho que estou colocando?

  18. Avatar de Jacson Leite
    Jacson Leite

    Muito obrigado pelo post. Até hoje usava classe para pegar um imagem destacada. Vou testar esse procedimento pois facilitará o uso do painel por parte dos clientes.

  19. Avatar de Marcelo

    Que tuto espetáculo. É um presente pra la de especial. Muito obrigado

  20. Avatar de Lucas
    Lucas

    Olá, Fellyph! Como vai? Estou usando o tema twenty twelve na versão 3.8.1 do WP e gostaria que a imagem destacada aparecesse só na listagem dos post. E que ao abrir o post a imagem destacada não aparecesse. Tem ideia de como eu posso fazer isso?

  21. Avatar de fabianorachadel

    ola pessoal, estou com uma dificuldade e não sei como resolver… Eu quando faço um post com imagem destaque no WP, e coloco ele com categoria, o link do post só aparece no titulo do post, mais eu queria que o link também estivesse na imagem. alguem pode me ajudar?

  22. Avatar de Fellyph

    Olá Fabiano, você tem que personalizar o tema e adicionar o link também na imagem.

  23. Avatar de Edna Nogueira

    Oi! Acabei de fazer e deu tudo certo. Obrigada 🙂

  24. Avatar de Gabriel

    Olá Fellyph boas dicas.
    O painel de imagem destacada está aparecendo, mas quando adiciono a imagem não aparece e não vincula ao post. Já mexi nas permissões de pasta dos diretórios de uploads do wordpress e mesmo assim não aparece. Saberia dizer como resolvo isso ?

    Obrigado

    1. Avatar de Fellyph

      Ola Gabriel vc esta tentando visualizar na sua single page? Se sim, verifica seu template da single page.

  25. Avatar de Anderson Martins
    Anderson Martins

    Precisava puxar alem da imagem em destaque mas tambem video em destaque

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *