Jump links in WordPress: blogposts beter structureren door intern te linken

jump linksToen Jo Han Khouw twee weken geleden zijn gastblog aanleverde moest ik een kleine puzzel oplossen. In dit lange artikel wordt veelvuldig gebruik gemaakt van voet- en eindnoten waar ook expliciet naar verwezen wordt vanuit de tekst. Op papier blader je dan even verder en zoek je de correcte verwijzing erbij maar in een blogpost wil je natuurlijk meteen kunnen doorklikken naar de voetnoot en de literatuurlijst. Dit soort interne links, waarbij je binnen een blogpost “springt” naar een ander deel van de tekst, zijn niet met een handige knop in de WordPress editor te maken maar met een klein beetje HTML kennis voeg je ze alsnog heel gemakkelijk toe. Hoe je deze anker links (een anchor tag in HTML), of jump links, maakt staat weliswaar beschreven op een supportpagina bij WordPress maar vertelt niet *wat* je er mee kunt doen.

Waarom jump links gebruiken in WordPress?

De beste reden om jump links te gebruiken is precies waarvoor ik het nodig had: je hebt een erg lang artikel dat niet per se bedoeld is om van boven naar beneden gelezen te worden. Met een persoonlijke blogpost zul je dat niet snel hebben maar zeker als je langere (vak)inhoudelijke blogposts schrijft kan het goed zijn dat je lezers de gelegenheid wilt geven alleen de voor hen relevante hoofdstukken en/of paragrafen te lezen. Een goed voorbeeld hiervan zijn de Wikipedia pagina’s die een onderwerp heel uitgebreid beschrijven maar waar ze met jump links vanuit een inhoudsopgave je rechtstreeks laten springen naar specifieke deelonderwerpen. Kijk maar eens naar het voorbeeld van de Nederlandse Wikipediapagina over het weblog.

Jo Han had een uitgebreide literatuurlijst als eindnoten en verwees vanuit de tekst naar de gebruikte literatuur in die lijst. Ook dan is het handig als je bij die verwijzing meteen kunt doorklikken en kunt springen naar de literatuurlijst. Voor voet- en eindnoten zijn jump links dus ook een goede oplossing om lezers gemakkelijk te verwijzen.

Hoewel jump links bedoeld zijn voor linken binnen een webpagina of blogpost wil dat niet zeggen dat je er niet vanuit een andere blogpost naar kunt verwijzen. Oftewel, het aanbrengen van jump links maakt het ook gemakkelijk om rechtstreeks te verwijzen vanuit je blogpost naar het correcte deel van een andere blogpost. Als ik, met hetzelfde voorbeeld van de Wikipedia pagina over weblogs, vanuit mijn blog wil verwijzen naar een overzicht van verschillende soorten blogs op die pagina dan kan ik wederom verwijzen naar de url van de Wikipedia pagina maar nog veel beter meteen linken naar het onderdeel waar dat overzichtje staat. Zo hoeft een lezer niet te bladeren en zoeken op die pagina.

Een ander voorbeeld zijn mijn eigen overzichtspagina’s die je links onder het kopje inhoudsopgave ziet. Daar verzamel ik relevante blogposts per onderwerp maar staan er meerdere onderwerpen op één pagina. Met een jump link kan ik bijvoorbeeld nu rechtstreeks verwijzen naar de blogposts over Creative Commons op Twitter of in en andere blogpost.

Hoe maak je jump links?

Stap 1. Waar link je vandaan en waar wil je naar toe springen?

Het belangrijkste is dat je vooraf even goed nadenkt of het intern linken ook echt voordeel oplevert voor je lezer. De voordelen staan hierboven beschreven maar nadelen zijn er ook. Zo kan het verwarrend zijn voor een lezer om slechts 1 alinea verder te springen in dezelfde blogpost en levert dat geen voordeel op want de lezer was al lezend ook al snel aangekomen bij de tekst. Zorg er daarom voor dat je bij de verwijzing duidelijk maakt waar de link naar toe gaat, bijvoorbeeld door bij het aanbrengen van de link in WordPress ook de titel in te vullen. De tekst die je daar invult krijgt een lezer te zien als die met de muis over de link gaat. Bijvoorbeeld de jump link die hierboven verwijst naar een kopje binnen de Wikipedia pagina. Het is niet nodig maar wel zo duidelijk.

jump links titel meegeven

Stap 2. Zoek de plek op waar je naar toe wilt linken in de Text view

Als je weet waar je naar toe wilt springen in je eigen blogpost dan zul je in de volgende stap een stukje HTML code moeten toevoegen op die plek. Dat kan echter niet in de Visual weergave in de WordPress editor en je zult moeten switchen naar de Text weergave. Deze weergaven vind je terug rechtsbovenaan in de editor als twee tabbladen. Mijn voorbeeld is de inhoudsopgave pagina over auteursrecht en digitale rechten waar ik wil springen naar het deel met de Creative Commons blogposts.

jump links

Stap 3. Een unieke id toevoegen aan de HTML code in de Text weergave

Een anker link / jump link is niet meer dan een unieke id code waar je straks naar toe gaat linken. Deze kun je op elke willekeurige plek in je blogpost toevoegen:

<a id=”eenunieksteekwoord”></a>

Dat hoeft niet perse los want je kunt de jump link ook verankeren aan een willekeurig woord in de tekst:

<a id=”eenunieksteekwoord”>prachtige manier</a>

Maar je kunt de id ook koppelen aan alle HTML tags die je al in de tekst hebt staan. Zoals in mijn geval de <strong> HTML tag waarmee het kopje Creative Commons vet is gemaakt. Je voegt dan eenvoudigweg de id toe achter de <strong> tag.

<strong id=”ccposts”>Creative Commons</strong>

Je bepaalt zelf het steekwoord maar hou er rekening mee dat dat het onderdeel van een url wordt en dat je dus geen spaties of leestekens moet gebruiken.

Stap 4. Terug naar de Visual weergave en de vertreklink toevoegen

Als je terug switcht naar de Visual weergave dan zie je niets bijzonders want jump links zijn onzichtbaar in die weergave. Je kunt er nu echter wel naar toe linken door op de gewone manier een link toe te voegen met als doel #eenunieksteekwoord

jump links insert edit link
Let hierbij dus op dat het een # teken is, gevolgd door de unieke id die je hebt toegevoegd. Zonder spaties enz.

Link je naar een jump link buiten de blogpost waar je mee bezig bent, dan moet daar de volledige url voor komen te staan van de webpagina of blogpost waar de doellink zich bevindt. In het voorbeeld van mijn Creative Commons blogposts op de inhoudsopgavepagina:

jump links
En klaar ben je! Test nog wel even na het publiceren van je blogpost of de jump links ook werken (soms doet WordPress rare dingen met handmatige HTML toevoegingen en in de preview gaat het ook wel eens fout) maar het zou eigenlijk zonder problemen moeten werken. Tijd om de ankers uit te gooien in WordPress en je lezers te laten springen door je blogposts heen.

@afbeelding Anchor Symbol via Pixabay CC0

#

Raymond Snijders

Sinds 1995 houdt Raymond zich bezig met de combinatie van ICT, bibliotheken en onderwijs vanuit het perspectief van (vooral) de bibliotheek en informatievoorziening. Thans is hij werkzaam bij de Hogeschool Windesheim als senior informatiebemiddelaar en houdt hij zich bezig met de digitale bibliotheek, contentlicenties, ebooks en auteursrecht. Over deze onderwerpen en de impact die ze (kunnen) hebben op het onderwijs en bibliotheken blogt hij sinds 2006 op zijn Vakblog. In 2013 won hij de Victorine van Schaickprijs voor zijn blog.

Comments (7) Write a comment

  1. Pingback: Jump links maken « SIA #WordPress

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • © 2006- 2019 Vakblog – werken met informatie
    Aangedreven door WordPress en duizenden liters koffie // Theme: Tatami van Elmastudio
Top