Links gebruik je meestal om naar een andere pagina te gaan. Maar je kunt ook links maken naar een onderwerp verder naar beneden op de pagina: met anchorlinks. Dat maakt je pagina overzichtelijk, vooral als er veel tekst op de pagina staat. In dit artikel leg ik uit hoe je dit doet. Het werkt op alle websites – dus niet alleen in WordPress.
Linken naar een andere plek binnen dezelfde pagina
- Waarom zou je dat doen?
- Hoe werkt het? Het principe van anchorlinks
- Hoe maak je een anchorlink?
- Kan het ook met een plugin?
- Linken vanaf een andere pagina kan ook
- Link terug naar het begin van de pagina
Waarom zou je dat doen?
Met zo’n inhoudsopgave als hierboven zien bezoekers meteen wat er op deze pagina te vinden is.
Iedere titel is een link. Je komt meteen bij de juiste info, zonder scrollen en zoeken.
Bezoekers met een smartphone of tablet scrollen niet gauw om kopjes te scannen. Op deze manier geef je hen snel overzicht.
Hoe werkt het? Het principe van anchorlinks
Om te kunnen linken naar een tekst verderop in een pagina, moet die tekst een ankerplaats worden.
Daarna ga je de link maken: je gooit een anker uit, naar de unieke ankerplaats die je net gemaakt hebt.
Hoe maak je een anchorlink?
Je hebt twee dingen nodig: een ankerplaats en de link hier naar toe.
Stap 1. De ankerplaats
Maak je tekst op. Geef stijlen. De koppen in dit artikel zijn Koptekst 2. Koptekst 1 gebruik je niet, deze is al gereserveerd voor de Pagina- of Bericht-titel. Anders weet Google niet wat je belangrijkste titel is. Vergelijkt het met een hoofdstuktitel in een boek: een hoofdstuk kan maar één hoofdstuktitel hebben.
Zie je de stijlkiezer niet, klik dan op het meest rechtse symbool in de knoppenbalk.
Je krijgt dan de tweede rij knoppen te zien, met links de stijlkiezer.
Klik op het driehoekje naast Alinea en kies Koptekst 2.
Daarna zoek je in de HTML-code je kopjes op: rechtsboven je tekstvenster kies je de tab Tekst naast de Visueel-tab.
Zoek het kopje op dat ankerplaats gaat worden (je kunt hiervoor de zoekfunctie van je browser gebruiken, met Command-F op Mac of Control-F op Windows).
Bijvoorbeeld het kopje van deze alinea ziet er zo uit:
<h2>Hoe maak je een anchorlink?</h2>
Om hier een ankerplaats van te maken voeg je code toe:
<h2 id=”hoe-maak-je”>Hoe maak je een anchorlink?</h2>
De tag id, daarachter het = teken, en tussen dubbele aanhalingstekens een unieke naam in kleine letters, zonder spaties. Je mag eventueel wel streepjes tussen woorden gebruiken.
Nu heb je de ankerplaats waarheen je kunt linken.
Stap 2. De link naar de ankerplaats
Maak het rijtje met de links boven de tekst. Ik maak er meestal een opsommingslijst van.
Selecteer de tekst die de link moet worden en klik op de knop Link invoegen (het kettingsymbooltje).
Geef de unieke naam van de zojuist gemaakte ankerplaats op, met een # ervoor.
Klik Link toevoegen en daarna Pagina/Bericht Bijwerken.
Kan het ook met een plugin?
Natuurlijk zijn er WordPress-plugins waarmee je dit kunt doen, bijvoorbeeld TinyMCE Advanced en Table of Contents Plus*. Deze plugins bieden veel extra mogelijkheden. Heb je alleen maar op enkele pagina’s ankerlinks nodig dan kun je dit beter zonder deze plugins doen.
* Op WPbieb.nl vind je mijn handleiding voor de plugin Table of Contents Plus: Inhoudsopgave maken zonder HTML-kennis.
Linken vanaf een andere pagina kan ook
Je kunt ook een link maken naarnaar een specifiek onderdeel op een andere pagina (een kopje, afbeelding, woord of zin).
Zo kun je bijvoorbeeld vanaf verschillende pagina’s naar hetzelfde stukje informatie op één bepaalde pagina verwijzen.
Als er dan iets in die informatie verandert hoef je dat maar op één plek aan te passen.
Selecteer op die andere pagina de tekst of afbeelding die de link moet worden en klik op het kettingsymbool.
Klik op het pijltje achter Of link naar bestaand bericht of pagina.
Kies in de lijst de pagina waar je heen wil linken. Het vak URL wordt nu automatisch ingevuld. Typ achter de slash / een # en meteen aansluitend de naam van de ankerplaats.
De volledige URL is: https://www.alva-design.com/links-binnen-een-pagina-maken/#hoe-maak-je
Klik Link toevoegen en daarna Pagina/Bericht Bijwerken.
Help, de ankerplaats verdwijnt onder de header!
Als jouw website een “sticky header” heeft (dat is een header, meestal met het hoofdmenu daarin, die altijd in beeld blijft bovenaan het venster van de browser) dan kan het zijn dat de ankerplaats helemaal of gedeeltelijk onder die header verdwijnt. Het staat namelijk standaard zo ingesteld dat de plaats waar het anker naar toe wijst helemaal bovenin het browservenster wordt getoond. De sticky header zit daar dan vóór.
Om dit op te lossen moet je enkele regels aan de css van je thema toevoegen. De oplossing vind je in mijn post op WPbieb.nl: Help, de ankerplaats verdwijnt onder de header!
Link terug naar het begin van de pagina
Deze kun je op de pagina na elk onderwerp invoegen. Als je op deze link klikt spring je weer terug naar het begin van de pagina waar het lijstje met links naar de onderwerpen staat.
Maak een link van het woordje “Naar boven” (of typ een andere tekst).
Vul bij URL in: #
Bonus tip: Smooth Scrolling
Als je toch bezig gaat met interne links op een pagina, kijk dan ook even naar deze Smooth Scrolling Plugin. Deze plugin zorgt ervoor dat je bezoeker naar de interne link glijdt in plaats van springt.
Op de pagina van Smooth Scrolling zie je de plugin meteen in werking. Wel weer een extra plugin…
Bronnen: