Stel, je hebt net een strak WordPress-thema geïnstalleerd, maar je krijgt het maar niet zoals jij dat zou willen. Uiteraard hartstikke frustrerend, maar toch komt dit vrij vaak voor. Gelukkig zijn er genoeg mogelijkheden om je WordPress-thema precies zo aan te passen, waardoor deze perfect bij jou past en naadloos bij je wensen aansluit.
Het klinkt misschien gek, maar de échte uitdaging is niet eens het aanpassen zelf, maar het vinden van de juiste methode om dit klusje te klaren
In dit artikel zal ik je door de verschillende opties loodsen, zodat je voor jezelf kan beslissen welke het beste bij jou past. Vervolgens laat ik je zien hoe je het aanpassen veilig en efficiënt kunt doen.
Opties voor het aanpassen van een thema
Voordat we aan de slag gaan en ons hele thema overhoophalen, is het zinvol om de mogelijkheden die je tot je beschikking hebt te verkennen, aangezien elke situatie een andere mogelijkheid vereist.
Hier is een overzicht van de mogelijkheden die je hebt:
- Als je functionaliteiten aan je thema wil toevoegen, installeer dan een plugin.
- Gebruik de Customizer binnen je WordPress admin voor het aanpassen van lettertypen en om eventueel kleuren en lay-out te veranderen, afhankelijk van je thema.
- Als je met een page builder-thema werkt, gebruik dan deze features om het ontwerp van je site te veranderen.
- Als je een thema met een framework gebruikt, kun je één van de beschikbare child-thema’s gebruiken om je site op maat te maken, samen met de standaard bewerkingsopties van de WordPress admin.
- Als je thema helemaal op maat gemaakt is voor jouw website en je vertrouwen hebt in je eigen codeer-skills, pas dan de code van het thema direct aan.
- Als je de code van een extern thema aan wilt passen, maak dan eerst een child-thema.
Als je code wilt bewerken, zijn er nog weer wat verschillende sub-opties, variërend van het gebruiken van de Block Editor, de Customizer, tot het direct aanpassen van de bestanden. We kijken naar alle mogelijkheden binnen dit artikel, maar laten we eerst beginnen met de makkelijkste optie: het installeren van een plugin.
Is het echt nodig om je thema aan te passen?
Soms is het namelijk helemaal niet nodig om je thema aan te passen: je vaak gewoon een plugin installeren om het klusje te klaren.
Onthoud hierbij: thema’s bepalen hoe je site eruitziet en hoe het content laat zien (gebruik onze Theme Detector Tool om het onderliggende thema te identificeren voor een design dat jou aantrekt). Plugins gebruiken we daarentegen om extra functionaliteiten toe te voegen.
Als de veranderingen die je wilt doorvoeren meer te maken hebben met de functionaliteit van de site dan het ontwerp ervan, overweeg dan om een plugin te installeren. In sommige gevallen is dit een plugin die je zelf moet schrijven, in andere gevallen download je deze uit de WordPress-bibliotheek en soms is het eentje die je koopt.
Als je overweegt om zelf het functions.php-bestand van je thema aan te passen, vraag jezelf dan eerst af:
Wil ik deze functionaliteit behouden als ik in de toekomst van thema verander?
Als het antwoord ja is, dan zou je die code in een plugin moeten stoppen, niet in je thema.
Goede voorbeelden van wanneer je liever een plugin dan een thema zou gebruiken zijn het toevoegen van widgets, het aanmaken van custom post types en taxonomieën, het maken van speciale velden en het toevoegen van extra features zoals een winkel of SEO-verbeteringen.
Het aanpassen van je WordPress-thema via de WordPress Admin
Als de veranderingen die je wilt doorvoeren zich vooral richten op het ontwerp en daarnaast vrij eenvoudig zijn, dan kun je ze waarschijnlijk doen via de WordPress admin. De Customizer geeft je een brede selectie aan opties voor het tweaken van je thema: wat er precies mogelijk is hangt af van je specifieke thema. Wellicht zie je ook iets dat de Editor heet in het Weergave-menu. Blijf hierbij uit de buurt (ik leg zo uit waarom).
Het aanpassen van je thema via de Customizer
De makkelijkste manier om je WordPress-thema aan te passen is het gebruiken van de WordPress Customizer.
Je kunt deze op twee manieren gebruiken:
- Wanneer je je website bekijkt (terwijl je ingelogd bent) klik je op de Customizer link in de admin-balk bovenaan het scherm.
- In de admin-schermen klik je op Weergave >Customizer.
Zo kom je bij de Customizer:
In de schermafbeelding hierboven heb ik een gratis thema, ColorMag, geïnstalleerd, een thema met veel bewerkingsmogelijkheden. Het thema voegt onderdelen toe aan de Customizer voor het ontwerpen van features zoals een header-afbeelding, sociale media, kleuren voor categorieën en een ontwerp-opties tabblad dat je toegang geeft tot nog meer tabbladen waarmee je nog meer aanpassingen kunt maken aan de lay-out en het ontwerp van je website.
Verschillende thema’s hebben verschillende bewerkingsmogelijkheden, maar het lijkt erop dat nieuwere thema’s steeds meer opties bieden. Als je een thema hebt gevonden dat goed lijkt te passen maar nog niet perfect is, dan kan het goed zijn dat het aanpassen van het thema je precies het ontwerp en de lay-out biedt die wél bij al je wensen aansluit.
De thema-editor (en waarom je deze niet moet gebruiken)
Binnen de WordPress admin heb je wellicht de optie gezien met de naam Theme Editor, te vinden via Weergave > Editor.
Dit geeft je toegang tot de bestanden in je thema, waardoor je ze direct kunt bewerken.
Doe. Dit. Niet.
Zelf als je prima CSS en PHP kunt schrijven, is het aanpassen van de bestanden in je thema een ontzettend slecht idee en wel vanwege twee redenen:
- Als je een thema hebt gekocht of gedownload van een derde, zullen alle veranderingen die je maakt verloren gaan zodra je het thema updatet (en je moet je thema altijd updaten vanwege de veiligheid).
- Nog belangrijker, als je iets verandert waardoor je website kapotgaat, wordt die verandering niet gelogd en krijg je de vorige versie van het bestand niet terug. Je zou je website dus onherstelbaar kunnen beschadigen.
Als je de code in je thema wilt aanpassen, moet je dat doen via een code-editor en wil je de bestanden van een live site nooit rechtstreeks aanpassen, maar deze aanpassen en testen op een testwebsite. Als je een thema van een derde moet aanpassen, moet je dat doen via een zogeheten child-thema. Over beiden meer verderop in dit artikel.
WordPress weet hoe onveilig het is om de thema-editor te gebruiken: daarom waarschuwen ze je zodra je ernaartoe gaat.
Neem het advies van WordPress dus ter harte: gebruik de thema-editor niet!
Het gebruiken van page builders en frameworks om je WordPress-thema aan te passen
Een groot deel van de WordPress-thema’s hebben hun eigen bewerkingsmogelijkheden, wat betekent dat je veranderingen kunt doorvoeren aan het ontwerp en de lay-out via de Customizer.
Maar sommige thema’s voeren dit concept verder door en zijn specifiek ontworpen om uitgebreid en aangepast te worden. Deze thema’s heten framework-thema’s.
Een ander optie is het gebruiken van een plugin die je helpt om je website te ontwerpen door middel van een gebruikersvriendelijke interface: deze heten page builders of pagina-bouwers.
Het gebruiken van een page builder om je thema aan te passen
Page builder-plugins zijn ontworpen om het voor jou makkelijk te maken om het ontwerp van je website te bepalen door een interface te gebruiken die je meteen laat zien hoe het ‘eindproduct’ eruit zal zien.
Het werkt simpel. Je installeert een page builder-plugin met een compatibel thema en gebruikt dan de beschikbare opties om je website precies zo te ontwerpen als jij het wilt.
Eén van de meeste bekende page builders heet Elementor, maar je kunt ook andere mogelijkheden vinden in onze lijst van page builders.
Met page builders kun je je artikelen en pagina’s aanpassen met een drag-and-drop-interface, zodat je kunt zien hoe je content eruit zal zien en zodat je elke pagina uniek kunt maken.
Hieronder gebruik ik de Elementor page builder samen met het Hello Elementor thema, waar het compatibel mee is.
Page builders bieden je een hoop flexibiliteit met betrekking tot de lay-out en het ontwerp van je pagina’s. Als je gewend bent aan een websitebouwer zoals Wix, kunnen ze de overgang naar WordPress wat makkelijker voor je maken. Als je een voorkeur hebt voor een What You See Is What You Get (WYSIWYG) interface voor je WordPress-content, kan dit je helpen om snel je pagina’s te ontwerpen.
Het gebruik van een thema-framework om je thema aan te passen
Een alternatief voor page builders zijn framework-thema’s. Dit zijn pakketten van thema’s die ontworpen zijn om samen te werken. Er is één parent-thema dat het ‘framework’ is, en je hebt vervolgens de keuze uit verschillende child-thema’s die je kunt gebruiken om het hoofdthema aan te passen en er zo uit te laten zien als jij wilt.
Een voorbeeld van een framework-thema is Divi, dat mogelijkheden biedt om het ontwerp van het thema verder aan te passen, inclusief een zelfde soort klik-en-sleep interface als de page builders.
Leessuggestie: Divi vs Elementor: Vergelijking van WordPress plugins om pagina’s mee te bouwen
Het bewerken van de code van je WordPress-thema
Als je geen problemen hebt met het bewerken van CSS en/of PHP, dan kun je de code in je thema bewerken om zo je thema aan te passen.
Dit geeft je de grootste mate van controle.
Als je je eigen thema aanpast dat je alleen voor jouw website gebruikt en daar specifiek voor ontwikkeld is, dan kun je direct aanpassingen maken aan het thema. Maar als je werkt met een thema van een derde en je wilt dat aanpassen, dan kun je het beste een child-thema aanmaken om te voorkomen dat je al je veranderingen verliest bij de volgende update van het thema.
Het aanpassen van thema-bestanden
De eerste stap van het aanpassen van je WordPress-thema is het begrijpen van welke bestand over welk onderdeel gaat, en welk bestand je dus moet aanpassen om iets te veranderen.
De Stylesheet
Elk WordPress-thema heeft een stylesheet, met de naam style.css. Dit bevat alle code voor het stylen van je website: lay-out, lettertypen, kleuren, etc.
Als je de kleuren in je thema bijvoorbeeld wilt wijzigen, dan zou je je stylesheet bewerken. Als je een nieuw lettertype wilt toevoegen, dan zou je het stylesheet gebruiken om dit uit te voeren op verschillende elementen, zoals de hoofdtekst (body) en de headings.
Let op wanneer je het stylesheet verandert: specificiteit betekent dat de code voor een element niet altijd op de plek te vinden is waar je denkt dat het te vinden is. Elementen erven de styling van andere elementen die boven hen in de hiërarchie van de pagina staan, tenzij je styling toevoegt die specifiek is voor het lagere element.
Om te ontdekken hoe CSS de verschillende elementen op je pagina beïnvloedt, kun je de Inspector in je browser gebruiken om de CSS te bekijken (Chrome DevTools in dit voorbeeld):
Je kunt dit vervolgens gebruiken om nieuwe CSS te schrijven die zich richt op individuele elementen of juist een hele soort elementen of classes op de pagina.
Als dit hele verhaal over elementen, classes en specificiteit nieuw voor je is, dan kun je beter niet beginnen aan het aanpassen van de CSS van je thema. Tenminste niet tot je meer over CSS hebt geleerd en over hoe het werkt.
Het Functions bestand
Een ander bestand dat eigenlijk elk thema heeft is het functions bestand (functions.php). Dit is het bestand dat ervoor zorgt dat een hoop dingen in je thema goed werken. In het bestand vind je code om dingen binnen je thema te doen, zoals uitgelichte afbeeldingen, widgets, en dergelijke.
Als je, ondanks onze waarschuwingen, toch in de verleiding komt om functionele code toe te voegen aan je thema, zou je dat hier moeten doen. Maar let wel goed op: in de meeste gevallen zou je hiervoor een plugin moeten schrijven. Vraag jezelf dus af:
Zou ik deze functionaliteit willen behouden als ik in de toekomst van thema verander?
Als het antwoord ja is, creëer dan een plugin in plaats van code toe te voegen aan het functions-bestand. Plugins hoeven helemaal niet groot te zijn, er is niemand die je weerhoudt van het maken van een plugin met slechts een paar regels code.
Het functions-bestand is geschreven in PHP, dus je moet daar wel mee overweg kunnen. Ga niet blindelings code kopiëren die je via Google vindt: neem de tijd om te begrijpen wat de code doet. Op die manier is het minder waarschijnlijk dat je minderwaardige code toevoegt.
Het Theme Template bestand
De meeste bestanden binnen een thema zijn theme template-bestanden, oftewel thema-sjablonen. Dit zijn de bestanden die bepalen welke content WordPress op een bepaalde pagina weergeeft, en worden gekozen op basis van de sjabloon-hiërarchie.
Als je de manier wil wijzigen waarop content wordt weergegeven op een bepaalde pagina, archief of artikeltype, dan moet je één van deze bestanden aanpassen of een nieuwe maken.
Stel bijvoorbeeld dat je thema een archive.php bestand heeft dat gebruikt wordt om de archiefpagina’s voor categorieën en tags weer te geven. En jij wilt veranderen hoe tags te zien zijn. Dan maak je een bestand “tag.php”, die gebaseerd is op archive.php, samen met jouw aanpassing.
Nogmaals, wees voorzichtig met het bewerken van de bestanden: ze kunnen je site kapot maken. Test altijd eerst op een lokale installatie met een tool zoals DevKinsta en/of een testsite.
Welke van deze bestandstypen je ook aan moet passen, zorg dat je het goed doet. Lees hieronder over de best practices hoe je je code op zo’n manier kunt bewerken dat het je website niet kapot maakt en je je ook geen zorgen hoeft te maken over potentiële veiligheidslekken.
Het aanpassen van een thema van een derde partij door middel van een child-thema
Als het thema op je website van een externe partij komt en je de code aan wilt passen, moet je eerst een child-thema aanmaken.
Als je het thema namelijk direct zou aanpassen en je moet het thema daarna updaten (wat je altijd zou moeten doen), dan verlies je al je veranderingen.
Het maken van een child-thema beslaat vier stappen:
- Maak een nieuw map binnen wp-content/themes.
- Binnen die map maak je een nieuw stylesheet. In dat stylesheet vertel je WordPress dat dit een child-thema is van je bestaande thema.
- Voeg kopieën toe aan het child-thema van de bestanden die je wilt bewerken en bewerk ze binnen die map.
- Activeer het child-thema op je website.
WordPress gebruikt altijd een bestand uit het child-thema om content weer te geven, tenzij er een bestand is binnen het parent-thema met een hogere hiërarchie. Als er twee versies zijn van hetzelfde bestand, zal WordPress de versie van het child-thema gebruiken. Dit betekent dat het nieuwe bestand in je child-thema het oude van het parent-thema zal overschrijven.
Best practices voor het aanpassen van WordPress-thema’s
Dus jij bent van plan om je thema aan te passen. Voordat je dat doet en allerlei dingen gaat veranderen, lees eerst deze tips even zodat je het veilig doet en je je website niet stuk maakt, kwetsbaar maakt voor aanvallen, of je code kwijtraakt.
Indien mogelijk, pas je thema altijd aan zonder je code te bewerken
Als je je aanpassingen kan maken via de Customizer of via één van de andere admin-schermen, is dat altijd veiliger dan direct de code aan te passen.
Bewerk de code alleen als je bekend bent met CSS (voor de stylesheet) en PHP (voor de andere thema-bestanden) en als je weet hoe je deze veilig kunt aanpassen.
Gebruik een lokale testsite om je veranderingen op uit te proberen
Als je de code van een thema aanpast of een child-thema maakt, zorg dan dat je al het ontwikkelingswerk uitvoert binnen een lokale installatie van WordPress waarop je jouw thema installeert en je jouw content van je live site naartoe kopieert.
Op deze manier heb je een kopie van je live website waarop je je veranderingen kunt testen. Het werken binnen een lokale site heeft geen effect op je live website en kan sneller zijn.
Zelfs als je de Customizer gebruikt, kan het nuttig zijn om een lokale versie van je website te gebruiken om mee te testen, zodat je je veranderingen kunt publiceren en uittesten zonder dat dit effect heeft op je live website.
Als je eenmaal de veranderingen aan je thema hebt getest, kun je ze uploaden naar je live website, of nog beter, je kunt ze testen binnen een testomgeving en vervolgens pushen naar je live website.
Gebruik versiebeheer
Wanneer je je thema bewerkt, moet je altijd versiebeheer gebruiken om je veranderingen bij te houden.
De meest eenvoudige manier is het veranderen van het versienummer van je thema en kopieën van beide versies bewaren. Maar als je versiebeheer goed wil aanpakken, dan kun je het beste een dienst zoals GitHub gebruiken om je veranderingen bij te houden.
Op die manier, als een aanpassing problemen veroorzaakt, kun je het makkelijk herstellen zonder handmatig bewerkingen te doen.
Versiebeheer wordt nog nuttiger als je in een team werkt, omdat je dan kunt zien wat andere teamleden aan het doen zijn. Lees zeker onze Git vs Github gids.
Gebruik een testwebsite om je veranderingen te testen
Als je toegang hebt tot een testwebsite(zoals Kinsta’s gratis testomgeving die is inbegrepen bij alle pakketten), is de veiligste manier het testen binnen deze omgeving voordat je de nieuwe versie van je thema (of je child-thema) activeert.
Dit komt doordat een lokale site in verschillende aspecten anders is dan je live website: het staat op een andere server (gemaakt op je lokale machine) en het gebruikt mogelijk een andere versie van PHP of één van de andere tools die je op je website gebruikt.
Maak een kopie van je live website op je test-server, en upload en activeer je nieuwe thema. Test je website grondig zodat je er zeker van bent dat echt alles werkt, en zet dan je bewerkingen door naar je live website.
Maak je thema responsive
Elke verandering van je thema moet werken op zowel mobiele apparaten als desktops.
Steeds meer mensen gaan op internet via hun smartphone, en de Mobile-first index van Google laat zien dat het momenteel waarschijnlijk belangrijker is om aan je mobiele versie van je website te werken dan aan de desktop-versie. Al je wijzigingen moeten dus mobielvriendelijk zijn – of beter nog: mobile-first zijn waar mogelijk.
Dit is vooral belangrijk voor veranderingen aan je styling of lay-out: controleer dat de nieuwe lay-out ook werkt op mobiele apparaten en dat je media query’s hebt toegevoegd zodat je lay-out zich aanpast aan de verschillende schermformaten.
Als je thema niet responsive is, zal dat een negatieve impact hebben op je rankings bij zoekmachines en je conversie-ratio’s.
Als je geen toegang hebt tot verschillende mobiele apparaten om op te testen, dan kun je bijvoorbeeld BrowserStack gebruiken om te zien hoe je website eruitziet op verschillende apparaten. Je kunt ook de Developer-tools van je browser gebruiken, en de responsive view binnen de Customizer.
Zorg ervoor dat je aanpassingen geen impact hebben op de toegankelijkheid
Alle veranderingen aan je thema moet ook toegankelijk zijn voor gebruikers met een handicap of zintuiglijke beperkingen.
Dit gaat dus niet alleen om ervoor te zorgen dat je website werkt op schermlezers, maar ook om kleurenschema’s en grootte van je lettertype.
Als je veranderingen aan je thema een kleur feller of een tekst kleiner maken, denk er dan nog eens over na: dit kan het moeilijker maken voor mensen om je website te lezen en te gebruiken.
Voordat je de veranderingen definitief maakt, gebruik een check voor toegankelijkheid om je website te testen en er zeker van te zijn dat je geen mensen uitsluit.
Hou je aan de WordPress Coding Standards
Als je de code in je thema aanpast of een child-thema maakt, zorg er dan voor dat je code de code-richtlijnen van WordPress volgt.
Deze richtlijnen bestaan om ervoor te zorgen dat WordPress-code consistent en goed is en om te voorkomen dat je rommelige code krijgt. Er zijn standaarden voor PHP, CSS en JavaScript, dus lees alles door wat voor jou relevant is, en zorg dat je ze naleeft.
Als je bestaande WordPress-thema goed geprogrammeerd is en je alleen code schrijft die daarmee consistent is, dan ben je al een flink eind op weg met ervoor zorgen dat je code de richtlijnen volgt. Zorg dat je altijd commentaar toevoegt aan je veranderingen zodat jijzelf en anderen weten wat je ook alweer had gedaan wanneer je het in de toekomst weer eens tegenkomt. Je denkt misschien dat je het niet zult vergeten, maar je zult verbaasd zijn hoe makkelijk het is om over een paar maanden te vergeten waarom je ook alweer die ene regel code had aangepast.
Samenvatting
Het aanpassen van je WordPress-thema is niet bijster ingewikkeld. Soms kan je simpelweg de Customizer gebruiken om wijzigingen aan te brengen in de lettertypen, kleuren of je favicon (lees onze uitgebreide handleiding over WordPress lettertypen). Maar soms moet je ook een nieuw child-thema maken om een nieuw sjabloonbestand toe te voegen aan een thema.
De mogelijkheden die je hebt om je thema op maat te maken bevatten verder het gebruiken van een plugin, het direct aanpassen van de code van je WordPress-thema, of het maken van een child-thema.
Kies de optie die het beste werkt voor jou, en maak je aanpassingen veilig, zonder je website kapot te maken.
Rachel McCollin helpt mensen sinds 2010 met het bouwen van websites met WordPress. Ze is een grote fan van zelf gehoste WordPress en wil zoveel mogelijk mensen helpen om er een geweldige website mee te maken.
Laat een reactie achter