Trabalhando com Imagem Destacada no WordPress

O recurso de imagem destacada foi introduzida na versão 2.9, como “Post Thumbnails” e partir da versão 3.0 foi denominada de “Imagem Destacada” ou Featured Images.

Para utilizar esse recurso, é necessário habilitá-lo.

Vá no arquivo functions.php do seu tema e adicione esse trecho:

add_theme_support( 'post-thumbnails' );

Se você for agora em Posts > Adicionar Novo, e do lado direito terá um bloco chamado Imagem Destacadas.

Trabalhando com Imagem Destacada no WordPress

Você pode definir um valor padrão dessa imagem destacada, para isso é necessário adicionar no arquivo functions.php, a função set_post_thumbnail_size, como no exemplo abaixo:

add_theme_support( 'post-thumbnails' );

//Define o tamanho padrão da imagem destacada
set_post_thumbnail_size(200,200);

No primeiro parâmetro da função set_post_thumbnail_size, é largura e o segundo a altura.

Você também pode adicionar novas dimensões para as imagens. Para isso basta adicionar também no arquivo functions.php a função add_image_size.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(200,200);

//Adicionando um novo tamanho personalizado
add_image_size('miniatura_personalizada', 90, 90);

No primeiro parâmetro, definimos um nome, o segundo definimos a largura e no terceiro definimos a altura. Você pode definir, se você deseja que ela seja cortada, por padrão essa opção é falsa, assim o WordPress tenta manter a proporção da imagem.

Vamos ver agora como chamar essa imagem destacada que definimos como nome de miniatura_personalizada

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!--Verifica se existe algum imagem destacada-->
        <?php if (has_post_thumbnail()) : ?>
            <!-- Exibi a imagem destacada -->
            <?php the_post_thumbnail('miniatura_personalizada'); ?>

        <?php endif; ?>
    <?php endwhile; ?>
<?php endif; ?>

Existem também tamanhos pré-definidos no WordPress que você chamar usando the_post_thumbnail()


/*Por Padrão: 150px x 150px */
the_post_thumbnail('thumbnail');
/*Por padrão  300px x 300px */
the_post_thumbnail('medium'); //
/*Por padrão  640px x 640px */
the_post_thumbnail('large');
/*Tamanho original que foi enviadao a imagem*/
the_post_thumbnail('full');

Assim você pode utilizar os tamanhos pré-definidos ou adicionar novos tamanhos de acordo com o tema que você está desenvolvendo.

Espero que tenha ajudado e até a próxima.

Forte abraço.




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *