In een vorig artikel heb ik je laten zien hoe je met behulp van een plugin een inhoudsopgave kan toevoegen in WordPress. Een andere manier om zo’n inhoudsopgave toe te voegen, is door het manueel toevoegen van links naar het juiste gedeelte van jouw pagina of bericht. Dergelijke links binnen één en dezelfde pagina (of naar andere pagina’s van je website) noemen we interne links.

Als je bijvoorbeeld in de onderstaande inhoudsopgave op ‘Nog vragen?’ klikt, dan scroll je naar dat gedeelte onderaan deze webpagina.

In dit artikel laat ik je zien hoe je met behulp van een beetje HTML-code interne links kan toevoegen aan je WordPress pagina of bericht. Geen zorgen! Het is echt niet zo moeilijk als het lijkt!

Waar kan je HTML-code zien en toevoegen?

Om interne links manueel toe te voegen, heb je dus HTML-code nodig. HTML staat voor HyperText Markup Language. Het is de taal waarmee webpagina’s worden opgemaakt. Door middel van HTML-instructies kunnen aan een website kleuren, afbeeldingen en hyperlinks worden toegevoegd. Deze instructies worden door middel van markeringen (tags) op de pagina aangebracht.

Tegenwoordig kan je zonder enige kennis van HTML al heel ver komen bij het maken van websites. Met de zogenaamde WYSIWIG-editors (What You See Is What You Get), kan je je pagina opmaken zonder dat je HTML-code moet kennen.

HTML bekijken in de standaard-editor van WordPress

In de standaard-editor van WordPress, zal je rechtsbovenaan het tabblad Tekst zien. Als je daarop klikt, krijg je de HTML-code van je tekst te zien:

Hier kan je dus ook rechtstreeks HTML-code toevoegen en bewerken. Als je dan teruggaat naar het tabblad Visueel dan zie je hoe je tekst er uit zal komen te zien.

HTML bekijken in andere WordPress editors

Het kan zijn dat jouw WordPress website werkt met een andere editor doordat het gebouwd is met een thema met een eigen editor.

Ikzelf ben een grote fan van het DIVI-thema, dat zijn eigen visuele editor voorziet. Als je in DIVI tekst bewerkt, zal je daar ook het tabblad Text zien, dat de HTML-code weergeeft. Het tabblad Visual geeft weer wat de gebruiker zal zien:

 

Interne links maken

Nu we weten hoe we HTML-code kunnen toevoegen, kunnen we aan de slag met het maken van onze interne links.

Stap 1: linken naar ankerpunt

Allereerst moet je gebruik maken van deze code:

<a href="#ankerpunt">Link</a>

De <a href> geeft aan dat er een link volgt. Als de gebruiker klikt op het woordje Link zal hij doorgestuurd worden naar de plaats die is weergegeven bij href=””. In dit geval wordt er niet doorgelinkt naar een echte webpagina, maar naar een plaats binnen dezelfde pagina, daarom staat er nu # voor de link.

Stap 2: ankerpunt maken

Vervolgens plaats je deze code op de plaats waar je naar wilt linken, we noemen dit ook een ankerpunt. De naam die je invult bij name=”” moet dus dezelfde zijn als de naam die je hierboven hebt geplaatst achter het #-teken:

<a name="ankerpunt"></a>

Als je deze stappen volgt en toevoegt aan je pagina, dan wordt je automatisch doorverwezen naar een ander deel van die pagina.

Je kan op één pagina gebruik maken van meerdere ankerpunten, maar je moet er dan wel voor zorgen dat de namen van de verschillende ankerpunten uniek zijn. Je kan ook linken naar een ankerpunt op een andere pagina van je website. De link zal er dan bijvoorbeeld als volgt uitzien: href=”/webpagina/#ankerpunt”.

Als je met het DIVI-thema werkt, kan je het ankerpunt ook toevoegen bij de instellingen van de sectie waarnaar je wilt linken. In het tabblad Advanced voeg je bij CSS ID de naam in van het ankerpunt. Vervolgens link je dan naar dit ankerpunt:

Conclusie

In dit artikel heb je gelezen je interne links manueel kunt toevoegen aan een WordPress pagina, zodat de gebruiker snel kan springen naar het gedeelte dat hem interesseert. Hiermee kan je bijvoorbeeld een inhoudsopgave toevoegen aan lange artikels of je kan ook verwijzen naar een specifiek gedeelte van een andere pagina. Is dit allemaal toch te technisch voor jou? Bekijk dan hoe je met behulp van een plugin een inhoudsopgave kan toevoegen, zonder enige technische kennis.

Nog vragen?

Heb je naar aanleiding van dit artikel nog vragen, geef me dan een seintje op info@springweb.be! Ik help je graag verder!

ja, ik heb nog vragen

Als je dit interessant vond, deel het dan zeker:

Download de gratis vragenlijst

Download en vul de vragenlijst in en neem hem mee in het eerste contact met je webdesigner.

#Maak je doelen helder

#Wees voorbereid

#Kom niet voor verrassingen te staan

Creëer samen een website die voldoet aan al jouw doelen en wensen!

Bedankt!

Download de gratis checklist

Download de gratis checklist, druk hem af en start met het verzamelen van het nodige materiaal.  Als alles afgevinkt is, bezorg je het nodige materiaal aan je webdesigner!

Creëer samen een website die voldoet aan al jouw doelen en wensen!

Bedankt!

Pin It on Pinterest