Het maken van een WordPress thema dat er geweldig uitziet en zonder problemen presteert is cruciaal voor elke ontwikkelaar. Ongeacht je ervaring kan het volgen van een robuuste strategie voor het testen van je thema het verschil maken tussen een middelmatig product en een succesvol project.

In deze gids kijken we naar het testen van WordPress thema’s en verkennen we de tools, technieken en best practices die de kwaliteit van je thema zullen verhogen. Dit is dé gids om ervoor te zorgen dat je thema voldoet aan de hoogste normen voor prestaties, compatibiliteit en gebruikerservaring (UX).

WordPress thema testen begrijpen

Het bouwen van elk product vereist een testproces dat meer is dan een vlugge controle voor de lancering. Het is een integraal onderdeel van het ontwikkelproces dat je kan helpen om problemen vroegtijdig op te sporen en te verhelpen, waardoor je op de lange termijn tijd en middelen bespaart.

Door het testen van WordPress thema’s kun je ervoor zorgen dat je thema correct functioneert in verschillende omgevingen, browsers en apparaten. Het kan problemen aan het licht brengen die je moet aanpakken voordat je het publiceert:

  • Compatibiliteitsproblemen met verschillende WordPress versies.
  • Conflicten met populaire plugins.
  • Prestatieproblemen.
  • UX inconsistenties en toegankelijkheidsproblemen.
  • Kwetsbaarheden in de beveiliging.

Hoewel het testen van WordPress thema’s bugfixes kan inhouden, helpt het proces je over het algemeen om een product te maken dat opvalt in de markt.

In het kort: WordPress thema standaarden

WordPress heeft een vaste set coderingsstandaarden om de consistentie en kwaliteit van alle thema’s te waarborgen. Deze standaarden zijn niet zomaar willekeurige regels; ze zijn het resultaat van verfijning door jarenlange ervaring en samenwerking binnen de gemeenschap.

Het Make WordPress Themes team dwingt deze standaarden af voor opnames in de WordPress Themadirectory:

De hoofdpagina van de WordPress Themadirectory. Het toont een raster van voorbeeldthema's, waaronder Twenty Twenty-Four, Elementor's Hello Theme en Astra. Elk voorbeeld van een thema toont een miniatuurafbeelding van het ontwerp van het thema en de naam. De header van de pagina bevat opties om een thema in te dienen, commerciële themabedrijven te bekijken en je aan te melden.
De WordPress Thema Gids.

Thema’s die worden ingediend bij de directory ondergaan een grondige beoordeling om er zeker van te zijn dat ze voldoen aan de kwaliteits- en beveiligingsvereisten van het platform.

Gezien het feit dat de Themadirectory de officiële opslagplaats is – en de eerste plaats waar velen naartoe gaan om een nieuw thema te vinden – is het van vitaal belang dat elke download werkt zoals je verwacht, zonder beveiligingsproblemen of grote bugs. Deze hoge kwaliteitsstandaard is slechts één aspect dat WordPress maakt tot het platform dat het is.

Waarom je zou moeten testen op de WordPress standaarden

Voldoen aan de WordPress standaarden gaat niet alleen over goedkeuring voor opname in de Themadirectory. Het diepere doel is om een betrouwbaar, veilig product te maken dat werkt voor de gebruiker.

Er zijn veel dwingende redenen om je thema te testen aan de hand van de WordPress standaarden, naast de wens om een thuis te vinden tussen de concurrentie:

  • Toekomstbestendigheid. WordPress ontwikkelt zich voortdurend. Als je je dus houdt aan de huidige standaarden, maak je het makkelijker om je thema in de toekomst te onderhouden en bij te werken.
  • Compatibiliteit. Als je thema de WordPress standaarden volgt, is de kans groter dat het werkt met een groot aantal plugins en WordPress kernfuncties.
  • Prestaties. Veel WordPress standaarden zijn gericht op prestaties. Als je deze volgt, kan dat ervoor zorgen dat je thema efficiënter werkt.
  • Beveiliging. De standaarden bevatten best practices voor beveiliging, wat helpt om je thema en de gebruikers ervan te beschermen tegen mogelijke kwetsbaarheden.

Het netto resultaat van het aanpakken van deze facetten is groot: gebruikersvertrouwen. De meeste gebruikers willen een kwaliteitsproduct dat veilig, stabiel en vrij van bugs is.

Voor degenen die bekend zijn met WordPress is een thema dat aan deze normen voldoet een extra impuls voor de uitstekende reputatie van het platform. Voor gebruikers die WordPress voor het eerst gebruiken, geven kwaliteitsthema’s een gevoel van betrouwbaarheid. Het kan dan ook het begin zijn van een levenslange band met het platform, dankzij jouw thema.

Op welke standaarden WordPress je thema beoordeelt

Het Make WordPress Themes team staat centraal en is cruciaal voor het handhaven van de kwaliteit van thema’s binnen het ecosysteem van het platform. Ze beoordelen thema’s op basis van een uitgebreide reeks criteria:

  • Kwaliteit code. Er mogen geen JavaScript- of PHP-fouten, waarschuwingen of meldingen zijn. Je thema mag ook geen afgeschreven constanten of functies gebruiken. WordPress heeft ook een aparte set coderingsstandaarden waaraan je moet voldoen.
  • Functionaliteit. Je mag de bewerkingsvoorbeeldschermen niet “manipuleren”, typische WordPress functionaliteit niet achter een paywall plaatsen of geen redirects uitvoeren bij activering. Er zijn ook richtlijnen voor het weergeven van beheerdersmeldingen en het opnemen van “niet-presentatie” functionaliteit.
  • Toegankelijkheid. Thema’s moeten links overslaan en toetsenbordnavigatieopties bevatten. Links moeten ook onderstreept worden.
  • Licenties. Thema’s moeten natuurlijk compatibel zijn met de GNU General Public License (GPL). Je hoeft echter niet dezelfde licentie te gebruiken als WordPress – elke compatibele GPL licentie is geldig.

Er zijn ook richtlijnen met betrekking tot promotie en presentatie. Het Make WordPress Themes team kan bijvoorbeeld besluiten om je thema af te wijzen op basis van de naam. Dit zal gebeuren als er sprake is van inbreuk op een handelsmerk of als je een ongepaste naam kiest.

Daarnaast zijn er beperkingen voor het plaatsen van credits – zelfs dan kun je het alleen toevoegen aan style.css:

Een code editor venster met het style.css bestand voor het WordPress Twenty-Four thema. Het venster heeft een donkere achtergrond met lichte tekst met thema-informatie zoals de naam, auteur, beschrijving en verschillende thema features en tags.
Een style.css bestand.

Er zijn ook richtlijnen voor auteursaccounts, zoals hoeveel accounts je mag hebben en hoe vaak je een thema moet indienen. De meeste vereiste elementen zijn gericht op technische ontwikkelingsfacetten.

WordPress technische standaarden

Van de 14 vereisten voor het indienen van een thema bij WordPress, hebben de vereisten met betrekking tot thema-instellingen, bestanden en of je thema blokken gebruikt een groot deel.

Als het gaat om Klassieke thema’s en Blokkenthema’s, heb je meer richtlijnen voor de eerste:

  • Klassieke thema’s. Je moet veel functies opnemen, soms op specifieke locaties in je code. Hetzelfde geldt voor het aanroepen van sjablonen.
  • Blokthema’s. Voldoen aan de standaarden voor blokthema’s is eenvoudiger, omdat je slechts vier bestanden hoeft op te nemen. Als je bloksjablonen ook compleet zijn, voldoet je thema aan de technische standaarden voor een aantal vereisten.

Er zijn veel vereisten met betrekking tot instellingen. Je moet bijvoorbeeld specifieke haken gebruiken om meldingen weer te geven en de duurzaamheid van de melding instellen in overeenstemming met de richtlijnen voor het beoordelingsproces.

Een deel van het WordPress admin dashboard met de Posts sectie. Bovenaan staat een blauwe banner die de Revive Old Posts plugin promoot. Daaronder zijn tabbladen die poststatistieken weergeven, waaronder 106 totale posts, 103 gepubliceerde, één sticky, twee geplande en één concept post.
Een adminmelding binnen het WordPress dashboard.

Er is een strenge controle voor het opslaan van opties in de database. Je moet één matrix gebruiken, zelfs voor meerdere instellingen, met de juiste naamgevingsconventies. Als het gaat om het WordPress dashboard, kun je alleen kernelementen van de gebruikersinterface (UI) gebruiken en elke styling moet binnen de grenzen van de beheerpagina van je thema blijven.

Het WordPress admin dashboard met de pagina Reacties genereren van de FakerPress plugin. De pagina bevat verschillende velden voor het configureren van het genereren van commentaar, waaronder type, berichttype, hoeveelheid, datumbereik, contentgrootte en HTML-opties. De linker zijbalk toont het standaard WordPress admin menu.
De comment-instellingen pagina van FakerPress.

Je moet ook de bestanden die je in je thema opneemt in de gaten houden. Elk thema moet bijvoorbeeld een readme.txt bestand bevatten. Het voorbereiden van je bestanden (zoals het verwijderen van premium code of overbodige mappen) is een andere vereiste, net als het opnemen van alle scripts en media voor je thema in plaats van het gebruik van externe bronnen. Dit geldt ook voor geminificeerde scripts: je moet ook het volledige, originele bestand opnemen.

Voldoen aan alle WordPress eisen voor je thema kan een heel gedoe lijken, vooral als je niet van plan bent om je thema in te dienen bij de officiële directory. Toch bieden deze standaarden een uitstekend kader om je te helpen een kwaliteitsproduct af te leveren.

Waarom voldoen aan de WordPress standaarden de kwaliteit van je thema ten goede komt

Om je thema in de officiële listings te krijgen, moet je voldoen aan de Make WordPress Themes richtlijnen. Je kan ook echter ook een bureau zijn dat op maat gemaakte thema’s maakt voor klanten. Vaak hoeven deze thema’s niet te worden ingediend bij de Themadirectory, omdat er geen sprake is van massadistributie. Maar het volgen van de richtlijnen en vereisten kan nog steeds voordelen bieden voor alle WordPress thema’s, waaronder:

  • Consistentie. De standaarden bieden een gemeenschappelijk kader, waardoor het voor teams gemakkelijker wordt om samen aan een project te werken.
  • Efficiëntie. Je kunt je ontwikkeltijd versnellen door de vastgestelde standaarden te volgen. Dit kan ook de noodzaak voor uitgebreide aanpassingen later verminderen.
  • Onderhoudbaarheid. Gestandaardiseerde code is gemakkelijker te onderhouden en bij te werken. Dit is nog een manier om op de lange termijn tijd en middelen te besparen.
  • Klanttevredenheid. Thema’s die voldoen aan de WordPress standaarden hebben een grotere kans om je klanten een probleemloze, bugvrije ervaring te bieden.

Naast dit alles geef je je thema flexibiliteit voor de toekomst. Denk aan een situatie waarin een klant een thema voor een project afkeurt of de overeenkomst beëindigt. Een thema dat voldoet aan de standaarden en eisen van WordPress kun je zonder veel extra werk hergebruiken in een productaanbod.

Kortom, zelfs als je je niet wilt richten op de WordPress Themadirectory, kan het voldoen aan de eisen van het platform de kwaliteit en verkoopbaarheid van je thema’s verbeteren. Op zijn minst toon je professionaliteit en aandacht voor detail, wat een sterk verkoopargument kan zijn voor potentiële klanten.

De essentiële tools die je nodig hebt voor het testen van WordPress thema’s

Net als elke vakman hebben WordPress ontwikkelaars een robuuste en aanpasbare toolkit nodig die de verschillende aspecten van het maken van een thema dekt en ervoor zorgt dat het goed presteert.

Beschouw de WordPress coderingsstandaarden en de eisen van het Make WordPress Themes team als je instructieboekjes. Je hoeft deze ook niet allemaal handmatig te controleren. In plaats daarvan kunnen de Theme Check en Theme Sniffer plugins dit automatiseren.

De Theme Check plugin header afbeelding van WordPress.org. Het toont een vereenvoudigde op pictogrammen gebaseerde checklist of voortgangstracker op een donkerrode achtergrond. De checklist toont drie cirkelvormige pictogrammen die verticaal zijn uitgelijnd aan de rechterkant van de afbeelding. De bovenste twee cirkels bevatten groene vinkjes, terwijl de onderste cirkel leeg is, wat wijst op twee voltooide stappen en één resterende stap.
De Theme Check plugin header van WordPress.org.

Ze voeren allebei tests uit op je thema en geven alle gebieden weer die mogelijk niet voldoen aan de huidige eisen. Theme Sniffer heeft een paar uitgebreidere tests en gebruikt aangepaste “sniffs” voor het PHP_CodeSniffer script om normovertredingen op te sporen.

Je zult ook gebruik willen maken van de ontwikkeltools van je browser om je HTML, CSS en JavaScript te inspecteren en debuggen. Voor WordPress-specifiek debuggen is het bijna onmogelijk zonder de debugmodus van het platform zelf. De Debug Bar plugin voegt een debug menu toe aan het WordPress dashboard dat gebruik maakt van deze modus.

De headerafbeelding van de Debug Bar plugin van WordPress.org. Het toont een foutopsporingspaneel met PHP versie 7.0.3, MySQL versie 5.5.5 en een geheugengebruik van 3.708.912 bytes. Het paneel toont ook query-informatie, met 12 query's die in totaal 14,3 ms duren om uit te voeren. Een MySQL query die selecteert uit de wp_options tabel is ook zichtbaar.
De Debug Bar plugin header afbeelding van WordPress.org.

Er zijn nog een paar andere plugins die ook waardevol kunnen zijn bij het testen van je thema:

  • Query Monitor. Dit hulppaneel geeft inzicht in databasequery’s, hooks, conditionals en nog veel meer.
  • Log Deprecated Notices. Als je thema afgeschreven bestanden, functies en functieargumenten gebruikt, dan zal deze plugin ze opmerken. Het is een goede manier om je thema up-to-date te houden met de nieuwste WordPress versies.
  • Monster Widget plugin. Klassieke thema’s gebruiken widgets en deze plugin voegt een enkele widget toe aan je site die alle beschikbare core widgets bevat. Het doel is om je efficiënt widgetgebieden te laten testen.

Het kan zijn dat je niet al deze plugins en tools gebruikt tijdens je WordPress thema testworkflow. Dat is het punt van je gereedschapskist: elk onderdeel dient een doel en helpt je om problemen op te lossen voordat het problemen worden.

WordPress thema testen: je testomgeving opzetten

Als je gereedschapskist klaar is, kun je je werkomgeving instellen. Voor het testen van WordPress thema’s betekent dit het creëren van een goede test- en ontwikkelomgeving. Het idee is om ervoor te zorgen dat je alle tests kunt herhalen en nauwkeurige resultaten kunt verkrijgen.

Je hebt misschien al een groot deel van dit proces klaarliggen zonder dat je het verder hoeft in te stellen. Normale WordPress ontwikkelaars zullen zeker een van de volgende zaken zonder moeite beschikbaar hebben:

  • Een lokale ontwikkelomgeving. Met een WordPress installatie op je lokale machine kun je tests uitvoeren zonder je live site te beïnvloeden. DevKinsta is een van de beste opties die hiervoor beschikbaar zijn.
  • Meerdere WordPress versies. Je moet tests uitvoeren tegen verschillende oudere WordPress versies voor maximale compatibiliteit.
  • Verschillende PHP-versies. In het verlengde daarvan moeten deze tests worden uitgevoerd tegen verschillende versies van PHP of andere belangrijke technologie die je thema nodig heeft.
  • Populaire plugins. Om ervoor te zorgen dat je test tegen een realistische opstelling, is het een goed idee om een aantal van de populairste WordPress plugins te installeren en te activeren. Dit kan zijn om te testen op compatibiliteitsproblemen of om te zien hoe je thema presteert bij een typische belasting.
  • Meerdere apparaten en browsers. Het testen van je thema op verschillende apparaten en browsers zorgt ervoor dat het er goed uitziet en consistent werkt op alle platforms.

Zodra je de componenten van je omgeving hebt geïnstalleerd, moet je WordPress configureren voor debuggen. Om dit te doen, open je je wp-config.php bestand met de methode die je verkiest. Secure File Transfer Protocol (SFTP) of Secure Shell (SSH) zijn ideaal.

Zodra wp-config.php is geopend, voeg je de volgende regels toe:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Dit schakelt de debugmodus van WordPress in, logt fouten in een bestand en voorkomt dat een van beide wordt weergegeven op de voorkant. Dit kun je ook weer uitschakelen als je de testsite uploadt naar een live server.

De Theme Unit Test Data: WordPress testcontent die je helpt om aan de themanormen te voldoen

Er is nog een element voor het testen van WordPress thema’s dat cruciaal kan zijn voor het opsporen van bugs of problemen: de Theme Unit Test Data. Dit is een XML-bestand dat een grote verscheidenheid aan contenttypen en randgevallen bevat, die je uploadt naar je site via het WordPress dashboard.

Het WordPress dashboard met het scherm Posts. De interface toont een tabel met verschillende blogberichten met kolommen voor titel, auteur, categorieën, tags en publicatiedatum. De zijbalk aan de linkerkant toont de verschillende navigatieopties voor het beheergebied van WordPress.
De WordPress Posts pagina toont content die gerelateerd is aan de Theme Unit Test Data.

Dit is waarom het zo waardevol is:

  • Het bevat verschillende contenttypen, zoals berichten, pagina’s, opmerkingen en media. Hiermee kun je testen hoe je thema omgaat met verschillende contentscenario’s.
  • De gegevens bevatten elementen zoals zeer lange titels, berichten zonder titel en geneste opmerkingen. Al deze randgevallen zijn belangrijk om te testen, omdat je wilt dat de gebruiker elke aanpassing kan maken die voor hem relevant is.
  • Verschillende opmaakopties zorgen ervoor dat je thema de inhoud opmaakt zoals je zou verwachten. Het XML bestand bevat inhoud en media om dit te testen.
  • Je krijgt ook content in verschillende talen, waaronder letters die opmaakfouten kunnen veroorzaken.

Je kunt het Theme Unit Test Data XML bestand vinden in de officiële WordPress GitHub repository of in het Make WordPress Themes Handbook. Zodra je dit hebt gedownload, ga je naar het scherm Extra > Import binnen WordPress:

De WordPress Import opties pagina. De linker zijbalk toont verschillende menu-items zoals Dashboard, Berichten, Media en Gereedschappen. Het hoofdgedeelte toont een lijst met verschillende platforms van waaruit gebruikers content kunnen importeren, waaronder Blogger, LiveJournal, Movable Type, RSS, Tumblr en WordPress zelf. Elke optie heeft links naar Nu installeren en Details ernaast.
De Import pagina binnen het WordPress dashboard.

Dit toont een lijst met importeeropties voor het platform, waarvoor je Install now voor WordPress wilt kiezen. Als alternatief kun je de WordPress Importer plugin installeren. De installatielink zal veranderen in Run Importer. Klik hierop om een uploader dialoog te openen. Kies vervolgens je XML bestand en klik op de knop Upload file and import:

De pagina WordPress importeren is speciaal voor het importeren van WordPress content. Je ziet instructies om een WordPress eXtended RSS (WXR) bestand te uploaden. Er is een knop Bestand kiezen om het bestand te selecteren, met een maximale uploadgrootte van 128 MB. Daaronder staat een blauwe Upload knop.
Het scherm WordPress importeren toont een bestand dat nog geïmporteerd moet worden.

De content die je importeert gaat gepaard met verschillende gebruikersprofielen. In het scherm WordPress importeren kun je kiezen of je ze samen met de inhoud importeert. Je kunt ook een eigen gebruiker aanmaken of de inhoud toewijzen aan een gebruiker die al op je site bestaat:

Het Import WordPress scherm voor het toewijzen van auteurs aan content. Er zijn velden om nieuwe gebruikers aan te maken of berichten toe te wijzen aan bestaande gebruikers voor twee importeerauteurs: Theme Buster en Theme Reviewer. Onderaan staat een selectievakje voor het importeren van bestandsbijlagen en een knop Submit.
Het Import WordPress dialoogvenster toont de optie om auteurs toe te wijzen aan content.

Het is aan te raden om het selectievakje Download and import file attachments in te schakelen. Dit weerspiegelt een typische WordPress ervaring. Zodra je op de knop Submit klikt, zal WordPress enkele ogenblikken nodig hebben om de inhoud, gebruikers en media te importeren. Vanaf hier kun je testen hoe je thema omgaat met verschillende contenttypen en scenario’s om er zeker van te zijn dat het voldoet aan de vereisten voor het weergeven en opmaken van content.

De basisprincipes van het testen van thema’s

De juiste workflow is de sleutel tot een soepele en probleemloze ervaring. Dit geldt vooral als je een lange lijst met extra tools en plugins moet beheren. Als je eenmaal een stabiele testomgeving hebt, kun je de stappen beoordelen die nodig zijn voor het testen.

De sleutel tot het testen van WordPress thema’s is dat het iteratief en vloeiend is. Er is geen vaste, stapsgewijze lineaire workflow. In plaats daarvan zijn er een aantal taken die je kunt uitvoeren in de volgorde die je zelf kiest.

Bijvoorbeeld, je werkwijze zal waarschijnlijk ten minste één of alle van de volgende stappen bevatten:

  • Debugmodus inschakelen.
  • De plugins Theme Check of Theme Sniffer uitvoeren.
  • Testen met de Theme Unit Test Data.
  • Problemen oplossen met behulp van browser DevTools.

Het testen van de opties en aanpassingen van je thema kan op verschillende momenten gebeuren. Dit gebied zal gedurende het proces opnieuw worden bezocht. Hetzelfde geldt voor het controleren van plugin-compatibiliteit. Deze twee gebieden worden voortdurend geëvalueerd. Andere tests die je uitvoert zullen vaak om deze gebieden draaien.

De foutopsporingsfase volgt vaak op het testen, hoewel er wel wat kruisbestuiving is. Uiteindelijk kijkt het testen van WordPress thema’s naar gebieden met betrekking tot functionaliteit, prestaties, beveiliging, toegankelijkheid en “geschiktheid” van de code.

Als je eenmaal een thema hebt dat je tests doorstaat, voldoet aan de officiële WordPress eisen en geen bugs bevat, zou het indienen ervan eenvoudig moeten zijn.

De belangrijkste gebieden bij het technisch testen van WordPress thema’s

Met de grondbeginselen in gedachten kun je kijken naar de kernfacetten van het testen van je thema. Net als bij de grondbeginselen zijn deze kerngebieden vloeiend en iteratief. Het is echter een goed idee om te beginnen met het testen van de basisfunctionaliteit van je thema.

Functionaliteit testen

Over het algemeen zorgt het testen van de functionaliteit ervoor dat alle aspecten van je thema werken zoals verwacht. Een thema dat de standaard WordPress functionaliteit niet kan ondersteunen is niet levensvatbaar. De Theme Unit Test Data is hiervoor van vitaal belang, omdat je kunt inspecteren hoe je thema omgaat met typische situaties en edge cases.

Je hebt nu berichten en pagina’s met typische en atypische content, dus het is niet nodig om er meer te maken. Het testen van deze inhoud is subjectief en hangt af van je doelen, de ontwerpopdracht, de wensen van de klant en nog veel meer.

Voor de meeste use cases is het waardevol om het volgende te testen:

  • Doorloop voor alle typische en meest populaire blokken – Paragraph, List, Image, Header, als voorbeelden – hoe ze eruit zien op de front-end. Controleer de uitlijning, spatiëring en algemene presentatie op inconsistenties.
  • Voor meerdere opties moet de compatibiliteit getest worden. Dit kan zijn met de kerninstellingen van WordPress, de verschillende beschikbare blokken en zelfs instellingen van derden voor andere plugins.
  • Als je thema een blog bevat, controleer dan of de commentsectie alle inhoud weergeeft. Het is ook belangrijk om geneste reacties hier te testen, zodat het ontwerp en de functionaliteit werken zoals verwacht.
  • Zoek op dit punt naar blokken die met je thema integreren en test ze. Het Comment block zou bijvoorbeeld verder moeten worden aangepast. Externe plugins die blokken samenvoegen moeten misschien getest worden op compatibiliteit.

Voor klassieke thema’s moet je widgetgebieden, shortcodefunctionaliteit, navigatie en andere elementen testen die zich onderscheiden van Block thema’s. De meeste thema’s zouden echter standaard moeten werken met de Block Editor, aangezien dit de toekomst van WordPress is.

Block Editor testen

Je thema moet volledig compatibel zijn met de Block Editor en Site Editor. Een goede plek om te beginnen is met sjablonen, die je kunt vinden in het scherm Design > Templates in de Site Editor:

De interface van de WordPress Site Editor toont de pagina Templates. Het toont een raster van sjabloon miniaturen, waaronder Alle archieven, Blog Home, Index en andere paginasjablonen. Elke miniatuur toont een blauw voorbeeld in wireframe-stijl van de lay-out van de template.
De Templates pagina van de WordPress Site Editor.

Hier wil je controleren of je templates worden weergegeven en of je ze zonder fouten kunt bewerken. Gebruikers kunnen de templates van je thema aanpassen en zelfs hun eigen templates maken.

De Styles interface is een ander belangrijk aanpassingshulpmiddel binnen de Site Editor, wat betekent dat het ook een belangrijke factor is bij het bepalen van de kwaliteit van je thema.

De interface Styles van de WordPress Site Editor. Het hoofdgedeelte van de content toont een blauwe achtergrond met witte tekst. De rechter zijbalk toont de stijlen-editor van de site, met name de instellingen voor het kleurenpalet.
De stijleninterface van de WordPress Site Editor.

Je kunt met de instellingen spelen om te zien of je typische aanpassingen kunt doen. In andere gevallen kun je werken met layoutinstellingen om alles goed te laten samenwerken.

Ook andere elementen van Block Thema’s hebben je aandacht nodig:

  • Theme.json. Test je theme.json bestand grondig om er zeker van te zijn dat het de globale stijlen en instellingen correct configureert.
  • Blokvariaties. Als je thema custom blokvariaties gebruikt, is het belangrijk om deze op verschillende manieren te testen.
  • Custom bloktemplates: Controleer deze en alle relevante sjabloononderdelen dubbel, zodat je niet nog meer bugs of fouten introduceert.

Dit testen is een aanvulling op de technische functionaliteit, zoals controleren of alle actie- en filterhooks correct werken. Indien relevant, test je je thema met WooCommerce of andere e-commerce plugins. Tot slot willen veel sites van klanten ook integreren met sociale media. Test alle deelknoppen of feeds om er zeker van te zijn dat ze werken volgens de eisen van je klant.

Plugin compatibiliteit

Een WordPress site zal tijdens zijn levensduur waarschijnlijk meerdere plugins gebruiken. Omdat er zoveel plugins en combinaties zijn, is het moeilijk om met elk gebruik rekening te houden.

Dit kan voor problemen zorgen. Hoewel het duidelijk is dat je je thema met sommige plugins moet testen, is het moeilijk om te weten welke dat zijn. Ons advies is om van alles een beetje te testen:

  • De populairste page builder plugins, zoals Elementor, Beaver Builder, Bricks, Brizy en Divi.
  • De meeste sites hebben een plugin voor zoekmachineoptimalisatie (SEO) zoals Yoast SEO. We raden je ook aan om eens te kijken naar SEOPress en vele andere.
  • Cachingplugins komen ook veel voor. WP Super Cache, W3 Total Cache en WP Rocket zijn allemaal leiders op dit gebied.
  • Je kunt veel verschillende formulierplugins vinden, maar Ninja Forms, Contact Form 7, WPForms en Gravity Forms komen allemaal vaak voor.
  • De plugins van Automattic en het Make WordPress Core team zouden op je lijst met testoplossingen moeten staan. Akismet, Jetpack en zelfs de Classic Editor plugin zouden allemaal grondig getest moeten worden.

Je wilt zoeken naar merkbare conflicten en dan werken aan kleine problemen. Veel thema’s gebruiken plugin compatibiliteit in hun marketingmateriaal, dus tijd besteden aan dit gebied kan je geloofwaardigheid vergroten.

Toegankelijkheid testen

Niet elke gebruiker heeft het voorrecht om perfect te zien of goed functionerende ledematen te hebben. Dit zou geen belemmering moeten zijn om je thema te gebruiken, wat betekent dat je toegankelijkheidstests moet uitvoeren voordat je het lanceert.

WordPress heeft zijn eigen toegankelijkheidsrichtlijnen met dank aan het Make WordPress Accessible team. Een goede aanpak voor je eigen tests is het bestuderen van de meest gunstige toegankelijkheidsmethoden. Er zijn er veel om te overwegen en ze zijn er in een aantal categorieën:

  • Ontwikkeling. Dit omvat aspecten zoals het gebruik van paginering in plaats van oneindig scrollen, het correct labelen van webformulieren, het gebruik van semantische HTML, het implementeren van de juiste headerhiërarchie en nog veel meer.
  • Content. Deze praktijken zijn eenvoudig, zoals het openen van links in hetzelfde tabblad, het toevoegen van ALT-tekstbeschrijvingen en het toepassen van leesbaarheid.
  • Ontwerp. Lettergrootte en kleurcontrast zijn belangrijke onderwerpen als het gaat om toegankelijkheid, dus daar moet je je op richten tijdens de ontwikkeling. De testfase is meer bedoeld voor verfijning.

Veel van deze werkwijzen zijn ook compatibel met en afgestemd op de Web Content Accessibility Guidelines (WCAG) 2.0. Je kunt checklists vinden om je te helpen elementen met betrekking tot webtoegankelijkheid op te sporen en te testen. Het doorlopen van de controles voor ontwikkeling, inhoud en ontwerp zal je thema een goede basis geven. Er zijn zelfs volledige cursussen om te leren over het toepassen van webtoegankelijkheidstesten op je projecten.

Tools voor het testen van toegankelijkheid

Als het gaat om geschikte tools, zijn er twee aanbevelingen:

  • axe. Deque’s axe draait als onderdeel van de DevTools van je browser en automatiseert binnen enkele seconden een reeks tests (afhankelijk van je account).
  • WAVE. WebAIMs WAVE is een tool die je zowel in de browser als via een extensie kunt gebruiken.

Beide tools samen gebruiken is een uitstekende manier om toegankelijkheid te testen. Je kunt bijvoorbeeld beginnen met het snel doorlopen van een axe-test:

Een screenshot van een WordPress website met de resultaten van toegankelijkheidstests in de browser DevTools. Onder het hoofdgedeelte van de content toont een rapport 34 toegankelijkheidsproblemen, waaronder 24 problemen met kleurcontrasten en negen problemen met ARIA-rollen.
De axe tool in het Developer inspectiepanel van een browser.

Je hoeft maar op een knop te klikken om een paginavullende scan te starten. De resultaten geven gebieden aan waar je rekening mee moet houden en mogelijke manieren om ze op te lossen.

WAVE kan lastig lijken, vooral als je een groot aantal problemen moet oplossen. De samenvatting van de volgorde en structuur van de content is echter van onschatbare waarde om te beoordelen hoe je thema zal werken met schermlezers:

De interface van de WAVE webtoegankelijkheidsbeoordelingstool voor een WordPress website. Het linkerpaneel toont toegankelijkheidsinformatie, met het tabblad Volgorde geselecteerd. De pagina-elementen worden in leesvolgorde weergegeven. Het rechterpaneel toont de homepage van de website.
De WAVE toegankelijkheidstool weergegeven in een linker zijbalk.

Het is een goede aanpak om algemene problemen op te lossen met axe, zoals algemene waarschuwingen voor kleurcontrasten, en dan dieper in te gaan op toegankelijkheidsproblemen met WAVE. Op deze manier heb je inhoud met de juiste hiërarchie en structuur van koppen, toegankelijke formulierinvoer en etikettering.

Misschien wil je zelfs de toetsenbordnavigatie testen en je thema gebruiken met een schermlezer om de ervaring van de gebruiker te begrijpen. Het testen van de toegankelijkheid van je thema is niet zomaar een “nice-to-have” aspect – het is essentieel voor het creëren van een inclusief web.

Prestaties testen

Het testen van de prestaties van je thema zorgt ervoor dat het goed werkt voor gebruikers. Het kan ook een belangrijke invalshoek zijn in je marketing. Veel thema’s promoten uitstekende prestaties, wat bewijst hoe belangrijk dat is.

Dezelfde methodologie voor het testen van webprestaties is ook van toepassing op het testen van WordPress thema’s. Er is een grondige manier om dit te doen, hoewel je tools kunnen verschillen.

Bijvoorbeeld Google’s PageSpeedInsights of Lighthouse zijn ideaal. Een tool als WebPageTest kan een goed alternatief zijn als je een second opinion wilt. Er zijn genoeg tools voor het testen van de prestaties beschikbaar die precies aan jouw behoeften voldoen.

Als het gaat om wat je moet testen, zijn er een paar belangrijke gebieden waar je je op moet richten:

  • Je Core Web Vitals moeten altijd gezond zijn, want dit is de basis van de prestaties van je thema.
  • Het minimaliseren van HTTP verzoeken en het optimaliseren van het laden van middelen zal je helpen je bronnen beter te beheren.
  • Query Monitor helpt je bij het identificeren en optimaliseren van database queries.
  • Als je thema gebundelde afbeeldingen bevat, zorg er dan voor dat ze de optimale grootte hebben en comprimeer ze voordat je ze verpakt.

De keuze voor een responsief of adaptief ontwerp moet vroeg in de ontwikkeling van je thema worden gemaakt. Wat je ook kiest, je moet het testen om te bevestigen dat het werkt zoals je wilt. Je wilt geen horizontaal scrollen, inhoud zoomen, kleine aanraakdoelen of weergave layouts die zich niet aanpassen aan de schermgrootte.

Op dit punt kun je cross-browser tests uitvoeren. BrowserStack is een geweldig hulpmiddel voor deze taak:

De homepage van BrowserStack, een cross-browser testplatform. De header bevat navigatiekoppelingen. De hoofdkop luidt App and Browser Testing Made Easy met een subkop over testen op 20.000+ echte apparaten. Daaronder staan secties voor verschillende testproducten, waaronder Live, Automate, Percy en Toegankelijkheidstesten.
De BrowserStack website.

Tot slot, hoewel serverresponstijden niet direct te maken hebben met het testen van thema’s, zijn ze wel belangrijk voor je eindgebruikers. Je zou geschikte providers kunnen aanbevelen in je documentatie of marketing. Uiteraard is Kinsta een goeie, we zijn razendsnel, robuust en veilig.

Beveiliging testen

Het testen van de beveiliging van WordPress zou een topprioriteit voor je moeten zijn. Het WordPress team biedt veel documentatie om ervoor te zorgen dat je thema veilig te gebruiken is.

Houd deze principes in gedachten:

  • Valideer en zuiver alle gegevens die je via je thema accepteert. Het is een goed idee om voorzichtig te zijn met gebruikersinvoer en de voorkeur te geven aan validatie boven opschonen.
  • Escape voor onbetrouwbare sources alles zo laat mogelijk – meestal in de uitvoerfase.
  • Vertrouw op de API’s van WordPress, omdat dit veilige manieren zijn om gegevens binnen je thema te verwerken.
  • WordPress nonces zijn hashes die helpen bij het beschermen, valideren en authenticeren van verzoeken. Ze zijn geen eerstelijns beveiligingsmethode, maar kunnen helpen om de beveiliging die je al hebt te versterken.

Cross-Site Scripting (XSS), Cross-Site Request Forgeries (CSRF) en SQL-injecties zijn enkele van de meest voorkomende kwetsbaarheden voor WordPress websites. Je thema moet waterdicht zijn als het aankomt op bescherming hiertegen. Als je deze basisprincipes van themabeveiliging volgt, kom je zo dicht mogelijk bij dat doel.

Typische werkwijzen om de ontwikkeling van thema’s soepeler te laten verlopen

Thema’s ontwikkelen binnen een bureau vereist een andere aanpak dan solo- of kleine projecten. Je hebt meer structuur, consistentie en efficiëntie nodig. Dit kun je bereiken door je eigen interne coderingsstandaarden te ontwikkelen als aanvulling op die van WordPress. Samenwerkingsworkflows met Jira of Trello kunnen worden gebruikt om problemen en bugs bij te houden.

De projectbeheerinterface van Jira toont een takenbord met drie hoofdsecties: Marketinglancering, iOS sprint en Backlog. Elke sectie bevat taken met hun status (Te Doen, In Uitvoering, Gereed) en toegewezen teamleden die worden weergegeven door cirkelvormige profielfoto's. Het bord laat een gestructureerde aanpak zien voor het organiseren en bijhouden van projecttaken.
De interface van Jira.

Om ervoor te zorgen dat je team op één lijn zit met de algemene behoefte aan kwaliteit, zijn er een paar manieren die kunnen helpen:

  • Implementeer een peer review proces. Dit kan zo eenvoudig zijn als teamleden elkaars code laten beoordelen voordat er samenvoegingen plaatsvinden. In andere situaties kun je ook pair programming overwegen.
  • Ontwikkel herbruikbare componenten. Het maken van een bibliotheek met herbruikbare stukjes code en componenten kan je ontwikkeltijd enorm verlengen. In sommige gevallen kun je zelfs een compleet framework bouwen voor het maken van toekomstige thema’s.
  • Implementeer uitgebreide testprocedures. Misschien wil je een gestandaardiseerde testchecklist ontwikkelen of gebruikersacceptatietests (UAT) opnemen in je workflow.

Sommige van deze implementaties hebben betrekking op typische DevOps praktijken en kunnen de kwaliteit van het werk van je agentschap verbeteren. Continuous Integration and Continuous Deployment (CI/CD) is bijvoorbeeld een van de beste implementaties die je kunt doen. Met de juiste tools in je pijplijn kan dit je helpen om je testproces op een aantal manieren te automatiseren. CI/CD is ook eenvoudig in te passen in je bestaande workflow en kan kostbare testuren besparen.

Samenvatting

Het testen van WordPress thema’s is nodig om ervoor te zorgen dat je product robuust en betrouwbaar is en werkt voor je gebruikers. Het naleven van de officiële WordPress standaarden en eisen is ononderhandelbaar als je een thema wilt publiceren in de WordPress Themadirectory. Deze richtlijnen hebben ook waarde voor de ontwikkeling van thema’s door bureaus en anderen die niet publiceren voor publieke consumptie.

Hoe dan ook, het uitgebreid testen van WordPress thema’s is een investering die tijd en moeite kost. Als je de kerngebieden afdekt die er toe doen – functionaliteit, toegankelijkheid, prestaties, veiligheid en codekwaliteit – dan lever je resultaten voor je klanten. Voldoen aan de WordPress standaarden kan het makkelijker maken om een thema in de toekomst opnieuw te gebruiken als de relatie met een klant eindigt.

Heb jij advies over het testen van WordPress thema’s op basis van je eigen ervaring? Deel het hieronder in de commentsectie!

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).