Experimenteren met WordPress vereist meestal het opzetten van een lokale omgeving, het beheren van database configuraties en het werken aan een complexe server-setup. Deze stappen kunnen tijdrovend zijn, vooral als je alleen maar een plugin wilt testen, een thema wilt uitproberen of wat code wilt aanpassen.
WordPress Playground biedt een browser-gebaseerde omgeving die binnen enkele seconden een volledige WordPress instance opstart, zonder installatie of backend setup.
Deze handleiding laat zien hoe je WordPress functies snel kunt prototypen, testen en debuggen zonder een live site aan te raken of een lokale stack te configureren. We verkennen ook wat WordPress Playground kan doen, waar het in je workflow past en hoe je het effectief kunt gebruiken.
Wat is WordPress Playground?
WordPress Playground is een nieuwe manier om met WordPress te werken. Het biedt je een platform dat complete WordPress instances direct in de browser draait, zonder dat je een host, database of serverconfiguratie nodig hebt.
Het biedt daarmee een geïsoleerde omgeving die ideaal is voor het snel maken van prototypes, het testen van plugins en thema’s of het debuggen van problemen – allemaal zonder je live site te beïnvloeden.
Dit zijn de belangrijkste features die de WordPress Playground bijzonder nuttig maken voor ontwikkeling:
- Versie wisselen. Playground ondersteunt het testen van meerdere WordPress versies via een dropdown menu. Dit maakt het makkelijk om te testen en om compatibiliteit te behouden in een ecosysteem die voortdurend zich ontwikkeld. Je kan zo zonder risico kennismaken met nieuwere WordPress versies.
- Realtime preview . Wanneer je wijzigingen aanbrengt in thema’s, plugins of content, kun je direct de resultaten zien zonder te wachten op server-side verwerking of paginaverversingen.
- API integratie. Er zijn een paar verschillende API’s beschikbaar met WordPress Playground die een diepere integratie met je ontwikkelingsworkflows kunnen bieden. Met de juiste implementatie kun je integreren met Continuous Integration en Continuous Delivery (CI/CD) pijplijnen, documentatiesites en ontwikkeltools.
Onder de motorkap van WordPress Playground gebeurt nog veel meer.
De technologie van WordPress Playground
De technologie die ten grondslag ligt aan WordPress Playground is innovatief en complex.
In de kern maakt Playground gebruik van WebAssembly (WASM) om server-side technologieën te compileren in browser-compatibele code. Dit bevat een WebAssembly port van PHP (Php-Wasm) die de server-side logica van WordPress direct in de browser aanstuurt.
In plaats van MySQL gebruikt Playground SQLite als database. Dit biedt volledige databasefunctionaliteiten zonder gebruik te maken van externe dependencies. Service Workers handelen de benodigde bestandssysteem operaties af om een complete omgeving te creëren die de functionaliteit van WordPress getrouw reproduceert.
Wat toegankelijkheid betreft, heb je alleen een moderne browser en een internetverbinding nodig om een volledig functionerende WordPress instance te gebruiken die je vooraf kunt configureren volgens jouw exacte specificaties. Je kunt specifieke thema’s, plugins, WordPress versies en zelfs dummy content toevoegen – allemaal definieerbaar via eenvoudige URL parameters of gedetailleerde configuratiebestanden die bekend staan als Blueprints.
Het resultaat is een flexibele sandbox die ideaal is voor het verkennen van nieuwe features of het testen van risicovolle veranderingen. Als er iets kapot gaat, kun je met een simpele browser refresh de omgeving resetten, maar als je je werk tussen sessies door op wil slaan, moet je het wel het een en ander instellen.
Hoe gebruik je WordPress Playground
Bezoek de officiële Playground site en een verse WordPress instance wordt direct in je browser geladen.
Voor meer specifieke opstellingen kun je URL-parameters gebruiken om je instance aan te passen, die je toevoegt aan de hoofd URL. Dit maakt gebruik van de speciale Query API:
- Om een specifieke plugin te testen.
?plugin=plugin-name - Om een bepaald thema uit te proberen.
?theme=theme-name - Om een specifieke WordPress versie te gebruiken.
?wp=6.4
Met deze parameters kun je direct je testomgeving aanpassen zonder door de WordPress admin interface te navigeren of WP-CLI te gebruiken.
Zodra de instance wordt geladen, zie je een typische WordPress site, maar met een extra Toolbar interface:
De toolbar bevat:
- Een URL-veld om door je instance te navigeren.
- Een instellingen icoon aan de rechterkant om PHP en WordPress versies te wijzigen.
- Een opties icoon aan de linkerkant met geavanceerde opties zoals opslaan, exporteren en netwerktoegang inschakelen.
Je instance persistent maken
Standaard is elke Playground sessie tijdelijk – alle wijzigingen verdwijnen wanneer het tabblad wordt gesloten. Om je werk op te slaan doe je het volgende:
- Open het linkerpaneel
- Klik op de blauwe knop Save
- Kies een van de beschikbare opties (afhankelijk van je browser)
Je kunt je instance ook exporteren met het kebab menu icoon (⋮), en als ZIP bestand of direct naar GitHub.
Door te klikken op het selectievakje Allow network access verandert je Playground van een geïsoleerde sandbox in een sandbox die kan communiceren met externe diensten en andere diensten.
De standaard isolatie verhoogt de veiligheid, maar is niet geschikt voor plugins die een API-verbinding nodig hebben. Het inschakelen hiervan is essentieel voor het testen van sommige plugins, zoals Jetpack.
Blueprints gebruiken
Templates kunnen helpen bij snelle setups, en voor Playground gebruik je Blueprints via de Blueprints API. Binnen eenvoudige JSON-bestanden kun je complexe Playground opstellingen definiëren die plugins, thema’s, inhoud en instellingen bevatten.
De ingebouwde Blueprints Gallery bevat een doorzoekbare batch die allerlei verschillende gebruikssituaties dekt:
Je kunt de Blauwdrukken van je eigen Playground bekijken via de kleine ‘stoplicht’ menulink in de zwarte, linker zijbalk. Dit opent een dubbele editor en viewer:
Je kunt hier ook Blueprints opslaan en openen. Dit is echter geen echte Code Editor – je kunt hier alleen werken met de Blueprint JSON.
Hoe je WordPress Playground kunt gebruiken voor ontwikkelingswerk
De veelzijdigheid van WordPress Playground maakt het geschikt voor ontwikkelaars, docenten en bureaus. De browser-gebaseerde opzet verwijdert traditionele barrières en maakt snel experimenteren in een breed scala aan scenario’s mogelijk.
Snel prototypes maken en functies testen
Playground is ideaal om snel nieuwe concepten te testen zonder een lokale omgeving op te zetten. Binnen enkele minuten kun je verschillende oplossingen evalueren, experimenteren met WordPress API’s of het gedrag van plugins en thema’s valideren.
Zelfs als je een code-editor van derden gebruikt, gaat het proces snel. Een typische workflow bestaat uit het aanbrengen van wijzigingen in de bestanden in je lokale editor, het verpakken van die bestanden in een ZIP indeling, het uploaden naar Playground en het bekijken van de resultaten zonder te wachten op verwerking aan de serverzijde.
Voor snelle bewerkingen kun je ook het WordPress dashboard binnen Playground gebruiken om thema- of plugin-bestanden direct aan te passen – ideaal voor kleine aanpassingen tijdens feedback van klanten of tests.
Compatibiliteitscontroles van plugins
Het testen van plugin compatibiliteit is een van de sterkste gebruiksmogelijkheden van Playground. Je kunt meerdere plugins installeren, instellingen aanpassen en interacties observeren in een schone, geïsoleerde omgeving.
Het wisselen van versie is ook ingebouwd, zodat je meerdere WordPress versies kunt testen vanuit dezelfde interface:
Je kunt ook de gevolgen voor de prestaties beoordelen in een gecontroleerde omgeving. Browsergebaseerde prestaties bieden geen exacte replicatie van serverprestaties, maar het biedt wel nuttige vergelijkende gegevens. Je kunt bijvoorbeeld zien of het toevoegen van een bepaalde plugin de laadtijd van pagina’s verhoogt of nieuwe database queries introduceert die de schaalbaarheid kunnen beïnvloeden.
Thema’s ontwikkelen en thema’s in blokken testen
Thema’s ontwikkelen biedt veel van dezelfde voordelen en workflows als plugins. Je kunt responsieve layouts testen met verschillende inhoudstypen, de compatibiliteit van thema’s met populaire plugins controleren en experimenteren met verschillende ontwerpelementen, allemaal binnen één browsertabblad. Deze mogelijkheid kan je designproces een boost geven en je in staat stellen om je thema’s efficiënter te finetunen.
Het testen van Block Themes profiteert van de directheid van Playground. Je kunt verschillende templatevariaties verkennen, de instellingen van de site-editor aanpassen en globale stijlvariaties testen zonder te wachten op verwerking door de server.
Deze onmiddellijke feedbackloop is waardevol als je werkt met complexe layouts of typografie en spatiëring aanpast die misschien talloze kleine aanpassingen vereisen om te perfectioneren.
De isolatie van Playground maakt het ook gemakkelijk om randgevallen te testen, zoals extreem lange titels, meertalige inhoud of ongebruikelijk mediagebruik – zonder je hoofd-ontwikkelomgeving te beïnvloeden.
WordPress onderwijzen en leren
Playground is een game-changer voor het onderwijs. Docenten kunnen op maat geconfigureerde WordPress omgevingen maken met behulp van Blueprints en deze delen met studenten via een eenvoudige link – geen installatie of lokale setup nodig.
Je kunt Playground ook opnemen in websites of apps met behulp van de JavaScript API, zodat je volledig interactieve leermodules of live demo’s kunt maken:
De code in de schermafbeelding hierboven maakt een eenvoudige plugin die de blognaam verandert, terwijl het rechterpaneel het resulterende WordPress blog met de bijgewerkte titel laat zien.
Deze opzet werkt ook goed voor verkoop en voorlichting aan klanten. Je kunt een plugin bouwen en een omgeving ontwikkelen die de functionaliteit ervan laat zien en je potentiële klanten er onbeperkt mee laat interageren.
Je kunt verschillende alternatieve implementaties bieden zodat je klanten ze kunnen vergelijken en een weloverwogen beslissing kunnen nemen. Op dezelfde manier kun je voor-en-na vergelijkingen maken die de impact van voorgestelde wijzigingen illustreren. Dit helpt klanten om de waarde van aanbevelingen of verbeteringen te begrijpen.
Debuggen en problemen oplossen
Effectief debuggen vereist isolatie. WordPress Playground biedt de mogelijkheid om problemen te reproduceren in een omgeving die jij beheert, waar je de variabelen kunt beheren en systematische tests kunt uitvoeren.
Het proces begint meestal met het reproduceren van het probleem in Playground met een minimale testcase om het probleem aan te tonen. Dit alleen al kan waardevolle inzichten opleveren, omdat je dan alle essentiële componenten en configuraties moet identificeren die bijdragen aan het probleem. Zodra je het probleem hebt gereproduceerd, kun je potentiële oplossingen buiten je live site testen.
Als je samenwerkt met ondersteuningsteams of externe ontwikkelaars, kun je met Playground ook reproduceerbare testcases maken en delen. In plaats van een probleem in abstracte termen te beschrijven, kun je een Playground URL geven die het probleem demonstreert, zodat het voor iedereen duidelijk is wat het probleem is. Deze duidelijkheid versnelt het probleemoplossingsproces en leidt tot effectievere oplossingen.
Wat je moet weten over het werken met WordPress Playground
WordPress Playground biedt een opmerkelijke flexibiliteit als browsergebaseerde ontwikkelomgeving. Als je echter de mogelijkheden, beperkingen en ideale gebruikssituaties begrijpt, kun je er beter gebruik van maken.
Verschillen in beveiligingsmodel
De beveiligingsarchitectuur van WordPress Playground verschilt ook van traditionele WordPress installaties. Browser-isolatie biedt beveiligingsvoordelen, maar weerspiegelt misschien niet de beveiligingsscenario’s van je live site.
Veel Playground configuraties kunnen bijvoorbeeld standaard Administrator toegang verlenen, wat een tweesnijdend zwaard is. Ten eerste krijg je inherente bescherming tegen veel beveiligingsbedreigingen. Daar staat tegenover dat plugins en configuraties zich niet noodzakelijkerwijs gedragen zoals op een live site.
Het inschakelen van netwerktoegang betekent dat Playground ook samenwerkt met externe services. Dit kan beveiligingsrisico’s met zich meebrengen die uniek zijn voor de omgeving.
Houd daarnaast rekening met de veiligheidsimplicaties van de gegevens die je opslaat. Vermijd bijvoorbeeld het gebruik van gevoelige informatie in Playground omgevingen, omdat de export van gegevens mogelijk kan worden gedeeld of geopend. Dit is belangrijk als je Playground gebruikt voor klantdemonstraties of gezamenlijke ontwikkeling.
Plugincompatibiliteit overwegingen
WordPress Playground ondersteunt mogelijk niet alle plugins in gelijke mate. Resource-intensieve plugins kunnen bijvoorbeeld niet optimaal presteren in de browseromgeving. Sommige plugins zijn afhankelijk van server-side technologieën die niet eens beschikbaar zijn in de browseromgeving.
In feite kun je voorspellen welke plugins het meest waarschijnlijk problemen zullen ondervinden:
- Oplossingen die specifieke serverconfiguraties of PHP-extensies vereisen.
- Oplossingen die afhankelijk zijn van externe API-verbindingen.
- Plugins die resource-intensieve bewerkingen uitvoeren.
- Plugins die afhankelijk zijn van MySQL-specifieke databasefuncties die niet beschikbaar zijn in SQLite.
- Plugins die gebruik maken van ‘cron jobs’ of achtergrondverwerking.
Dit is waar incrementele plugin compatibiliteitstesten de meest betrouwbare aanpak bieden als je werkt met complexe plugin combinaties.
WordPress Playground integreren in je ontwikkelworkflow
Hoewel WordPress Playground belangrijke voordelen biedt, is het niet altijd een optimale oplossing. Andere tools kunnen beter aan je behoeften voldoen als je je productieconfiguratie moet repliceren. DevKinsta, bijvoorbeeld, kan in veel gevallen realistischer zijn.
Zie Playground als een aanvullende tool die netjes past in moderne WordPress workflows:
- Snelle experimenten. Je kunt Playground gebruiken om snel te testen en te experimenteren voordat je wijzigingen in je lokale omgeving implementeert.
- Geïsoleerd testen. Je kunt plugins, thema’s of configuraties geïsoleerd testen zonder je lokale ontwikkelomgeving te beïnvloeden.
- Alternatieve verificatie. Je kunt fixes of wijzigingen in een andere omgeving verifiëren om er zeker van te zijn dat ze consistent werken.
- Demonstraties voor klanten. Misschien wil je Playground gebruiken voor klantdemonstraties terwijl je primaire ontwikkeling in een lokale omgeving blijft.
DevKinsta opnemen in je WordPress Playground workflow
DevKinsta is van zichzelf een complete en uitgebreide oplossing voor WordPress ontwikkeling in alle omgevingen.
Een workflow die DevKinsta en WordPress Playground combineert, zou enkele of alle van de volgende elementen kunnen bevatten:
- Eerste concept testen. Playground kan snel concepten en ideeën testen zonder dat je een nieuwe DevKinsta site hoeft op te zetten.
- Primaire ontwikkeling. Je kunt je primaire ontwikkeling uitvoeren in DevKinsta om gebruik te maken van de volledige omgeving en prestaties.
- Compatibiliteitstesten. Playground kan helpen bij het controleren van compatibiliteit tussen verschillende WordPress versies of configuraties.
- Beoordeling door klanten. Wanneer je klanten wijzigingen moeten beoordelen, kun je deze uitrollen naar een Kinsta testomgeving of Playground gebruiken voor een snelle demonstratie.
- Productie deployment. De uiteindelijke live site wordt uitgerold naar je Kinsta productieomgeving.
Deze geïntegreerde aanpak kan de sterke punten van elke tool benutten en de beperkingen minimaliseren. DevKinsta is echter je oplossing voor primair ontwikkelwerk aan thema’s en plugins, vooral voor langdurige ontwikkeling met persistente gegevensvereisten.
Het zal ook je keuze zijn als je een krachtige ontwikkelomgeving nodig hebt of met plugins werkt die mogelijk niet werken in Playground. Gebruik voor het meeste testwerk een productie-achtige omgeving, en dat is waar DevKinsta uitblinkt naast de testomgevingen van Kinsta.
Versiebeheer en samenwerking in teams
Hoewel WordPress Playground geen ingebouwd versiebeheer heeft, kan het wel integreren met externe versiebeheersystemen. Je kunt bijvoorbeeld wijzigingen exporteren vanuit Playground, ze vastleggen in je versiebeheersysteem en opnieuw importeren als dat nodig is. Je kunt ook Blueprints in versiebeheer onderhouden om een consistente testomgeving in je team te garanderen.
Er zijn nog een paar andere manieren om versiebeheer te gebruiken bij het gebruik van WordPress Playground:
- Playground configuraties koppelen binnen je documentatie om interactieve voorbeelden te geven voor elke pagina.
- Je kunt problemen met het oplossen van problemen of bugs reproduceren met behulp van Playground URL’s binnen rapporten om testgevallen te bieden.
Voor het opnemen van Playground in teamomgevingen is consistentie belangrijk. Het vaststellen van gedeelde configuraties en processen voor het exporteren, documenteren en delen van Playground omgevingen kan helpen om eventuele problemen te beperken. Er zijn een paar manieren waarop je samenwerking uniek voor Playground kunt benaderen:
- Blueprints delen. Je kunt Blueprint bestanden maken en delen die consistente testomgevingen voor je team definiëren.
- Gestandaardiseerde testprocedures. Je team kan bepalen welke tests je uitvoert in Playground in plaats van lokale omgevingen met DevKinsta.
- Kennis delen. Door Playground te gebruiken om interactieve voorbeelden te maken voor teamtraining en het delen van kennis, vergroot je het begrip en de algehele samenwerking.
- Code review integratie. Je kunt Playground configuraties opnemen in code review processen zodat reviewers wijzigingen snel kunnen testen.
Deze benaderingen kunnen ervoor zorgen dat het gebruik van Playground consistent is in je team. Het maximaliseert niet alleen de waarde voor samenwerking, maar je kunt ook een aantal unieke use cases voor je eigen ontwikkeling ontdekken.
Hulpmiddelen voor WordPress Playground
Het instellingenpaneel aan de linkerkant bevat een aantal links naar verschillende hulpmiddelen waarmee je meer te weten kunt komen over het ecosysteem van WordPress Playground. Er zijn ook links naar GitHub en tools zoals de Pull Request Previewer:
De officiële documentatie biedt uitgebreide informatie over de functionaliteit, mogelijkheden en implementatie van Playground. Het is het primaire naslagwerk voor het begrijpen van de architectuur en gebruikspatronen van Playground.
Hoewel de Blueprint Gallery een verzameling voorbeeldconfiguraties voor verschillende scenario’s biedt, zijn er nog een paar demo’s te ontdekken. Zo zijn er voorbeelden van een WP-CLI emulatie en een showcase van het gebruik van interactieve elementen in de Block Editor.
Je kunt ook verschillende tools vinden die Playground uitbreiden en integreren in ontwikkelingsworkflows. Met de VS Code extensie kun je WordPress code testen zonder VS Code te verlaten – zij het op dit moment alleen voor macOS. Net als WP-CLI kun je met het hulpprogramma wp-now snel WordPress instances aanmaken en beheren vanaf de terminal. Het is geschikt voor scriptgebaseerde workflows en automatiseringspijplijnen.
Als het aankomt op ondersteuning voor Playground, is de eerste aanloophaven de GitHub Issues pagina voor de repo.
Voor publieke Playground implementaties is het Meta Trac kanaal echter een betere keuze, omdat dit zich bezighoudt met WordPress.org websites (wat Playground is).
Samenvatting
Hoewel Playground geen vervanging is voor robuuste lokale ontwikkelomgevingen zoals DevKinsta, biedt het wel waarde als aanvullende tool. Het kan uitblinken in snelle prototypes, geïsoleerd testen en educatieve toepassingen.
DevKinsta biedt echter nog steeds een end-to-end manier van ontwikkelen voor WordPress. Met dedicated Kinsta hosting kun je binnen een lokale omgeving werken, met minimale klikken naar een testomgeving pushen en dan implementeren naar productie met de toolset die je wenst. Misschien vind je DevKinsta zelfs wel uitstekend voor rapid prototyping!
Zelfs als je bouwt en test in Playground, heb je nog steeds een veilige, krachtige plek nodig om je echte WordPress sites te hosten – vooral als je werk wilt delen, wilt samenwerken met anderen of live wilt gaan. Kinsta’s managed hosting voor WordPress biedt de snelheid, veiligheid en ontwikkelaarstools die je nodig hebt om je project van prototype naar productie te brengen.
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 ;).
