WordPress Playground – So verwenden Sie WordPress in Ihrem Browser

Wenn wir Tutorials für unsere Leser erstellen, benötigen wir oft schnelle Möglichkeiten, WordPress-Funktionen, Plugins und Themes zu testen. Schließlich wäre es nicht sehr hilfreich, Lösungen zu empfehlen, ohne sie vorher gründlich getestet zu haben, oder?

Hier kommt WordPress Playground ins Spiel: ein praktisches Tool, mit dem Sie WordPress direkt in Ihrem Browser erkunden können. Keine komplizierte Einrichtung erforderlich und vor allem kein Risiko für Ihre bestehende Website.

Wir haben WordPress Playground in unserem eigenen Testprozess als unglaublich nützlich empfunden und mehrere clevere Wege entdeckt, um seine Funktionen optimal zu nutzen. Egal, ob Sie gerade erst mit WordPress beginnen, neue Tools sicher ausprobieren möchten oder eine schnelle Testumgebung benötigen, dieses Tool kann Ihr Leben erheblich erleichtern.

In diesem Leitfaden führen wir Sie durch alles, was Sie wissen müssen, um WordPress Playground effektiv zu nutzen.

Was ist WordPress Playground?

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

Es ist wie eine Testumgebung, in der Sie alle Arten von WordPress-Entwicklungen durchführen können, ohne eine tatsächliche, Live-Website einzurichten.

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

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

Wie funktioniert der WordPress Playground?

WordPress Playground läuft auf einigen coolen Technologien, mit denen Sie WordPress ohne die übliche Webserver- und Datenbankeinrichtung testen können:

1. WebAssembly-Binärdatei (Wasm): Ermöglicht die Ausführung von PHP-Code direkt in Ihrem Webbrowser, wodurch WordPress ohne herkömmlichen Server funktioniert. Dies macht die Plattform auch 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 Web-Tools helfen bei der Verarbeitung von Anfragen und der Ausführung von Hintergrund-JavaScript-Skripten, wodurch WordPress Playground PHP-Apps reibungslos in Ihrem Browser ausführen kann.

Diese Technologien ermöglichen es Entwicklern auch, WordPress Playground mit node.js, Visual Studio Code, CLI-Apps und sogar OpenAI zu integrieren.

Mit diesen Tools können Entwickler WordPress Playground auch auf einer Entwicklungsplattform für Test- oder Staging-Zwecke nutzen.

Was sind die Einschränkungen von WordPress Playground?

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

• Anpassungen in WordPress Playground sind temporär – Wenn Sie sich entscheiden, die Änderungen im Browser nicht zu speichern, müssen Sie darauf achten, die Seite nicht versehentlich zu aktualisieren, um Ihren Fortschritt nicht zu verlieren.
• Es kann fehleranfällig sein – Aus unserer Erfahrung beim Testen von Plugins mit WordPress Playground funktioniert nicht alles richtig. Sie können also hier und da einige Schwierigkeiten erwarten, aber Sie können WordPress Feedback geben, um die Plattform zu verbessern.
• 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 iFrames.

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

• So richten Sie WordPress Playground ein
• Wie man WordPress Playground Blueprints verwendet
• So installieren Sie Themes und Plugins in WordPress Playground
• So speichern Sie eine WordPress Playground-Instanz in Ihrem Browser
• So laden Sie eine WordPress Playground-Site herunter/stellen sie wieder her
• So importieren/exportieren Sie WordPress Playground nach GitHub
• So betten Sie WordPress Playground auf Ihrer Website ein
• So melden Sie einen Fehler im WordPress Playground
• Häufig gestellte Fragen zu WordPress Playground

So richten Sie WordPress Playground ein

Um WordPress Playground zu nutzen, können Sie diese Domain direkt in Ihrem Webbrowser aufrufen: https://playground.wordpress.net

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

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

Klicken Sie dazu auf das Zahnradsymbol „Einstellungen“ oben rechts.

Das Erste, was Sie tun müssen, ist, eine WordPress-Version für das Playground auszuwählen. Sie können die Version auswählen, die Sie bereits verwenden oder für Ihre WordPress-Website verwenden möchten.

WordPress stellt auch die Version 'WordPress Nightly' 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.

Als Nächstes möchten Sie die PHP-Version konfigurieren.

Wir empfehlen, diese mit der PHP-Version zu identifizieren, die Sie für Ihre Website verwenden. Allerdings finden Sie hier möglicherweise keine PHP-Versionen älter als 7.0.

Eine weitere Sache, die Sie in WordPress Playground tun können, ist die Wahl der Sprache Ihres Admin-Bereichs.

Es gibt Dutzende zur Auswahl, aber zur Demonstration verwenden wir „English (United States)“.

Darunter können Sie die Einstellungen 'Netzwerkzugriff zulassen' und 'Multisite-Netzwerk erstellen' aktivieren.

Wir empfehlen, die Netzwerkzugriffsfunktion zu aktivieren, da Sie WordPress-Themes und Plugins direkt aus der Umgebung installieren können. So müssen Sie sie nicht manuell einrichten.

Wenn Sie ein Test-WordPress-Multisite-Netzwerk erstellen möchten, empfehlen wir die Aktivierung der zweiten Einstellung.

Sobald Sie fertig sind, klicken Sie einfach auf „Einstellungen anwenden & Playground zurücksetzen“.

Um den Admin-Bereich zu öffnen, fahren Sie mit der Maus über das Menü des Website-Titels und klicken Sie auf „Dashboard“.

Oder Sie können auch zum Full Site Editor gehen, indem Sie auf 'Website bearbeiten' klicken.

Die grundlegende Einrichtung von WordPress Playground ist nun abgeschlossen, aber lassen Sie uns einige zusätzliche Einstellungen erkunden, die Ihr Erlebnis verbessern können.

Wie man WordPress Playground Blueprints verwendet

In WordPress ist eine Blueprint eine einfache JSON-Datei, die Ihnen hilft, eine benutzerdefinierte WordPress-Umgebung schnell und einfach einzurichten. Dies beinhaltet Einstellungen wie die zu verwendende WordPress- und PHP-Version, welche Plugins und Themes installiert werden sollen und sogar welche WordPress-Designelemente vorhanden sein sollen.

Dies ist eine großartige Option, wenn Sie häufig Testumgebungen erstellen, diese aber schnell einrichten müssen. Oder wenn Sie bestimmte WordPress-Konfigurationen mit anderen teilen müssen.

Um auf Blueprints zuzugreifen, klicken Sie auf das kleine quadratische Symbol in der oberen linken Ecke.

Navigieren Sie dann zur Registerkarte „Blueprints Gallery“.

Hier finden Sie öffentliche Blaupausen, die von anderen Benutzern geteilt wurden. Es gibt viele Optionen zur Auswahl. Sie können die Option „Block Theme erstellen“ verwenden, um ein benutzerdefiniertes Block Theme mit dem Plugin „Create Block Theme“ zu erstellen, oder „Stylish Press“ ausprobieren, um eine Demo-WooCommerce-Website einzurichten.

Wir lieben insbesondere Stylish Press, da es sehr nützlich für das Testen von WooCommerce-Plugins und -Themes für unsere Tutorials ist.

Um einen Blueprint zu verwenden, klicken Sie einfach auf die Schaltfläche 'Vorschau', um ihn in Ihrem WordPress Playground zu laden.

Sie können auch Ihre eigene WordPress Playground-Instanz in einen Blueprint umwandeln.

Wechseln Sie einfach zum Tab „Temporäres Playground“, klicken Sie auf die Drei-Punkte-Schaltfläche neben „Homepage“ und wählen Sie „Blueprint anzeigen“.

Dies zeigt Ihre Instanz als Blueprint .json-Datei an.

Wenn Sie die Blueprint-Datei auf Ihrem Computer speichern möchten, klicken Sie einfach auf das Disketten-Symbol 'Speichern'.

Das Speichern Ihrer Blueprint ist nützlich für zukünftige Referenzen, oder Sie können sie in der Blueprint-Galerie teilen, indem Sie die Contribution Guidelines befolgen.

Um eine gespeicherte Blueprint zu laden, klicken Sie auf das Symbol des geöffneten Ordners neben der Diskettenschaltfläche.

Wählen Sie einfach Ihre blueprint.json-Datei aus, und WordPress richtet Ihre Umgebung automatisch anhand dieser Konfiguration ein.

So installieren Sie Themes und Plugins in WordPress Playground

Es gibt verschiedene Möglichkeiten, WordPress-Plugins und -Themes in WordPress Playground zu installieren. Wenn Sie während der Einrichtung die Netzwerkzugriffsfunktion aktiviert haben, können Sie sie direkt über das WordPress-Dashboard installieren, genau wie auf einer regulären WordPress-Website.

Schritt-für-Schritt-Anleitungen für den Standardinstallationsprozess finden Sie in unseren detaillierten Anleitungen:

• So installieren Sie ein WordPress-Plugin (Schritt für Schritt für Anfänger)
• So installieren Sie ein WordPress-Theme (Anfänger-Leitfaden)

Wenn Sie den Netzwerkzugriff nicht aktiviert haben oder Premium-WordPress-Plugins oder Themes installieren, müssen Sie die manuelle Installationsmethode befolgen.

Laden Sie zuerst die Theme- oder Plugin-Datei herunter. Kostenlose Optionen finden Sie auf WordPress.org, suchen Sie Ihr gewünschtes Plugin oder Theme und klicken Sie auf die Schaltfläche „Herunterladen“. Dies speichert eine Zip-Datei auf Ihrem Computer.

Für Plugins gehen Sie einfach zum Dashboard des WordPress Playground und navigieren Sie zu Plugins » Neues Plugin hinzufügen.

Klicken Sie danach auf die Schaltfläche „Plugin hochladen“ und wählen Sie „Datei auswählen“, um die zuvor heruntergeladene Plugin-ZIP-Datei hochzuladen. Klicken Sie abschließend auf „Jetzt installieren“.

Was Themes betrifft, so wird WordPress ein Standard-Theme für Sie installiert haben, wenn Sie das Playground zum ersten Mal verwenden.

Aber wenn Sie ein anderes kostenloses oder sogar ein Premium-WordPress-Theme verwenden möchten, können Sie es manuell von Ihrer Quelle 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 „Theme hochladen“.

Wählen Sie danach die zuvor heruntergeladene Theme-Datei aus und klicken Sie auf „Jetzt installieren“.

Eine weitere Möglichkeit, Themes und Plugins zu installieren, ist die Verwendung der Query API von WordPress Playground. Diese Methode erfordert, dass Sie einige Query-Parameter zur WordPress Playground-URL hinzufügen.

Wenn Sie also beispielsweise die kostenlose Version von AIOSEO in WordPress Playground installieren und testen möchten, können Sie zur WordPress.org-Seite von AIOSEO gehen. Notieren Sie sich anschließend den URL-Slug von AIOSEO.

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

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

Wenn Sie die Eingabetaste drücken, erstellt WordPress Playground automatisch eine neue Umgebung mit dem AIOSEO-Plugin.

Wenn Sie das Theme installieren möchten, ersetzen Sie einfach den Parameter plugin durch theme, wie folgt:

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

Sie können sogar mehrere Abfrageparameter kombinieren, wenn Sie mehrere Plugins oder Themes zusätzlich zu WordPress Core 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 AIOSEO- und MonsterInsights-Plugins sowie das Neve-Theme installieren:

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

Wenn Sie ein Chrome-Benutzer sind, können Sie auch die Erweiterung Open in WordPress Playground installieren. Damit sehen Sie jedes Mal, wenn Sie eine Plugin- oder Theme-Seite auf WordPress.org besuchen, die Schaltfläche „Playground“.

Ein Klick darauf öffnet eine neue WordPress Playground-Umgebung mit installiertem Plugin oder Theme. Dies vereinfacht die Query-Parameter-Methode.

So speichern Sie eine WordPress Playground-Instanz in Ihrem Browser

Nehmen wir an, Sie haben mit WordPress Playground herumgespielt und eine ganze Wartelisten-Landingpage oder sogar eine Website erstellt. Es wäre Verschwendung, einfach den Tab zu schließen und all Ihre Fortschritte für immer zu verlieren.

Glücklicherweise erlaubt Ihnen WordPress Playground, Ihre Instanz in Ihrem Browser zu speichern. Klicken Sie dazu auf das kleine quadratische Symbol in der oberen linken Ecke.

Stellen Sie sicher, dass Sie sich auf dem Tab „Temporärer Playground“ befinden.

Klicken Sie dann auf die Schaltfläche 'Speichern' und wählen Sie 'In diesem Browser speichern'.

Warten Sie nun, bis WordPress diesen Playground in Ihrem Browser gespeichert hat. Nach unserer Erfahrung dauert dies einige Minuten.

Sobald Sie fertig sind, sehen Sie einen neuen Abschnitt namens „Gespeicherte Playgrounds“. WordPress benennt Ihren Playground automatisch mit einem kreativen Namen, wie z. B. „Happy Sunny Country“ oder „Calm Classic Forest“.

Sie können die Umgebungseinstellungen hier immer noch konfigurieren, genau wie im vorherigen Abschnitt. Sie sind jedoch auf die Änderung der PHP-Version und der Netzwerkzugriffseinstellungen beschränkt.

Nach dem Vornehmen von Änderungen klicken Sie auf „Speichern & neu laden“, um die Instanz zu öffnen.

Jetzt speichert WordPress jede Änderung, die Sie an der Playground-Instanz vornehmen, auch wenn Sie den Browser-Tab schließen.

WordPress ermöglicht es Ihnen auch, „in einem lokalen Verzeichnis zu speichern“. Klicken Sie einfach auf dieselbe „Speichern“-Schaltfläche wie zuvor und wählen Sie „In einem lokalen Verzeichnis speichern“.

Wir haben festgestellt, dass diese Option alle Playground-Dateien ungezippt herunterlädt, genau wie bei einer normalen WordPress-Installation. Sie erhalten Standard-WordPress-Ordner wie wp-content, wp-admin und andere.

Wir empfehlen die Verwendung dieser Option, wenn Sie diese Dateien auf eine Staging-Umgebung oder eine leere Website bei einem Hosting-Dienst hochladen möchten.

Es ist besonders nützlich, wenn Sie zuerst in WordPress Playground erstellen und dann außerhalb der Playground-Umgebung daran arbeiten möchten.

So laden Sie eine WordPress Playground-Site herunter/stellen sie wieder her

Während das Speichern Ihres Spielplatzes im Browser für schnellen Zugriff praktisch ist und das Speichern entpackter Dateien gut für Live-Websites funktioniert, benötigen Sie manchmal etwas dazwischen.

Das Herunterladen Ihres WordPress Playgrounds als ZIP-Datei gibt Ihnen ein portables Backup, das einfach zu speichern und zu teilen ist. Sie können es auch auf jede WordPress Playground-Instanz wiederherstellen.

Klicken Sie zum Starten auf das kleine quadratische Symbol in der oberen linken Ecke.

Stellen Sie sicher, dass Sie sich auf der Registerkarte „Temporary Playground“ oder in einem gespeicherten Playground befinden. Klicken Sie dann auf das Drei-Punkte-Menü oben rechts neben der Schaltfläche „Homepage“.

Klicken Sie auf „Als .zip herunterladen“, und Ihr Browser beginnt mit dem Herunterladen der Datei auf Ihren Computer.

Ihr Browser beginnt dann mit dem Herunterladen der Datei auf Ihren Computer.

Um Ihre heruntergeladene Playground-Instanz wiederherzustellen, klicken Sie auf das Drei-Punkte-Menü über 'Temporäre Playground-Instanz' und wählen Sie 'Aus .zip importieren'.

Ein Popup wird angezeigt und Sie werden aufgefordert, Ihre exportierte Datei auszuwählen.

Wählen Sie ihn aus und klicken Sie auf 'Importieren'.

Wenn die Datei gültig ist, sehen Sie eine Erfolgsmeldung und die Playground-Instanz wird mit Ihrer wiederhergestellten Einrichtung aktualisiert.

Klicken Sie einfach auf „OK“, um das Popup zu schließen und mit Ihrer wiederhergestellten Website zu arbeiten.

Eine coole Sache an den Zip-Exporten von WordPress Playground ist, dass Sie sie mit Studio von WordPress.com verwenden können, dem lokalen Entwicklungstool von WordPress.com. Dies ermöglicht es Ihnen, weiter an Ihrer Website in einer richtigen lokalen Umgebung zu arbeiten.

Gehen Sie zuerst zur Studio by WordPress.com -Website und klicken Sie je nach Computer entweder auf „Download for Windows“ oder „Download for Mac“.

Öffnen Sie die heruntergeladene Datei, um mit der Installation zu beginnen.

Sie sehen ein Popup-Fenster, das den Installationsfortschritt anzeigt.

Nach Abschluss der Installation können Sie Ihre erste Website hinzufügen.

Ziehen Sie einfach Ihre WordPress Playground ZIP-Datei in das Feld „Backup importieren“. Sie können Ihrer Website einen beliebigen Namen geben, der Ihnen hilft, sie leicht zu identifizieren.

Nach dem Import sehen Sie das Dashboard Ihrer lokalen WordPress-Site.

Um mit Ihrer Website zu arbeiten, klicken Sie auf die Schaltfläche „Start“ in der oberen rechten Ecke. Dadurch wird Ihre lokale Website auf Ihrem Computer aktiviert.

Warten Sie, bis sich die Schaltfläche 'Start' in 'Läuft' ändert, und klicken Sie dann auf den Link 'WP Admin' in der oberen linken Ecke.

Dies öffnet Ihre lokale WordPress-Admin-Seite, auf der Sie mit der Entwicklung Ihrer Website fortfahren können.

So importieren/exportieren Sie WordPress Playground nach GitHub

Wenn Sie ein GitHub-Konto haben, können Sie Ihre Website auch von WordPress Playground exportieren und importieren. GitHub ist eine großartige Plattform, die es Ihnen ermöglicht, Änderungen an Ihrer Website zu verfolgen, Ihre Dateien zu sichern und mit anderen Benutzern zusammenzuarbeiten.

Beginnen Sie, indem Sie auf das kleine quadratische Symbol in der oberen linken Ecke klicken.

Um eine Website von WordPress Playground nach GitHub zu exportieren, klicken Sie auf das Drei-Punkte-Menü neben der Schaltfläche „Homepage“.

Wählen Sie danach „Nach GitHub exportieren“.

Im nächsten Popup-Fenster werden Sie sehen, dass WordPress das Speichern Ihrer Website als Backup auf Ihrem Computer empfiehlt. Sobald Sie dies getan haben, können Sie das Feld „Ich habe mein Playground als ZIP exportiert“ ankreuzen.

Klicken Sie dann auf die Schaltfläche „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 „adamziel autorisieren“, um fortzufahren.

Wählen Sie in diesem Schritt aus, welche Dateitypen Sie exportieren möchten: Plugins, Themes, das wp-content-Verzeichnis oder bestimmte Pfade.

Wenn Sie alle Ihre Plugins, Themes, Mediendateien, Widgets, Menüs und Schriftarten exportieren möchten, wählen Sie die letzte Option.

Sie müssen auch die URL des öffentlichen GitHub-Repositorys angeben, in das Sie die Website exportieren möchten.

Klicken Sie dann auf die Schaltfläche „Nächster Schritt“.

Sobald Sie dies getan haben, müssen Sie entscheiden, ob Sie eine neue Pull-Anfrage erstellen oder eine bestehende aktualisieren möchten. Zu Demonstrationszwecken wählen wir die erste Option.

Geben Sie danach den Pfad im Repository ein, in dem die Änderungen committet werden sollen.

Sie müssen auch eine Commit-Nachricht einfügen, um die mit WordPress Playground vorgenommenen Änderungen anzugeben.

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

Wenn der Export erfolgreich ist, zeigt WordPress ein Popup mit einem Link zur 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 auf das Drei-Punkte-Menü über „Temporary Playground“.

Wählen Sie dann 'Von GitHub importieren'.

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

Geben Sie danach einfach die GitHub-Repository- oder Pfad-URL ein, aus der Sie importieren möchten.

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

Sie können auch den Pfad des Repositorys erneut eingeben, aus dem Sie importieren, falls erforderlich. Andernfalls wird WordPress dieses Feld automatisch selbst ausfüllen, wenn es bereits weiß, aus welchem Pfad importiert werden soll.

Wenn Sie fertig sind, klicken Sie einfach auf „Importieren“.

Wenn der Import funktioniert, wird eine Erfolgsmeldung angezeigt.

Klicken Sie einfach auf „OK“, um es zu schließen.

Eine weitere Sache, die Sie mit WordPress Playground und GitHub tun können, ist die Vorschau einer bestehenden GitHub-Pull-Anfrage aus dem WordPress-Projekt. Auf diese Weise können Sie sehen, welche Verbesserungen und Entwicklungen an WordPress vorgenommen werden und diese testen.

Beachten Sie, dass diese Funktion zum Zeitpunkt der Erstellung nur für die Vorschau von Pull-Requests aus den Repositories WordPress Develop oder Gutenberg funktioniert.

Dazu können Sie erneut auf die Drei-Punkte-Menüschaltfläche klicken und 'WordPress-PR in der Vorschau anzeigen' oder 'Gutenberg-PR in der Vorschau anzeigen' auswählen.

Geben Sie als Nächstes die URL oder die ID des Pull Requests in das entsprechende Feld ein.

Danach klicken Sie auf „Los“.

So betten Sie WordPress Playground auf Ihrer Website ein

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

Hier kann WordPress Playground nützlich sein. Sie können ihn auf Ihrer Seite oder Ihrem Beitrag einbetten und den Lesern ein interaktiveres Leseerlebnis bieten. Sie können Ihren Anweisungen mit Playground folgen.

Zuerst müssen Sie den Gutenberg-Blockeditor für eine Seite oder einen Beitrag öffnen. Dort angekommen, klicken Sie auf die Schaltfläche „+“ zum Hinzufügen von Blöcken und wählen Sie den Block „Benutzerdefiniertes HTML“.

Kopieren Sie nun den folgenden 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 dieser URL auch einige Query-Parameter hinzufügen, wie wir Ihnen bereits gezeigt haben.

Klicken Sie danach auf „Speichern“ oder „Veröffentlichen“, um die Änderungen live zu schalten.

Der WordPress Playground kann je nach Theme anders aussehen.

In unserem Fall sah es nicht mit den darüber liegenden Blöcken ausgerichtet aus, 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 ist das iFrame-Tag in div-Tags eingeschlossen, damit das Playground-Embed dem Padding und Margin 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 einzustellen.

So sieht es im Frontend aus:

So melden Sie einen Fehler im WordPress Playground

Wenn Sie Probleme mit WordPress Playground haben, können Sie diese dem WordPress-Team melden, um die Fehler beheben zu lassen.

Um dies zu tun, klicken Sie auf das kleine quadratische Symbol in der oberen linken Ecke.

Danach können Sie auf das Drei-Punkte-Menü in der oberen rechten Ecke der Seite klicken.

Klicken Sie dann auf die Option „Fehler melden“.

Sie sollten nun ein Popup sehen, in dem Sie beschreiben können, wie der Fehler auftritt. Sie sollten auch die URL Ihrer WordPress Playground-Umgebung einfügen, damit das Team sehen kann, was genau passiert ist.

Sobald Sie fertig sind, klicken Sie einfach auf „Fehler melden“.

Darüber hinaus können Sie mit WordPress Playground die Protokolle der Fehler Ihrer Umgebung einsehen.

Dies können Sie tun, indem Sie zum Abschnitt „Logs“ im Tab „Temporärer Playground“ oder in einem der gespeicherten Playgrounds navigieren.

Häufig gestellte Fragen zu WordPress Playground

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

Können Sie WordPress in Ihrem Browser verwenden?

Ja, WordPress Playground ermöglicht es Ihnen, WordPress direkt in Ihrem Browser zu verwenden. Sie können Websites erstellen und Themes und Plugins ausprobieren, bevor Sie sie auf Ihrer Live-Website installieren.

Kann ich benutzerdefinierte Themes und Plugins in WordPress Playground installieren?

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

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

Ja, Sie können Ihre Website aus WordPress Playground exportieren und in Ihr WordPress-Hosting-Konto importieren. Speichern Sie einfach Ihre WordPress Playground-Dateien in einem lokalen Verzeichnis und laden Sie sie dann auf eine leere Website in Ihrem Hosting-Konto hoch.

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 zuerst eine lokale WordPress-Site erstellen. Sie können unser Tutorial zum Thema Erstellen einer lokalen WordPress-Site für Schritt-für-Schritt-Anleitungen lesen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, was WordPress Playground ist und wie Sie es in Ihrem Browser verwenden können. Möglicherweise möchten Sie auch unseren Artikel über die besten Drag-and-Drop-Page-Builder für WordPress und unseren Leitfaden zum Thema Hinzufügen dynamischer Inhalte in WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.