Tags & Hacks Tutoriais

Post Thumbnail

8 de June de 2010

Mostra uma miniatura da imagem inserida no post. Pode ser usado nos arquivos index.php, archive.php e search.php.
Requer WordPress 2.9 ou superior.

01. O primeiro passo é adicionar a função post thumbnail ao seu tema. Abra o arquivo functions.php do seu tema (se ainda não tem um crie um arquivo de texto e salve como functions.php) e adicione:

<?php if ( function_exists( 'add_theme_support' ) ) :
add_theme_support( 'post-thumbnails' );
endif; ?>

02. Feito isso, sempre que for escrever/editar um post, aparecerá a opção "Post Thumbnail" abaixo das categorias, como mostra imagem:

Clique em "Set thumbnail", depois em "Gallery", escolha uma das imagens ( ou se não tiver nenhuma você pode procurar a que quiser em "Media Library") e clique em "Use as thumbnail":

03. Para que a miniatura da imagem apareça ao lado dos seus posts no arquivo index.php e/ou archive.php e search.php, adicione antes da tag do título dos posts ou onde desejar:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if(has_post_thumbnail()) {
the_post_thumbnail(array(120,120), array( 'class' => 'thumb' ));
} else {echo '<img src="/imagens/semimagem.jpg" class="thumb"/>';
}?></a>

Sendo que "120,120" definem largura e altura.

No lugar do endereço: /imagens/semimagem.jpg você vai colocar o endereço de uma imagem default para que seja mostrada quando o post não tiver imagem anexada.

Thumb é a classe que adicionei ao meu CSS, você pode usar esse como exempo e editar como quiser:

.thumb{
float: left;
margin: 1px 8px 5px 0;
padding: 4px;
background:#f8f8f8;
border: 1px solid #c0c0c0;
}

O resultado desse tutorial será esse:

heart


Leia Também

Deixe seu comentário

09/05/2011 ・ 07:36

Meu function já tem os functions normais e eu uso wordpress. meu servidor agora não é apache e o erro continua

31/08/2011 ・ 11:25

Eu instalei no meu site e tá dando erro..
Para logar, o seguinte erro:

Warning: Cannot modify header information – headers already sent by (output started at /home/theocbrc/public_html/wp-content/themes/5.0/functions.php:5) in /home/theocbrc/public_html/wp-login.php on line 353

Warning: Cannot modify header information – headers already sent by (output started at /home/theocbrc/public_html/wp-content/themes/5.0/functions.php:5) in /home/theocbrc/public_html/wp-login.php on line 365

Por favor, me ajuda o mais rápido possível.
Bjs.

Rafaella
15/10/2012 ・ 14:04

Hey! Eu fiz, e funcionou, mas queria saber como faço pra ter aquele continue lendo ao invés do post todo?

23/09/2013 ・ 18:57

Oi, tentei com o plugin e sem o plugin mais não consegui 🙁
Criei o function mais nada.

02/02/2014 ・ 23:37

Oi! não consigo enviar as fotos para usar.. tem como ao invés de fazer o upload da foto eu usar algum link? não acho essa opção 🙁

    03/02/2014 ・ 08:13

    Na página em que você escreve/edita um post, em cima da caixa de texto procure por “Add Media”.

      03/02/2014 ・ 12:50

      Muito obrigada por responder (: mas no post eu já adiciono a foto por URL como vc indicou.. Só que não consigo adicionar é a foto como thumbnail, entende? Só tem a opção pra foto thumbnail se enviar .. E dá erro quando envio.. E quando vou olhar a foto enviou porém não aparece na biblioteca de fotos! Ontem passei o dia inteiro buscando soluções e não encontrei.. Quando abro configurações > mídia, não tem a opção de ver o endereço que está enviando a foto.. Só tem para marcar pra organizar em pastas com data.. Já não sei o que fazer :/
      Não tem nenhuma forma “automática” de escolher como thumbnail a primeira foto de cada post? Obg por ajudar! Beijo

        04/02/2014 ・ 10:49

        Desde que esse tutorial foi publicado o WP sofreu algumas atualizações. Agora para adicionar um thumbnail você clica em “Set featured image” que fica na coluna da direta da edição dos posts. Veja se consegue.

06/02/2014 ・ 14:04

Olha, trouxe 4 prints pra você entender melhor o que está acontecendo:
http://farm3.staticflickr.com/2872/12345659734_26c7706198_o.jpg
http://farm8.staticflickr.com/7390/12345199075_f25858871d_o.jpg
eu clico lá, envio e dá erro.. Então não consigo colocar.
Mas quando clico em mídia> biblioteca lá está a foto:
http://farm3.staticflickr.com/2813/12345657164_e537b63430_o.jpg
Só que na área do post (do primeiro/segundo print) fica vazio.. Não aparecem as imagens pra escolher como “imagem destacada”.
No fim não aparece, fica com a foto padrão:
http://farm8.staticflickr.com/7458/12345649404_c0da1f93e5_o.jpg

07/02/2014 ・ 13:28

Tamara, linda, muito obrigada pela paciência e ajuda. Tentei de tudo e não consegui.. Ai finalmente encontrei um plugin que meio que arrumou: “auto post thumbnail”, acho que ele gera automaticamente a imagem.. se quiser dar uma olhada de com ficou! valeu mesmo (:

Ana
26/08/2015 ・ 10:04

Olá, Tamara.
Gostei muito do tutorial. Mas eu uso blogger. Gostava de saber se também dá para colocar Post thumbnail no blogger.

bjos 🙂

    26/08/2015 ・ 11:58

    Oi Ana, nunca usei o blogger, então não sei te dizer.