HostGator Promoção (728x60)

Trabalhando com Thumbnail no WordPress

trabalhando com thumbnail wordpress

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:

1
add_theme_support( 'post-thumbnails');
add_theme_support( 'post-thumbnails');

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

1
2
3
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
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:

1
2
3
<?php if(has_post_thumbnail( )): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php endif; ?>
<?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:

1
2
3
4
5
<?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; ?>
<?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.

14 Comentários para “Trabalhando com Thumbnail no WordPress

    1. Matheus

    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

    1. valmir do carmo

    como faço pra usar isto no bootstrap?

      1. Lucas Tavares
      2. (Autor do Post)

      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.

        1. Fabio Silva

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

          1. Lucas Tavares
          2. (Autor do Post)

          Olá Fábio,

          As classes ficam uma ao lado da outra, assim:

          array('class'=>'img-responsive nova-classe outra-classe')

    1. luiz

    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. Lucas Tavares
      2. (Autor do Post)

      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.

    1. fabianorachadel

    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. Lucas Tavares
      2. (Autor do Post)

      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.

    1. Alexandre

    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. Lucas Tavares
      2. (Autor do Post)

      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.

    1. Sílvio

    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. Lucas Tavares
      2. (Autor do Post)

      Olá Silvio,

      São duas imagens destacadas?

Deixe um comentário

(required)
(required)