Een inhoudstafel maken in WordPress (zonder plugin)

Je wil het de lezer zo makkelijk mogelijk maken om snel doorheen je artikels te navigeren. Zeker bij wat langer uitgevallen stukken van pakweg meer dan 2.000 woorden. Dat is natuurlijk prima te regelen door nog maar eens een plugin te installeren. Maar wist je dat een inhoudstafel maken in WordPress ook prima kan zonder plugin?

Leestijd: ca. 4 minuten

Je ziet die zo’n inhoudstafel steeds vaker terugkomen op moderne WordPress-sites. Lezers kunnen snel door naar het gedeelte van het artikel dat hen het meest aanspreekt. Een stukje gebruiksgemak voor de immer gehaaste lezer, zeg maar. Daarnaast is ook Google grote fan van die functie. Google kan immers veel makkelijker de inhoud en structuur van je blogpost doorgronden. Een voordeel als je graag wil scoren in Google met je content.

Het gaat hier om een lijstje met linkjes (meestal ergens bovenin je artikel geplaatst) die de lezer bij een klik meteen naar een specifiek plek in het artikel brengt. Deze links zijn ook wel bekend als ankerlinks, springlinks of jump links.

Inhoudstafel maken in WordPress: 2 belangrijke bouwstenen

1. In de basis is zo’n inhoudstabel – in het Engels table of contents of kortweg TOC – eigenlijk een lijst met hyperlinks. De inhoudstafel maken in WordPress gebeurt dus door een lijst-blok uit de Gutenberg blokeditor in je artikel te schuiven en linkjes naar specifieke plaatsen in je artikel te maken.
2. Er is een hoofdrol weggelegd voor de tussenkopjes van je blogpost. Dat zijn de plekken waar naartoe gesprongen wordt wanneer men een ankerlink aanklikt. En opgelet: de tussenkopjes moeten heading tags zijn. Als je de tussenkopjes maakt door gewone body tekst in het vet te zetten of groter op te maken, werkt het niet.

Eenvoudige inhoudstafel maken met alleen de blokeditor van WordPress

Stap 1: de items voor je inhoudstafel selecteren

Ieder ieder item uit je inhoudstabel moet dus gekoppeld worden aan een tussenkopje in een artikel. Om geen verwarring te zaaien bij je lezers kies je er best voor om de items uit de inhoudstafel van je artikel gelijk te houden aan de tussenkopjes. En dus:

1. Ga naar de plek waar je de inhoudstafel voor je artikel wil plaatsen (en tik Enter).
2. Kies indien gewenst een Paragraaf blok voor de titel van je inhoudstabel (en verzorg de opmaak ervan).
3. Tik Enter en kies een Lijst blok (als je wil kan je ook voor een genummerde lijst gaan).
4. Kopieer de tekst van de tussenkopjes uit je artikel en plak deze in je Lijst blok.
5. Herhaal de vorige stap voor alle volgende tussenkopjes.

Stap 2: aanklikbare links maken

De inhoudstafel voor je artikel staat er. Nu nog elk lijstitem aanklikbaar maken (en laten doorscrollen naar de juiste sectie van je artikel):

1. Open het Instellingen-menu van WordPress (tandwiel-icoontje rechtsboven)
2. Kies voor de sectie Blok
3. Zet de cursor in de eerste tussenkop van je artikel
4. Keer terug naar het instellingen-menu van WordPress en scrol naar beneden. Open het tabje Geavanceerd
5. In het vakje HTML ANKER kan je een naam voor die specifieke jump link kiezen (typ één of twee woorden — zonder spaties — om een uniek webadres te maken voor dit blok, genaamd een “anker.” Daarna kun je direct naar deze sectie op je pagina linken). Houd het kort en simpel voor jezelf.
6. Kopieer het HTML ANKER dat je net aanmaakte (CTRL + C)
7. Selecteer het eerste lijstitem uit je inhoudstafel en maak een hyperlink. Alleen: zet een hashtag (#) in het vak waar normaal het linkadres hoort, en plak er het HTML ANKER onmiddellijk achteraan (CTRL + V).
8. Klik op Verzenden om te bevestigen.
9. Herhaal stappen 3 tot en met 8 voor alle items uit je inhoudstafel.

Stap 3: controleren of de inhoudstafel ook echt werkt

Als het goed is heb je nu zelf een inhoudstabel voor je WordPress-artikel gemaakt. Om na te gaan of het zaakje werkt kan je het stuk best aan de voorkant van je blog bekijken. Klik een link uit je inhoudstafel aan en je zou onmiddellijk naar een bepaald hoofdstuk in je artikel moeten springen.

Merk ook op dat de url/het linkadres in de adresbalk boven in je internetbrowser gewijzigd is. Er is een hashtag aan toegevoegd, gevolgd door het HTML anker dat jij instelde. Het is die link die je trouwens ook kan gebruiken om vanuit andere webpagina’s specifiek naar die bepaalde sectie in je artikel te linken.

HTML/CSS code voor smooth scroll

Je zal merken dat de overgang van de link in je inhoudstafel in WordPress naar de betreffende sectie in je artikel erg abrupt is. Dat kan voor verwarring zorgen bij je lezer. Je kan die overgang ook geleidelijker laten verlopen. Door een stukje code aan je CSS toe te voegen. Dit is het codefragment:

Zet dit in het CSS-gedeelte van je blog en telkens je ankerlinks maakt zal de overgang geleidelijk verlopen.

Liever een plugin om de inhoudstafel in WordPress te maken?

Normaal gebruik ik liefst zo weinig mogelijk WordPress-plugins. Maar in dit geval kan ik je inderdaad geen ongelijk geven. Bovenstaande procedure is dan ook nogal omslachtig. Eigenlijk is dit bijna ondoenbaar als je veel blogt en in ieder artikel een aanklikbare inhoudstafel wil hebben. Enkel geschikt voor als je slechts per hoge uitzondering een inhoudstabel moet hebben. Dat is tenminste mijn mening.

Er zijn veel plugins die dit klusje voor jou wel even klaren. Zelf maak ik momenteel gebruik van de plugin SimpleTOC – Table of Contents Block. En ook zo goed als alle Gutenberg block plugins schieten je graag te hulp.

Overigens kan ik, sinds de komst van Full Site Editing in WordPress bij iedere pagina en blogpost volautomatisch die korte inhoud tonen. Ik heb er echt geen omkijken meer naar.

Conclusie?

Met een aanklikbare inhoudstafel in je blogs bied je je bezoekers wat extra gebruiksgemak. En ook Google ziet ze graag komen. In principe kan je zo’n inhoudstafel zelf maken, zonder hulp van een WordPress-plugin. Moeilijk is dat niet, maar wie veel blogt is toch beter af met een plugin. Ik heb trouwens ergens horen waaien dat het inhoudstafel-blok ergens bij één van de volgende WordPress-updates zijn opwachting zou maken. Eindelijk, zullen we maar zeggen.