Uma imagem pode valer mais de 1.000 palavras, mas uma ou duas frases de texto com uma imagem como legenda geralmente podem ajudar na compreensão. Estudos de rastreamento ocular mostram que os usuários do site frequentemente se concentram em imagens atraentes e relevantes e acompanham através da leitura de textos relacionados em legendas adjacentes.

Mas se seu trabalho é colocar imagens e legendas em suas páginas da web, pode ser difícil fazer com que esses elementos apareçam juntos de forma consistente. Portanto, neste guia, mostraremos como adicionar legendas no WordPress.

Como criar legendas de imagens do WordPress

A relação entre uma imagem e sua legenda pode começar assim que você a carrega para o WordPress. Há duas abordagens comuns para se obter imagens e legendas juntas:

  1. Crie legendas na Biblioteca de Mídia WordPress.
  2. Crie legendas no Editor do WordPress “on the fly”

Vamos dar uma olhada em ambos.

Como criar legendas de imagens a partir da Biblioteca de Mídia

As imagens que você adiciona à Biblioteca de Mídia geralmente acabam em pastas em seu servidor web, enquanto as informações sobre as imagens – incluindo legendas – são armazenadas no banco de dados do WordPress.

Para acessar a Biblioteca de Mídia:

  • Selecione Mídia > Biblioteca do Painel do WordPress
  • Clique no botão Adicionar Novo para carregar sua imagem alvo
Adicionando uma nova imagem à Biblioteca de Mídia.
Adicionando uma nova imagem à Biblioteca de Mídia.

Clicando nessa miniatura de imagem, aparece a janela Detalhes do Anexo, onde você pode adicionar sua legenda de imagem.

Texto da legenda adicionado na janela Detalhes do Anexo
Texto da legenda adicionado na janela Detalhes do Anexo.

Adicione seu texto favorito no campo “Legenda” e pronto, a legenda da sua imagem foi adicionada. Você pode ficar feliz em saber que, ao editar os detalhes da imagem aqui, o WordPress salvará automaticamente seu trabalho enquanto você digita.

Você também pode ir diretamente para um upload de mídia selecionando Mídia > Adicionar Novo no Painel de Controle do WordPress:

  • Selecione (ou arraste e solte) a imagem a ser carregada.
  • Então clique no link Editar ao lado da miniatura da imagem.
Adicionando uma imagem após selecionar Mídia > Adicionar novo.
Adicionando uma imagem após selecionar Mídia > Adicionar novo.

Clicando em Editar abre a janela que inclui o campo de legenda da imagem:

Adicionando um título após iniciar um upload em Mídia > Adicionar Novo.
Adicionando um título após iniciar um upload em Mídia > Adicionar Novo.

É lá que você poderá adicionar à sua legenda preferida. Desta vez, porém, você precisa salvar suas mudanças rolando para baixo até que você possa clicar no botão Atualizar:

Salve seu trabalho após adicionar uma legenda de imagem.
Salve seu trabalho após adicionar uma legenda de imagem.

Agora que você tem legendas armazenadas com suas imagens na Biblioteca de Mídia, você pode facilmente apresentá-las em uma página web ou em um artigo de blog.

Vamos ver como fazer isso usando o editor de blocos e o Editor Clássico.

Como adicionar uma imagem com uma legenda no Editor de Blocos

Para adicionar uma imagem no editor de blocos:

  • Clique no ícone [+] para exibir o painel de blocos.
  • Clique no ícone de Imagem.
Os Blocos Disponíveis no modal.
Os Blocos Disponíveis no modal.
  • Clique no botão Biblioteca de Mídia.

.

Escolhendo a fonte de uma imagem.
Escolhendo a fonte de uma imagem.
  • Então selecione à sua imagem desejada.
Navegando na Biblioteca de Mídia
Navegando na Biblioteca de Mídia.

A imagem e sua legenda são adicionadas ao seu layout.

Um exemplo de uma legenda de imagem exibida no editor de blocos WordPress.
Um exemplo de uma legenda de imagem exibida no editor de blocos WordPress.

Como adicionar uma legenda de imagem no Editor Clássico

No Editor Clássico, você pode adicionar uma imagem e sua legenda clicando no botão Adicionar Mídia:

Adicionando mídia no Editor Clássico do WordPress.
Adicionando mídia no Editor Clássico do WordPress.

Uma vez lá, você verá o campo de legenda à direita para que você possa editar. Quando estiver satisfeito com o texto, clique no botão Inserir no artigo.

Esse botão será rotulado como Inseri na página se você estiver editando uma página do WordPress ao invés de um artigo de blog.

Inserindo uma imagem com uma legenda no editor Clássico do WordPress.
Inserindo uma imagem com uma legenda no editor Clássico do WordPress.

Sua imagem e legenda serão exibidas de volta no editor.

Imagem e legenda exibida no Editor Clássico do WordPress
Imagem e legenda exibida no Editor Clássico do WordPress.

Como criar legendas diretamente do editor WordPress

A beleza do software é que geralmente há várias maneiras de se obter o mesmo resultado. WordPress e legendas de imagens não são exceções.

Como fazer o upload de uma imagem e adicionar uma legenda no Editor de Blocos

No editor de blocos, clique no ícone [+] e escolha a opção de bloco de imagens:

O painel de Blocos Disponíveis
O painel de Blocos Disponíveis.

A seguir, clique no botão Upload.

Carregando uma imagem de dentro do editor de blocos.
Carregando uma imagem de dentro do editor de blocos.

Uma vez que você selecionar (ou arrastar e soltar) sua imagem, o WordPress irá colocá-la no editor. Você verá o texto “Adicionar legenda” abaixo dele.

Colocando uma imagem sem uma legenda pré-existente.
Colocando uma imagem sem uma legenda pré-existente.

Para adicionar sua legenda de imagem, simplesmente substitua “Adicionar legenda” por suas próprias palavras.

Note que a legenda que você cria não é salva na Biblioteca de Mídia ao usar esta abordagem no editor de blocos.

Como fazer o upload de uma imagem e adicionar uma legenda no Editor Clássico

Se você estiver usando o Editor Clássico, carregue sua imagem clicando no botão Adicionar Mídia:

Começando um upload de imagem no Editor Clássico do WordPress.
Começando um upload de imagem no Editor Clássico do WordPress.

A seguir, clique em Upload Files na janela Adicionar Mídia para selecionar (ou arraste e solte) sua imagem.

Escolhendo fazer o upload de uma imagem no diálogo Adicionar Mídia.
Escolhendo fazer o upload de uma imagem no diálogo Adicionar Mídia.

Sua nova imagem será enviada para a Biblioteca de Mídia e exibida como selecionada com uma marca de verificação. Adicione sua legenda de imagem no campo Legenda disponível no painel de Detalhes do Anexo.

Adicionando uma legenda no painel de Detalhes do Anexo.
Adicionando uma legenda no painel de Detalhes do Anexo.

Após escrever sua legenda, clique no botão Inserir no artigo (ou Inserir na página).

Sua legenda será salva com quaisquer outros detalhes na Biblioteca de Mídia e aparecerá com a imagem de volta no Editor Clássico.

Uma legenda exibida após o upload de uma imagem no Editor Clássico do WordPress.
Uma legenda exibida após o upload de uma imagem no Editor Clássico do WordPress.

Como editar uma legenda de imagem WordPress existente

E se você precisar mudar ou atualizar legendas já adicionadas a uma imagem? Você pode fazer isso em apenas alguns passos. Aqui está como.

Como editar uma legenda existente no Editor de Blocos do WordPress

O editor de blocos trata uma legenda como qualquer outro texto. Para editar uma legenda, simplesmente clique no texto Fazer alterações.

Editando uma legenda existente no editor de blocos do WordPress.
Editando uma legenda existente no editor de blocos do WordPress.

Esteja ciente que as legendas editadas desta forma no editor de blocos não são salvas com os detalhes da imagem na Biblioteca de Mídia.

Como editar uma legenda existente no Editor Clássico do WordPress

Se você estiver usando o Editor Clássico, clique na imagem para exibir a barra de ferramentas de controle de imagem.

Barra de ferramentas de controle de imagem exibida para a imagem selecionada.
Barra de ferramentas de controle de imagem exibida para a imagem selecionada.

A seguir, clique no ícone do lápis para editar os detalhes da imagem.

Editando uma legenda no diálogo Detalhes da imagem.
Editando uma legenda no diálogo Detalhes da imagem.

Digite seu novo texto no campo Legenda e então clique no botão Atualizar. Isso salvará sua nova legenda de imagem na Biblioteca de Mídia e o levará de volta ao editor.

Editando uma legenda existente como texto regular.
Editando uma legenda existente como texto regular.

Dica: O Editor Clássico também permite que você edite legendas exatamente como outros textos em uma página da web. Basta lembrar que as legendas atualizadas dessa forma não são salvas com os detalhes da imagem na Biblioteca de Mídia.

Como adicionar legendas em uma galeria de imagens do WordPress

Você pode usar métodos similares para adicionar legendas às imagens nas galerias do WordPress.

Adicionando legendas a uma galeria WordPress usando o Editor de Blocos

O editor de blocos oferece a Galeria como uma opção após clicar no ícone [+]:

Criando uma nova galeria de imagens no WordPress.
Criando uma nova galeria de imagens no WordPress.

Neste caso, estamos assumindo que este site WordPress já possui as imagens e legendas salvas, então você clicará no botão Biblioteca de mídia.

Selecionar Upload e adicionar legendas manualmente também seria uma opção.
Selecionar Upload e adicionar legendas manualmente também seria uma opção.

Na Biblioteca de Mídia, clique nas miniaturas das imagens que você quer na galeria. As marcas de verificação indicam suas seleções.

Selecionando às imagens para uma nova galeria de fotos.
Selecionando às imagens para uma nova galeria de fotos.

Clique no botão Criar uma Nova Galeria para continuar.

Como etapa final antes de colocar uma galeria em artigos/páginas de blog, a caixa de diálogo Editar galeria permite arrastar e soltar imagens para alterar a ordem em que aparecem e adicionar ou remover imagens da sua seleção.

Reordenando às imagens escolhidas para a galeria.
Reordenando às imagens escolhidas para a galeria.

Quando você estiver satisfeito com os resultados, clique no botão Inserir Galeria.

O tema Twenty Twenty WordPress usado para este exemplo sobrepõe o texto da legenda à imagem associada.

Uma amostra de uma galeria de imagens com legendas no editor de blocos.
Uma amostra de uma galeria de imagens com legendas no editor de blocos.

Adicionando legendas a uma galeria WordPress usando o Editor Clássico

Veja aqui como adicionar uma galeria de imagens com legendas usando o Editor Clássico do WordPress.

Coloque seu cursor onde você gostaria que sua galeria fosse inserida, então:

  • Clique em Adicionar Mídia.
  • Escolha Criar Galeria na barra lateral esquerda.
As imagens selecionadas serão destacadas com marcas de verificação.
As imagens selecionadas serão destacadas com marcas de verificação.

Você pode navegar pelas imagens disponíveis para sua galeria sob a aba Biblioteca de mídia.

  • Selecione às imagens que você gostaria de usar em sua galeria (indicadas por marcas de verificação).
  • Clique em Criar uma Nova Galeria.

Suas imagens selecionadas aparecerão na janela Editar Galeria. Lá, você pode editar o texto de legenda para cada uma delas e, se precisar, você pode mudar a ordem onde às imagens são mostradas.

Arraste e solte as miniaturas para mudar a ordem das imagens na galeria.
Arraste e solte as miniaturas para mudar a ordem das imagens na galeria.

Quando você estiver satisfeito com o conteúdo da sua galeria e com as legendas de suas imagens, clique em Inserir Galeria.

Suas imagens e legendas serão exibidas no editor.

 Você deve editar a galeria novamente para modificar as legendas.
Você deve editar a galeria novamente para modificar as legendas.

Note que as legendas não podem ser editadas nesta visão. Para fazer isso:

  • Clique em qualquer lugar da galeria para destacar o grupo.
  • Clique no ícone do lápis.

Você retornará ao diálogo Editar Galeria visto no passo anterior, onde você poderá editar novamente as legendas.

Mudando a aparência de legendas da galeria do WordPress usando um plugin

Por padrão, o WordPress usa apenas o campo Legenda armazenado na Biblioteca de Mídia quando aplica automaticamente legendas de imagens. Entretanto, o plugin Gallery Image Captions (GIC) fornece um hook para código PHP personalizado que pode construir legendas a partir de qualquer um dos campos detalhados na biblioteca, incluindo campos personalizados.

GIC confia nos atalhos do WordPress – especificamente, o shortcode [gallery] – para acionar a execução do PHP personalizado que você escreve. Esse código identifica quais campos de detalhe na Biblioteca de Mídia serão parte de uma legenda e pode até incluir HTML para ajudar a formatar o layout da legenda.

Quando você cria uma galeria usando o Editor Clássico, o atalho [gallery] é inserido nos bastidores. Você pode ver isso clicando na aba Texto para revelar o código:

Por padrão, o Editor Clássico gera atalhos para galerias de imagens.
Por padrão, o Editor Clássico gera atalhos para galerias de imagens.

Em sua forma mais simples, o atalho [gallery] inclui os números de identificação das imagens selecionadas para a exibição.

Por padrão, o editor de blocos gera imediatamente o HTML para uma galeria ao colocar um grupo de imagens em uma página web, mas você ainda pode escolher a abordagem de shortcode:

  • Clique no ícone [+] no editor.

Isso exibirá a tabela de blocos disponível.

  • Comece a digitar “shortcode” no campo de pesquisa.
  • Clique no ícone [/] (código de atalho) quando ele aparecer.
Solicitando um bloco de código de atalho.
Solicitando um bloco de código de atalho.

Você pode então digitar o atalho no novo bloco.

Adicionando um código de atalho no editor de blocos.
Adicionando um código de atalho no editor de blocos.

Você deve editar o código WordPress dentro do seu tema para usar o plugin GIC. Você pode adicionar seu código PHP personalizado para legendas editando o arquivo functions.php do seu tema. Como esse arquivo pode ser substituído quando um tema é atualizado, é melhor criar um Child Theme antes de fazer alterações nos principais arquivos do WordPress. E, só para ficar do lado seguro das coisas, faça um backup.

Uma abordagem alternativa é usar um plugin como o Code Snippets, que permite que você insira PHP no código do seu site sem editar functions.php.

Quer você esteja editando diretamente o arquivo functions.php ou tirando vantagem de um plugin como o Code Snippets, seu código será algo parecido com isto:

Uma função PHP que pode ser acionada pelo atalho para galerias de imagens.
Uma função PHP que pode ser acionada pelo atalho para galerias de imagens.

A personalização chave ocorre nas linhas 17 e 18 acima, onde o título e o conteúdo das legendas da Biblioteca de Mídia está sendo inserido dentro de alguma marcação HTML básica para mudar a aparência das legendas.

Na Biblioteca de Mídia, imagens de galerias em potencial exigirão texto nesses campos:

Com o plugin GIC instalado com o código PHP personalizado, as legendas das imagens na galeria agora se parecem com isto:

Extensão das legendas geradas pelo plugin GIC e código PHP personalizado.
Extensão das legendas geradas pelo plugin GIC e código PHP personalizado.

Como adicionar legendas de imagem às imagens em destaque

Uma imagem em destaque, por padrão, não terá legenda na maioria dos temas de WordPress.

Imagem em destaque em uma página (fundo) e na Biblioteca de Mídia (primeiro plano).
Imagem em destaque em uma página (fundo) e na Biblioteca de Mídia (primeiro plano).

Por exemplo, a imagem acima é mostrada na Biblioteca de Mídia com uma legenda, mas ela aparece sem uma legenda quando usada como uma imagem em destaque.

Se você quiser uma legenda lá, o plugin FSM Custom Featured Image Caption pode ajudar.

Após o plugin ser instalado, suas configurações permitem que você especifique a classe da folha de estilo que você deseja atribuir às suas legendas, ou se você irá adicionar CSS personalizados.

O diálogo de configurações do plugin.
O diálogo de configurações do plugin.

Por padrão, o plugin Custom Featured Image Caption mostrará a legenda armazenada com a imagem na Biblioteca de Mídia, mas não no editor.

Imagem em destaque exibida com a legenda armazenada na Biblioteca de Mídia.
Imagem em destaque exibida com a legenda armazenada na Biblioteca de Mídia.

O plugin Custom Featured Image Caption também modifica a janela Featured Image dentro tanto do editor de blocos quanto do Editor Clássico para que ele possa aceitar uma legenda alternativa, substituindo qualquer legenda armazenada na Biblioteca de Mídia.

Controles de imagem em destaque adicionados pelo plugin, incluindo uma legenda alternativa.
Controles de imagem em destaque adicionados pelo plugin, incluindo uma legenda alternativa.

Você pode esconder a legenda e a própria imagem em destaque usando as opções da caixa de seleção na parte inferior do painel.

Resumo

O WordPress oferece muita flexibilidade quando se trata de adicionar e editar legendas para imagens individuais e imagens nas galerias. E se as opções incorporadas não forem suficientes, você pode usar plugins de terceiros para estender sua funcionalidade principal.

E aqui vai uma dica: se o seu projeto web requer muitas imagens, confira nosso guia sobre como otimizar imagens para web e desempenho.


Obtenha todos os seus aplicativos, banco de dados e Sites WordPress on-line e sob o mesmo teto. Nossa plataforma de nuvens de alto desempenho e repleta de recursos inclui:

  • Fácil configuração e gerenciamento no painel MyKinsta
  • Suporte especializado 24/7
  • O melhor hardware e rede do Google Cloud Platform, alimentado por Kubernetes para a máxima escalabilidade
  • Integração Cloudflare de nível empresarial para velocidade e segurança
  • Audiência global com centros de dados de até 35 e 275+ PoPs no mundo todo

Teste você mesmo com um desconto de 20 dólares em seu primeiro mês de Hospedagem de Aplicativos ou Hospedagem de Banco de Dados. Explore nossos planos ou entre em contato com as vendas para encontrar seu melhor ajuste.