Página Inicial > WordPress > Como personalizar a galeria de fotos do WordPress (thumbnails)

Como personalizar a galeria de fotos do WordPress (thumbnails)

Não só atualizações de segurança foram feitas a partir do WordPress 2.5, mas muitas alterações de estrutura e estética do sistema de CMS apareceram. A maioria delas não apresentaram maiores intervenções e, também com o advento das atualizações automáticas de plugin, nem sentimos grande parte das mudanças estruturais da plataforma.

Entretanto, um recurso importante pra quem posta bastantes imagens foi adicionado: a galeria de imagens. Agora, é possível inserir uma galeria de fotos colocando-as todas num post e escolhendo deixá-las sob forma de thumbnails e o próprio WordPress se encarrega de gerenciar isso. Ao invés do antigo e tradicional link pra foto, a imagem é carregada, antes, dentro de uma página do próprio tema (carregando cabeçalho, barras laterais, um looping específico pra ela etc.)

Em um dos blogues em que escrevo, o JaPostei, é comum colocarmos essas galerias de fotos.  Mas como disse no parágrafo anterior, o WordPress cria uma página específica pra cada foto colocada na galeria e, por consequência, um permalink. Então se há página e permalink, juntamente com links diretos do post para visualizá-las, estas páginas também são indexadas no Google.

Eu não teria me dado conta disso até notar no blog em questão um acréscimo estrondoso de visitantes incompatível com os relatórios de impressões de páginas do AdSense. Ao passo que o blog atingia 2.500 visitas únicas para o post em questão, a exibição de anúncios e os clicks não acompanhavam esta evolução. Notei, então, que o que estava sendo indexado e trazendo visitas era justamente uma das fotos de uma das galerias que o WordPress, e na falta de uma customização daquela página (já que a grande maioria dos temas ainda não se adaptaram às imagens), exibia um modelo default — claro, sem anúncios.

Compartilho aqui com vocês como customizar a página de galerias de fotos, inclusive como inserir anúncios, o que é bastante importante.

1º passo – Não vamos reinventar a roda

Não é nossa intenção reaprender a mijar. Não vamos criar do zero uma página para exibir estas fotos. De acordo com nosso tema, vamos pegar um modelo e então personalizá-lo. No MEU caso, eu usei o single.php (e indico que seja este o modelo). Então baixe pro seu PC via FTP o arquivo single.php do seu tema, renomeie para image.php e jogue denovo no diretório do template.

2º passo – Tirando o que for desnecessário

Existem coisas desnecessárias para o image.php que vêm com o single.php. Uma delas é a tag the_content, pois uma vez que não vamos exibir o post, lembre-se que é uma página somente pra foto. É necessário, caso deseje, retirar as tags que puxa o sistema de comentários. Eu, pelo menos, saquei fora o   comments_template() pois não queria repetição de comentários em cada foto. Mas essa fica a seu critério.

3º passo – Inserindo o código fodão

Dentro do looping e abaixo da tag do título do post (the_title), você vai adicionar o seguinte código:

<p class=”attachment”><a href=”<?php echo wp_get_attachment_url($post->ID); ?>”><?php echo wp_get_attachment_image( $post->ID, ‘medium’ ); ?></a></p>
<div class=”caption”><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the “caption” ?>

Este pequeno emaranhado de palavras estranhas vai fazer a foto ser exibida (juntamente com o caption dela).

4º passo – Colocando links de navegação

Já que é uma galeria, seria interessante dar ao seu leitor a possibilidade de ele navegar nas fotos sem precisar retornar ao post principal e escolher novamente outra foto. Abaixo (ou acima, você que sabe) coloque o seguinte código:

<div>
<div class=”alignleft”><?php previous_image_link() ?></div>
<div class=”alignright”><?php next_image_link() ?></div>
</div>

5º passo – Adicionando anúncios aos thumbnails

Você vai adicioná-lo da mesma forma que faz com o single.php, index.php ou barras laterais. Escolha o lugar onde quer posicioná-los e insira o respectivo código.

Resumo da ópera

Se você exatamente como eu ensinei, seu código ficou mais ou menos assim:

PS: Note que eu modifiquei algumas instruções perto da tag “the_title”, para que ficasse um pouco mais amigável e que o usuário que chegasse do Google soubesse que aquela página apenas exibia uma foto, inclusive linkando o post original.

E, se fez dessa forma, é provável que esteja funcionando agora :)

Posts relacionados

Daniel Becher WordPress , , , , , ,

  1. 27, setembro, 2008 em 01:18 | #1
    Na escala de utilidade que vai de zero a dez, esse post fica perto do número 17 :-)

    Há MESES tento implementar algo assim no meu blog.

    Valeu Becher!

    Responder

  2. 21, janeiro, 2009 em 23:50 | #2
    Olá Daniel, você não tem idéia de quanto seu tutorial me ajudou. Te agradeço desde já.
    Uma dúvida: como faço para criar um link para voltar para o post onde as fotos estão, tipo “Clique aqui para voltar para o post”

    Grande abraço e parabéns pelo blog. :)

    Responder

  3. 3, abril, 2009 em 13:06 | #3
    Muito bom, principalmente na parte do google indexar cada uma das páginas
    Será que daria para abrir essapágina em um popup??? assim teria a navegacao proxima e anterior e tudo isso em uma janela exclusiva, como uma galeria.

    Responder

  4. 26, agosto, 2009 em 15:41 | #4
    Pq o meu nao funcionou? =[

    Responder

  5. 26, agosto, 2009 em 15:46 | #5
    Ahn, mentira, funcionou sim! A versao diferente do wordpress me confundiu! show d mais! vlw!

    Responder

  6. 8, dezembro, 2009 em 07:29 | #6
    Opa, criei o arquivo, mas não sei como utiliza-lo pois quando crio uma nova galeria a mesma aparece diretamente no corpo do post(single.php).

    Gostaria de saber como faço para q a galeria seja aberta em um nova janela com layout expecifico.

    Obrigado

    Responder

  1. Nenhum trackback ainda.

Powered by WP Hashcash