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 TypesFeito 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.
2. Selecione uma imagem e clique em "Set featured image" (Selecionar Imagem em Destaque)
Alguma dúvida? Deixa suas dúvidas na seção de comentários abaixo.
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?
Olá Juraci,
É possível sim, basta fazer assim:
the_post_thumbnail('post-thumbnail', array( 'class' => 'classe1 classe2 classe3' ));Este tuto me ajudou bastante. Valeu!
Olá Leandro,
Fico feliz que ele tenha ajudado você. 🙂
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?
Olá Luiz,
Você precisa criar widgets específicos em seu tema que adicionam a imagem junto do post.
Ola, boa tarde!
Gostaria de inserir postagem dentro de uma pagina com categorias.
Mas não sei os processos para criar isso.
Site para exemplo.
http://mytubepress.com/demostration/bestia/categories/
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" />
Olá Silvio,
São duas imagens destacadas?
Queria saber como faço para aplicar essa função em uma imagem que foi colocada manualmente?
Parecido com o que o timthumb faz.
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.
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?
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.
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?
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.
como faço pra usar isto no bootstrap?
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.
Como adicionar mais uma classe ao código abaixo?
'img-responsive'));
//img-responsive é uma classe do Bootstrap
?>
Olá Fábio,
As classes ficam uma ao lado da outra, assim:
array('class'=>'img-responsive nova-classe outra-classe')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