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.
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:
Info: Quer adicionar código nos comentários? Por favor use as tags <pre><code> ... </code></pre>
Comentários
Sem comentários até ao momento. Seja o primeiro a comentar!