Como Adicionar Legendas às Imagens do WordPress

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

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

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.

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

É 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:

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.

• Clique no botão Biblioteca de Mídia.

.

• Então selecione à sua imagem desejada.

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

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:

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.

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

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:

A seguir, clique no botão Upload.

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.

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:

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

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.

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.

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.

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.

A seguir, clique no ícone do lápis para editar os 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.

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 [+]:

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.

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

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.

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.

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.

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.

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.

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:

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.

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

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:

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:

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.

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.

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.

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.

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.