WordPress Playground

tl;dr: WordPress Playground ist eine Sandbox-Umgebung, mit der man ohne Server die Bedienung von WordPress lernen kann und technische Dinge ausprobieren kann. Ausserdem kann man Playground auch zum Theme-Design verwenden.

In diesem Artikel wird WordPress Playground mit einigen praktischen Beispielen erklärt.

Was und Wo ist WordPress Playground
Blueprint – die Playground Blaupause
Technik Überblick
Anwendungen von und mit Playground
Fazit

Was und Wo ist WordPress Playground?

WordPress Playground ist eine Sandbox, die direkt im Browser ausgeführt wird. Wenn man Playground startet wird eine komplette-WordPress Instanz in den Browser kopiert. Schliesst man das Browserfenster verschwindet WordPress komplett.

WordPress Playground in einem neuen Tab öffnen

Da eine komplette Installation von WordPress erfolgt dauert das Ganze ein wenig. Nicht ungeduldig sein - schliesslich muss erstmal eine komplettes WordPress vom Server geladen werden. Die Webadresse dafür lautet https://playground.wordpress.net - endlich noch eine WordPress-Domain :-).

Wer Playground startet bekommt über dem Adminbar einen Top-Bar eingeblendet, worüber die wichtigsten Funktionen erreicht werden.

Der TopBar ist 3 geteilt:

In der Mitte befindet sich die Adresszeile, die - man befindet sich ja im Browser und nicht am Server - mit einem / beginnt.
Das Icon links öffnet das Playground - Panel: Links, die Einstellungen, in der Mitte die Settings und rechts das Browserfenster
Das Zahnrad rechts führt zu den Playground-Settings.

Panel Icon — Das Icon Links führt zu den gesamten Einstellungen

Das Icon rechts öffnet die Playground Settings.

Playground Einstellungen — Die geöffneten Einstellung (Icon links) im Playground

Die Playground Settings

Eine Änderung der Settings führt unweigerlich zum Neuladen des Playgrounds, alle Änderungen gehen damit verloren, sollten sie nicht zuvor gesichert sein.

Zuerst lässt sich die Version von WordPress wählen. Man kann bis zu 6.3 zurück gehen.
Weiters ist der Wechsel der PHP-Version möglich. Ausserdem lässt sich die Sprache von WordPress einstellen.

Die wichtige Option Allow network access macht genau das: es erlaubt WordPress, auf das Netzwerk zuzugreifen und zB. Plugins zu laden. Ausserdem kann man auch ein Multisite WordPress erstellen.

Dem Autor ist es mehrfach gelungen, WordPress nicht erfolgreich zu starten: besonders die Kombination von PHP- und Sprachenänderung war nicht immer möglich.

Playground Settings — Die Playground-Settings.

Öffnet man die Einstellung über das Icon links sind die Settings ähnlich (siehe Screenshot oben), es gibt nur einen Zusätzlichen Tab mit Logs. Ausserdem sind hier Links zum Dashboard und auch zum Frontend sowie ein vertikales More-Menü untergebracht:

Export to GitHub
Download as .zip
View Blueprint (externer Link)
Report Error

Die ersten beiden Menüpunkte erlauben die Sicherung der eigenen Änderung und damit ein Weiterarbeiten, auch wenn der Browser geschlossen wurde. Dabei wird im Wesentlichen der wp-content-Folder ins zip gepackt.

View Blueprint öffnet einen Tab mit 2 Teilen: links ein editierbarer Blueprint und rechts ein WordPress basierend auf eben jenen Blueprint.

More Menu — Weitere Optionen über den Settings im Playground.

Will man gespeicherte Umgebungen in den Playground laden muß man das More-Menü im schwarzen Bereich (links) bemühen, hier sind die Menüpunkte

Preview a WordPress PR
Preview a Gutenberg PR
Import from GitHub
Import from .zip

zu finden. Die beiden ersten Funktionen dienen dazu, Pull Requests von GitHub (mit Eingabe der PR-Nummer) im Playground anzuzeigen. Mit der letzten Option lassen sich gespeicherte Umgebungen weiter verwenden.

Die Umgebung ist einer rapiden Entwicklung unterzogen, Umbenennungen und Veränderung sind zu erwarten.

Import Playground — Zum Importieren von gespeicherten Umgebungen findet man den Menüpunkt im schwarzen Bereich.

Man kann seine Einstellungen speichern, wählt man Save in this browser steht die Umgebung dann links im schwarzen Bereich unter "Saved Playgrounds" zur weiteren Bearbeitung bereit. Wählt man hingegen Save in local directory wir die ganze WordPress-Filestruktur auf den Rechner kopiert.

Save In Browser — Einstellungen können im Browser oder auch einem lokalen Verzeichnis gespeichert werden.

Blueprint - die Playground Blaupause

Der Begriff Blueprint stammt ais der Zeit der analogen Drucktechnik (Cyanotypie). Bekannt sind besonders Architekturpläne und andere technische Grundlagen, die mit Hilfe dieser Technik kopiert wurden. Der Begriff passt gut ins digitale Zeitalter: hier steht er für eine Reihe von Anweisungen die befolgt werden sollen.

Hier sieht man den Blueprint der (Dezember 2024) default geladen wird: auch Nicht-Coder können darin erkennen, dass hier die PHP-Version (8.0) und die wp-Version (latest) definiert sind. Plugins, Steps und Features sind leer, aber es gibt anscheinend einen Trigger der login heisst und dafür sorgt, dass der User eingeloggt wird.

Die Philosophie hinter dieser Technik wird schnell klar: man kann von verschiedenen Startpositionen in seinen persönlichen Playground starten. Erfunden hat diese Umgebung ein Programmierer, der sich selbst seine Arbeit einfacher machen wollte.

Daher macht es auch Sinn, dass jeder eine Umgebung definieren kann die ganz genau zu den Anforderungen passt. Das kann eben das aktuelle WordPress ohne alles sein, es kann aber auch ein bestimmtes Theme, ein Plugin oder eine PHP-Version voreingestellt sein.

{
  "plugins": [],
  "steps": [
    null,
    null,
    null
  ],
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
  },
  "features": {},
  "login": true
}

PHP 8.2 Blueprint — Eine Änderung der PHP-Version über den Blueprint.

Wenn man über die Option View Blueprint einen neuen Tab geöffnet hat kann man zB. die PHP-Version im linken Fensterteil ändern (hier auf auf 8.2) und dann mit dem Button RUN IT ein Neuladen des rechten Fensters mit der anderen PHP-Basis erreichen.

Wenn man also Testen will, ob ein bestimmtes Theme mit einem bestimmten Plugin unter einer bestimmten PHP-Version funktioniert kann man das einfach durch ändern des Blueprints erreichen.

Natürlich kann man nicht nur eigene Blueprints erstellen sondern auch auf andere zugreifen. Dazu gibt es (links im schwarzen Bereich des Panels) einen Link zu Blueprints Gallery.

Blueprints Gallery — Der Zugriff auf weitere Blueprints ist über die Gallerie möglich. Nicht alle funktionieren immer.

Wie kann man nun eigene Blueprints anwenden? Dazu gibt es 3 Wege: man kann einen Blueprint via URL mitgeben, die JavaScript API verwenden oder man kann ein json-File mittels Query-Parameter referenzieren. Eine ausführliche Beschreibung zur Blueprint-Anwendung dazu findest du hier.

Ein Beispiel: du willst ein WordPress 6.5 in einer PHP-Version 7.4 (beides veraltet) aufrufen. Der Blueprint schaut dazu wie folgt aus:

{
    "$schema": "https://playground.wordpress.net/blueprint-schema.json",
    "preferredVersions": {
        "php": "7.4",
        "wp": "6.5"
    }
}

Diesen Code kann man direkt an den Playground übergeben (einfach eine # nach dem / und dann der Ausdruck in den {…}:

https://playground.wordpress.net/#{"preferredVersions":{"php":"7.4","wp":"6.5"}}

Probier es aus! (ein neuer Tab wird hier geöffnet).

Technik Überblick

In jedem WordPress-Einsteiger-Kurs lernt man (hoffentlich), dass WordPress einen Webserver benötigt der mit einer Datenbank und PHP ausgestattet ist damit das CMS funktioniert. Wie also funktioniert das ohne diese entscheidenden Komponenten? Und kann WordPress damit wirklich auch am Handy laufen? Ja, kann es.

Offizelle Playground Dokumentation

Wer sich näher für die Entstehung und die Perspektive von Playground interessiert, dem sei an dieser Stelle das Video vom Talk von Adam Zielinsky empfohlen, der am WordCamp Europe 2024 in Turin gehalten wurde:

Playground ersetzt die 4 Teile des LAMP-Systems (Linux, Apache, MySQL und PHP) durch: JavaScript Polyfills, JavaScript APIs, SQLite und PHP.wasm.

Für Anwender bedeutet das, dass ein Playground-WordPress zwar einigen Limitierungen im Vergleich zu einem "echten" WordPress unterliegt. Man kann aber davon ausgehen, dass das, was im Playground funktioniert, auf jeden Fall im echten WordPress-Leben funktionieren sollte,

Anwendungen von und mit Playground

Beispiel 1: Starte ein neues Projekt - Scribble it!

Jeder Entwickler wird sehr schnell die Vorteile dieser Lösung erkennen. Dieses Tool wurde sicher zuerst von Entwicklern für Entwickler gedacht. Doch man kann es auch benutzen wenn man Designer oder Webmaster / Administrator einer WordPress-Site ist.

Zu erst ist Playground genau das, wie es heißt: ein WordPress-Spielplatz. Wenn du also einfach nur verschiedene Themes oder Blocks ausprobieren willst - perfekt. Die Schritte sind einfach:

Playground Starten (zB. über den Button rechts).
Network Access erlauben (über die Playground Settings)
Themes und Plugins nach Lust und Laune installieren.

Der Große Vorteil ist, daß keine "Reste" zurückbleiben: wer je in einer "echten" Installation viel Installiert und deinstralliert hat wird bemerken, dass so manches Plugin Ordner im wp-content anlegt die dann nicht gelöscht werden etc.

WordPress Playground in einem neuen Tab öffnen

Beispiel 2: Teste ein bestimmtes Theme mit einem bestimmten Plugin

Die Anforderung lautet: du willst wissen, ob und wie ein Theme sich mit einem bestimmten Plugin verträgt.

Beispiel: du willst das Theme Generate Press mit dem Plugin Classic-Editor unter PHP 8.2 starten?

Um das aufzurufen kannst du einen Link zusammenstellen. Die Playground Query API kann das interpretieren (mehr über die Query API):

theme = generatepress
php = 8.2
plugin = classic-editor

https://playground.wordpress.net/?php=8.2&theme=generatepress&plugin=classic-editor

Playground mit Generate Press, Classic Editor und PHP 8.2

Beispiel 3: Erstelle dein Theme mit dem Block Theme Creator Plugin

Du willst ein Theme auf Basis des aktuellen Twenty Twenty-Five erstellen? Das kannst du mit dem Plugin Create Block Theme, der Slug zu dem Plugin lautet

create-block-theme

Um das Umzusetzen gibt es 3 Wege:

Starte Playground (Beispiel 1), erlaube Access Network und Installiere das Plugin über das Dashboard
Starte Playground (Beispiel 2) mit dem Parameter plugin=create-block-theme
Nutze die Blueprint Gallery, auch dort ist ein Setting zu finden.

Playground mit Create Block Theme

Fazit

Playground eröffnet neue Möglichkeiten, die ersten Versuche damit auch iOS-Apps zu realisieren existieren bereits. Meiner Meinung liegt die Power dieser Technologie nicht darin Dinge zu tun, die man auch anders machen kann, sondern eben Dinge zu tun die ohne diesem Tool umständlicher waren: Testen und Ausprobieren - so gesehen ist es eine Ideale Umgebung für WordPress-Schulungen, sei es für Einsteiger oder aber auch für Einschulungen für bestimmte Funktionen oder Plugins. Die Entwicklung wird sicher sehr schnell große Fortschritte machen - dran bleiben!

Veröffentlicht am: 22. Dezember 2024
Letztes Update am: 9. August 2026