Ankerlinks maken in WordPress zonder plugins

Voeg ankerlinks toe in WordPress, zodat bezoekers direct naar een onderdeel op dezelfde of een andere pagina kunnen springen. Gebruik hiervoor de blokeditor en eenvoudige HTML-ID’s.

Laatst bijgewerkt:

Engelstalig origineel op juistheid gecontroleerd door Jesse Nickles

Een anker toevoegen aan een kop

  1. Bewerk het WordPress-bericht of de pagina met het onderdeel waarnaar je wilt linken.
  2. Selecteer het Heading-blok van dat onderdeel. Voeg zo nodig een kop toe.
  3. Open de zijbalk met blokinstellingen via Settings als deze verborgen is en klap Advanced open.
  4. Voer in het veld HTML Anchor een korte identificatie in, bijvoorbeeld shipping-info. Zet er geen #-teken voor.
  5. Sla de pagina op of werk haar bij.

Het veld HTML Anchor stelt de HTML-id van de kop in. Dat is de unieke naam waarop een spronglink zich richt. Vermijd spaties, begin met een letter en gebruik kleine letters met koppeltekens, bijvoorbeeld shipping-info. WordPress ondersteunt ook onderstrepingstekens, punten en dubbele punten.

Je kunt ook ankers maken op andere WordPress-blokken met een veld HTML Anchor onder Advanced. Een Heading-blok is meestal de nuttigste bestemming, maar niet de enige mogelijkheid.

Een link naar de kop maken

  1. Selecteer de tekst waarop lezers moeten klikken, bijvoorbeeld Spring naar verzendinformatie.
  2. Klik op de linkknop in de blokwerkbalk.
  3. Voer #shipping-info in als bestemming en pas de link toe.
  4. Sla de pagina op en test de link op de gepubliceerde pagina.

Het teken # vertelt de browser dat deze op de huidige pagina naar een overeenkomend anker moet zoeken. De ankernaam moet exact overeenkomen, inclusief hoofdletters.

Een eenvoudige inhoudsopgave maken

Geef voor een lange handleiding de belangrijkste koppen een HTML-anker en plaats bovenaan de pagina een lijst met links. Als je koppen de ankers overview en common-questions hebben, ziet een eenvoudige inhoudsopgave er zo uit:

<ul>
  <li><a href="#overview">Overview</a></li>
  <li><a href="#common-questions">Common questions</a></li>
</ul>

In de WordPress-blokeditor kun je dezelfde structuur maken met een List-blok en de gewone linkbediening. Je hebt geen extra plugin nodig.

Naar een anker op een andere pagina linken

Voeg voor een directe link naar een onderdeel op een andere WordPress-pagina het doelanker achter de URL van die pagina toe. De doelpagina moet een element met die ID bevatten.

https://example.com/faq/#shipping-info

Dit werkt voor links in andere berichten, navigatiemenu’s of berichten die je verstuurt, zolang de doelpagina een element met exact dat anker heeft.

Als je een spronglink aan een klassiek WordPress-menu wilt toevoegen, ga dan naar Appearance → Menus en voeg een Custom Link toe met de URL van de doelpagina, inclusief het anker #shipping-info. Sla daarna het menu op. HoverCraft toont deze links via zijn menulocaties. Gebruik je een blokthema, open dan Appearance → Editor → Navigation en voeg een Custom Link-blok met dezelfde URL toe.

HTML gebruiken voor meer controle

Je kunt ankerlinks rechtstreeks in HTML toevoegen door een id op het doelelement te zetten en er een link naartoe te laten verwijzen. De blokeditor kan dit ook voor je regelen.

<h2 id="shipping-info">Shipping information</h2>
<a href="#shipping-info">Jump to shipping information</a>

Gebruik een Custom HTML-blok als je ruwe HTML in de WordPress-editor wilt invoegen. Plak geen HTML-tags in een gewone alinea in de verwachting dat ze als HTML-markup worden verwerkt.

Als een ankerlink niet werkt

Als een vaste header koppen van niveau H2–H4 afdekt, kan deze CSS boven de koppen ruimte laten wanneer de browser ernaartoe springt. Pas 6rem aan de hoogte van je header aan:

h2[id], h3[id], h4[id] { scroll-margin-top: 6rem; }

Zie voor deze CSS-eigenschap de MDN-referentie voor scroll-margin-top.

Raadpleeg voor de WordPress-bediening in de editor en extra voorbeelden de officiële WordPress-handleiding voor spronglinks.