Een WordPress theme is de visuele laag van je website die bepaalt hoe je content wordt gepresenteerd. Het regelt de lay-out, het kleurenschema en de typografie van je pagina’s, zonder dat je de tekst of afbeeldingen in de database hoeft aan te passen.
Technische werking
- WordPress laadt het actieve thema bij het opstarten van de site.
- Het systeem kijkt naar het template-hiërarchie schema om te bepalen welk specifiek bestand hij moet laden, zoals
single.php voor een artikel of page.php voor een statische pagina.
- De PHP-bestanden in het thema halen de opgeslagen tekst en instellingen uit de database.
- Deze gegevens worden samen met CSS-stijlen en JavaScript omgezet in een HTML-pagina die de browser van de bezoeker kan tonen.
Belangrijke begrippen
Parent theme
Dit is het hoofdthema dat je installeert. Het bevat alle basisbestanden en functies die de site laten werken.
Child theme
Een afgeleid thema dat bovenop het parent theme draait. Je gebruikt dit om aanpassingen te doen zonder de originele bestanden van het hoofLthema te wijzigen, zodat je updates kunt installeren zonder dat je eigen code wordt overschreven.
Template Hierarchy
De vaste volgorde waarin WordPress beslist welk bestand voorrang krijgt. Als er geen specifiek bestand is voor een categorie, valt het systeem terug op een algemener bestand.
Responsive Design
De techniek waardoor een thema zich automatisch aanpast aan het schermformaat. De lay-out verspringt op een smartphone naar een verticale kolom in plaats van drie kolommen naast elkaar.
Theme repository
De officiële bibliotheek binnen het WordPress dashboard waar je gratis thema’s kunt zoeken en installeren die door de community zijn goedgekeurd.
Praktijkvoorbeeld
Stel je voor dat example.nl een zakelijke website is voor een consultancybureau. De eigenaar wil dat alle pagina’s een strakke witte achtergrond hebben met donkerblauwe koppen en een zijbalk voor contactgegevens. In plaats van elke pagina handmatig te stylen, kiest hij een thema en past hij de globale instellingen aan.
Wanneer hij in het dashboard de primaire kleur wijzigt naar blauw, verandert dit direct op alle honderd pagina’s van de site. In het template-bestand ziet dat er technisch ongeveer zo uit:
<header class="site-header" style="background-color: #00008B;">
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
</header>
De bezoeker ziet nu een consistente uitstraling op de hele site, terwijl de eigenaar alleen één instelling in het thema heeft aangepast.
Veelgemaakte fouten
- Aanpassingen direct in het parent theme doen. Zodra de maker van het thema een update uitbrengt en je die installeert, zijn al je handmatige code-wijzigingen weg.
- Te zware thema’s kiezen met teveel functies. Sommige premium templates laden enorme hoeveelheden code in die je nooit gebruikt, wat de laadtijd van je site vertraagt.
- Een thema kiezen puur op basis van de demo-site. De demo ziet er vaak fantastisch uit omdat er speciaal voor die presentatie content is gemaakt; met je eigen teksten en foto’s ziet het er vaak heel anders uit.
- Te veel plugins installeren om een tekortkoming van het thema op te lossen. Als je vijf plugins nodig hebt om een simpele kolomindeling te krijgen, is het thema simpelweg niet geschikt voor je doel.
Wanneer wel of niet gebruiken
Kies voor een standaard thema als je snel online wilt zijn en geen specifieke eisen hebt aan de plek van elk element. Dit is de kortste route naar een werkende site.
Kies voor een custom theme als je een uniek ontwerp hebt dat exact moet aansluiten op een huisstijl. In dat geval is een kant-en-klaar thema vaak een hinderpaal omdat je meer tijd kwijt bent aan het uitschakelen van functies dan aan het bouwen.
Gebruik een Page Builder wanneer je als ondernemer zelf constant de lay-out van je pagina’s wilt kunnen schuiven zonder in de code te duiken. Besef wel dat dit vaak ten koste gaat van de snelheid.
Controlelijst voor installatie
- Check in de thema repository of het thema recent is bijgewerkt; een thema dat twee jaar geen update heeft gehad, is een risico.
- Installeer het thema eerst op een testomgeving of staging site om te zien of het niet botst met je huidige plugins.
- Controleer na activatie of de navigatiemenu’s en widgets nog op de juiste plek staan.
- Test de website op een mobiele telefoon om te zien of het responsive design ook echt werkt voor jouw specifieke content.
- Kijk in de browser-console (F12) of er geen rode foutmeldingen verschijnen die wijzen op conflicten in het JavaScript.
Vaak wordt er te veel waarde gehecht aan flitsende animaties in een thema, terwijl een simpele, snelle site vaak beter converteert.
Kijk nu eens naar de snelheid van je huidige thema via een onafhankelijke meettool.
