Trabalhando com Thumbnail no WordPress

  • 2 min de leitura
Foto de Lucas Tavares
wordpress codigos e truques

Thumbnail são imagens em miniaturas que ficam associadas a um post. Também é conhecida como Imagem em Destaque. Elas são muito importantes para ajudar a ilustrar os artigos do nossos blogs. Ensinarei a forma correta de utilizar este recurso e também como ela é definida pelo Painel de Administração do WordPress.

A primeira coisa que você deve saber é que o Tema é o responsável por mostrar essa Imagem em Destaque. Neste artigo será mostrado o passo a passo para implementar o Thumbnail em um template do WordPress, mesmo que ele não tenha suporte nativo para isso.

A primeira coisa que você deve fazer é ativar o Thumbnail. No functions.php do seu tema, adicione o seguinte código:

add_theme_support( 'post-thumbnails');

Caso deseja ativar eles somente em determinados Post Type, basta fazer assim:

add_theme_support('post-thumbnails', array('post','page')); //Ativa o thumbnails nos Post Types 'post' e 'page'.
add_theme_support('post-thumbnails', array('produto')); //Ativa o thumbnails SOMENTE no Post Type 'produto'.
add_theme_support( 'post-thumbnails'); //Ativa o thumbnails em TODOS os Post Types

Feito isso, você poderá chamar os Thumbnails no seu tema usando o código:

<?php if(has_post_thumbnail( )): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php endif; ?>

Esse código deve ficar dentro do Loop do Post do WordPress. Normalmente, no arquivo index.php ou post-content.php.

Mostrar uma imagem caso o post não tenha Thumbnail definida

Por questões de estética é recomendável que possua uma espécie de "Thumbnail Default", para os casos em que não seja definida uma Thumbnail para um determinado post. Para fazer isso, basta usar o código abaixo:

<?php if(has_post_thumbnail( )): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else: ?>
<img alt="" src="<?php echo get_template_directory_uri() ?>/images/thumbnail-default.jpg" />
<?php endif; ?>

Ele verica se há uma Thumbnail definida para o post, caso haja, ele a imprime, caso contrário, ele mostra uma imagem.

Como inserir um Thumbnail no Post do WordPress

Depois de ter adicionado o código que chama essas Imagens em Miniatura, você deve definir em cada Post qual imagem vai representá-lo.

Passos para escolher o Thumbnail (Ou Imagem em Destaque)

1. Na tela de edição do Post, clique em "Set featured image" (Selecionar Imagem em Destaque), no lado direto da tela.

Definindo o Thumbnail no WordPress

2. Selecione uma imagem e clique em "Set featured image" (Selecionar Imagem em Destaque)


Selecionando Thumbnail no WordPress

Alguma dúvida? Deixa suas dúvidas na seção de comentários abaixo.

20 Comentários para “Trabalhando com Thumbnail no WordPress
  1. Bom dia.
    Usando este código eu consegui quase o que queria, depois de imprementado ele gera essa linha: class="attachment-thumbnail size-thumbnail wp-post-image" alt="">

    e eu gostaria de gerar essa: class="attachment-lista-thumbnail-download size-lista-thumbnail-download wp-post-image" alt="">

    É possível?

    1. Gravatar
      Autor do site

      Olá Juraci,

      É possível sim, basta fazer assim:

      the_post_thumbnail('post-thumbnail', array( 'class' => 'classe1 classe2 classe3' ));
  2. Este tuto me ajudou bastante. Valeu!

    1. Gravatar
      Autor do site

      Olá Leandro,

      Fico feliz que ele tenha ajudado você. 🙂

  3. Olá, muito esclarecedor seu post :))

    No entanto, só consegui adicionar Thumbnail no post em si, mas nas barras laterais (no arquivo do blog) e nos posts relacionados ainda estão aparecendo sem a imagem da Thumb... O que devo fazer? Vc sabe como me ajudar?

    1. Gravatar
      Autor do site

      Olá Luiz,

      Você precisa criar widgets específicos em seu tema que adicionam a imagem junto do post.

  4. Tenho um site porno e essa dica vai ser muito útil pra mim. Ao definir uma Imagem destacado padrão na hora de compartilhar nas redes sociais. Entretanto não estou conseguindo implementar essa linha de código no meu tema. O trecho de Thumb esta assim:

    <img src="" alt="" width="179" height="142" />
    <img src="/images/pic_post1.jpg" width="179" height="142" alt="image" />

    1. Gravatar
      Autor do site

      Olá Silvio,

      São duas imagens destacadas?

  5. Queria saber como faço para aplicar essa função em uma imagem que foi colocada manualmente?

    Parecido com o que o timthumb faz.

    1. Gravatar
      Autor do site

      Olá Alexandre,

      Você quer poder exibir qualquer imagem, é isso? Então dá uma olhada na função wp_get_attachment_image(). Acredito que ela faça o que você quer!

      Atenciosamente.

  6. Boa noite, quando faço um post com imagem em destaque, o link só aparece no titulo do post e não na foto. Alguem sabe como eu faço para que o post coloque o linque nos dois quando ele for publicado?

    1. Gravatar
      Autor do site

      Olá Fabiano,

      Neste caso vai ser necessário fazer uma alteração especifica para seu tema. Tem que procurar no arquivo single.php o local onde exibe a imagem e adicionar o link.

      Atenciosamente.

  7. Srs, ao usar o link "Escolher imagem destacada" o wp seleciona minha imagem, PORÉM ela aparece na parte SUPERIOR do post, Antes do H1, em um tamanho Gigante......apesar de nas barras laterais e rodapés onde existem links de posts, aparecer normalmente ! Como fazer para q a imagem NAO apareça no post?

    1. Gravatar
      Autor do site

      Olá Luiz,

      Isso vai depender do seu tema, talvez seja só remover do arquivo single.php a chamada da função the_post_thumbnail() ou ele pode possuir uma opção para desativar a exibição desta imagem.

      Parece que esse é um tema do ThemeForest, por isso veja se os desenvolvedores possuem um forum de suporte para ajudá-lo.

      Espero ter ajudado.

  8. como faço pra usar isto no bootstrap?

    1. Gravatar
      Autor do site

      Olá Valmir,

      Como o Bootstrap é uma framework de CSS basta adicionar a classe dele que você deseja usar na imagem. Por exemplo:

      <?php 
      the_post_thumbnail('thumbnail',array('class'=>'img-responsive')); 
      //img-responsive é uma classe do Bootstrap 
      ?>

      Espero ter ajudado.

    2. Como adicionar mais uma classe ao código abaixo?
      'img-responsive'));
      //img-responsive é uma classe do Bootstrap
      ?>

    3. Gravatar
      Autor do site

      Olá Fábio,

      As classes ficam uma ao lado da outra, assim:

      array('class'=>'img-responsive nova-classe outra-classe')
  9. Eu gostaria da ajuda de vocês para me ajudar a configurar a imagem no post por favor eu Coloco a imagem mas ela não aparece

    Aguardo resposta

-

-

-

-

*Consulte condições no site

Hopedagem com até

-70

+ 3 Meses Grátis