Como criar um link de âncora no WordPress

 

Se você é proprietário de um site WordPress, garantir que seus visitantes sempre tenham uma experiência de usuário tranquila e sem falhas ao navegar em seu site deve ser uma de suas prioridades. Um usuário típico não gastará muito tempo em sua página antes de determinar se deseja continuar navegando ou se deseja sair completamente. Então você realmente não tem mais do que alguns segundos para eles ficarem.

 

Claro, isso pode ser conseguido usando muitas estratégias diferentes, mas quando se trata de melhorar a experiência do usuário em seu site, nada supera uma navegação sólida no site. Agora, quando dizemos navegação no site, queremos dizer criar diferentes menus de navegação, botões de call to action e espalhar diferentes tipos de links de navegação em seu site, incluindo links de âncora. E desta vez vamos nos concentrar em links de âncora em particular.

 

Links de âncora têm o poder de melhorar a experiência do usuário de seus visitantes, como permitir que eles acessem rapidamente a seção que lhes interessa. Fique ligado enquanto discutimos a importância desses tipos de links e mostramos algumas das melhores maneiras de adicioná-los ao seu site WordPress, tanto no Gutenberg e editor clássico.

 

Vamos cobrir:

 
  • O que são links âncora e por que são úteis?
 
  • Adicionar manualmente um link de âncora em Gutenberg
 
  • Adicionando manualmente um link de âncora no Editor Clássico
 
  • Adicionar links âncora automaticamente no WordPress
 

O que são links âncora e por que são úteis?

Como já mencionamos, os links âncora são elementos de navegação bastante úteis, pois têm a capacidade de levar os usuários a uma área específica da mesma página, permitindo que eles cheguem rapidamente à seção que lhes interessa. Também conhecido como índice, esses tipos de links costumam ser usados ​​em formas mais longas de conteúdo, como diferentes tipos de artigos, seções de perguntas frequentes ou listas de produtos ou serviços, por exemplo.

 
O que é uma taxa de rejeição?
 
 
Links do Google Go to
 

Além disso, se você listar seus links âncora como um índice, o Google pode decidir exibi-los como um rich snippet, como este:

 
Fixar links como um índice
 

Agora que cobrimos alguns dos motivos básicos pelos quais os links âncora podem ser valiosos para um site, vamos dar uma olhada em como você pode adicioná-los no WordPress.

 

Adicionar manualmente um link de âncora em Gutenberg

Para que seus links âncora funcionem, há duas coisas que você precisa fazer: primeiro, você precisa adicione um sinal # antes do texto âncora e, em seguida, adicione o atributo id ao texto para o qual você deseja que os usuários sejam direcionados quando clicarem no link de âncora.

 

Para criar seu link de âncora em Gutenberg, você precisa selecionar o texto que deseja ter como âncora e pressionar o botão Ligação botão.

 
Adicionar manualmente um link de âncora em Gutenberg
 

Um pop-up aparecerá onde você geralmente pode adicionar um URL de link.

 
Adicionar um URL de link
 

Mas em vez de fazer isso, você precisa inclua um prefixo # e insira as palavras-chave para a área específica para a qual deseja que os usuários saltem clicando neste tipo de link. Obviamente, você deve usar as palavras-chave relacionadas à seção de âncora para a qual está criando um link. Também recomendamos o uso de hifens e / ou letras maiúsculas para tornar o texto âncora mais legível em geral. Aqui está um exemplo de um prefixo #:

 

#Produtos capilares

 
Use as palavras-chave relacionadas à seção âncora
 

Aperte o botão Enter para terminar de adicionar seu link de âncora. Depois de fazer isso, você poderá ver o link da âncora no editor, mas não poderá clicar nele, pois ainda precisa criar um id para ele.

 
Termine de adicionar seu link de âncora
 

Para adicionar um ID ao link âncora, você deve encontre a seção para a qual deseja que os usuários sejam direcionados clicando em seu link.

 

Para vincular a uma seção de cabeçalho, selecione o bloco desejado e escolha o Avançado Cílio. Então no Âncora de HTML campo, você deveria adicione o mesmo texto que você usou para o seu link âncora – a única diferença é que você deve omita o prefixo #.

 
Campo âncora HTML
 
 

Se você deseja vincular a qualquer seção diferente de um título (como um parágrafo ou outros tipos de bloco), clique em um ícone de menu de três pontos (no próprio bloco) e selecione o Editar como HTML botão.

 
Botão Editar como HTML
 

Agora, encontre a tag HTML para a seção ou elemento específico. Por exemplo, <p> é um parágrafo, <h2>, <h3>etc. são títulos e assim por diante.

 

Depois de encontrar seu item, simplesmente anexar um atributo id junto com sua âncora para a tag HTML.

 

Como isso:

 
<p id="Hair-Products">
 

Depois de ver uma mensagem de que este bloco contém conteúdo inesperado ou inválido, você deve Clique no Converter para HTML botão.

 
Botão Converter para HTML
 

E é isso – você adicionou com sucesso um link de âncora a uma seção específica de seu parágrafo ou a qualquer outro bloco de sua escolha.

 

Adicionando manualmente um link de âncora no Editor Clássico

Caso prefira usar o editor clássico, você também pode criar links de âncora a partir deste editor. Veja como você pode fazer isso.

 

Em primeiro lugar, selecione o texto do link âncora desejado e pressione o botão Inserir / Editar botão de link.

 
Adicione manualmente um link de âncora no editor clássico
 

Em seguida, adicione um prefixo # e um slug para seu link.

 
Adicione um prefixo e um slug para o seu link
 

Depois de concluir esta etapa, você deve adicione o atributo id à seção para a qual deseja que seus usuários naveguem clicando em seu link.

 

Mude o seu modo para Texto Primeiro e depois encontre a tag html da seção à qual deseja adicionar o atributo id (eu gosto <h2>, <p>, e assim por diante).

 
Mude o seu modo para Texto
 

Adicione o atributo id junto com o slug do link de âncora, mas sem o prefixo #. Por exemplo:

 
<p> id=“Hair-Products”>
 

Certifique-se de clicar em publicar / atualizar sua página / postagem e, em seguida, visualizar para ver a aparência do seu link âncora.

 

Se você preferir escrever e editar seu conteúdo usando o modo Texto inteiramente, você também pode usá-lo para criar seus links âncora usando HTML do zero.

 
 
<a href="https://qodeinteractive.com/magazine/how-to-add-anchor-link-in-wordpress/#Hair-Products">Hair Products</a>
 

Em seguida, encontre a área para a qual deseja que os usuários sejam levados clicando no link âncora (um título que geralmente é marcado como <h2> Y <h3>, um parágrafo marcado como <p>, etc.) e adicione seu atributo de ID à tag HTML (mais uma vez, sem o prefixo #):

 
<p> id="Hair-Products"> Hair Products</p>
 

Depois de salvar suas alterações, vá em frente e visualize a aparência do seu link de âncora.

 

Adicionar links âncora automaticamente no WordPress

Se você cria e publica regularmente conteúdo de formato longo em seu site (como artigos particularmente longos, por exemplo), também pode querer adicionar links âncora automaticamente para acelerar o processo. Felizmente, o WordPress tem uma vasta comunidade online que cria regularmente muitas ferramentas e plug-ins úteis, muitos dos quais podem ser usados ​​gratuitamente. Entre esses plugins, existe também um plugin chamado Índice fácil, que você pode usar para criar links âncora em seu site automaticamente.

 
Índice fácil
 

Como o nome sugere, este plugin permitirá que você crie facilmente um índice com uma lista de links âncora e adicione-o às suas páginas, postagens e / ou tipos de post personalizados. Você também pode habilite a opção de inserção automática para adicionar seus links âncora automaticamente, ou você você pode desmarcar esta opção e definir o índice apenas para páginas / postagens específicas.

 

Já temos um artigo que fala em profundidade sobre como adicionar um índice no WordPress usando este plug-in útil, por isso recomendamos que você verifique se deseja dividir suas páginas ou postagens em seções diferentes para uma melhor navegação.

 

Terminando as coisas

Os links de âncora podem ser um ótimo complemento para qualquer site da Web, pois permitem que os usuários pule de forma rápida e fácil para a seção que desejam ler. Por sua vez, eles podem ajudar a melhorar sua navegação e melhorar a experiência do usuário do seu site como um todo. Adicionar esses tipos de links às suas páginas ou postagens pode parecer complexo no início, mas quando você olhar mais de perto as instruções apresentadas acima, verá que esse processo não é nada difícil. Apenas certifique-se de seguir cuidadosamente todas as etapas e pronto.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: