Back-End

19 jan, 2010

Como utilizar as novas tags de template para exibir miniaturas e thumbnail nos temas WordPress

Publicidade

Se buscarmos no Google pelos termos post thumbnail, wordpress post thumbnail, post thumbnail wordpress,
entre outras variações possíveis, teremos milhares de resultados, o que demonstra
tamanha procura pelo assunto. Os resultados são soluções diversas para
implementar um simples recurso: vincular uma miniatura de imagem,
diga-se thumbnail, a um post.

Com a chegada do WordPress 2.9 ficou simples, fácil e elegante
vincular ao post desejado uma miniatura de imagem. Há quatro funções
específicas para o assunto: has_post_thumbnail, the_post_thumbnail, get_post_thumbnail_id e get_the_post_thumbnail. Elas estão localizadas no seguinte arquivo: wp-includes/post-thumbnail-template.php.

Suporte ao recurso de miniatura de post

Para implementar o suporte deste recurso no WordPress é necessário
que a função add_theme_support() com o parâmetro ‘post-thumbnails’ seja
chamada no arquivo functions.php do tema em uso. Para ser mais
específico, inclua o seguinte código:

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

No arquivo functions.php do seu tema. Se ele ainda não existe, crie
e salve-o na pasta do tema. Observe que antes de chamarmos a função add_theme_support
verificamos se ela está disponível no WordPress em uso através da
função function_exists. Como a nova função está disponível somente a
partir da versão 2.9 garantimos compatibilidade com versões anteriores.

Chamado a função no arquivo functions.php do tema, teremos na tela de edição de posts o recurso Miniatura do Post como demonstrado na imagem abaixo.

Clicando em Configurar miniatura é exibida a tela de
envio de imagens. Após o envio da imagem, informe ao WordPress que
gostaria de usá-la como miniatura clicando em Usar como miniatura. Observe:

Feito isso, o recurso Miniatura do Post é preenchido com a imagem definida; além da opção remover a imagem. Veja:

Nas páginas do seu tema onde pretende exibir as miniaturas, faça uso das funções has_post_thumbnail e the_post_thumbnail. A primeira verifica se há uma miniatura para o post em exibição; a segunda exibirá a miniatura com a devida marcação HTML.

Embora tenho dito que há quatro funções para se trabalhar com esse assunto, duas delas são usadas internamente. São elas: get_post_thumbnail_id e get_the_post_thumbnail. A primeira é utilizada pela função has_post_thumbnail e a segunda pela função the_post_thumbnail. Então, digamos que há duas funções internas e outras duas externas.

Forma de uso da função the_post_thumbnail

<?php
if ( function_exists( 'the_post_thumbnail' ) ) :
the_post_thumbnail();
endif;
?>

No exemplo acima verificamos se a função the_post_thumbnail
está disponível para em seguida utilizá-la. Com seu uso será exibido
uma marcação HTML através da tag img para exibir a miniatura do post.

<img width="640" height="480" title="título" alt="" src="[...]/wp-content/uploads/2009/12/1262731176983.jpg"/>

Observe também um exemplo prático de uso da função has_post_thumbnail.

<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>

As possibilidades de uso da função the_post_thumbnail

Através de seus dois parâmetros opcionais, a função the_post_thumbnail lhe permite exibir miniaturas de posts de forma personalizada. Sendo possível definir o tamanho desejado e diversos atributos.

Quanto à definição de tamanho da miniatura do post há diversas
possibilidades. Utilizar os tamanhos definidos na configuração de mídia
de sua instalação WordPress ou especificar valores personalizados

the_post_thumbnail(); // Sem parâmetro é igual a Thumbnail

the_post_thumbnail( 'thumbnail' ); // Utiliza os valores definidos para o tamanho de imagem miniatura

the_post_thumbnail( 'medium' ); // Utiliza os valores definidos para o tamanho de imagem média

the_post_thumbnail( 'large' ); // Utilizar os valores definidos para o tamanho de imagem grande

the_post_thumbnail( array(150,110) );// Utiliza valores personalizados; neste exemplo 150 de largura e 110 de altura.

Os atributos possíveis de serem definidos e que serão utilizados na
marcação HTML da tag img são: src, class, alt e title. Para o primeiro
é utilizado a localização da imagem; para o segundo uma classe
personalizada com o tamanho da imagem, assim:
attachment-post-thumbnail, attachment-post-medium, entre outras. O
atributo alt é formado pela legenda da imagem e o title com o título.

Um exemplo prático de como definir atributos através da função the_post_thumbnail.

the_post_thumbnail( 'thumbnail', array( 'class' => 'nome-da-classe' ) );

Indo além com avançadas configurações

O WordPress é extremamente flexível e isso me agrada muito. Temos
incríveis possibilidades de personalização e com as miniaturas de posts
não seria diferente. No seu arquivo functions.php, que deve residir no
diretório do seu tema, é possível especificar o tamanho desejado para
as miniaturas, os thumbnails, através da função set_post_thumbnail_size. Assim:

set_post_thumbnail_size( 75, 75 ); // Define o tamanho desejado para os thumbnails.

set_post_thumbnail_size( 75, 75, true ); // Define o tamanho desejado para os thumbnails&nbsp; e ativa a opção de "crop"

É possível também registrar nomes personalizados para o tamanho de
imagens, ou seja, em vez de usar os nomes proprietários: thumb,
thumbnail, medium ou large, podemos definir nossos próprios nomes. Por
exemplo:

add_image_size( 'listagem-de-posts-home', 150, 150 );
add_image_size( 'listagem-de-posts-busca', 300, 300 );
add_image_size( 'post-em-destaque', 500, 500 );

Atente-se que a função add_image_size deve ser chamada no arquivo functions.php

A confusão de nomenclatura

Durante o desenvolvimento do WordPress 2.9, as funções relacionadas à
miniatura de post, thumbnail, foram nomeadas utilizando o termo image. Posteriormente na versão final as funções foram renomeadas sendo alterada o image por thumbnail.

Logo, o correto é the_post_thumbnail e has_post_thumbnail do que the_post_image ou has_post_image, respectivamente.

Como percebemos, as possibilidades em relação à miniatura de posts
são diversas, use a criatividade, pesquise e compartilhe novas
descobertas conosco.

*

Publicado originalmente no Apiki WordPress – Um blog da Apiki dedicado ao WordPress.