Você está procurando uma maneira fácil de adicionar links de âncora aos seus posts e páginas do WordPress? Os links de âncora são uma excelente maneira de adicionar um índice às postagens, ajudando os usuários a navegar por artigos longos. Você também pode usar links de âncora para ajudá-lo a aparecer em resultados de pesquisa específicos e melhorar suas classificações.
Este artigo mostrará a você como criar links de âncora no WordPress com facilidade.
Antes de começarmos, clique em qualquer um dos links de âncora neste índice para ir para a seção de que precisa:
Índice
- O que é um link âncora?
- Quando você deve usar links âncora?
- Como adicionar links de âncora no editor de blocos do WordPress
- Como adicionar links âncora no editor visual clássico do WordPress
- Como adicionar manualmente links âncora em HTML
- Como adicionar automaticamente links âncora com um plug-in do WordPress
- Adição de links âncora a páginas de destino
O que é um link âncora?
Um link âncora é um tipo de link no qual você pode clicar para ir automaticamente para outra área da mesma página. Isso facilita para os leitores encontrarem informações específicas em postagens e artigos longos.
Como você pode ver no exemplo acima, ao clicar em um link de âncora, você é levado instantaneamente para esse tópico na página.
Quando você deve usar links âncora?
Leva apenas alguns segundos para os usuários decidirem ficar ou sair do seu site. É seu trabalho usar esses poucos segundos para convencê-los a permanecer e interagir com seu conteúdo.
A maneira mais fácil de manter os leitores envolvidos é ajudá-los a encontrar rapidamente as informações de que precisam. Você pode fazer isso criando links de âncora para que os usuários possam pular o restante do conteúdo e ir direto para as seções que lhes interessam. Essa é uma ótima maneira de melhorar a experiência do usuário e conquistar mais leitores.
Como mencionamos anteriormente, os links de âncora também podem melhorar o SEO do WordPress. O Google geralmente exibe links de âncora nos resultados de pesquisa como um link "pular para" para que os leitores possam ir direto para uma seção específica da página de resultados.
Às vezes, o Google também mostra vários links de uma única página como links "jump to". Esses links comprovadamente aumentam as taxas de cliques nos resultados de pesquisa, o que significa mais tráfego para o seu site.
Então, como você cria um link para ir para uma parte específica de uma página no WordPress? Vamos descobrir!
Como adicionar links de âncora no editor de blocos do WordPress
A criação de links de âncora no editor de blocos do WordPress é bastante simples. Você só precisa fazer duas coisas para que seus links de âncora funcionem:
- Crie um link com o sinal # logo antes do texto âncora
- Adicione o atributo ID ao texto para o qual você deseja que o usuário salte
Siga as instruções abaixo para saber como fazer isso por conta própria.
Etapa 1: Crie seu link âncora
A primeira etapa é destacar o texto ao qual você deseja adicionar o link âncora. Em seguida, clique no ícone de inserção de link no editor de blocos do WordPress.
Clicar no ícone mostra a janela pop-up de inserção de link onde, normalmente, você adicionaria um link de página ou procuraria uma página para vincular.
No entanto, para links de âncora, é necessário inserir o sinal # e as palavras-chave da seção para a qual você deseja que os usuários saltem.
As palavras-chave que você usa devem ser:
- Esteja relacionado à seção para a qual você está criando o link
- Não ser muito longo ou complicado
- Use letras maiúsculas para tornar o texto âncora mais legível
- Inclua hífens para separar as palavras e facilitar a leitura
Depois de inserir as palavras-chave do link âncora, clique em Enter para criar o link. Em seguida, você poderá ver o link criado no editor do WordPress, mas clicar nele não fará nada.
Isso ocorre porque não há um ID conectado ao link âncora, que o navegador procura quando você clica no link.
Você pode corrigir isso adicionando o atributo ID à área de conteúdo para a qual deseja criar o link, o que exploraremos a seguir.
Etapa 2: Adicionar o atributo ID ao texto vinculado
No editor de conteúdo do WordPress, role para baixo até o conteúdo para o qual deseja que os usuários saltem quando clicarem no link de âncora. A seção de que você precisa geralmente é um título ou o início de um novo parágrafo.
Agora, clique no bloco que contém a seção para a qual deseja criar um link e navegue até as Configurações do bloco no lado direito da página.
Nas configurações do bloco, expanda a guia Advanced (Avançado ) e insira as mesmas palavras-chave que você usou para o seu link de texto âncora na caixa âncora HTML. A única diferença é que você não precisará do sinal # no início.
Ao salvar o artigo e visualizá-lo, você poderá ver o link âncora em ação. Basta clicar nele para acessar o conteúdo que você vinculou anteriormente.
Se a área de conteúdo para a qual você deseja criar um link não for um título, mas um parágrafo ou trecho de texto comum, o processo será um pouco diferente.
Nessa situação, clique no bloco para mostrar as configurações do bloco e clique no menu de três pontos para revelar mais opções.
A partir daí, selecione a opção Editar como HTML, que permite editar todo o HTML do bloco inteiro de conteúdo.
Now you need to find the HTML tag for the information you want to point to. For example, look for <p> if it’s a paragraph, or <table> if it is a table, and so on.
Depois de encontrar a tag, adicione suas palavras-chave de âncora como o atributo id, como no exemplo abaixo:
<p id="bali-hiking-adventures">
Depois de adicionar suas palavras-chave, você poderá ver um aviso explicando que o bloco contém conteúdo inválido ou inesperado.
Portanto, clique no botão Converter em HTML para salvar suas alterações.
Como adicionar links âncora no editor visual clássico do WordPress
Se você ainda estiver usando o editor clássico do WordPress, adicionar um link de âncora é um pouco diferente. Siga as etapas abaixo para saber como criar links de âncora no editor de conteúdo visual clássico do WordPress.
Etapa 1: Crie seu link âncora
Primeiro, destaque o texto que você deseja vincular e clique no botão Inserir link na parte superior do editor de conteúdo.
Em seguida, adicione suas palavras-chave âncora com o prefixo #, seguido do texto que você deseja vincular.
Etapa 2: Adicionar o atributo ID ao texto vinculado
A próxima etapa é direcionar os navegadores para a seção do conteúdo para a qual você deseja que os usuários saltem ao clicar no link âncora.
Para fazer isso, alterne para o modo Texto no editor clássico do WordPress e, em seguida, role até a seção que deseja exibir.
Next, find the HTML tag you want your anchor link to target. For example, <h2>, <h3>, <p>, etc.
Agora, adicione o atributo ID com as palavras-chave de seus links âncora sem o prefixo #. Aqui está um exemplo de como isso ficaria:
<h2 id="bali-hiking-adventures">
Agora você pode salvar as alterações e visualizar o conteúdo para ver o funcionamento do link âncora.
Como adicionar manualmente links âncora em HTML
Se você costuma usar o modo Texto para escrever conteúdo no editor clássico do WordPress, veja como criar manualmente um link de âncora em HTML.
First, create an anchor link with the # prefix using the <a href=” “> tag, similar to the example below:
<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>
Then scroll to the section of content you want to display when users click on your link. Usually, the section is an H2 or H3 tag, but it can also be another HTML element, like a simple paragraph <p> tag.
Depois de encontrar a tag HTML, adicione o atributo ID e o texto âncora sem o prefixo # da seguinte forma:
<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>
Agora você pode salvar as alterações e visualizar o conteúdo para testar o link âncora.
Como adicionar automaticamente links âncora com um plug-in do WordPress
Se você publica artigos longos regularmente, pode economizar tempo adicionando automaticamente links de âncora a diferentes títulos do seu conteúdo e criando um índice com um plug-in do WordPress. Isso facilita para os usuários encontrarem as informações de que precisam e elimina a necessidade de criar cada link de âncora manualmente.
Para fazer isso, baixe o plug-in Easy Table of Contents, instale-o e ative-o em seu site do WordPress. Se você precisar de ajuda para fazer isso, siga estas instruções para instalar um plug-in do WordPress.
O plug-in usa os títulos do seu conteúdo para adivinhar para quais seções os links devem ser direcionados, e você pode personalizar totalmente as configurações com base nas suas necessidades.
Depois de instalar e ativar o plug-in, navegue até Settings " Table of Contents para definir suas configurações.
Em seguida, ative o plug-in para os tipos de post aos quais você deseja adicionar links de âncora e desmarque as áreas em que não deseja mostrar um índice.
Você também pode ativar a opção de inserção automática. Isso permite que o plug-in crie um índice automaticamente para todos os tipos de conteúdo selecionados, inclusive conteúdo mais antigo.
Se você quiser criar automaticamente um índice apenas para artigos específicos, deixe essa opção desmarcada.
Em seguida, role a página para baixo para escolher onde deseja exibir o índice e quando deseja acioná-lo.
Por exemplo, você pode mostrar o índice antes ou depois do primeiro título e quando um determinado número de títulos estiver presente no artigo.
Mais adiante na página, você pode escolher um tema que combine com a marca do seu site e revisar configurações mais avançadas.
Lembre-se de clicar no botão Save Changes (Salvar alterações ) para preservar suas configurações.
Se você ativar a opção de inserção automática, poderá visualizar um artigo com o número certo de títulos para ver o índice em ação.
No entanto, se quiser gerar um índice manualmente, você precisará editar cada artigo individualmente.
Para fazer isso, vá para a tela de edição do seu conteúdo e role para baixo até a guia Table of Contents (Índice ) abaixo do editor.
A partir daí, clique na caixa de seleção "insert table of contents" (inserir índice) e selecione os títulos que você deseja incluir como links de âncora.
Agora você pode salvar as alterações e visualizar o artigo. O plug-in Easy Table of Contents mostrará automaticamente uma lista de links de âncora como seu índice.
Adição de links âncora a páginas de destino
Abordamos vários métodos para adicionar links de âncora ao seu site WordPress, mas e se você estiver criando uma página de destino?
Felizmente, o SeedProd, o melhor tema do WordPress e construtor de páginas de destino, permite que você crie links de âncora facilmente.
Em seu editor visual de arrastar e soltar, você pode usar o prático bloco de links de âncora para vincular uma parte de sua página de destino a outra. Se estiver usando o SeedProd para criar um tema personalizado do WordPress, poderá usar o mesmo método que mostraremos a seguir para criar links de âncora em qualquer lugar do tema.
Basta arrastar o bloco Anchor Link para a parte da página para a qual você deseja ir e digitar um nome.
Em seguida, selecione o texto em sua página de destino a partir do qual deseja criar o link, adicione o nome do link âncora com uma hashtag no início e clique em salvar.
Agora, quando você visualizar a página e testar o link, ele saltará automaticamente para a seção correta.
Você pode seguir este guia passo a passo para criar uma página de destino no WordPress se precisar de ajuda para começar.
Aí está!
Esperamos que este artigo tenha ajudado você a aprender como criar links de âncora no WordPress. Agora você pode proporcionar aos seus leitores uma melhor experiência de usuário e aprimorar seu SEO para ajudá-lo a obter mais tráfego, assinantes e clientes em potencial.
Se estiver interessado em saber quais outros plug-ins você pode usar para aprimorar seu site e economizar um tempo precioso, confira os seguintes resumos:
- Melhores plug-ins do WordPress para renovar seu site
- Os melhores plug-ins de votação para WordPress que você precisa
- Melhores ferramentas sem código para sites WordPress
- Melhores plug-ins do modo de manutenção do WordPress
- Melhores plug-ins de banner do WordPress para aumentar os leads
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
Tenho um link no rodapé (modelo), digamos que se chama "contato". Ao clicar nele, a página sobre será carregada e a rolagem será feita até a seção de contato. Como isso é feito?
Olá, Max. Para fazer isso, você criaria um link para a página sobre e adicionaria a âncora ao link de URL /sobre/#contato. Espero que isso ajude!
Olá! Adicionei o link âncora e criei o atributo id corretamente (verifiquei duas e três vezes), mas meu link simplesmente não funciona - ele não me leva a lugar algum. Não consigo encontrar nenhum artigo sobre propostas do que pode estar errado? O que pode ser? Juro que está tudo configurado como deveria. Pode haver um plug-in ou algo em meu tema que impeça isso? Obrigado!
Oi Tuija,
Sua versão do WordPress está atualizada para a versão mais recente? Você também pode tentar garantir que todos os seus plug-ins e temas também estejam atualizados. Se isso não funcionar, tente desativar seus plug-ins e ativá-los um de cada vez para ver se há algum conflito.
Hi
Estou procurando uma solução para que a âncora funcione com o menu. A primeira página está funcionando bem e rola até o local apropriado. No entanto, ao clicar no link com ID de âncora da página Contact Me, por exemplo, ele não funciona. Descobri que ele mostra MYDOMAIN.com/contact-me/#anchorID em vez de MYDOMAIN.com/#anchorID
Substituí o menu por um URL completo, como MYDOMAIN.com/#anchorID. Funcionou, mas os botões com esse URL mostram sempre a cor ativa que defini para os botões ativos. Além disso, no menu móvel, o próprio menu não fica oculto.
O URL completo funciona, mas como resolver o problema dos botões ativos e não ocultar o menu no celular?
Alguém já encontrou uma solução para isso? Agradecimentos
Olá, Andrew, você pode entrar em contato com nossa equipe de suporte https://www.seedprod.com/contact/ para obter ajuda com esse problema? Eles estão muito mais bem equipados para ajudar com questões mais técnicas.