the post thumbnail (imagem destacada) no WordPress

Como todos já devem saber desde a versão 3.0 do WordPress temos suporte para os post e páginas a chamada imagem destacada. Basicamente para ativar o recurso em seu tema basta adicionar no arquivo functions.php a seguinte linha:

//Imagem Destacada
add_theme_support( 'post-thumbnails' );

Em seguida no loop:

<?php the_post_thumbnail( ); ?>

Pronto em nosso Dashboard já temos a opção ativada.

Porém temos mais opções para serem exploradas para cada situação na construção do seu tema, vamos ver algumas soluções:

Configurando o Tamanho

Utilizando os padrões do WordPress

the_post_thumbnail('thumbnail'); //150px x 150px
the_post_thumbnail('medium'); //300px x 300px
the_post_thumbnail('large'); //640px x 640px
the_post_thumbnail('full'); //tamanho original do upload

Indicando o tamanho desejado

the_post_thumbnail( array(100,100) );

Link permanente do Post

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

Outra maneira, podemos adicionar o arquivo functions.php

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

function my_post_image_html( $html, $post_id, $post_image_id ) {

$html = ‘<a href=”‘ . get_permalink( $post_id ) . ‘” title=”‘ . esc_attr( get_post_field( ‘post_title’, $post_id ) ) . ‘”>’ . $html . ‘</a>’;
return $html;

}

Podemos também utilizar os seletores CSS padrões da função:

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

Exemplo no código:

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

Acredito que testando os exemplos citados acima, grande parte dos problemas serão resolvidos.

Referência: http://codex.wordpress.org/Function_Reference/the_post_thumbnail

Abraços e Sucesso!

  • Leandro Bertellotti

    Obrigado Carlos, me ajudou muito….sucesso para ti….

    • carlosbortoni

      Bacana.. fico feliz por ter ajudado

  • Cara fiz o procedimento acima porém as imagens não aparecem na home do meu blog.

    • carlosbortoni

      Se você colocou as informações corretas no arquivo functions.php e dentro do Loop do WordPress, é difícil não funcionar!

  • Uatá Lima

    Como faz pra imagem destacada não aparecer no post?

  • walison

    Amigo vi seu trabalho na web e precisava muito de sua ajuda , faz 2 dias que tento resolver , eu estou abrindo site de videos nessse dominio http://videospornoplay.com/ , e estou com problemas com imagens destacadas na pagina principal , no momento consegui ativar o recurso na plantaforma , eu consigo normalmente carregar ela na hora de criar postagem , mas eu não sei onde habilitar a visualização dessas miniaturas na pagina inicial, vi diversas formas e diversos codigos pela web , mas só consigo passar do primeiro passo que é habilitar a visualização dessas mesmas no index

    • carlosbortoni

      O que você deve fazer é chamar o código citado no post dentro do seu loop do WordPress, isso serve para a index category.

      • walison

        Amigo é que não entendo de php ,eu estou errando sempre na hora de colocar esses codigos minha pagina sai do ar, eu entro no functions.php mas eu dou mancada na hora de colar os codigos em seus devidos lugares ,se eu te passar meu usuario e senha vc não coloca pra mim ? faz 3 dias que estou aqui tentando algo , por favor

        • carlosbortoni

          Olá Walison,

          Para começar um projeto em WordPress é preciso ter um conhecimento básico de PHP. É complicado fazer algo sem ter a mínima noção.

          Infelizmente não posso ajudar, pela uma questão das demandas do dia a dia. A ideia do blog é passar informações e contribuições.

          No caso você precisa contratar alguém para executar o serviço.

          Boa sorte!

          • walison

            Não tem como vc passar o codigo ja completo pra mim colar no functions.php?

          • carlosbortoni

            O arquivo functions.php não é o único que deve ser configurado. A melhor documentação sobre WordPress é essa: https://codex.wordpress.org/

  • Shélin Graziela

    ooi, utilizei o código:

    the_post_thumbnail(‘full’);

    pois queria as imagens no tamanho normal e não miniaturas e quadradas… no computador o tamanho ta ok, mas no tablet e no celular a imagem fica enorme e totalmente fora de posição. meu tema é responsivo, como faço para que essa imagem em destaque fique responsiva tambem?
    Obrigada!

  • Marlon

    Boa noite! Desejo retirar a imagem destaca no meu tema. Não quero que ela apareça dentro do post, nem na página inicial.
    Poderia me indicar um solução?
    Este é o site com o tema: http://empregodireto.net.br/

  • Juliana

    Tem como fazer a imagem destacada aparecer no post?

    • carlosbortoni

      Se você já adicionou o suporte ao tema no arquivo functions.php como descrito acima, basta definir aonde a imagem deve ser exibida e colocar o código:

      Revise os passos e qualquer coisa de um grito!

  • jonathasazevedo

    Configurando o Tamanho

    Utilizando os padrões e tamanho personalizado do WordPress onde coloco o codigo?

    • carlosbortoni

      Como no exemplo acima:

      the_post_thumbnail(‘large’);

      basta colocar o tamanho de imagem desejado

  • Não consigo mostrar a imagem destacada no link ao compartilhar no WhatsApp. Alguém me ajuda, por favor.