Uma parede de texto sem imagens é uma forma infalível de perder leitores nos primeiros cinco segundos. A imagem de destaque funciona como a capa do artigo: é o que as pessoas veem no feed de publicações, nos widgets e nas pré-visualizações das redes sociais. É ela que vende o clique antes mesmo de alguém ler o título.

O problema é que o WordPress não obriga os autores a definir uma miniatura. Um artigo destaca-se com uma foto enorme, outro encolhe para um quadrado minúsculo, um terceiro não tem imagem nenhuma. A página inicial transforma-se num caos visual, e o Facebook e o Telegram puxam um logótipo aleatório em vez de uma pré-visualização com significado.

Segue-se uma análise completa da mecânica da imagem de destaque: desde adicionar a sua primeira miniatura até às verificações obrigatórias antes de publicar. Com código funcional, um plugin específico e instruções passo a passo.

💡 Visão geral rápida:

• Adicionar uma imagem de destaque através da barra lateral do editor
• Compreender os tamanhos: o que o WordPress faz nos bastidores e como reconfigurá-lo
• Instalar o Simple Image Sizes e ajustar as dimensões para o seu tema
• Automatizar a configuração de miniaturas com código no functions.php
• Lidar com autores esquecidos: sem imagem, o artigo vai para rascunho

Como funcionam as imagens de destaque

A imagem de destaque (ou miniatura do artigo) é um campo meta que o tema utiliza para apresentação em três locais principais:

• Página inicial e arquivos. Uma pré-visualização com imagem recebe exponencialmente mais cliques do que um simples link de texto.
• O próprio cabeçalho do artigo. O tema exibe a miniatura acima ou logo abaixo do título, muitas vezes ocupando toda a largura do conteúdo.
• Redes sociais. O Facebook, o X e o Telegram obtêm a imagem de destaque através do Open Graph. Sem imagem, a rede substitui pelo que encontrar.

Esta funcionalidade é há muito um padrão do WordPress. Hoje é impossível encontrar um tema decente sem suporte para a mesma. Mas a qualidade da implementação ainda varia de programador para programador: um tema apresenta a miniatura como um banner elegante, outro estica um pequeno quadrado para a largura total.

Adicionar uma imagem de destaque: mecânica básica

No editor de artigos (Gutenberg ou Clássico), existe um painel «Imagem de destaque» à direita. Clique em «Definir imagem de destaque», carregue um ficheiro ou escolha na biblioteca de multimédia, clique em «Definir». Pronto.

Nuance: o WordPress não exige que o autor defina uma imagem. Se se esquecer, a publicação vai para o feed com um espaço vazio. Abordaremos a solução para este problema na secção sobre verificações obrigatórias.

Tamanhos de imagem: o que o WordPress faz nos bastidores

Cada instalação do WordPress vem com quatro tamanhos de origem:

• Completo, o ficheiro original inalterado
• Miniatura, um quadrado (por predefinição 150×150 px de acordo com as definições de multimédia do WordPress), cortado a partir do centro
• Médio, dimensionado para uma largura máxima definida, sem corte
• Grande, o mesmo, mas com um limite superior

As definições encontram-se em «Definições → Multimédia». Ao carregar uma nova imagem do WordPress, o WordPress gera as quatro versões, mais os tamanhos adicionais registados pelo tema ativo. Cada versão fica em wp-content/uploads/ como um ficheiro separado.

Porquê tantas cópias? Sem elas, um designer teria de ajustar manualmente cada tamanho para um local de apresentação específico. Com elas, o tema simplesmente solicita a variante necessária através de the_post_thumbnail('medium') ou wp_get_attachment_image_src(). Mais sobre a arquitetura do subsistema de multimédia na documentação oficial do WordPress.

A miniatura é o único tamanho que é cortado à força. Os restantes são dimensionados preservando as proporções.

Alterar o tamanho da imagem de destaque

Os temas usam dimensões diferentes. Ao mudar de tema ou para uma nova tarefa, o tamanho da imagem de destaque pode necessitar de ajuste.

Primeiro, verifique as definições do tema: «Aparência → Personalizar». Os temas modernos fornecem frequentemente um controlo deslizante ou uma lista suspensa para a largura e altura da miniatura. Se encontrar, altere em dois cliques.

Se não encontrar, não há problema. O plugin Simple Image Sizes resolve a tarefa sem uma única linha de código.

Simple Image Sizes: a ferramenta certa para as dimensões

Plugin gratuito de Nicolas Juen, com manutenção ativa (versão atual 3.2.5, requer PHP 8.0+). Após a instalação, vá a «Definições → Multimédia» e veja todos os tamanhos registados, incluindo aqueles que o tema adicionou mas escondeu da vista.

Para cada tamanho, defina a largura e a altura. Para a imagem de destaque, oriente-se pela forma como o tema a apresenta. Banner de conteúdo de largura total, use 1200×630 px (ótimo para redes sociais, de acordo com as recomendações do Facebook para Open Graph). Miniatura quadrada numa grelha, 400×400 ou 600×600 px.

Vantagens:

• Vê todos os tamanhos, incluindo os escondidos pelo tema
• Permite ativar e desativar a exibição do tamanho na lista suspensa de inserção de multimédia
• Gera código PHP add_image_size() pronto a usar para transferir para o tema

Desvantagens:

• Requer PHP 8.0+, não funciona em alojamentos francamente desatualizados
• Interface minimalista, sem pistas visuais

Preço: gratuito, sem versão Pro.

🔗 Simple Image Sizes no WordPress.org

O que fazer com imagens antigas

O WordPress aplica novos tamanhos apenas a novos uploads. Tudo o que carregou anteriormente mantém as dimensões antigas.

O Simple Image Sizes também cobre esta tarefa. Na página «Settings → Media», desça até ao bloco de regeneração. Selecione o tamanho pretendido, indique o tipo de conteúdo e inicie a reconstrução. O plugin percorrerá todas as imagens existentes e criará novas cópias com os tamanhos atualizados.

Aviso: em sites com dezenas de milhares de ficheiros, a regeneração consome espaço do servidor. O WordPress não elimina as miniaturas antigas, que permanecem na pasta como peso morto. Antes de uma regeneração em massa, certifique-se de que tem espaço em disco.

Configuração automática de imagem destacada

Quando um artigo contém imagens, mas a imagem destacada está vazia, o WordPress pode retirar a primeira imagem do conteúdo e atribuí-la como miniatura. Conveniente para autores que se esquecem regularmente deste passo e para blogues com publicação em fluxo.

A mecânica é simples: se a imagem destacada não for definida manualmente, a função encontra a primeira imagem anexada através de get_children e define-a via set_post_thumbnail().

O código é adicionado ao functions.php do tema ativo. Recomendo vivamente fazê-lo através do plugin WPCode; um erro de digitação no functions.php sem ele pode quebrar o site por completo:

1
function autoset_featured() {
2
    global $post;
3
    $already_has_thumb = has_post_thumbnail( $post->ID );
4
    if ( ! $already_has_thumb ) {
5
        $attached_image = get_children( array(
6
            'post_parent'    => $post->ID,
7
            'post_type'      => 'attachment',
8
            'post_mime_type' => 'image',
9
            'numberposts'    => 1,
10
        ) );
11
        if ( $attached_image ) {
12
            foreach ( $attached_image as $attachment_id => $attachment ) {
13
                set_post_thumbnail( $post->ID, $attachment_id );
14
            }
15
        }
16
    }
17
}
18
 
19
add_action( 'the_post', 'autoset_featured' );
20
add_action( 'save_post', 'autoset_featured' );
21
add_action( 'draft_to_publish', 'autoset_featured' );
22
add_action( 'new_to_publish', 'autoset_featured' );
23
add_action( 'pending_to_publish', 'autoset_featured' );
24
add_action( 'future_to_publish', 'autoset_featured' );

A função é acionada em seis hooks: the_post, save_post e todas as transições de estado *_to_publish. Após a atribuição, a miniatura permanece mesmo que remova a imagem do corpo do artigo.

Desvantagem: se o autor não inseriu nenhuma imagem no texto, não haverá miniatura. Para este cenário, veja a secção seguinte.

Verificação obrigatória: sem miniatura, sem publicação

Método simples e rigoroso: o autor clica em «Publicar» e o WordPress guarda o artigo como rascunho e mostra um aviso. Sem uma imagem destacada, a publicação não avança.

Dois excertos de código no functions.php:

Parte 1, verificação ao guardar (apenas para o tipo post ):

1
add_action( 'save_post', 'pu_validate_thumbnail' );
2
 
3
function pu_validate_thumbnail( $post_id ) {
4
    if ( get_post_type( $post_id ) != 'post' ) {
5
        return;
6
    }
7
 
8
    if ( ! has_post_thumbnail( $post_id ) ) {
9
        set_transient( 'pu_validate_thumbnail_failed', 'true' );
10
        remove_action( 'save_post', 'pu_validate_thumbnail' );
11
        wp_update_post( array( 'ID' => $post_id, 'post_status' => 'draft' ) );
12
        add_action( 'save_post', 'pu_validate_thumbnail' );
13
    } else {
14
        delete_transient( 'pu_validate_thumbnail_failed' );
15
    }
16
}

Parte 2, mensagem de erro no admin:

1
add_action( 'admin_notices', 'pu_validate_thumbnail_error' );
2
 
3
function pu_validate_thumbnail_error() {
4
    if ( get_transient( 'pu_validate_thumbnail_failed' ) == 'true' ) {
5
        echo '<div class="notice notice-error"><p><strong>You must set a featured image before publishing.</strong></p></div>';
6
        delete_transient( 'pu_validate_thumbnail_failed' );
7
    }
8
}

O texto da mensagem é totalmente personalizável; substitua a string dentro de <p><strong>...</strong></p> pela sua.

Pré-visualização da miniatura na lista de artigos

A tabela padrão «Artigos → Todos os artigos» mostra título, autor, categorias, etiquetas e data. A imagem destacada não aparece. Para verificar quais os artigos sem miniatura, tem de abrir cada um individualmente. Com mais de 50 publicações, isto é aborrecido.

O código abaixo adiciona uma coluna Thumbs à tabela de artigos e páginas:

1
add_filter( 'manage_posts_columns', 'posts_columns', 5 );
2
add_action( 'manage_posts_custom_column', 'posts_custom_columns', 5, 2 );
3
 
4
add_filter( 'manage_post-type_posts_columns', 'posts_columns', 5 );
5
add_action( 'manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2 );
6
 
7
function posts_columns( $defaults ) {
8
    $defaults['riv_post_thumbs'] = __( 'Thumbs' );
9
    return $defaults;
10
}
11
 
12
function posts_custom_columns( $column_name, $id ) {
13
    if ( $column_name === 'riv_post_thumbs' ) {
14
        if ( has_post_thumbnail() ) {
15
            echo the_post_thumbnail( array( 100, 100 ) );
16
        } else {
17
            _e( 'No Thumbnail For Post' );
18
        }
19
        echo '<style>.column-riv_post_thumbs img{max-height:100px;max-width:100px;}</style>';
20
    }
21
}

O tamanho da pré-visualização está definido para 100×100 px, suficiente para um controlo visual rápido. Se precisar de maior, substitua array(100, 100) por array(200, 200). Mais informações sobre parâmetros na documentação do the_post_thumbnail.

Para páginas, adicione estas duas linhas ao início do excerto:

1
add_filter( 'manage_pages_columns', 'posts_columns', 5 );
2
add_action( 'manage_pages_custom_column', 'posts_custom_columns', 5, 2 );

Agora, na secção «Páginas → Todas as páginas», também pode ver onde há miniatura e onde não há.

Tornar a miniatura clicável

Um bom tema envolve automaticamente a imagem destacada numa ligação para o artigo. Um mau tema gera uma imagem estática que não leva a lado nenhum. O visitante clica na pré-visualização na página inicial e não acontece nada.

Resolve-se com um filtro no functions.php:

1
function wcs_auto_link_post_thumbnails( $html, $post_id, $post_image_id ) {
2
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
3
    return $html;
4
}
5
add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );

O filtro post_thumbnail_html interceta o HTML de saída da miniatura e envolve-o numa ligação com get_permalink(). O título do artigo vai para o atributo title através de esc_attr(), seguro e informativo.

Alterar o texto «Definir imagem destacada»

Quando o site tem configuração automática de miniaturas a partir do conteúdo, o rótulo padrão «Definir imagem destacada» induz os autores em erro. Parece que a imagem tem de ser definida manualmente, embora o sistema o faça sozinho.

Altere o texto para algo informativo:

1
function change_featured_image_text( $content ) {
2
    return $content = str_replace(
3
        __( 'Set featured image' ),
4
        __( 'Thumbnail will be set automatically from the first image in the post' ),
5
        $content
6
    );
7
}
8
add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );

O filtro admin_post_thumbnail_html trata do bloco HTML da imagem destacada na barra lateral do editor. Substitua qualquer texto dentro de __( ... ) no segundo argumento de str_replace.

Vídeo: como tudo funciona na prática

Se preferir uma demonstração visual, aqui está um guia completo do WPBeginner: desde adicionar a sua primeira miniatura até afinar tamanhos e automação.

⁉️🤔 Perguntas frequentes

Porque é que a imagem destacada não aparece no site?

Muito provavelmente, o tema não suporta a função post-thumbnails. Verifique o functions.php: deve existir uma linha add_theme_support( 'post-thumbnails' ). Se não estiver lá, adicione-a. Segunda razão: nas definições do tema, a exibição da imagem destacada está desativada para um tipo de conteúdo específico. Terceira: um plugin de cache está a guardar uma versão antiga da página, limpe a cache.

Qual é a diferença entre imagem destacada e imagem de capa?

A imagem destacada é um campo meta do artigo que o tema usa para pré-visualizações em feeds, arquivos e Open Graph. A imagem de capa é um bloco dentro do conteúdo (surgiu no Gutenberg) que aparece apenas no corpo do artigo e não afeta as redes sociais. Pode usar ambas em simultâneo: capa para entrada visual no artigo, imagem destacada para tudo o resto.

Que tamanho devo usar para as imagens destacadas?

Para redes sociais, o formato ideal é 1200×630 px (proporção 1,91:1) de acordo com a documentação para programadores do Facebook. Para a grelha de artigos na página inicial, oriente-se pelo que está definido nas configurações do tema. Se o tema usar miniaturas quadradas, 600×600 ou 800×800 px. Antes de carregar, comprima a imagem para 100-150 KB através do TinyPNG ou ShortPixel.

É obrigatório definir uma imagem destacada para cada artigo?

Tecnicamente, não. Mas sem ela, a página inicial e as redes sociais ficam com um aspeto descuidado, e a taxa de cliques cai 2 a 3 vezes. Se tem receio de se esquecer, use o código de verificação obrigatória da secção acima ou o plugin Quick Featured Images, que substitui por uma miniatura padrão os artigos sem imagem.

Como removo ou substituo uma imagem destacada?

No editor de artigos, clique na imagem destacada atual na barra lateral. A biblioteca de media abrirá, clique em «Remover imagem destacada». Depois disso, o botão voltará a ser «Definir imagem destacada». Carregue uma nova.

Posso usar a mesma imagem como imagem destacada para vários artigos?

Sim, o WordPress não impõe restrições. Selecione o mesmo ficheiro da biblioteca de media para artigos diferentes. Mas se a imagem se repetir no feed, parece um erro ou descuido. Para variedade visual, é melhor escolher miniaturas únicas.

O que fazer com as imagens destacadas agora mesmo

A imagem destacada não é um elemento «opcional», mas uma parte obrigatória de cada artigo. Sem ela, as redes sociais substituem por conteúdo aleatório, a página inicial perde estrutura visual e a taxa de cliques cai exponencialmente.

Percorra a lista de verificação em dez minutos:

• Abra qualquer artigo e certifique-se de que a imagem destacada está definida.
• Verifique como aparece na página inicial e nas redes sociais (o Facebook Sharing Debugger ajuda).
• Se os tamanhos não corresponderem ao esperado, instale o Simple Image Sizes e ajuste as dimensões.
• Se trabalha com uma equipa de autores, adicione o código de verificação obrigatória para que a publicação sem miniatura vá para rascunho.

Estes dez minutos vão poupar horas de edição manual e dezenas de leitores perdidos. Faça-o agora.