Module 5 · 5.1
Thema's: blokthema's en klassieke thema's
Module 5: Thema's en plugins · Leestijd: 9 minuten
Leerdoel: Na deze les kun je het verschil tussen blokthema's en klassieke thema's uitleggen en een thema verstandig kiezen.
Kernbegrippen: thema, template-hiërarchie, blokthema, sjabloon (template), sjabloondeel (template part), theme.json, Site-editor, klassiek thema, PHP-sjablonen, Customizer, widgets, paginabouwer, lock-in, themamap
Wat een thema doet
Een thema bepaalt hoe je site eruitziet en hoe pagina's zijn opgebouwd: de kop met logo en menu, de breedte van de inhoud, lettertypen en kleuren, de voettekst, hoe een berichtenoverzicht of een zoekresultaat eruitziet. De inhoud zelf (je teksten, pagina's, afbeeldingen) staat in de database en blijft bij een themawissel bestaan.
Elk thema staat in een eigen map onder wp-content/themes/, bijvoorbeeld wp-content/themes/twentytwentyfive/. In die map staat altijd een style.css met bovenaan een kop die het thema beschrijft (naam, versie, maker). Dat zie je terug in les 5.2.
Sinds WordPress 5.9 (begin 2022) zijn er twee soorten thema's, en ze werken echt anders.
Klassieke thema's
Een klassiek thema bestaat uit PHP-bestanden: header.php, footer.php, single.php, page.php, index.php, enzovoort. Welk bestand voor welke pagina wordt gebruikt, volgt de template-hiërarchie (les 1.2). Aanpassen doe je:
- in de Customizer (Weergave > Customizer): logo, kleuren, opties die het thema aanbiedt;
- met widgets (Weergave > Widgets): blokken in de zijbalk of de voettekst;
- met menu's (Weergave > Menu's, les 4.3);
- in de code, met een child theme (les 5.2).
Veel bekende thema's zijn (nog) klassiek of hybride. Ze werken prima en worden nog jaren ondersteund.
Blokthema's
Een blokthema is opgebouwd uit dezelfde blokken als je inhoud. Het thema heeft:
- sjablonen (templates) als HTML-bestanden met blokken, in de map
templates/:index.html,single.html,page.html,404.html; - sjabloondelen (template parts) in
parts/:header.html,footer.html; - een bestand theme.json met de stijlinstellingen: kleurenpalet, lettertypen, lettergroottes, breedte van de inhoud, ruimte tussen blokken.
Een klein stukje theme.json:
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
{ "slug": "accent", "color": "#e8a33d", "name": "Accent" }
]
},
"layout": { "contentSize": "720px", "wideSize": "1200px" }
}
}Aanpassen doe je in de Site-editor (Weergave > Editor): je bewerkt de kop, de voettekst en de sjablonen met blokken, en bij Stijlen kies je kleuren, lettertypen en ruimte voor de hele site.
Een belangrijk verschil dat je moet weten: wat je in de Site-editor aanpast, wordt in de database opgeslagen, niet in de themabestanden. Een update van het thema overschrijft je aanpassingen dus niet. Maar het betekent ook: een aangepast sjabloon in de database gaat vóór het sjabloon in het thema. Brengt de maker een verbeterd sjabloon uit, dan zie je dat niet zolang jouw aangepaste versie bestaat. In de Site-editor kun je een sjabloon "terugzetten" naar de versie van het thema.
Paginabouwers
Een paginabouwer (zoals Elementor, Divi of WPBakery) is een plugin of thema met een eigen editor waarin je pagina's sleept en vormgeeft. Ze zijn populair omdat ze veel mogelijkheden bieden zonder code. Wees je bewust van de nadelen:
- Lock-in: de opmaak staat in een eigen formaat (vaak shortcodes of eigen gegevens in
wp_postmeta). Zet je de bouwer uit, dan blijft er van je pagina's vaak een rommel van codes over. Overstappen betekent meestal alles opnieuw opbouwen. - Zwaarder: veel bouwers laden extra scripts en stylesheets op elke pagina. Dat kan je site trager maken (module 6).
- Nog een onderdeel om bij te houden, met eigen updates en eigen lekken.
Een paginabouwer is geen verkeerde keuze, maar maak hem bewust. Voor veel sites kan wat je wilt ook met een blokthema en patronen.
Een thema kiezen
Waar je op let, in deze volgorde:
- Herkomst: de themamap van wordpress.org (gecontroleerd door vrijwilligers) of een bekende maker met een eigen site. Nooit een "gratis" kopie van een betaald thema van een downloadsite: die bevat vaak een achterdeur (les 5.3).
- Onderhoud: wanneer is het thema voor het laatst bijgewerkt? Een thema zonder updates in het afgelopen jaar wordt een risico.
- Blok of klassiek: past het bij hoe jij wilt werken? Een blokthema als je in de Site-editor wilt kunnen aanpassen, een klassiek thema als je een bestaande site op dezelfde manier wilt voortzetten.
- Wat het meeneemt: een thema dat "alles kan" (slider, portfolio, contactformulier, SEO) bindt je functies aan het thema. Wissel je later, dan ben je ze kwijt. Functies horen in plugins, vormgeving in het thema.
- Toegankelijkheid en snelheid: in de themamap van wordpress.org kun je filteren op het kenmerk "Toegankelijkheid gereed" (accessibility-ready). Bekijk de demo van het thema in PageSpeed Insights (les 6.1).
- Taal: is het thema vertaald naar het Nederlands, of kun je teksten zelf aanpassen?
Wisselen van thema
Bij een themawissel blijft je inhoud staan, maar verandert alles eromheen. Doe het nooit zomaar op je live site:
- Probeer het nieuwe thema eerst met Live voorbeeld (bij Weergave > Thema's), of beter in een staging-omgeving (les 8.3).
- Controleer daarna menu's (les 4.3), widgets, logo, de homepage en de berichttypen die het oude thema leverde (les 4.2).
- Shortcodes van het oude thema verschijnen als losse tekst (
[slider id="3"]) op je pagina's.
Samenvatting
- Een thema bepaalt de vormgeving en de opbouw; de inhoud staat los in de database.
- Klassieke thema's zijn PHP-sjablonen, aangepast met de Customizer, widgets en menu's.
- Blokthema's zijn opgebouwd uit blokken en theme.json, en worden aangepast in de Site-editor; die aanpassingen staan in de database.
- Paginabouwers bieden veel, maar binden je en kunnen je site zwaarder maken.
- Kies een thema op herkomst, onderhoud en eenvoud; functies horen in plugins, niet in het thema.
Quiz
Opdracht
Opdracht A5.1: Welk thema gebruikt je site? Zoek in de broncode van je homepage (Ctrl+U) naar /wp-content/themes/ en vul de naam van de themamap in die het meest voorkomt. Gebruik je een child theme (les 5.2), vul dan de map van het child theme in en die van het parentthema. Vul ook in of het een blokthema of een klassiek thema is, en hoe je dat hebt vastgesteld. Het programma leest de homepage en de style.css van het genoemde thema en vergelijkt.
Verder lezen
Voor het werken in WordPress zelf hebben we nog geen eigen artikelen; de officiële documentatie van WordPress is uitgebreid.
- Wat is een thema? (developer.wordpress.org, Engels): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
- Thema's op wordpress.org: https://wordpress.org/themes/
- Site-editor (wordpress.org, Engels): https://wordpress.org/documentation/article/site-editor/
- theme.json (developer.wordpress.org, Engels): https://developer.wordpress.org/themes/global-settings-and-styles/