WordPress thema’s spelen een cruciale rol bij het vormgeven van het uiterlijk en de functionaliteit van je website. Ze bepalen hoe je inhoud wordt weergegeven en bieden verschillende ontwerpopties om een unieke site te maken. In de loop der jaren zijn WordPress thema’s sterk geëvolueerd, te beginnen met wat we nu “klassieke thema’s” noemen
Klassieke thema’s waren lange tijd de standaard, vertrouwden op PHP-templates en vereisten enige kennis van codering om aan te passen. Deze thema’s boden veel flexibiliteit, maar konden een uitdaging zijn voor mensen die nieuw waren in webontwikkeling. De release van WordPress 5.9 betekende een belangrijke verschuiving met de introductie van “blokthema’s”
Klassieke thema’s vs blokthema’s in WordPress
Klassieke thema’s zijn het traditionele type WordPress thema. Ze bepalen het algemene uiterlijk van een website door gebruik te maken van templatebestanden geschreven in PHP, CSS voor styling en JavaScript voor extra functionaliteit. Deze zeer aanpasbare thema’s vormen al vele jaren de ruggengraat van WordPress sites.
Blokthema’s daarentegen zijn een nieuwer type WordPress thema, geïntroduceerd om de Full Site Editing (FSE) te ondersteunen. In tegenstelling tot klassieke thema’s gebruiken ze blokken om alle onderdelen van een website op te bouwen, inclusief headers, footers en inhoudsgebieden. Dit zorgt voor een meer visuele en intuïtieve manier om websites te ontwerpen en aan te passen, rechtstreeks in de WordPress editor.
De belangrijkste verschillen tussen klassieke en blokthema’s zijn:
- Aanpassing – Klassieke thema’s vereisen PHP en enige codeervaardigheden, waar blokthema’s een visuele editor gebruiken voor eenvoudigere aanpassing.
- Flexibiliteit – Klassieke thema’s bieden meer flexibiliteit voor developers, terwijl blokthema’s zich richten op gebruiksgemak en toegankelijkheid.
- Bewerken – Klassieke thema’s worden bewerkt via themabestanden en de WordPress Customizer. Blokkenthema’s kunnen volledig worden bewerkt via de Block Editor.
Kiezen welk type thema je wilt ontwikkelen
Je keuze tussen klassieke en blokthema’s hangt af van je behoeften en vaardigheidsniveau. Als je een developer bent die op zoek is naar maximale flexibiliteit, dan zijn klassieke thema’s misschien iets voor jou. Als je echter de voorkeur geeft aan een meer gebruiksvriendelijke en visuele benadering van het bouwen van je site, dan zijn blokthema’s een geweldige optie.
Beide soorten thema’s hebben hun sterke punten en zijn geschikt voor verschillende soorten gebruikers en projecten. Als je de belangrijkste verschillen begrijpt, kun je een weloverwogen beslissing nemen over welk thema het beste past bij de behoeften van je website.
Dit artikel is bedoeld om je te helpen de kernconcepten van zowel klassieke als blokkenthema’s te begrijpen en beheersen, zodat je WordPress thema’s effectief kunt maken en aanpassen.
Themastructuur begrijpen
Het begrijpen van de structuur van een thema, klassiek of blok, is de sleutel tot het effectief aanpassen van je WordPress site.
Voordat we de structuur van elk thema gaan bekijken, moet je weten dat alle WordPress thema’s worden opgeslagen in de map wp-content/themes van je WordPress installatie en dat elk thema zich in zijn eigen map bevindt.
Structuur klassieke thema’s
Een klassiek thema bestaat uit een aantal belangrijke bestanden en mappen die het uiterlijk en de functionaliteit van de site creëren. De twee belangrijkste bestanden zijn:
style.css– Dit is de belangrijkste stylesheet dat de visuele vormgeving van het thema definieert. Het bevat bovenaan metagegevens over het thema (zoals naam, auteur en versie), gevolgd door CSS-regels die het thema stylen.index.php– Dit is het belangrijkste templatebestand dat wordt gebruikt om inhoud op de startpagina weer te geven. Het dient als fallback voor andere templatebestanden die mogelijk ontbreken.
Daarnaast zijn er nog andere belangrijke bestanden die een modulair ontwerp mogelijk maken en ervoor zorgen dat verschillende onderdelen van de site eenvoudig kunnen worden aangepast en onderhouden. Hoewel optioneel, worden deze bestanden als standaard beschouwd:
header.php– Dit bestand bevat de header van het thema, inclusief de sitetitel, het logo en het navigatiemenu. Het staat bovenaan elke pagina en zorgt voor een consistente paginaheader.footer.php– Dit bestand bevat de footer van het thema, die vaak copyright-informatie en footernavigatie bevat. Het staat onderaan elke pagina en zorgt voor een consistente footer op de hele site.functions.php– Dit bestand wordt gebruikt om custom functionaliteit aan het thema toe te voegen. Het kan menu’s registreren, stijlen en scripts oproepen en thema-ondersteunende features toevoegen, zoals thumbnails van berichten en custom achtergronden. In wezen fungeert het als een controlecentrum voor thema-aanpassingen en -verbeteringen.page.php,single.php,archive.php, etc. – Deze templatebestanden definiëren de structuur voor verschillende soorten inhoud, zoals pagina’s, afzonderlijke berichten en archieven.
Structuur blokthema’s
Een blokthema bestaat uit een aantal belangrijke bestanden en mappen die speciaal zijn ontworpen om te werken met blokken en de FSE functies. De belangrijkste bestanden en mappen zijn:
theme.json– Dit bestand is cruciaal voor het configureren van de instellingen, stijlen en aanpassingen van het thema. Het definieert globale stijlen en instellingen voor blokken en biedt een gecentraliseerde manier om het uiterlijk en gedrag van het thema te beheren. Het vervangt de noodzaak voor veel custom PHP-code en maakt eenvoudige configuratie van kleuren, typografie, spacing en meer mogelijk.style.css– Hoewel de meeste styling wordt afgehandeld binnentheme.json, wordtstyle.css, net als bij klassieke thema’s, nog steeds gebruikt om de metagegevens van het thema op te geven, zoals de themanaam, auteur, versie en beschrijving.templates/– Deze map bevat HTML-bestanden die de layout definiëren voor verschillende delen van de site. Deze bestanden bevatten templates zoals index.html voor de startpagina,single.htmlvoor losse berichten,page.htmlvoor pagina’s en meer. Elk bestand is opgebouwd uit blokken.parts/– Deze map bevat herbruikbare delen van templates, zoals headers en footers. Deze onderdelen kunnen in meerdere templates worden opgenomen, zodat ze consistent zijn voor de hele site.
Hoewel niet verplicht, zijn patterns ook belangrijk bij het ontwikkelen van geavanceerde thema’s. Patterns zijn voorgedefinieerde blokindelingen die kunnen worden ingevoegd in pagina’s en berichten, zodat je snel complexe ontwerpen kunt maken.
Met blokthema’s kun je ervoor kiezen om de themastructuur niet handmatig te maken. Je kunt het installatieproces stroomlijnen met de Create Block Theme plugin, die alle benodigde bestanden en details op een rij zet.
Zodra je de details hebt ingevuld, wordt er een nieuwe themamap aangemaakt in de map wp-content/themes en verschijnt het nieuwe thema in het beheergebied van WordPress onder Appearance > Themes. Je kunt meer details over het thema toevoegen in de style.css meta description instelling.
Templatehiërarchie van WordPress thema’s
De templatehiërarchie dicteert welke templatebestanden WordPress gebruikt om verschillende soorten inhoud weer te geven. Zowel klassieke als blokthema’s volgen een vergelijkbare hiërarchie, maar verschillen in de bestandstypen die ze gebruiken: klassieke thema’s gebruiken PHP-bestanden, terwijl blokthema’s HTML-bestanden gebruiken.
De templatehiërarchie volgt een specifieke volgorde om te bepalen welk templatebestand moet worden gebruikt. Als WordPress een bepaald templatebestand niet kan vinden, gaat het naar de volgende in de hiërarchie.
Als WordPress bijvoorbeeld een enkele blogpost moet weergeven, zoekt het eerst naar een template die specifiek is voor het posttype, zoals single-{post-type}.php of single-{post-type}.html. Als dat bestand niet bestaat, zoekt het naar de algemene single.php of single.html. Als geen van deze bestanden wordt gevonden, valt WordPress terug op de meest algemene template index.php of index.html.
Hetzelfde proces geldt voor andere soorten inhoud. Voor een statische pagina controleert WordPress eerst of er custom templates aan die pagina zijn toegewezen. Als er geen wordt gevonden, wordt er gezocht naar een template op basis van de slug van de pagina (bijvoorbeeld page-about.php of page-about.html) of de ID van de pagina (page-42.php of page-42.html). Als deze specifieke templates niet beschikbaar zijn, gebruikt WordPress de algemene page.php of page.html. Als zelfs deze ontbreekt, valt het terug op index.php of index.html.
Templates maken
Door templates te maken in WordPress kun je aanpassen hoe verschillende soorten inhoud op je website worden weergegeven. Of je nu werkt met klassieke thema’s of blokthema’s, het proces omvat het instellen van de benodigde bestanden en het configureren ervan volgens jouw behoeften.
Laten we eens een paginatemplate instellen voor beide soorten thema’s.
Paginatemplate klassiek thema
Bij klassieke thema’s maak je een paginatemplate met PHP. Zo doe je dat:
- Maak de templatebestand – Maak met een teksteditor een nieuw PHP-bestand aan in de map van je thema en geef het de naam
page.php. - Voeg templatecode toe – Schrijf de benodigde PHP-code om de structuur en inhoud van het paginatemplate te definiëren. Dit bevat meestal WordPress template tags om de pagina-inhoud weer te geven.
- Voeg header en footer toe – Zorg ervoor dat je template de header en footer bevat door de functies
get_header()enget_footer()toe te voegen. Zo blijft de layout consistent met de rest van je site.
Hier is een voorbeeld van hoe page.php eruit zou kunnen zien:
<?php
get_header(); ?>
<main>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>In dit voorbeeld bevat de template de header, de paginatitel en inhoud, en vervolgens de footer.
Paginatemplate blokthema’s
In blokthema’s kun je een paginatemplate maken via de WordPress Site Editor of door een page.html bestand te maken in de templatedirectory.
Zodra dit bestand is gemaakt, kun je een layout ontwerpen door te navigeren naar de site editor (Appearance > Editor in je WordPress dashboard).
Gebruik de Block Editor om blokken toe te voegen en te rangschikken om de layout van je pagina te ontwerpen. Je kunt blokken toevoegen voor de paginatitel, uitgelichte afbeelding en inhoud. Pas elk blok aan volgens je ontwerpvoorkeuren.
Als je tevreden bent met de layout, sla je de template op. WordPress genereert automatisch het bijbehorende HTML bestand in de map van je thema.
Thema’s stylen
Het stylen van je WordPress thema is een cruciale stap in het bepalen van het visuele uiterlijk van je website. Zowel klassieke als blokthema’s bieden robuuste manieren om stijlen aan te passen, maar ze benaderen dit verschillend.
Klassieke thema’s stylen
Bij klassieke thema’s wordt styling meestal afgehandeld met CSS. Hier lees je hoe je een klassiek thema kunt stylen:
Het belangrijkste stylesheet voor een klassiek thema is het bestand style.css. Dit bestand bevat alle CSS regels die bepalen hoe je thema eruit ziet. Het is ook de plaats waar je de metadata van het thema opgeeft, zoals de themanaam, auteur, versie en beschrijving.
Om ervoor te zorgen dat je CSS goed wordt geladen, moet je je stylesheet in het bestand functions.php enqueuen met de functie wp_enqueue_style().
function my_theme_enqueue_styles() {
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');Deze stap is cruciaal voor het handhaven van de juiste WordPress standaarden en om ervoor te zorgen dat stijlen correct worden toegepast.
Daarnaast kun je custom CSS direct toevoegen aan het style.css bestand of aparte CSS bestanden maken voor verschillende delen van je thema. Aangepaste CSS kan ook worden ingesloten in individuele templatebestanden met behulp van de <style> tag, hoewel deze praktijk over het algemeen minder gebruikelijk is en alleen wordt aanbevolen voor specifieke, geïsoleerde stijlen.
Voor meer geavanceerde styling kun je CSS preprocessors zoals SASS of LESS gebruiken. Met deze tools kun je beter onderhoudbare en modulaire CSS schrijven, waardoor het eenvoudiger wordt om de stijlen van je thema te beheren en uit te breiden.
Blokthema’s stylen
Het stylen van blokthema’s wordt voornamelijk beheerd via het bestand theme.json en de Block Editor.
Het theme.json bestand is de centrale plaats voor het configureren van globale stijlen en instellingen voor je thema. In dit bestand kun je kleuren, typografie, spatiëring en andere stijlen definiëren in een gestructureerd JSON-format, waardoor je het uiterlijk en het gedrag van het thema centraal kunt beheren. Globale stijlen die zijn gedefinieerd in theme.json zijn van toepassing op je hele site en zorgen voor een consistente look en feel.
Naast theme.json kun je de Block Editorgebruiken om custom stijlen direct op blokken toe te passen. Met de blokeditor kun je wijzigingen in realtime zien en het ontwerp visueel aanpassen zonder dat je handmatig code hoeft te schrijven. Dit maakt het proces toegankelijker, vooral voor degenen die de voorkeur geven aan een visuele interface boven codering.
Hoewel het theme.json bestand de meeste styling afhandelt, kun je nog steeds CSS gebruiken voor meer uitgebreide controle. Aangepaste CSS kan worden toegevoegd aan het style.css bestand of direct binnen individuele blokken met behulp van de Block Editor.
Een voorbeeld van een theme.json bestand kan instellingen bevatten voor kleurpaletten, typografie en blokstijlen, waardoor het eenvoudig is om het ontwerp van het thema te beheren en aan te passen.
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005177"
}
]
},
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "12px"
},
{
"name": "Normal",
"slug": "normal",
"size": "16px"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#333333"
},
"typography": {
"fontFamily": "Arial, sans-serif"
}
}
}Thema’s aanpassen
Met het aanpassen van WordPress thema’s kun je het uiterlijk en de functionaliteit van je website aanpassen aan specifieke behoeften en voorkeuren. Zowel klassieke thema’s als blokthema’s bieden verschillende methoden voor het aanpassen, maar ze benaderen het verschillend.
Klassieke thema’s aanpassen
Klassieke thema’s bieden verschillende manieren om het uiterlijk en de sfeer van je site aan te passen:
- Thema Customizer – De WordPress Thema Customizer is een eenvoudig te gebruiken interface waarmee je het uiterlijk van je thema kunt aanpassen zonder code aan te raken. Je kunt het openen via Appearance > Customize. Het biedt opties om de site-identiteit, kleuren, menu’s, widgets en meer aan te passen. Wijzigingen kunnen in real-time worden bekeken voordat je ze opslaat.
- Custom CSS – Voor meer specifieke stijlwijzigingen kun je custom CSS direct toevoegen in de Thema-aanpasser onder de sectie Extra CSS. Deze methode is ideaal voor het maken van kleine aanpassingen zonder de themabestanden te bewerken.
- Child thema’s – Als je uitgebreide wijzigingen moet aanbrengen, is het maken van een child thema de aanbevolen aanpak. Een child theme erft de functionaliteit van het parent thema en stelt je in staat om nieuwe stijlen en functies te overschrijven of toe te voegen. Dit zorgt ervoor dat je aanpassingen behouden blijven wanneer het parent themawordt bijgewerkt.
- Themabestanden – Gevorderde gebruikers kunnen themabestanden zoals
header.php,footer.phpenfunctions.phprechtstreeks bewerken om meer significante wijzigingen aan te brengen. Deze methode vereist echter een goed begrip van PHP en de hiërarchie van WordPress templates. - Plugins – Er zijn talloze plugins beschikbaar die de aanpassingsmogelijkheden van je thema uitbreiden. Met page builder plugins zoals Elementor kun je bijvoorbeeld complexe layouts maken zonder te coderen.
Blokthema’s aanpassen
Met hun nadruk op FSE bieden blokthema’s een meer visuele en gebruiksvriendelijke benadering van aanpassen:
- Site Editor – De WordPress Site Editor (Appearance> Editor) is het belangrijkste hulpmiddel om blokkenthema’s aan te passen. Hiermee kun je alle aspecten van je site aanpassen, inclusief headers, footers, templates en individuele blokken, met behulp van een visuele interface. Wijzigingen worden direct toegepast, zodat je gemakkelijk kunt zien hoe je aanpassingen het ontwerp van de site beïnvloeden.
- Globale stijlen – Blokkenthema’s gebruiken het bestand
theme.jsonom globale stijlen te definiëren. Je kunt kleuren, typografie, spatiëring en meer globaal aanpassen, zodat je consistentie op je hele site krijgt. Met de Site Editor kun je deze instellingen ook visueel aanpassen. - Herbruikbare blokken en patterns – Je kunt herbruikbare blokken en patterns maken om consistentie te behouden en het ontwerpproces te stroomlijnen. Herbruikbare blokken kun je opslaan en invoegen in elke post of pagina, terwijl blokpatterns voorgedefinieerde layouts bieden die je kunt aanpassen aan je behoeften.
- Custom templates – Met blokthema’s kun je direct in de Site Editor custom templates maken voor verschillende soorten inhoud. Hierdoor kun je de layout en het ontwerp van specifieke pagina’s of berichttypen aanpassen zonder code te schrijven.
- Plugins – Net als klassieke thema’s kunnen blokthema’s worden uitgebreid met plugins. Veel plugins zijn ontworpen om de mogelijkheden van de Block Editor uit te breiden met extra blokken, patterns en aanpassingsopties.
Samenvatting
Met het aanpassen van WordPress thema’s kun je je site uniek en functioneel maken. Klassieke thema’s vertrouwen op de Theme Customizer, custom CSS, child thema’s en directe bestandswijzigingen voor flexibiliteit. Blokthema’s gebruiken de Site Editor en theme.json voor een meer visuele en intuïtieve aanpak.
Beide methoden bieden krachtige hulpmiddelen om je site aan te passen aan je behoeften, of je nu de voorkeur geeft aan coderen of aan visueel aanpassen.
Nadat je een thema naar jouw smaak hebt gemaakt, een klassiek of blokthema, is het belangrijk om je site te hosten op robuuste hosting om problemen zoals downtime, DDoS-aanvallen en meer te voorkomen. Dit is waar premium hostingproviders zoals Kinsta uitblinken.
Kinsta biedt krachtige Managed WordPress Hosting met een volledig gecontaineriseerde architectuur, exclusief aangedreven door Google Cloud Platform op het Premium Tier netwerk van Google.
Laat een reactie achter