Hoe kun je anker links of een anker link in WordPress zetten? Lees in dit bericht wat anker links (anchorlinks) zijn en met welke HTML codes je links kunt toevoegen aan een WordPress pagina of bericht. Zodat je webbezoekers heen en terug kunnen springen tussen teksten op dezelfde webpagina.



Wat zijn anker links?

Ankerlinks zijn klikbare titels waarmee je binnen een webpagina kunt verspringen naar een bijbehorende tekst. Zodat de lezer leest wat relevant is.

Anker links maken aanleggen in WordPress website editor HTML

Hoe anker links in WordPress zetten?

Stel je wilt binnen een pagina verspringen van de ene naar de andere plek, via een klikbare inhoudsopgave op de pagina. Dan kun je dit zelf doen via HTML. Ik leg eerst het principe uit, over hoe de HTML code is opgebouwd. Daarna zie je codevoorbeelden die je kunt knippen en plakken naar je eigen webpagina.



Aanwijzing vooraf: plakken in HTML gaat via editor modus “Tekst”:

Plak de HTML wel altijd in het “Tekst” gedeelte (HTML) van je webeditor (Klassieke weergave in WordPress, zie afbeelding). Na plakken van de voorbeeld HTML code in dit artikel pas je de HTML code aan naar jouw titels en teksten.

Teksteditor WordPress Klassieke editor ankerlinks plaatsen WordPress inhoudsopgave

De theorie (zie “De Praktijk” voor kant-en-klare code)

Uitleg over hoe HTML in elkaar zit bij gebruik van anker links:

Binnen de eerste regel van de inhoudsopgave (titel) kom een aanduiding (id) of ankerpunt waar naartoe gelinkt kan worden.
<p id=”top”></p>

Elk item in de inhoudsopgave krijgt een HTML link mee met een # (en geen /) naar de bestemming elders op de webpagina
<a href=”#12″>onderwerp 12</a>

De link komt uit bij het ankerpunt, het id dat 12 heet, dus het #12 linkt naar die plek, voorbeeld:
<h3 id=”12″>onderwerp 12</h3>

De alinea’s / paragrafen (<p>) in dit onderwerp hebben de standaard HTML:
<p>bla bla bla</p>

Nadat alle onderwerpen zijn geweest, komt er een witregel, en een link naar de top. #top linkt weer terug naar bestemming top.
<p>&nbsp;</p>
<a href=”#top” target=”_blank” rel=”&quot;noopener”>Terug naar top</a>

De Praktijk (de HTML staat voor je klaar!)

HTML anker links in WordPress zetten, gebruik deze basis HTML codes in je webpagina (via knippen/plakken):

Je kunt met anker links een inhoudsopgave of opsomming maken met klikbare links. In mijn bericht over “website testen” kun je ervaren hoe het werkt. Het enige dat je moet doen, is bijgaande HTML in je webpagina zetten en aanpassen aan je titels en alinea’s. Je hebt in totaal 4 stukjes HTML code nodig om te knippen/plakken.

KNIP/PLAK 1: HTML voor inhoudsopgave maken (voor boven de content):

<h2 id=”top?>Inhoud van deze pagina</h2>
<ol>
<li><a href=”#01?>Onderwerp 1</a></li>
<li><a href=”#02?>Onderwerp 2</a></li>
<li><a href=”#03?>Onderwerp 3</a></li>
<li><a href=”#04?>Onderwerp 4</a></li>
<li><a href=”#05?>Onderwerp 5</a></li>
<li><a href=”#06?>Onderwerp 6</a></li>
<li><a href=”#07?>Onderwerp 7</a></li>
<li><a href=”#08?>Onderwerp 8</a></li>
<li><a href=”#09?>Onderwerp 9</a></li>
<li><a href=”#10?>Onderwerp 10</a></li>
<li><a href=”#11?>Onderwerp 11</a></li>
<li><a href=”#12?>Onderwerp 12</a></li>
</ol>

 

 

KNIP/PLAK 2: HTML voor de startregel voor ELK onderwerp (de tussenkop):(knip dit voor elk onderwerp)

<h3 id=”01″>Onderwerp x</h3>

KNIP/PLAK 3: HTML voor plaatsen van de alinea’s onder de kop H3
(in WordPress kun je <p> en </p> gewoon weglaten, gewoon witruimte houden tussen elk tekstje dat je inplakt.)

<p>plak hier je alineatekst in</p>
<p>plak hier je alineatekst in</p>

KNIP/PLAK 4: HTML voor afsluiten van de inhoudsopgave, de link terug naar boven

<p>&nbsp;</p><!– Dit is alleen maar een extra witregel, kan ook via druk op knop Enter –>
<a href=”#top”>Terug naar inhoudsopgave</a>




Zo moet het gewoon lukken toch? Tot zover mijn uitleg over anker links maken in WordPress via HTML. Leuk als je deelt!

Succes met WordPress.

Gerben G. van Dijk.

 

 

 

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *