Actualmente grande parte dos blogs mais profissionais mostra os posts resumidos na página inicial. No entanto os resultados nem sempre são os melhores porque muitos visitantes não perdem tempo a ler a descrição, por isso a solução é adicionar algo que chame a atenção e que seja facilmente associado ao post: uma imagem.

Existem várias formas de adicionar imagens, também conhecidas por thumbnails, a todos os posts. É possível utilizar custom fields (campos personalizados), o novo sistema de thumbnails do WordPress ou usar um script que pegue na primeira imagem do, redimensione-a e mostre-a de forma automática.

Neste tutorial você vai aprender a preparar o seu tema para gerar thumbnails automáticos, desde que o post tenha uma imagem.

Thumbnails Automáticos no WordPress

1. Fazer o download do timthumb.php

O timthumb.php é um script gratuito que permite redimensionar imagens. Para funcionar, a imagem tem que estar no seu alojamento. Ou seja, se você estiver a usar imagens que estejam em outros sites ou em serviços gratuitos como o imageshack ou o picasa, o script não funciona.

Comece por fazer o download do timthumb.php no seguinte endereço (botão direito » guardar ligação como):

Agora deve de passar o script para dentro da pasta do seu tema (para o mesmo local onde tem o index.php, style.css, etc).

2. Criar uma função no functions.php

A primeira coisa que temos que fazer é adicionar o seguinte código ao ficheiro functions do seu tema. O código pode ser colocado logo no inicio.

<!--?php <br ?-->// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '$start = 0;
for($i=1;$i$imgBeg = strpos($content, '$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;

$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
if(stristr($image[$num],'

3. Adicionar o código no index.php

Agora você vai adicionar o código ao ficheiro index.php. Se não sabe o local onde colar este código, procure pela tag the_content e cole aí.

</pre>
<div class="thumb"><a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=180&h=180&zc=1" alt="" />
</a></div>
<pre>

Neste código você pode definir o tamanho da imagem. Neste caso o tamanho escolhido foi 180x180. O valor em "w=" é a largura e o "h=" é a altura da imagem.

4. Estilizar o thumbnail no style.css

No fim do style.css, adicione o seguinte código para alinhar a imagem e adicionar um efeito ao passar o rato por cima.

.thumb a:link, .thumb a:visited {display:block; float:left; padding:5px; background:#f3f3f3; width:180px; height:180px; margin:5px 5px 0 0; -moz-border-radius: 3px; border-radius: 3px;}
.thumb a:hover, .thumb a:active {background:#bfbfbf;}

Assim como no passo 3, a largura (width) e a altura (height) também pode ser alterado (os tamanhos devem de ser os mesmos que colocou no passo 3.

Resultado Final

Depois destes 4 passos o thumbnail está a funcionar. Lembre-se que a imagem que vai ser mostrada é a primeira que se encontra no post.

O resultado final será algo deste tipo:

Thumbnails