WordPress - Woordenboek

WordPress Anker Link

Introductie

Een Anker-link is een speciaal soort link, waarmee verwezen wordt naar een gedeelte (stuk content) op een pagina. Hiermee wordt het voor de bezoeker mogelijk om via een link te “springen” naar een ander gedeelte op een pagina.

Deze link kan zowel op dezelfde pagina gebruikt worden als vanaf een andere pagina.

Hebben we bijvoorbeeld een contactformulier op een contact-pagina geplaatst met boven dat formulier een stukje inleidende tekst dan is het mogelijk om vanaf een andere pagina direct naar het formulier te “springen” en die inleidende tekst dan automatisch voorbij te scrollen.

Anker-links worden ook wel gebruikt om bij een uitgebreide pagina (blog-artikel) een inhoudsopgave aan te maken.

De links in de inhoudsopgave verwijzen dan direct naar het bijbehorende stuk tekst, waarmee de bezoeker dan direct naar het gedeelte op de pagina kan “springen” zonder zelf te hoeven te scrollen met de muis.

Zo hebben we hier rechts een inhoudsopgave bij dit artikel opgenomen, waarmee het mogelijk is om naar de verschillende sub-teksten te springen in dit artikel. Dat hebben we dus aangemaakt met “ankers”.

Anker Link Aanmaken

Er zijn diverse manieren om een anker op een pagina aan te maken. Page Builders als WPBakery of Elementor zijn de meest vriendelijke (eenvoudige) om ankers aan elementen toe te kennen.

De Gutenberg en de Classic Editor van WordPress vragen zo hun eigen methode’s.

Als eerste een voorbeeld anker aangemaakt met de Classic Editor (TinyMCE).

Classic Editor Anker

De Classic Editor van WordPress kent geen optie om eenvoudig een anker aan te maken. Maak je gebruik van de Classic Edior i.p.v. een Pagebuilder als WPBakery of Elementor een ook niet van de Gutenberg-Editor raden we je aan om TinyMCE Advanced te installeren om van de extra mogelijkheden van de Classic Editor gebruik te kunnen maken.

Je krijgt dan extra menu-opties en via “Invoegen -> Anker” maak je dan een anker aan:

WordPress Anker aanmaken

Anker aanmaken via Classic Editor

Als eerste ga je met de cursor op de plaats staan in de contant waar het anker moet komen. Vaak is dat voor een koptekst, dan voeg je zoals in de afbeelding hiervoor, voor “Anker” en geef je een naam op voor het anker:

WordPress Anker Naam

Anker benaming

Let op: dat de naam die je hier opgeeft “uniek” per pagina dient te zijn. 

Zie de anker-naam als het adres op de pagina waar naar toegesprongen dient te worden. Twee dezelfde benamingen zou dan dus fout gaan. een postbode weet ook niet in welke brievenbus de post moet als in één straat twee dezelfde huisnummers bestaan.

In de naam mogen ook geen spaties worden gebruikt.

Na het opgeven van de anker-naam op OK geklikt te hebben is het anker aangemaakt. Om nu gebruik te maken van het anker, dienen we ergens op dezelfde pagina een link te plaatsen naar dat anker.

Stel we hebben het aangemaakte anker “dashboard” genoemd en we willen daarna toe laten springen dan plaatsen we ergens een verwijzende tekst en maken dan een (interne) link aan zoals we gewend zijn. De naam van die link is dan dezelfde als de naam van het anker, alleen met een # ervoor.

Dus:

WordPress Anker Link Invoegen

Link Invoegen

Nu zal als de bezoeker op de link klikt de bezoeker direct naar het gedeelte op te pagina gescrolled worden waar we het anker geplaatst hadden.

Anker Handmatig aanmaken

Een anker handmatig toevoegen kan ook. We dienen dan eerst te switchen naar de “tekst-modus” van de Classic Editor en type dan op de plaats waar we het anker willen plaatsen de link-code:

WordPress Anker Handmatig Invoegen

Anker Handmatig Invoegen

De code is dus “<a id=”anker-naam”></a>.

Na het aanmaken dien je dus alleen nog ergens de link naar het anker te plaatsen als hiervoor.

Ankers in Gutenberg

Maken we gebruik van kopteksten via de blok-editor Gutenberg dan is het relatief eenvoudig om een anker aan te maken.

Als eerste dien je dan de koptekst te plaatsen en via “Geavanceerd” is het dan mogelijk een anker toe te voegen aan de koptekst:

Gutenberg Anker Maken

Gutenberg & Ankers

Na het aanmaken van de koptekst-anker dien je net als bij de Classic Editor de link ergens te plaatsen die verwijst naar het anker.

Wil je geen gebruik maken van een koptekst en een anker plaatsen in een paragraaf, dan dien je dat handmatig te doen door het paragraaf-blok te selecteren, om te schakelen naar de HTML-editor en dan het anker handmatig in te voegen:

Gutenberg Paragraaf HTML Editor

Anker aan paragraaf toevoegen (Gutenberg)

Ankers in WPBakery (Visual Composer)

Aan vrijwel ieder element van WPBakery (Visual Composer) heeft een “id” veld. Hiervoor bij het handmatig aanmaken van een anker, hadden we al gezien dat de anker-naam in de code met id=’…’ aangeduid wordt.

Het id-veld bij de WPBakery elementen dient dus ook hiervoor. Geven we bijvoorbeeld een tekst-element een naam via dat id-veld, dan is dat het anker geworden:

WPBakery Element ID

WPBakery Element ID

Zo kan ook een rij (of zelfs een kolom) een anker-naam krijgen:

WPBakery Rij Anker

Rij Element ID (anker)

Ook hier willen we nogmaals benadrukken dat ieder anker op één pagina een unieke naam dient te krijgen.

Anker-link vanaf andere pagina

Om naar een anker-link te springen vanaf een andere pagina dienen we het anker-id (de anker-naam) achter de link naar die pagina op te nemen.

Willen we bijvoorbeeld naar het contact-formulier springen op de contact-pagina, dan dienen we eerst het anker aan te maken voor het contact-formulier. Op de pagina waar we dan de link plaatsen typen we dan de anchor-naam.

Voorbeeld:

  • heeft het contact-formulier de anker-naam “contactformulier”;
  • de contact-pagina heeft de naam “contact”.

Dan wordt de link: “/contact#contactformulier”.

Anker Scroll Snelheid & Afstand

Wellicht is het je opgevallen dat bij de ankers welke wij hebben ingesteld bij de inhoudsopgave op deze pagina de scroll-snelheid van langzaam tot sneller gaat naarmate het anker verder naar beneden is geplaatst op de pagina (dus verder van de link af).

Tevens is door het gebruik van een zgn. Sticky-menu de afstand tot het anker vergroot. Anders zou de anker-link achter het menu (gedeeltelijk) verdwijnen.

Beide aanpassingen hebben we met behulp van een plugin ingesteld. Zie voor een verdere beschrijving: Anker Afstand & Scrollsnelheid.

Vragen & Info

Heeft u vragen naar aanleiding van deze uitleg, stuur ons dan een mail op: info@qwain.nl.

Ondersteuning staat bij ons op nummer 1, wij zijn u graag van dienst !

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .


Voorgaand/Volgend Onderwerp:
« «

Terug naar het WordPress Woordenboek →