The Hello Bar is a simple web toolbar that engages users and communicates a call to action.

30

Mar

Receita de Post-Thumbnail com WordPress 2.9


Para esta receita você vai precisar de:

  1. Um WordPress 2.9.x
  2. Seu Theme atual
  3. Saber editar o Function.php do seu Theme
  4. Saber editar talvez o index.php ou aonde você quer que o thumbnail apareça

Mais tão simples assim? SIM! super simples

Primeiro começamos com seu Function.php adicionando uma simples linha, ou duas caso você goste de adicionar comentários.

// Habilita post-thumbnails
add_theme_support(‘post-thumbnails’);

Pronto, agora já está habilitado os posts-thumbnails, mais calma que não é só isso, esta parte só habilita na pagina de Add New post a opção de adicionar um thumbnail:

Mostrando o Thumbnail no post

Agora sim, a parte divertida, e claro como quase tudo no wordpress, outra parte simples da nossa receita.
Basta adicionar a seguinte linha, dentro do seu Loop aonde você gostaria que sua thumbnail aparecesse, da seguinte maneira:

<?php the_post_thumbnail(); ?>

Acabou? não, quando você adiciona esse simples codigo ao seu Loop, ele(o wordpress) automáticamente atribui as seguintes classes attachment-post-thumbnail e wp-post-image a tag de imagem, tornando simples o trabalho de atribuição de valores atraves de CSS.

OKAY! Configurando o tamanho padrão do Thumbnail

Temos agora todas configurações prontas, falta dizer pro wordpress que eu quero que todos thumbnails do meu site sigam determinado tamanho, e claro ele irá redimensionar essas imagens pra gente logo após o upload, genial não é?! :D

Acesse então em Settings > Media dentro do seu painel admin e encontre em Image Size a opção Thumbnail Size. Lá modifique conforme suas preferências.

Show, sua receita agora está pronta.

Vantagens de se usar o Post-Thumbnail ao inves de Get-Post-Meta(Custom Fields)

Confesso que aqui no Persocon utilizo ainda o Get-Post-Meta(Custom Fields) para os thumbnails, por preguiça, porém acho bem mais simples a criação, configuração e utilização do Post-Thumbnail.

A maior vantagem de todas do post-thumbnail, é a diminuição no MySql Queries, porque o post-thumbnail é salvo na tabela wp_post, que é normalmente chamada quando você abre um post. Enquanto com Get-Post-Meta(Custom Fields) o wordpress é obrigado a buscar na tabela wp_postmeta os dados necessários.

Conclusão

Receita pronta para saborear tudo que há de bom no WordPress 2.9.x, e espero que você tenha gostado do artigo e que tenha sido bastante útil para você aprender o básico da função post-thumbnail.
Espero que você tenha aprendido algo novo e que se tiver alguma duvida ou sugestão, não hesite em comentar :)


Sobre Pedro Costa Neves

Webdesigner, Wordpress Ninja, fundador do http://persocon.org e do http://geek-candy.com. Sócio, Co-fundador, Diretor de Arte, Web Developer em !Drop Studio e está procurando emprego em Chapecó se alguem souber avise-me. Você pode entrar em contato comigo através da página de contato neste site ou pelo email neo[at]persocon.org.

  • Josias

    Olá! Ótimo tutorial, porém em um site que estou utilizando o thumbnail aparece no Firefox, Chrome, etc… porém no IE não, tem alguma sugestão?

    [Reply]

    Pedro Costa Neves Reply:

    estranho, deve tá com algum bug no css, porque nao tem nada a ver funcionar em um navegador e não em outro, php independe de navegador né. checa o seu css pra ver se não tem algo errado e tals.

    [Reply]

  • Josias

    Resolvi cara… na verdade era um erro no PHP pois eu chamava o thumb e tbm um link via custom field, e na concatenação de ambos o código não estava 100%… estranho que os outros navegadores ignoravam isso e chamavam os 2 juntos normalmente, mas o IE chamava o campo src da imagem mas a tag img ficava vazia, algo bem bizarro, mas no fim resolvi… obrigado!

    [Reply]

  • http://www.criadorsites.com Alexandre Kucarcz Cordeiro

    Ótimo post!
    Eu estava me batendo porque alterava o tamanho nas configurações do painel de controle do WP e não alterava as imagens no site. Mas depois li que ele altera a partir de novas imagens adicionadas, hehe! Show de bola!
    Valeu pela dica!

    [Reply]