Lokale WordPress-Umgebung mit wp-env

Diese kurze Anleitung wird dir dabei helfen, die optimale Entwicklungsumgebung einzurichten, um Blöcke und andere Plugins für WordPress zu erstellen, die den Block-Editor erweitern und anpassen.

Eine Block-Entwicklungsumgebung umfasst die Tools, die du auf deinem Rechner benötigst, um erfolgreich für den Block-Editor zu entwickeln. Die drei wesentlichen Anforderungen sind:

  • Code-Editor
  • Entwicklungstools für Node.js
  • Lokale WordPress-Umgebung

Machen wir uns an das Herunterladen der benötigten Komponenten, letztlich soll die Entwicklungsumgebung bei mir unter Windows ausgeführt werden.

  • Code-Editor, ich arbeite mit Visual Studio Code
  • Node.js (node) ist eine Open-Source Laufzeitumgebung, die es dir ermöglicht, JavaScript ausserhalb des Webbrowsers auszuführen.
  • Docker (zum virtualisieren von Anwendungen in platzsparenden Software-Containern)
  • Dann wird noch Git für die simple-git Module benötigt
Wordpress | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital
Diese Übersicht und eine ausführliche Anleitung dazu findet sich unter developer.wordrpess.org

Das wp-env-Werkzeug wird verwendet, um eine lokale WordPress-Umgebung mit Docker zu erstellen. Das ist nur ein Weg um eine WordPress Entwicklungsumgebung zu erstellen, eine Alternative per Homebrew und nginx ist unserem Blogbeitrag Entwickeln mit Docker beschrieben.

Was ist wp-env?

wp-env ist ein Befehlszeilenwerkzeug für die Entwicklung von WordPress-Plugins und -Themes. Es ermöglicht Entwicklern, schnell und einfach lokale Entwicklungsumgebungen für ihre WordPress-Projekte einzurichten. Mit wp-env können Entwickler eine isolierte WordPress-Instanz auf ihrem lokalen Rechner starten, die speziell für die Entwicklung eines Plugins oder Themes konfiguriert ist. Dadurch können sie Änderungen am Code testen, ohne ihre Live-Website zu beeinträchtigen. Ausserdem bietet wp-env die Möglichkeit, Plugins und Themes automatisch zu aktivieren und einzubinden, wenn sie sich in einem bestimmten Verzeichnis befinden, was den Entwicklungsprozess weiter vereinfacht.

Nachdem du die Komponenten installiert und Docker Desktop eingerichtet hast, öffne das Terminal (VS Code: Anzeigen -> Terminal) und installiere wp-env, indem du folgenden Befehl ausführst:

npm -g install @wordpress/env
Online für Kultur und Wirtschaft | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital

Wenn du stattdessen die unten stehende Fehlermeldung bekommen solltest, dann fehlen dir die entsprechenden Rechte um das Script auszuführen.

Homepage erstellen lassen | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital

Über die PowerShell lässt sich «als Administrator» wie folgt die Execution Policy ändern:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Nach erfolgreicher Installation, wurde wp-env global installiert, was bedeutet, dass das Werkzeug von jedem Verzeichnis aus ausgeführt werden kann. Um zu prüfen, ob wp-env verfügbar ist, kannst du:

wp-env --version

ausführen, und bei Erfolg sollte die Versionsnummer (z.B. 9.6.0) erscheinen. Damit ist die Einrichtung der Entwicklungsumgebung abgeschlossen und wir könnten mit dem Entwickeln beginnen. Doch davor testen wir, ob die Testumgebung auch problemlos läuft.

Mit wp-env kannst du praktisch überall arbeiten. Wenn du an der Entwicklung eines einzelnen Plugins arbeitest, kann wp-env start automatisch das Plugin einbinden und aktivieren, wenn du es aus dem entsprechenden Verzeichnis herausführst. Das gleiche gilt für Themes – wenn du an einem Theme arbeitest und wp-env start aus dem entsprechenden Verzeichnis herausführst, wird das Theme automatisch eingebunden und aktiviert.

Wenn du wp-env start jedoch aus einem Verzeichnis herausführst, das weder ein Plugin noch ein Theme enthält, wird eine allgemeine WordPress-Umgebung erstellt. Das bedeutet, dass du ohne spezifisches Plugin- oder Theme-Entwicklungsverzeichnis eine grundlegende WordPress-Instanz einrichten kannst.

Ich navigiere im Terminal zu meinem vorhandenen Plugin-Verzeichnis und führe:

wp-env start

aus. Sobald das Skript läuft, kannst du auf die lokale Umgebung unter folgender Adresse zugreifen: http://localhost:8888.

Homepage erstellen lassen | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital
Siehe dazu auch der entsprechende Container im Docker

Ins WordPress-Dashboard meldest du dich mit dem Benutzernamen «admin» und dem Passwort «password» an.

1 Star2 Stars3 Stars4 Stars5 Stars (1)

Wenn du denkst, dass dieser Beitrag ein Meisterwerk der Webentwicklung ist, dann hinterlasse uns einen Kommentar. Wenn nicht, kannst du trotzdem kommentieren - wir akzeptieren auch konstruktive Kritik!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert