Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como adicionar links de âncora “facilmente” no WordPress (passo a passo)

Você está em:

Como adicionar links de âncora “facilmente” no WordPress (passo a passo)

Ocasionalmente, usamos links âncora em nossas postagens mais longas do WordPress para ajudar os usuários a pular rapidamente para a seção que desejam ler.

Os links âncora são frequentemente usados nas seções do índice porque ajudam os usuários a mover para cima e para baixo um artigo mais longo sem recarregar a página. Também pode ajudar com o SEO, pois o Google pode mostrá-los abaixo de suas listagens de pesquisa para facilitar a navegação (mais sobre isso posteriormente).

Neste guia passo a passo, explicaremos o que são links âncora e mostraremos como adicionar links âncora facilmente no WordPress.

Adicionando links âncora no WordPress

Preparar? Vamos começar com um exemplo ao vivo de links âncora.

Abaixo está uma lista de todos os tópicos que abordaremos neste guia. Vá em frente e clique em qualquer um desses links e você será direcionado para essa seção específica.

O que é um link âncora?

Um link âncora é um tipo de link na página que leva você a um local específico nessa mesma página. Ele permite que os usuários saltem para a seção em que estão mais interessados.

Dê uma olhada na captura de tela animada abaixo:

Visualização do link âncora

Como você pode ver, clicar no link âncora leva o usuário para a seção específica na mesma página.

Os links âncora são comumente usados em artigos mais longos como a tabela de conteúdo que permite aos usuários pular rapidamente para as seções que desejam ler.

Outro uso de links âncora é criar links de favoritos em seu site WordPress. Isso permite que você compartilhe o link do favorito nas mídias sociais ou boletins informativos por e-mail, para que, quando a página for carregada, seus usuários pulem imediatamente para a seção que você deseja que eles vejam.

Por que e quando você deve usar links âncora?

Um usuário médio gasta menos de alguns segundos antes de decidir se quer ficar ou sair do seu site. Você tem apenas alguns segundos para convencer os usuários a ficar.

A melhor maneira de fazer isso é ajudá-los a ver rapidamente as informações que estão procurando.

Os links âncora facilitam isso, permitindo que os usuários ignorem o restante do conteúdo e saltem diretamente para a parte que lhes interessa. Isso melhora a experiência do usuário e ajuda você a conquistar novos clientes/leitores.

Os links âncora também são ótimos para SEO do WordPress . O Google pode exibir um link âncora nos resultados da pesquisa como um “salto para o link”.

Ir para o link nos resultados da pesquisa

Às vezes, o Google também pode exibir vários links dessa página como links para links, e isso comprovadamente aumenta a taxa de cliques nos resultados de pesquisa. Em outras palavras, você obtém mais tráfego para seu site.

Vários saltos para links abaixo de um resultado de pesquisa

Dito isso, vamos dar uma olhada em como adicionar facilmente links âncora no WordPress.

Como adicionar links âncora manualmente no WordPress

Se você quiser apenas adicionar alguns links de âncora ou links de favoritos em seu artigo, poderá fazê-lo manualmente.

Basicamente, você precisa adicionar duas coisas para que um texto âncora funcione como pretendido.

  1. Crie um link âncora com um sinal # antes do texto âncora.
  2. Adicione o idatributo ao texto para onde você deseja que o usuário seja levado.

Vamos começar com a parte do link âncora.

Etapa 1. Criando um link âncora

Primeiro você precisa selecionar o texto que deseja vincular e depois clicar no botão inserir link no editor WordPress Gutenberg .

Adicionar um link no WordPress

Isso abrirá o pop-up de inserção de link onde você normalmente adiciona o URL ou procura uma postagem ou página para vincular.

No entanto, para um link âncora, você simplesmente usará # como prefixo e inserirá as palavras-chave da seção para a qual deseja que o usuário vá.

Criando link de âncora

Depois disso, clique no botão Enter para criar o link.

Algumas dicas úteis sobre como escolher qual texto usar como seu link âncora #:

  • Use as palavras-chave relacionadas à seção para a qual você está vinculando.
  • Não torne seu link âncora desnecessariamente longo ou complexo.
  • Use hífens para separar as palavras e torná-las mais legíveis.
  • Você pode usar letras maiúsculas no texto âncora para torná-lo mais legível. Por exemplo: #Best-Coffee-Shops-Manhattan.

Depois de adicionar o link, você poderá ver o link que criou no editor. No entanto, clicar no link não faz nada.

Isso ocorre porque os navegadores não conseguem encontrar o link âncora como um ID.

Vamos corrigir isso apontando os navegadores para a área, seção ou texto que você deseja mostrar quando os usuários clicarem no link âncora.

Etapa 2. Adicione o atributo ID à seção vinculada

No editor de conteúdo , role para baixo até a seção para a qual você deseja que o usuário navegue quando clicar no link âncora. Normalmente, é um título para uma nova seção.

Em seguida, clique para selecionar o bloco e, em seguida, nas configurações do bloco, clique na guia Avançado para expandi-lo. Você pode simplesmente clicar na guia ‘Avançado’ nas configurações do bloco de cabeçalho.

Âncora HTML

Depois disso, você precisa adicionar o mesmo texto que adicionou como link âncora no campo ‘Âncora HTML’. Certifique-se de adicionar o texto sem o prefixo #.

Agora você pode salvar sua postagem e ver seu link âncora em ação clicando na guia de visualização.

E se a seção que você deseja mostrar não for um título, mas apenas um parágrafo normal ou qualquer outro bloco?

Nesse caso, você precisa clicar no menu de três pontos nas configurações do bloco e selecionar ‘Editar como HTML’.

Editar como HTML

Isso permitirá que você edite o código HTML para esse bloco específico. Você precisa selecionar localizar a tag HTML para o elemento para o qual deseja apontar. Por exemplo, <p>se for um pagraph, ou <table>se for um bloco de tabela, e assim por diante.

Agora, você precisa adicionar sua âncora como o atributo ID para essa tag, como o código a seguir:

1<p id=”best-coffee-shops-manhattan”>

Agora você verá um aviso de que este bloco contém conteúdo inesperado ou inválido. Você precisa clicar no converter para HTML para preservar as alterações feitas.

Converter para HTML

Como adicionar manualmente o link de âncora no editor clássico

Se você ainda estiver usando o editor clássico mais antigo para WordPress, veja como você pode adicionar o link de âncora / link de salto.

Etapa 1. Crie o link âncora

Primeiro, selecione o texto que você deseja alterar para o link âncora e clique no botão ‘Inserir link’.

Adicionando um link âncora no Editor Clássico

Depois disso, você precisa adicionar seu link âncora com um prefixo de sinal # seguido pelo slug que deseja usar para o link.

Etapa 2. Adicione o atributo ID à seção vinculada

A próxima etapa é apontar os navegadores para a seção que você deseja mostrar quando os usuários clicarem no seu link âncora.

Para isso, você precisará alternar para o modo ‘Texto’ no editor clássico. Depois disso, role para baixo até a seção que você deseja mostrar.

Adicionando ID de âncora no Editor Clássico

Agora localize a tag HTML que você deseja segmentar. Por exemplo, <h2>, <h3>, <p>e assim por diante.

Você precisa adicionar o atributo ID a ele com o slug do seu link âncora sem o prefixo #, assim:

1<h2 id=”best-coffee-shops-manhattan”>

Agora você pode salvar suas alterações e clicar no botão de visualização para ver seu link âncora em ação.

Como adicionar manualmente links âncora em HTML

Se você está acostumado a escrever no modo Texto do antigo Editor Clássico no WordPress, veja como criar manualmente um link âncora em HTML.

Primeiro, você precisa criar o link âncora com um prefixo # usando a <a href=””>tag usual, assim:

1<a href=”#best-coffee-shops-manhattan”>Best Coffee Shops in Manhattan</a>

Em seguida, você precisa rolar para baixo até a seção que deseja mostrar quando os usuários clicarem no link.

Normalmente, esta seção é um cabeçalho (h2, h3, h4, etc.), mas pode ser qualquer outro elemento HTML ou mesmo uma simples tag <p> de parágrafo.

Você precisa adicionar o atributo ID à tag HTML e, em seguida, adicionar o slug de link âncora sem o prefixo #.

1<h2 id=”best-coffee-shops-manhattan”>Best Coffee Shops in Manhattan</h4>

Agora você pode salvar suas alterações e visualizar seu site para testar o link âncora.

Como adicionar títulos automaticamente como links âncora no WordPress

Esse método é adequado para usuários que publicam regularmente artigos longos e precisam criar um índice com links âncora.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Easy Table of Contents . Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress .

Este plugin permite que você gere automaticamente um índice com links âncora. Ele usa títulos para adivinhar as seções de conteúdo e você pode personalizá-lo totalmente para atender às suas necessidades.

Após a ativação, basta acessar a página Configurações » Índice para definir as configurações do plug-in.

Configurações fáceis do plug-in do Índice

Primeiro, você precisa habilitá-lo para os tipos de postagem em que deseja adicionar o índice. Por padrão, o plug-in está habilitado para páginas, mas você também pode habilitá-lo para suas postagens.

Você também pode ativar a opção de inserção automática. Isso permite que o plug-in gere automaticamente o índice para todos os artigos, incluindo os artigos mais antigos que correspondem aos critérios.

Se você deseja gerar automaticamente um índice para artigos específicos, pode deixar esta opção desmarcada.

Em seguida, role um pouco para baixo para selecionar onde deseja exibir o índice e quando deseja que ele seja acionado.

Selecione onde e quando exibir o índice

Você pode revisar outras configurações avançadas na página e alterá-las conforme necessário.

Não se esqueça de clicar no botão ‘Salvar alterações’ para armazenar suas configurações.

Se você ativou a opção de inserção automática, agora poderá visualizar um artigo existente com o número especificado de títulos.

Você notará que o plug-in exibirá automaticamente um índice antes do primeiro título do artigo.

Se você quiser gerar manualmente o índice para artigos específicos, precisará editar o artigo em que deseja exibir um índice com links âncora.

Na tela de edição da postagem, role para baixo até a guia ‘Índice’ abaixo do editor.

Adicionar índice manualmente com links âncora

A partir daqui, você pode marcar a opção ‘Inserir índice’ e selecionar os títulos que deseja incluir como links âncora.

Agora você pode salvar suas alterações e visualizar seu artigo. O plug-in exibirá automaticamente uma lista de links âncora como seu índice.

Visualização do índice

Para obter instruções mais detalhadas, consulte nosso artigo sobre como adicionar sumário no WordPress .

Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente links âncora no WordPress. Você também pode querer ver nossas dicas sobre como otimizar corretamente suas postagens de blog para SEO e nossa escolha dos melhores plugins de construtor de páginas do WordPress .

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook .

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.