Link âncora do WordPress: Como adicionar uma rolagem de página suave

Olá internautas!

Mostrarei duas maneiras de como adicionar um link âncora do WordPress (ou algumas pessoas o chamam de link de salto ou salto de página) ao seu post, e isso funcionará também em páginas e menus.

Além disso, revelarei como alcançar a âncora a partir de outra página .

1. Adicionaremos um id personalizado em HTML e usaremos # no link para informar ao WordPress que este link está na mesma página.

2. Para obter uma rolagem suave, usaremos uma página de plug-in do WordPress para rolar para id.

Após este tutorial, você pode fazer uma dessas tatuagens…

Para que as senhoras possam ligar para você de qualquer lugar .

Também fiz um vídeo sobre como adicionar um link âncora no WordPress:

CONTEÚDO:

Configure o Simple WordPress Anchor Link sem um plugin

Como vincular a um link âncora de outra página

Um plug-in de link de âncora com rolagem de página suave

Configure o Simple WordPress Anchor Link sem um plugin

Tudo bem, a maneira mais simples de adicionar um link âncora ao seu WordPress NÃO requer nenhum plugin .

Aqui está o que quero dizer com link âncora. Você clica em um link e leva você para outra parte do mesmo artigo. Em outras palavras, ele liga para a mesma página.

O link da âncora é o link em que você clica e aciona uma rolagem para a âncora em algum lugar abaixo na mesma página.

Vamos começar. Apenas certifique-se de estar logado no seu WordPress e encontre a postagem que deseja adicionar o link âncora.

Vá para o texto que você deseja transformar em link âncora .

Vamos converter este texto em um link, clicando aqui.

Em seguida, dê um nome ao link, mas você deve colocar um sinal # antes dele.

“Não use nenhum caractere especial. Se você quiser separar palavras, você pode usar um hífen.”

O id pode ser qualquer coisa , mas aconselho usar algo curto, mas descritivo .

Porque mais tarde você verá esses links no Google Analytics, pois o Google pode vincular a partes específicas do seu site.

Por exemplo, usarei #anchor-link-info .

E salve as configurações do link.

Ah, sim, certifique-se de usar hashtags da maneira certa, para não acabar assim.

Agora, se fôssemos ao site e tentássemos clicar no novo link, nada aconteceria, exceto que haveria #anchor-link-info na URL.

Isso ocorre porque estabelecemos o link da âncora, mas seu navegador não sabe onde está a âncora. Então, vamos adicionar uma âncora ao post.

Volte para sua postagem e role para baixo até a seção que você deseja ancorar o link para acessar e realce o texto.

Eu costumo linkar para os cabeçalhos no texto como este.

Em seguida, você precisa alternar o modo de visual para texto, pode fazê-lo no canto superior do campo de postagem.

Em seguida, encontre o cabeçalho na visualização de texto (deve ser destacado).

Agora você vê que o cabeçalho está enrolado em <h2></h2> . Este é apenas o código HTML para um cabeçalho 2 (estrutura semelhante à do Microsoft Word).

Em seguida, faça um pouco de espaço entre “h2” e o “>”. E adicione o seguinte:

id="#anchor-link-info"

Então você deve ter:

<h2 id=”#anchor-link-info”> em vez de <h2>

“Basta substituir as informações do link de âncora pelo seu próprio ID de âncora .”

Tenha em mente que o id deve ser único ou você pode quebrar algo em seu site.

Então, salve o post e vá ver no site.

Quando você clica no link, ele deve levá-lo à tag âncora.

Percebo que esse scroll é muito repentino, mas é muito simples de configurar e faz bem o trabalho.

Se você quer que seja suave , precisamos de algum javascript ou usar plugin .

Mostrarei como fazer isso com um plugin abaixo.

Como vincular a um link âncora de outra página

Para criar um link para a âncora de outra página, você só precisa adicionar #your-anchor-name no final do URL do seu post (dado que você configurou uma âncora no seu post, como fizemos acima).

Aqui está como fazê-lo passo a passo.

1. Pegue o URL da postagem,

2. abra a janela de um novo navegador

3. e no final da URL adicione a âncora (com hashtag).

Por exemplo: #anchor-link-info .

4. Pressione enter e a página será aberta na seção à direita.

Por exemplo, o URL para esta seção no meu site é https://punchsalad.com/wordpress-tips/wordpress-anchor-link #anchor-link-from-other-page

Você pode adicionar este URL em qualquer lugar como um link ou no menu do WordPress e ele abrirá este tutorial nesta seção.

Um plug-in de link de âncora com rolagem de página suave

E se você quiser uma rolagem suave da página do WordPress ao clicar no link âncora? Para isso, você precisa de algum javascript .

A maneira mais fácil é instalar um plugin WordPress chamado “page scroll to id”.

Para fazer isso siga estes passos:

1. Vá para seus plugins e adicione novos.

2. Na caixa de pesquisa, digite rolagem de página.

3. Instale o plug-in.

4. Ative-o.

Agora, este plugin tem muitas configurações diferentes e você pode brincar com elas.

As configurações estão localizadas na barra de menu à esquerda: Configurações > Página Scroll to ID

Acho que o plugin funciona muito bem fora da caixa . Então vou manter tudo como padrão.

“Uma coisa a ter em mente é que, se você estiver usando o carregamento lento , o plug-in pode não encontrar o local certo na página.”

Em seguida, vamos configurar um link âncora com o plugin.

Se você seguiu o tutorial acima, volte ao post que preparamos anteriormente e remova o link e o id.

Como você pode ver, existem 2 novos ícones ao lado dos ícones de edição de texto padrão.

O primeiro é configurar o link e aquele com o alvo é a âncora ou alvo do link.

Primeiro, vamos adicionar um link âncora clicando no ícone do link.

Um pop-up aparecerá e solicitará a URL.

Basta usar o id com # , por exemplo: #anchor-link-info.

Além disso, você precisa incluir uma classe personalizada “ps2id” , que informa ao plug-in para rolar.

E se dermos uma olhada na visualização de texto, você verá que ela adicionou uma nova classe ps2id.

Então está tudo bem!

Em seguida, role para baixo até o ponto em que deseja adicionar a âncora.

Em seguida, coloque o cursor logo após o cabeçalho. ..

e, em seguida, clique no ícone de alvo .

Enquanto isso, adicione o mesmo id acima, mas sem o # , então “anchor-link-info”.

Você verá que o plugin adiciona um shortcode .

Tudo bem, ele NÃO aparecerá no site . É só dizer ao WordPress onde colocar a âncora.

Em seguida , salve suas alterações .

Vamos dar uma olhada como fica no site.

Basta atualizar a página e clicar no link …

Ele rolará suavemente até a âncora que você acabou de definir.

Como você pode ver, o shortcode não está aparecendo em nenhum lugar !

Incrível! Não é?

Você pode colocar várias âncoras em uma página , apenas lembre-se de fornecer IDs exclusivos e criar links.

Por exemplo, você pode ver que os ids para este artigo são:

#simple-wordpress-âncora-link
#anchor-link-from-other-page
#anchor-link-plugin

E os links estão no topo da página em “Conteúdo”. Isso facilita a rolagem para qualquer seção.

Dito isso, tive que desabilitar o plugin de carregamento lento, pois tenho carregamento lento com meu wordpress.

Agora, desde sua experiência de usuário de valor claro, veja como você pode melhorar a velocidade da página com alguns plugins do WordPress.