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
Neste guia passo a passo, explicaremos o que são links âncora e mostraremos como adicionar links âncora facilmente 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?
- Como adicionar links âncora manualmente no WordPress?
- Como adicionar links âncora manualmente usando o Classic Editor no WordPress?
- Como adicionar manualmente links âncora em HTML?
- Como adicionar títulos automaticamente como links âncora no WordPress?
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:
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
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”.
À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.
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.
- Crie um link âncora com um sinal # antes do texto âncora.
- 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 .
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á.
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.
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’.
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.
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’.
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.
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.
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.
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.
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.
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 .
Uncategorized