Se você é daqueles blogueiros que gosta de colocar imagens em seus artigos, então o uso de thumbnails é sem dúvida essencial para si. Os thumbnails de postagens ou imagens em destaque foram uma das grandes implementações que o WordPress sofreu nos últimos anos, dando origem a milhares de templates para magazines e outros formatos que até então eram escassos. Basicamente um thumbnail é uma imagem que você carrega juntamente com seu artigo, e que depois aparece lado-a-lado com esse mesmo artigo no template do seu blog.
A Escola WordPress por exemplo, tem uma imagem ao lado de cada postagem na homepage:
No entanto, caso além de uma imagem desse tipo você deseje colocar uma imagem também dentro do próprio artigo, ocupando a largura completa da sua área de posts, isso também é possível de fazer usando funções do próprio WordPress.
FUNÇÕES DO TEMPLATE
Abra o ficheiro functions.php do seu template e acrescente nele o seguinte código:
// post thumbnail support
if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'post-thumb', 630, 270 );
add_image_size( 'home-thumb', 200, 270, true );
}
O que este código faz é adicionar o suporte a thumbnails de artigos e ao mesmo tempo notificar o WordPress para criar dois thumbnails com medidas difentes. A variável “post-thumb” tem 630px de largura por 270px de altura e a variável “home-thumb” tem 200px por 270px – você pode mudar o nome das variáveis e as dimensões dos formatos para os que mais desejar.
Se desejar pode ainda adicionar mais formatos e variáveis. A variável final “home-thumb” inclui um “true” para dizer ao WordPress para cortar essa imagem e guardá-la em separado da outra.
COLOCAR AS IMAGENS NO SEU TEMPLATE
Para colocar a imagem mais pequena na homepage do seu template, abra o seu ficheiro index.php e entre o ciclo de postagens coloque o seguinte:
<?php if ( has_post_thumbnail()) the_post_thumbnail('home-thumb'); ?>
E para colocar a imagem maior dentro dos seus artigos, abra o seu ficheiro single.php e entre o ciclo de artigos coloque o seguinte:
<?php if ( has_post_thumbnail()) the_post_thumbnail('post-thumb'); ?>
CARREGAR AS IMAGENS
Depois adicionar o código anterior ao seu ficheiro functions.php você irá ver uma nova opção do lado direito do seu menu de postagens, chamado “Featured Image”. Se clicar, poderá depois seleccionar a opção “Set Featured Image” para carregar uma imagem que ficará em destaque na homepage do seu blog.
Assim que você tenha carregado a imagem, basta clicar em “Set as featured image” e ela irá aparecer deste jeito:
E está feito. Obviamente que este truque pode ser usado de diversas formas, para criar sites como o Ocioso ou simplesmente para ilustrar suas postagens de forma mais atrativa. Este método é também bastante mais rápido do que os métodos tradicionais, uma vez que o próprio WordPress trata de cortar as imagens de acordo com as medidas que você pede.
Até Já!
João Vitor Mateus
Ótima dica! Muito bom seu blog Paulo, continue assim!
Caio Eduardo
Ola, estou criando um blog, ainda em fase de testes, me interessei por este artigo, porém não consegui fazer com que a imagem fique ao lado esquerdo de cada postagem da homepage, será que inseri o codigo no lugar errado ? se por gentielza puder me dar uma dica, muito obrigado Paulo.
Sergio Felipe
cria uma classe tipo assim
css
. thumb { floa t: left;}
ja fiz isto em meu blog, deu certo tenta ai
Caio Eduardo
ok, eu consegui, mas agora o problema é que aparece tanto na homepage (destaque) como no post completo, gostaria que aparecesse somente na homepage, se tiver mais alguma dica, obrigado.
Rodrigues
O meu desejo é como o Caio Eduardo, quero retirar a imagem de dentro do post, fazendo com que somente apareça na home page do blog, como faço? Ja tentei varias dicas e não funciona. Abraços
Luciana souza
Pessoal,
É só não colocar no “single.php”…
Daí não aparece no posto completo. Pelo menos foi o que eu entendi!
Abrs
Jeff
Ele não está fazendo o crop, está apenas redimensionando a imagem =/
jorge
Estou com o mesmo problema que os colegas acima, quero somente deixar a imagem na home page e no post completo não. Alguma alma caridosa ai pra nos ajudar?
Rodrigo
Caro Paulo,
Como eu faço para pegar a URL (caminho completo) do thumbnail do post?
Muito obrigado.
Wagner Amaro
Quando mando atualizar o post está aparecendo o seguinte erro:
Warning: Cannot modify header information – headers already sent by (output started at /home/wagnerwebdesigner/www/wp-content/themes/wagneramaro/functions.php:1) in /home/wagnerwebdesigner/www/wp-includes/pluggable.php on line 866
Marco Aurélio
Caro Paulo,
Sou novato no WordPress e não consegui fazer aparecer a imagem. Onde estou errando?
Marcelo, O Pai Nerd
Muito obrigado Paulo, você salvou o meu blog!
Wagner
Estou montando um novo tema, e preciso criar um loop onde o primeiro thumb é diferente nos demais, como faço isso? Já inseri no loop este que vc passou mas não tive sucesso. Poderiam me ajudar?