WordPress Playground – Wie Sie WordPress in Ihrem Browser verwenden

Möchten Sie WordPress zu Testzwecken in Ihrem Browser verwenden?

Lernen Sie WordPress Playground kennen, eine Plattform, auf der Sie Open-Source WordPress.org in einem Browser ausprobieren können, ohne vorher einen Hosting-Plan zu erwerben. Sie können dort auch Plugins und Themes testen, ohne dass dies Auswirkungen auf Ihre Live-WordPress-Website hat.

In diesem Artikel erklären wir, was WordPress Playground ist und wie man es benutzt.

Was ist WordPress Playground und wie funktioniert es?

WordPress Playground ist eine temporäre, browserinterne WordPress-Instanz, in der Sie experimentieren und mehr über das Content-Management-System erfahren können.

Es ist wie ein Online-Sandkasten, in dem Sie alle Arten von WordPress-Entwicklungen durchführen können, ohne Ihre echte Website zu beeinträchtigen.

Alles, was Sie tun müssen, ist, die WordPress Playground-Website zu besuchen, um sie zu öffnen. Dann können Sie WordPress wie gewohnt nutzen: neue Plugins installieren, neue Themen ausprobieren, neue Seiten hinzufügen usw.

Wenn Sie die WordPress Playground-Seite aktualisieren, werden alle Anpassungen gelöscht. Sie können Ihre WordPress-Instanz jedoch auch herunterladen und erneut in WordPress Playground hochladen.

Wie funktioniert der WordPress Playground?

WordPress Playground basiert auf einigen coolen Technologien, mit denen Sie WordPress ohne den üblichen Webserver und die Datenbankeinrichtung verwenden können:

1. WebAssembly binär (Wasm): Damit können Sie PHP-Code direkt in Ihrem Webbrowser ausführen, so dass WordPress ohne einen herkömmlichen Server funktioniert. Außerdem macht es die Plattform mit allen Browsern kompatibel, von Chrome und Edge bis Firefox und Safari.
2. SQLite-Datenbank: Anstelle von MySQL verwendet WordPress Playground ein leichteres dateibasiertes Datenbanksystem namens SQLite, das direkt in Ihrem Browser läuft.
3. Service Worker und Worker Threads APIs: Diese Webtools helfen bei der Bearbeitung von Anfragen und der Ausführung von JavaScript-Skripten im Hintergrund und ermöglichen es WordPress Playground, PHP-Anwendungen reibungslos in Ihrem Browser auszuführen.

Diese Technologien ermöglichen es Entwicklern auch, WordPress Playground mit node.js, Visual Studio Code und einem CLI-Tool namens wp-now zu integrieren.

Mit diesen Tools können Entwickler WordPress Playground auch auf einer Entwicklungsplattform zu Test- oder Staging-Zwecken verwenden.

Was sind die Grenzen von WordPress Playground?

Trotz seiner Vorteile hat WordPress Playground einige Einschränkungen, wie zum Beispiel:

• Kein direkter Zugriff auf das Theme- und Plugin-Verzeichnis – Sie müssen Themes und Plugins manuell herunterladen und hochladen, um sie zu installieren. Allerdings soll eine Beta-Funktion für den Netzwerkzugang dieses Problem lösen.
• Anpassungen in WordPress Playground sind temporär – Wenn Sie sich entscheiden, die Änderungen nicht im Browser zu speichern, müssen Sie aufpassen, dass Sie die Seite nicht versehentlich aktualisieren, um zu vermeiden, dass Ihr Fortschritt verloren geht.
• iFrame-Probleme sind häufig – Wenn Sie eine WordPress Playground-Instanz auf Ihrer Webseite einbetten, können Sie einige Probleme erwarten, von versehentlichen Aktualisierungen bis hin zu nicht funktionierenden iFrame.
• Da es sich um eine relativ neue Funktion handelt , wird nicht alles ordnungsgemäß funktionieren, so dass Sie bei der Erkundung der Umgebung hier und da mit einigen Problemen rechnen müssen.

Abgesehen davon ist der Playground ein relativ neues WordPress-Projekt. Sie können also davon ausgehen, dass das Team neue Funktionen und Fehlerbehebungen veröffentlichen wird, um die Benutzerfreundlichkeit zu verbessern.

Nun, da Sie wissen, was WordPress Playground ist, sehen wir uns an, wie Sie es verwenden können. Sie können die Links unten verwenden, um durch unser Tutorial zu navigieren:

Wie man WordPress Playground verwendet

Um WordPress Playground zu nutzen, können Sie direkt zu diesem Domainnamen in Ihrem Webbrowser gehen: https://playground.wordpress.net

Sobald Sie auf der Website sind, warten Sie einige Augenblicke, bis sich der Playground eingerichtet hat. Dann sehen Sie das Frontend der Website mit einem Standard-WordPress-Theme.

Wenn Sie WordPress Playground zum Testen verwenden, sollten Sie die Umgebung so konfigurieren, dass sie die WordPress-Software für Ihre tatsächliche Website widerspiegelt.

Klicken Sie dazu auf das Menü mit der Aufschrift „PHP 8.0 WP 6.4 – Storage: Keine‘.

Die erste Einstellung, die Sie konfigurieren müssen, ist der Speichertyp. Es gibt drei Optionen.

Keine“ bedeutet, dass alle Änderungen beim Aktualisieren der Seite verloren gehen. Die Option „Browser“ bedeutet, dass die Änderungen im Browser gespeichert werden, aber verschwinden, wenn Sie die Browser-Registerkarte schließen oder den Cache leeren.

Sie können die Änderungen auch auf Ihrem Computer speichern, indem Sie „Gerät“ wählen. Mit dieser Option können Sie einen Ordner auf Ihrem Computer auswählen, in dem Sie Ihre WordPress Playground-Dateien speichern, ähnlich wie bei der Erstellung einer lokal gehosteten WordPress-Website.

Das nächste, was Sie konfigurieren müssen, ist die PHP-Version.

Wir empfehlen Ihnen, die PHP-Version, die Sie für Ihre Website verwenden, beizubehalten. Das heißt, dass Sie hier keine PHP-Versionen finden, die älter als 7.0 sind.

Darunter können Sie optional die Einstellungen „Erweiterungen laden: libxml, openssl, mbstring, iconv, gd“ und „Netzwerkzugriff (z. B. für Browsing-Plugins)“ aktivieren.

Die erste Einstellung lädt diese speziellen PHP-Erweiterungen (libxml, openssl, mbstring, iconv und gd), um Ihren WordPress Playground zu verbessern. Aber sie sind nicht notwendig.

Die zweite Einstellung heißt „Netzwerkzugang“. Dabei handelt es sich um eine Beta-Funktion, die Ihren WordPress Playground mit dem offiziellen Plugin-Verzeichnis verbindet, sodass Sie WordPress-Themes und Plugins direkt aus der Umgebung heraus installieren können.

Schließlich können Sie eine WordPress-Version für den Playground auswählen. Sie sollten die Version wählen, die Sie derzeit für Ihren WordPress-Blog oder Ihre Website verwenden.

WordPress stellt auch die „WordPress Nightly“-Version zur Verfügung. Dies ist die Entwicklungsversion von WordPress, die die neuesten Änderungen des WordPress-Entwicklungsteams enthält.

Sie können dies verwenden, wenn Sie ein Plugin- oder Theme-Entwickler sind und die Kompatibilität mit dem nächsten WordPress-Update testen möchten.

Wenn Sie mit der Konfiguration dieser Einstellungen fertig sind, klicken Sie auf „Änderungen übernehmen“.

Das war’s mit den Einstellungen. Jetzt können Sie in den Verwaltungsbereich gehen und die Sandbox testen.

Um den Verwaltungsbereich zu öffnen, bewegen Sie den Mauszeiger über das Titelmenü der Website und klicken Sie auf „Dashboard“. Sie können auch zum vollständigen Site-Editor gehen, indem Sie auf „Site bearbeiten“ klicken.

Installation von Themes und Plugins in WordPress Playground

Es gibt zwei Möglichkeiten, ein WordPress-Plugin oder Theme in WordPress Playground zu installieren. Zum einen können Sie auf die Plugin- oder Theme-Seite auf WordPress.org gehen und auf die Schaltfläche „Download“ klicken.

Dadurch wird die Zip-Datei des Plugins oder Themes auf Ihrem Computer gespeichert.

Dann können Sie mit der üblichen, manuellen WordPress-Installation für Plugins und Themes fortfahren. Sie können unsere Anleitungen für weitere Anweisungen lesen:

• Wie man ein WordPress Plugin installiert (Schritt für Schritt für Anfänger)
• Wie man ein WordPress-Theme installiert (Anleitung für Anfänger)

Diese Methode eignet sich auch zum Testen von Premium-WordPress-Plugins und Premium-WordPress-Themes.

Für Plugins gehen Sie einfach auf das Dashboard des WordPress Playground und navigieren Sie zu Plugins “ Add New Plugin.

Klicken Sie anschließend auf die Schaltfläche „Plugin hochladen“ und wählen Sie „Datei auswählen“, um die zuvor heruntergeladene Zip-Datei des Plugins hochzuladen. Klicken Sie schließlich auf „Jetzt installieren“.

Was Themes angeht, so hat WordPress ein Standard-Theme für Sie installiert, wenn Sie den Playground zum ersten Mal benutzen.

Wenn Sie jedoch ein neues kostenloses WordPress-Theme verwenden möchten, können Sie es manuell aus dem WordPress-Theme-Verzeichnis herunterladen. Gehen Sie dann im Playground zu Darstellung “ Themes und klicken Sie auf „Neues Theme hinzufügen“.

Klicken Sie auf dem nächsten Bildschirm auf die Schaltfläche „Thema hochladen“.

Wählen Sie dann die zuvor heruntergeladene Themadatei aus und klicken Sie auf „Jetzt installieren“.

Wenn Ihnen dieser Vorgang etwas mühsam erscheint, machen Sie sich keine Sorgen. WordPress arbeitet an einer Beta-Funktion, die es Playground ermöglicht, sich mit dem Plugin- oder Theme-Verzeichnis zu verbinden. Diese Funktion sollte aktiviert werden, wenn Sie bei der Einrichtung „Netzwerkzugriff“ wählen.

Auf diese Weise funktioniert der Playground wie ein typisches WordPress-Dashboard und Sie können kostenlose Themes und Plugins installieren, ohne sie vorher auf Ihrem Computer zu speichern.

Eine weitere Möglichkeit, Themes und Plugins im WordPress-Dashboard zu installieren, ist die Verwendung der Query API von WordPress Playground. Dazu müssen Sie einige Abfrageparameter zur WordPress Playground-URL hinzufügen.

Wenn Sie zum Beispiel die kostenlose Version von AIOSEO in WordPress Playground installieren und testen möchten, können Sie auf die Seite von AIOSEO auf WordPress.org gehen. Achten Sie dann auf den URL-Slug von AIOSEO.

Geben Sie nun in einem neuen Browser-Tab die URL von WordPress Playground mit dem Slug von AIOSEO ein, etwa so:

https://playground.wordpress.net/?plugin=all-in-one-seo-pack

Wenn Sie die Eingabetaste drücken, erstellt WordPress Playground automatisch eine neue Umgebung, in der das AIOSEO-Plugin installiert ist.

Wenn Sie das Theme installieren möchten, ersetzen Sie einfach den Plugin-Parameter durch theme, etwa so:

https://playground.wordpress.net/?theme=astra

Sie können sogar mehrere Abfrageparameter kombinieren, wenn Sie mehrere Plugins oder Themes zusätzlich zum WordPress-Kern installieren möchten. Stellen Sie einfach sicher, dass Sie jeden Parameter mit dem kaufmännischen Und-Zeichen trennen.

So sieht die URL aus, wenn Sie die Plugins AIOSEO und MonsterInsights sowie das Astra-Theme installiert haben:

https://playground.wordpress.net/?theme=astra&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress

Wenn Sie Chrome verwenden, können Sie auch die Erweiterung Open in WordPress Playground installieren. Damit sehen Sie jedes Mal, wenn Sie eine Plugin- oder Themenseite auf WordPress.org aufrufen, die Schaltfläche „Playground“.

Wenn Sie darauf klicken, wird eine neue WordPress Playground-Umgebung mit dem installierten Plugin oder Theme geöffnet. Es vereinfacht die Methode der Abfrageparameter.

Wie exportiere/importiere ich eine mit WordPress Playground erstellte Website?

Angenommen, Sie haben mit WordPress Playground herumgespielt, einige neue Beiträge mit dem Gutenberg-Editor hinzugefügt und vielleicht sogar eine ganze Website erstellt. Es wäre eine Verschwendung, die Registerkarte einfach zu schließen und alle Ihre Fortschritte für immer zu verlieren.

Glücklicherweise können Sie Ihre Website aus WordPress Playground exportieren und auf Ihrem Computer speichern. Wenn Sie Playground erneut öffnen, können Sie die exportierte Zip-Datei hochladen und dort weitermachen, wo Sie aufgehört haben.

Navigieren Sie dazu zum oberen Menü des Playgrounds und klicken Sie auf das dreizeilige Menü in der oberen rechten Ecke. Klicken Sie dann auf „Als .zip herunterladen“.

Ihr Browser beginnt dann, die Datei auf Ihren Computer herunterzuladen.

Um die Datei in WordPress Playground hochzuladen, öffnen Sie einfach die Playground-Website und klicken Sie erneut auf das dreizeilige Menü. Danach klicken Sie auf „Wiederherstellen aus .zip“.

In einem Popup-Fenster werden Sie nun aufgefordert, eine Datei auszuwählen, die Sie zuvor exportiert haben.

Sobald Sie die Datei ausgewählt haben, klicken Sie einfach auf „Importieren“.

Wenn die Datei gültig ist, wird ein Popup-Fenster angezeigt, das Ihnen mitteilt, dass der Import erfolgreich war und der Playground mit der neuen Instanz aktualisiert wird.

Klicken Sie einfach auf „OK“, um das Popup-Fenster zu schließen.

Importieren/Exportieren von WordPress Playground nach GitHub

Wenn Sie ein GitHub-Konto haben, können Sie Ihre Website auch aus WordPress Playground exportieren und importieren. GitHub ist eine großartige Plattform, mit der Sie Änderungen an Ihrer Website verfolgen, Ihre Dateien sichern und mit anderen Benutzern zusammenarbeiten können.

Um eine Website von WordPress Playground nach GitHub zu exportieren, klicken Sie auf das dreizeilige Menü und wählen Sie „Export Pull Request to GitHub“.

Im nächsten Popup sehen Sie, dass WordPress Sie auffordert, Ihre Website als Backup auf Ihrem Computer zu speichern. Sobald Sie das getan haben, können Sie das Kästchen „Ich habe meinen Playground als Zip exportiert“ ankreuzen.

Klicken Sie dann auf die Schaltfläche „Mit Ihrem GitHub-Konto verbinden“.

Als nächstes müssen Sie bestätigen, dass Sie WordPress Playground den Zugriff auf Ihre Repositories gestatten.

Klicken Sie einfach auf ‚Autorisieren Sie adamziel‘, um fortzufahren.

Wählen Sie in diesem Schritt aus, welche Art von Dateien Sie exportieren möchten: Plugins, Themes oder das Verzeichnis wp-content. Wenn Sie Plugins, Themes, Mediendateien, Widgets, Menüs und Schriftarten exportieren möchten, wählen Sie die letzte Option.

Sie müssen auch die URL des GitHub-Repositorys angeben, in das Sie die Site exportieren möchten. Klicken Sie dann auf die Schaltfläche „Nächster Schritt“.

Wenn Sie das getan haben, müssen Sie wählen, ob Sie einen neuen Pull Request erstellen oder einen bestehenden aktualisieren wollen. Zu Demonstrationszwecken werden wir die erste Option wählen.

Danach geben Sie den Pfad im Repository an, in den die Änderungen übertragen werden sollen.

Sie müssen auch eine Commit-Nachricht einfügen, um anzugeben, welche Änderungen mit Hilfe des WordPress Playgrounds vorgenommen worden sind.

Wenn das alles erledigt ist, klicken Sie auf „Pull Request erstellen“.

Wenn der Export erfolgreich war, zeigt WordPress ein Popup mit einem Link zu der neuen Pull-Anfrage an.

Klicken Sie einfach auf den Link, um es in Aktion zu sehen.

Wenn Sie nun eine Website von GitHub in WordPress Playground importieren möchten, klicken Sie einfach erneut auf das dreizeilige Menü.

Wählen Sie dann „Von GitHub importieren“.

Wenn Sie eine komplett neue WordPress Playground-Umgebung eröffnen, müssen Sie möglicherweise den gesamten GitHub Playground-Autorisierungsprozess erneut durchführen.

Danach klicken Sie einfach auf die URL des GitHub-Repositorys, aus dem Sie importieren möchten. WordPress bietet einige Beispiele, falls Sie unsicher sind.

Als Nächstes müssen Sie angeben, welche Dateien Sie importieren möchten: Themes, Plugins oder das gesamte wp-content-Verzeichnis.

Sie können auch den Pfad des Repositorys eingeben, aus dem Sie importieren möchten. Klicken Sie anschließend einfach auf „Importieren“.

Wenn der Import funktioniert, wird eine Erfolgsmeldung angezeigt, die bestätigt, dass der WordPress Playground mit der neuen Instanz aktualisiert wird.

Wie man den WordPress-Spielplatz in seine Website einbindet

Wenn Sie ein WordPress-Tutorial schreiben, dann werden Sie wahrscheinlich Screenshots aus dem WordPress-Dashboard einfügen, um die Benutzer durch Ihre Anweisungen zu führen. Manchmal veranschaulichen Screenshots jedoch nicht genau die Aktionen, die Sie beschreiben.

An dieser Stelle kann WordPress Playground sehr nützlich sein. Sie können ihn in Ihre Seite oder Ihren Beitrag einbetten und den Nutzern ein interaktives Leseerlebnis bieten. Mit Playground können sie Ihre Anweisungen mitverfolgen.

Zuerst müssen Sie den Gutenberg-Block-Editor für eine Seite oder einen Beitrag öffnen. Klicken Sie dort auf die Schaltfläche „+“ zum Hinzufügen von Blöcken und wählen Sie den benutzerdefinierten HTML-Block aus.

Kopieren Sie nun den unten stehenden Code und fügen Sie ihn in den HTML-Block ein:

<iframe src="https://playground.wordpress.net/"></iframe>

Wenn Sie möchten, können Sie auch einige Abfrageparameter zu dieser URL hinzufügen, wie wir Ihnen zuvor gezeigt haben.

Klicken Sie anschließend auf „Veröffentlichen“ oder „Aktualisieren“, um die Änderungen wirksam werden zu lassen.

Der WordPress Playground kann je nach Theme unterschiedlich aussehen.

In unserem Fall passte es nicht zu den darüber liegenden Blöcken, und das Element selbst war zu klein, um damit zu interagieren.

Um dies zu vermeiden, können Sie stattdessen diesen Code verwenden:

<div class="iframe-container"><iframe src="https://playground.wordpress.net/" style="width: 100%; height: 500px"></iframe></div>

Hier wird der iFrame-Tag in div-Tags eingewickelt, damit die Playground-Einbettung der Auffüllung und dem Rand des Containers folgt.

Wir haben auch das style-Attribut hinzugefügt, um die Breite des iFrames auf 100 % seines Containers und die Höhe auf 500 Pixel zu setzen.

So sieht es auf der Vorderseite aus:

Häufig gestellte Fragen zu WordPress Playground

Lassen Sie uns einige häufig gestellte Fragen zu WordPress Playground beantworten.

Können Sie WordPress in Ihrem Browser verwenden?

Ja, mit WordPress Playground können Sie WordPress direkt in Ihrem Browser verwenden. Sie können Websites erstellen und Themes und Plugins ausprobieren, bevor Sie sie auf Ihrer Live-Site installieren.

Kann ich benutzerdefinierte Themes und Plugins in WordPress Playground installieren?

Ja, Sie können benutzerdefinierte Themes und Plugins in WordPress Playground installieren, um zu sehen, ob sie im Verwaltungsbereich funktionieren und mit bestimmten WordPress-Versionen kompatibel sind.

Kann ich eine mit WordPress Playground erstellte Website auf mein Hosting-Konto hochladen?

Technisch gesehen können Sie Ihre Website aus WordPress Playground exportieren und in Ihr WordPress-Hosting-Konto importieren. Da WordPress Playground jedoch die SQLite-Datenbank verwendet, müssen Sie die Datenbank möglicherweise in MySQL konvertieren, damit die Website auf einem Webserver läuft.

Wie führe ich WordPress Plugins und Themes lokal aus?

Wenn Sie WordPress-Plugins und Themes in einer lokalen Entwicklungsumgebung ausführen möchten, müssen Sie zunächst eine lokale WordPress-Site erstellen. In unserem Tutorial zum Erstellen einer lokalen WordPress-Site finden Sie eine Schritt-für-Schritt-Anleitung.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu erfahren, was WordPress Playground ist und wie Sie es in Ihrem Browser verwenden können. Vielleicht möchten Sie auch unseren Artikel über die einfache Erstellung einer Staging-Site für WordPress und unsere Liste der besten WordPress-Plugins zum Klonen oder Duplizieren einer Website lesen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.