Tableless - Desenvolvimento inteligente com Padrões Web

17/01/2011
Wordpress

Adicionando Post Thumbnail

O WordPress depois de sua versão 2.9 disponibilizou uma funcionalidade de Post Thumbnails. Essa funcionalidade é uma característica do tema que é uma miniatura da imagem de determinado post, pode ser usado em Páginas, Posts ou até Custom Post Types.

Por

Ativando o suporte ao Post Thumbnails em seu tema

Antes de qualquer coisa, volto a lembrar que essa característica é do tema. Pode ser que alguns autores não ativem esse suporte. Para iniciar, adicione este seguinte código no arquivo functions.php:

1
 

Para ativar o suporte só é necessário este código. Bacana, né? O WordPress faz com que em poucas linhas de código possamos obter soluções significantes.

A condição verifica se a função ‘add_theme_support’ existe, caso ela exista, adicionamos um suporte ao nosso tema, que é o Post Thumbnails.

Você pode adicionar esse suporte para outros tipos de posts ou até especificar aonde quer adicionar esse suporte:

1
 

No código fizemos o mesmo processo do início, porém especificamos tipos de posts diferentes. Ao contrário do post de cima, que só adicionaria em um tipo de post.

Customizando as Thumbnails

Esse suporte trouxe várias funções para que possamos personalizar ainda mais o nosso Post Thumbnail. Você pode estipular um valor padrão para todas as imagens, como também pode criar um novo “estilo” para as imagens, vejamos:

1
 

Neste código personalizamos as nossas Thumbnails, com a função

1
set_post_thumbnail_size()

definimos um valor padrão para todas elas, os valores estipulados na função representa a largura e altura respectivamente e o valor TRUE, é destinado para o corte da imagem (crop), caso seja ativado sua imagem será cortada sem distorcê-la e você não precisará usar scripts para isso.

Com a função

1
add_image_size

, definimos um valor personalizado, os valores representam o nome do campo personalizado, largura, altura e o TRUE significa o crop. Lembrando, com essa função você apenas está definindo as caracteristicas de uma imagem personalizada.

Adicionando o Thumbnail

Por fim vamos adicionar o Thumbnail em nosso post, adicione o seguinte código na página onde está seu Post, Loop ou aonde queria botar a imagem:

1
2
3
4
5
6
7
8
9
    <?php
        //verifica se existe alguma thumbnail para o post
        if(has_post_thumbnail()){
            the_post_thumbnail(); //retorna o thumbnail para página
        }else{
            //caso não tenha nenhuma thumbnail, retorna uma imagem padrão
            echo &#039;<img alt="Sem Thumbnail" />';
        }
    ?&gt;

Caso você queria adicionar o valor que definimos em algum add_image_size, faça isso:

1
2
3
4
5
6
7
8
9
10
11
    &lt;?php
        //verifica se existe alguma thumbnail para o post
        if(has_post_thumbnail()){
            the_post_thumbnail(&#039;thumb-post&#039;); //retorna o thumbnail para página especificando o nome do campo personalizado
        }else{
            //caso não tenha nenhum thumbnail, retorna uma imagem padrão
            echo &#039;<img alt="Sem Thumbnail" />';
        }
       
        //caso não queria que retorne nenhuma imagem padrão, retire o ELSE da condição
    ?&gt;

Nos códigos acima adicionamos o thumbnail na página, a condição verifica se existe algum thumbnail, se existir, ele retorna a imagem. Quando você não define nenhum valor personalizado com o

1
add_image_size

ou até dentro da função, ele retorna com o valor que está definido

1
set_post_thumbnail_size

.

Ainda no código acima, adicionei um ELSE, para caso não tenha nenhuma imagem no Post Thumbnail, ele retorne com uma imagem padrão, que vai ficar ao seu critério.

Código Final

functions.php

1
 

pagina-onde-vai-aparecer-o-thumb.php

1
2
3
4
5
6
7
8
9
10
11
    &lt;?php
        //verifica se existe algum thumbnail para o post
        if(has_post_thumbnail()){
            the_post_thumbnail(&#039;thumb-post&#039;); //retorna o thumbnail para página especificando o tipo da imagem
        }else{
            //caso não tenha nenhuma thumbnail, retorna uma imagem padrão
            echo &#039;<img alt="Sem Thumbnail" />';
        }
       
        //caso não queria que retorne nenhuma imagem padrão, retire o ELSE da condição
    ?&gt;

Por Paulo Rodrigues

Paulo Rodrigues é residente de Salvador-BA, especialista em criação de sites e desenvolvimento web desde de 2008. Foi com o desenvolvimento front-end que se apaixonou por esse caminho sem volta, atualmente além de interfaces, Paulo desenvolve para WordPress.

http://www.twitter.com/paulorodriguesw

Veja os outros posts de