Playground

In dieser Anleitung erfährst du Schritt für Schritt, wie du den Playground effektiv nutzt.

Grundlagen

Starten

Besuche die Website mit der URL https://playground.wordpress.net/, um direkt loszulegen.

Site Manager

Der Site Manager ist dein zentrales Werkzeug, um die Einstellungen im Playground anzupassen. Du findest ihn oben links in der Benutzeroberfläche.

Site Manager öffnen

Klicke oben links auf die Schaltfläche „Site Manager“. Das Fenster teilt sich in zwei Bereiche:

• Rechts: Vorschau der aktuellen Website.
• Links: Einstellungen, die du anpassen kannst.

Falls die Website nicht sichtbar ist, kannst du sie über den Button Temporary Playground wieder einblenden.

Anpassungsmöglichkeiten

Im Site Manager kannst du folgende Einstellungen vornehmen:

• WordPress-Version: Wähle die gewünschte Version aus.
• PHP-Version: Stelle die passende PHP-Version ein.
• Sprache: Bestimme die Sprache der Website.

Nach den Anpassungen:
Klicke auf Apply Settings & Reset Playground, damit die Änderungen übernommen werden. Der Playground wird neu geladen.

Speichern

Damit du deine Fortschritte sichern kannst, bietet der Playground zwei Möglichkeiten:

Im Browser speichern

• Klicke im Site Manager auf Save und wähle Save in this browser.
• Dein Projekt wird in der linken Liste des Site Managers gespeichert und kann später wieder aufgerufen werden.

Du kannst zwischen gespeicherten Instanzen wechseln, indem du auf den jeweiligen Eintrag oder auf „Temporary Playground“ klickst.

Als ZIP-Datei speichern

Für eine langfristige Speicherung:

1. Klicke im Site Manager oben rechts auf die drei vertikalen Punkte.
2. Wähle Download as .zip.
3. Speichere die Datei auf deinem Computer.

Die ZIP-Datei umfasst sämtliche Website-Daten, einschließlich Plugins, Themes und Datenbankinhalte.

ZIP-Dateien wiederherstellen

Um ein gespeichertes Projekt wiederherzustellen, gehe wie folgt vor:

1. Starte den Playground und öffne den Site Manager.
2. Klicke oben rechts auf die drei vertikalen Punkte und wähle Restore from .zip.

3. Im folgenden Fenster:
   • Klicke auf Datei auswählen und wähle deine ZIP-Datei.
   • Klicke auf Import, um die Datei hochzuladen und die Website wiederherzustellen.

Direkter Aufruf von individuellen Varianten

Du kannst den Playground direkt über die URL so aufrufen, dass WordPress bereits genau nach deinen Anforderungen konfiguriert ist. Das ist besonders praktisch, wenn du häufig mit bestimmten Einstellungen arbeitest. Speichere einfach die entsprechende URL ab, und mit nur einem Klick hast du deine gewünschte Konfiguration sofort bereit.

Direkter Aufruf einer Backendseite

Jede Seite der WordPress-Adminoberfläche kann im Playground direkt aufgerufen werden. Dazu fügst du einfach ?url= gefolgt von der gewünschten URL an die Basis-URL https://playground.wordpress.net/ an.

Beispiel:
Für die Dashboard-Seite sieht die URL so aus:
https://playground.wordpress.net/?url=/wp-admin/index.php
Damit wird die Dashboard-Seite direkt im Playground geöffnet.

Netzwerkzugriff direkt aufrufen

Um den Netzwerkzugriff direkt beim Start zu aktivieren, füge ?networking=yes an die URL an:
https://playground.wordpress.net/?networking=yes

PHP-Version direkt laden

Um eine spezifische PHP-Version zu laden, füge ?php=8.0 (oder eine andere Version) an die URL an:
https://playground.wordpress.net/?php=8.0

WordPress-Version direkt laden

Um die neueste Entwicklungsversion von WordPress zu starten, füge ?wp=nightly an die URL an:
https://playground.wordpress.net/?wp=nightly

Direktes Laden eines Themes

Um ein Theme direkt zu laden, nutze die Anweisung ?theme=NAME_DES_THEMES, wobei der Name des Themes aus dem letzten Teil der URL im Theme-Verzeichnis stammt.

Beispiel:
Für das Theme „Pendant“ sieht die URL so aus:
https://playground.wordpress.net/?theme=pendant

Ein Plugin direkt laden

Gib hinter der URL die Anweisung ?plugin=NAME_DES_PLUGINS ein, wobei du wiederum den Namen aus dem Plugin Verzeichnis verwendest.

Beispiel:
Für das Plugin „Two-Factor“ ist das «two-factor».

Das ergibt folgende URL:
https://playground.wordpress.net/?plugin=two-factor

Eine zusätzliche Sprache direkt laden

Sprachen kannst du über standardisierte Sprachcodes wie de_CH (Deutsch-Schweiz) laden.

Beispiel:
Für Deutsch-Schweiz:
https://playground.wordpress.net/?language=de_CH

Weitere Beispiele:

Chinesisch (Taiwan):
https://playground.wordpress.net/?language=zh_TW

Persisch:
https://playground.wordpress.net/?language=fa_IR

Kombinationen

Du kannst mehrere Einstellungen kombinieren, indem du sie mit &-Zeichen verbindest.

Beispiel:
WordPress mit Netzwerkzugriff, dem Theme „Kenzie“, den Plugins „Antispam Bee“, „Create Block Theme“ und „UpdraftPlus“ in der Sprache Deutsch-Schweiz ergibt die URL:
https://playground.wordpress.net/?networking=yes&theme=kenzie&plugin=antispam-bee&plugin=create-block-theme&plugin=updraftplus&language=de_CH

Blueprints

Das Aufrufen von Konfigurationen, Plugins oder Themes über die URL mag interessant sein, wird jedoch bei komplexeren Kombinationen schnell unübersichtlich.
Hierfür bieten Blueprints eine Lösung, die für mehr Übersichtlichkeit sorgen. Blueprints sind Konfigurationsdateien im JSON-Format, mit denen WordPress im Playground exakt nach den gewünschten Vorgaben eingerichtet werden kann.

Blueprints Gallery

In der Blueprints Gallery kannst du entdecken, was alles mit Blueprints möglich ist.

• Öffne den Site Manager und wähle den Eintrag «Blueprints Gallery» aus.
• In der angezeigten Liste findest du verschiedene Beispiele. Klicke einfach auf den Button «Preview», und die entsprechende Konfiguration wird direkt im Playground geladen.
  

Blueprints erstellen

Um eigene Blueprints zu gestalten, kannst du den Blueprint Editor nutzen. Dieses Tool unterstützt dich effektiv bei der Erstellung und Anpassung von Blueprints. Zusätzlich hast du die Möglichkeit, sämtliche aktuell im Playground geladenen Einstellungen im JSON-Format einzusehen und bei Bedarf zu bearbeiten.

Blueprint-Editor öffnen

1. Öffne den Site Editor und klicke auf die drei Punkte.
2. Wähle anschliessend die Option «View Blueprint» aus.

3. Es öffnet sich in einem neuen Tab der Blueprint Editor. Du kannst den Editor auch einfach mit dem Link Blueprint editor starten.
   

Blueprint-Editor Oberflaeche

1. Auf der linken Seite findest du den Blueprint-Code.
2. Auf der rechten Seite siehst du den Playground, der auf Grundlage des Codes dargestellt wird.
3. Mit dem Knopf „RUN IT“ kannst du den Playground aktualisieren, nachdem du den Code angepasst hast.
4. Mit dem Knopf mit der Diskette kannst du den Blueprint-Code auf deinem Computer speichern.
5. Mit dem Knopf mit dem Ordner kannst du gespeicherte Blueprints von deinem Computer laden.
6. Mit dem Knopf „OPEN IN NEW TAB“ lässt sich der Playground in einem neuen Tab öffnen, um eine bessere Übersicht zu erhalten.

Blueprint programmieren

Jetzt kannst du deine eigenen Blueprints erstellen! Keine Sorge, es ist einfacher, als es zunächst klingt. Schau dir die zuvor erwähnten Blueprints in der Galerie an. Diese findest du auf der Seite WordPress/blueprints · GitHub. Sehr hilfreich ist auch die Dokumentation: Unter dem Abschnitt „Steps“ findest du passende Codebeispiele, die du direkt verwenden kannst.

Blueprints weitergeben oder veröffentlichen

Wenn du anderen zeigen möchtest, was du im Playground erstellt hast, kannst du den Blueprint speichern und weitergeben. Für Schulungen oder Demos, bei denen du die Dateien veröffentlichen möchtest, besteht die Möglichkeit, diese auf einem Server abzulegen. Durch die entsprechende URL kannst du die Konfigurationen unkompliziert mit anderen teilen. Eine besonders einfache Lösung dafür ist beispielsweise die Nutzung von GitHub.

Content in eine XML-Datei exportieren

Um nicht nur die Konfiguration, sondern auch Inhalte wie Texte, Bilder, Beiträge oder Seiten weiterzugeben und deine Playground-Konfiguration optimal zur Geltung zu bringen, kannst du diese Inhalte als XML-Datei exportieren und in den Blueprint integrieren.

1. Exportiere deine Inhalte:
   • Gehe in der WordPress-Instanz des Playgrounds zu Werkzeuge → Export.
   • Wähle aus, welche Inhalte du exportieren möchtest (z. B. Beiträge, Seiten oder alles).
   • Klicke auf Export-Datei herunterladen, um eine XML-Datei zu erstellen.

2. Integriere die XML-Datei in den Blueprint:
   • Lade die XML-Datei in ein öffentlich zugängliches Repository, z. B. auf GitHub.Nutze den Schritt importWXR, um die Datei in deinen Blueprint einzubinden. Ein Beispiel:

{
  "steps": [
    {
      "action": "importWXR",
      "options": {
        "url": "https://raw.githubusercontent.com/DeinRepo/DeinProjekt/main/content.xml"
      }
    }
  ]
}

Hinweis: Achte darauf, dass die XML-Datei öffentlich zugänglich ist, da der Playground keine Inhalte aus privaten Quellen laden kann.

GitHub Beispiel

Ich habe beispielsweise diesen Blueprint entworfen:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "preferredVersions": {
    "php": "latest",
    "wp": "latest"
  },
  "siteOptions": {
    "blogname": "Playground Blueprint Demo"
  },
  "steps": [
    {
      "step": "importWxr",
      "file": {
        "resource": "url",
        "url": "https://raw.githubusercontent.com/rfluethi/WordPress-Playgrounds/main/import-example/import.xml"
      }
    }
  ],
  "login": true,
  "landingPage": "/wp-admin/post.php?action=edit&post=4"
}

In diesem Blueprint lade ich zusätzliche Daten, die für einen komplexeren Block benötigt werden. Diesen Block habe ich ebenfalls als XML-Datei auf GitHub veröffentlicht. Du kannst dir alles auf GitHub unter GitHub Playground Import Beispiel ansehen. Mit der URL https://playground.wordpress.net/?mode=seamless&blueprint-url=https://raw.githubusercontent.com/rfluethi/WordPress-Playgrounds/main/import-example/blueprint.json kannst du den Playground direkt mit den entsprechenden Daten laden.

Fazit

Der Playground ist nicht nur eine einfache Möglichkeit, WordPress mit verschiedenen Plugins und Themes zu testen – er bietet deutlich mehr. Ich finde das Projekt äusserst spannend. Allerdings entwickelt das Team so schnell neue Funktionen, dass es schwierig ist, die Informationen zu diesem Thema stets aktuell zu halten.

Aktuell arbeitet das Team daran, komplette Websites direkt in den Playground laden zu können. Das wäre besonders interessant, um beispielsweise eine lokale Kopie einer Website zu erstellen und gefahrlos Anpassungen auszuprobieren. Langfristig planen sie zudem, die Möglichkeit zu schaffen, Daten auch aus anderen Content-Management-Systemen und Blocksystemen zu laden. Ich bin sehr gespannt, wie sich dieses Projekt weiterentwickeln wird.

Weiterführende Informationen

Dokumentation

Playground Homepage
Auf dieser Seite findest du alle offiziellen Informationen rund um den WordPress Playground.

WordPress Playground offizielle Dokumentation
Die Projektseite von WordPress Playground in Englisch.

API References
Die Query API listet alle Möglichkeiten auf, wie der Playground über die URL aufgerufen werden kann.

GitHub Repository
Das offizielle GitHub Repository des WordPress Playground.

Previews and Blueprints – Plugin Handbook | Developer.WordPress.org
Kurze Dokumentation in Englisch in WordPress Developer Resources.

WordPress Playground Resources
Eine Liste mit allen wichtigen Links zum Playground.

Beispiele

WordPress Blueprints Gallery
Eine Sammlung von interessanten Blueprints aus der Community.

Plugins

WordPress Playground Block Plugin
Das Plugin «WordPress Playground Block» ermöglicht es, den Playground einfach per iframe in WordPress einzubinden.

Artikel

How to use WordPress Playground for interactive demos – WordPress Developer Blog
^{(WordPress Developer Blog | Ronny Shani | englisch)}
Die JavaScript-API von WordPress Playground ist ein entwicklerorientiertes Tool, das eine neue Welt der Möglichkeiten eröffnet.

Videos