Die ultimative WordPress-Entwicklungsumgebung

In den letzten Jahren habe ich hier im WPMU DEV-Blog unzählige Tutorials geschrieben, in denen ich Leckerbissen über die von mir verwendeten Entwicklungsumgebungen teile.

Heute dachte ich, es ist an der Zeit, eine vollständige Umgebung zu teilen, die Art, die ich zusammenstellen und für die Entwicklung in größerem Maßstab verwenden würde.

Krempeln Sie die Ärmel hoch und machen Sie sich bereit, sich die Hände schmutzig zu machen! Denn unten ist eine vollständige Anleitung für die Art von Entwicklungsumgebung, die ich eingerichtet habe, und wie Sie dies auch tun können.

Hinweis: Dieses Tutorial ist nichts für Anfänger. Wenn Sie neu in der WordPress-Entwicklung sind, benötigen Sie keine so aufwändige Umgebung, da dies zu unnötiger Komplexität führen könnte. Beachten Sie auch, dass dieser Artikel speziell für WordPress gedacht ist. Die Ideen und Ziele könnten für Nicht-WordPress-Projekte dieselben sein, aber der Ansatz und die verwendeten Tools würden variieren.

Inhaltsverzeichnis

1. 1. Was macht eine gute Entwicklungsumgebung aus
   2. Sich entwickelnde Umgebungen
   3. Lokale Server
   4. Befehlszeilen-Tools
   5. Bash-Skripte
   6. WordPress-Plugins
   7. Verschiedene Tools

Was macht eine gute Entwicklungsumgebung aus?

Eine gute Entwicklungsumgebung hat in meinen Augen die folgenden drei Eigenschaften:

1. Sehr tragbar
2. Hochgradig konfigurierbar
3. Hoch automatisiert

Portabilität

Portabilität ist ein wichtiger Faktor, da ich nicht nur das Theme/Plugin, das ich entwickle, teilen möchte, sondern auch die Entwicklungsumgebung teilen möchte.

Ich möchte, dass andere Entwickler die Quelle von GitHub auschecken und sofort loslegen können, einschließlich der Verwendung von Tools wie Gulp oder Grunt. Dies erleichtert den Einstieg in Projekte und wenn Sie eine bessere Zusammenarbeit unterstützen, haben Sie eine höhere Chance, etwas erfolgreich zu machen.

Die Portabilität kann Ihnen auch helfen, wenn Sie an einem anderen Computer arbeiten müssen oder Ihren Kollegen zeigen möchten, was Sie gerade gemacht haben. Die Fähigkeit, Dinge überall innerhalb weniger Minuten einzurichten, hat mir öfter geholfen, als ich zählen kann.

Konfigurierbarkeit

Die Möglichkeit, Ihre Umgebung zu konfigurieren, ist von größter Bedeutung. Auf der Serverseite ist WordPress extrem nachsichtig, aber die Möglichkeit, Ihre Build-Einstellungen, Grunt-Aufgaben und andere Optionen zu optimieren, ist ein großer Vorteil.

Konfigurationsoptionen und Portabilität zusammen bedeuten, dass Sie Ihre Arbeit einfach unter verschiedenen Umständen testen können. Wie wäre es mit einem Wechsel der PHP-Version oder sogar HHVM, nur um sicherzugehen? Vielleicht können Sie die Kompatibilität mit älteren Versionen von WordPress und beliebten Plugins überprüfen? Das sind Dinge, die Sie testen können sollten.

Automatisierung

Die Automatisierung ist einer der Hauptantriebe bei der Erstellung einer Entwicklungsumgebung für die WordPress-Arbeit. Ich möchte mich nicht um meine Skripte, Stylesheets, das Speichern meiner Arbeit, die Bereitstellung usw. kümmern.

Befehlszeilentools bilden das Rückgrat meiner Automatisierungssuite, die alles kann, von der Einrichtung von WordPress mit einem Befehl bis zum Packen meines Produkts.

In Arbeit

Bevor wir in die Einzelheiten eintauchen, dachte ich, ich würde etwas darüber sagen, wie sich Entwicklungsumgebungen von denen ausdenken, die sie verwenden.

Wenn Sie ein relativer Neuling in der Welt der Befehlszeile, Build-Tools, Versionskontrollsysteme und so weiter sind, mag es scheinen, als wäre ich der Profi, der alles weiß und die perfekten Tools für jede Aufgabe verwendet.

Das ist ziemlich weit von der Wahrheit entfernt! Ich kenne mich in allen Dingen mit WordPress aus, aber alles andere ist nur ein Extra, das ich angehängt habe oder lernen musste/wollte, um mein Leben schneller zu machen. Ich kopierte andere, fand selbst Teile heraus und modifizierte die Dinge nach Bedarf (manchmal scheiterte ich kläglich!).

Meine Entwicklungsumgebung (und viele andere) ist eine Mischung aus Folgendem:

• Ausgeprägtes persönliches Wissen
• Tolle Tipps von anderen
• Nur eine zufällige Sache, die ich gefunden habe, die funktioniert
• Schritte, die viel besser gemacht werden könnten, aber ich konnte mich nicht darum kümmern, es herauszufinden

Mit anderen Worten: Es ist nicht perfekt, aber es erfüllt seinen Zweck. Es gibt viel Raum für Verbesserungen und Möglichkeiten, andere Tools zu verwenden, die Ihnen vielleicht besser gefallen. Wenn Sie weitere hilfreiche Tools oder Workflows kennen, können Sie diese gerne verwenden und mir in den Kommentaren mitteilen!

Ein lokaler Server

WordPress läuft auf PHP, einer serverseitigen Programmiersprache, daher brauchen wir einen Server, um WordPress auszuführen. Die beliebtesten Optionen sind:

• Landstreicher
• WAMP
• XAMPP
• MAMP

Ich habe vor vielen Jahren mit XAMPP angefangen. Ich bin dann zu MAMP gewechselt, als ich ein Mac-Benutzer wurde, und bin dann vor etwa zwei Jahren schließlich zu Vagrant gewechselt. Das Web und die verwendeten Tools entwickeln sich wie immer weiter und jetzt neige ich dazu, auch Vagrant und MAMP zu verwenden. Warum, erkläre ich weiter unten.

Verstärker

Das „AMP“ in MAMP, XAMPP und WAMP steht für Apache, MySQL und PHP. Diese Tools installieren alle Dienste und eine GUI, um Ihnen bei der Verwaltung der vom Server verwendeten Prozesse zu helfen. Sie laden die App herunter und installieren sie, drücken die „Ein“-Taste und alles funktioniert wie erwartet.

Die Vorteile:
Es ist schnell, einfach, intuitiv und funktioniert jederzeit auf allen Systemen. Es hat eine großartige Benutzeroberfläche, mit der Sie die PHP-Einstellungen optimieren, zu Nginx wechseln, Memcached, Postfix konfigurieren, virtuelle Server einrichten und vieles mehr können.

Die Nachteile:
Es gibt zwar viele Dinge, die Sie optimieren können, aber die Kontrolle ist begrenzt. Sie können das Betriebssystem nicht ändern oder andere Änderungen vornehmen, die Ihnen der vollständige SSH-Zugriff erlauben würde.

Alle AMPs verlieren aus demselben Grund an Portabilität. Sie sind so beliebt, dass jeder sie installieren kann, aber sie sind nicht eigenständig und minimal wie Vagrant-Konfigurationen.

Landstreicher

Vagrant ist ein bisschen anders. Anstatt eine Vorverpackung und Umgebung für Sie zu erstellen, haben Sie die volle Kontrolle. Es basiert auf VirtualBox (oder anderen VM-Apps) und ermöglicht es Ihnen, eine „Box“ zu greifen, die im Wesentlichen ein Betriebssystem ist. Sie können diese dann mithilfe von Skripten selbst konfigurieren.

Die Vorteile:
Die Konfiguration ist in sich abgeschlossen und besteht aus nur zwei sehr kleinen Dateien. Wenn Sie an die Befehlszeile gewöhnt sind, kann das Einrichten einer Umgebung so einfach sein wie das vagrant up – das System ist extrem portabel.

Sie können es nach Herzenslust konfigurieren. Jedes Betriebssystem, jede Software, von verschiedenen Caching-Methoden bis zum Kompilieren Ihres eigenen PHP. Sie können die Umgebung Ihres tatsächlichen Hosts genau replizieren, um sicherzustellen, dass Ihre Site auf Ihrem lokalen Computer genauso ausgeführt wird.

Die Nachteile:
Wenn Sie mit der Verwendung der Befehlszeile nicht auf dem neuesten Stand sind, kann Vagrant eine steile Lernkurve haben. Wenn alles reibungslos funktioniert, müssen Sie nur noch einen Befehl erteilen. Wenn etwas aus irgendeinem Grund nicht funktioniert, befinden Sie sich in tiefem Wasser.

Es gibt Tools, um virtuelle Hosts zu erstellen und andere allgemeine Aufgaben auszuführen, die Benutzeroberfläche von MAMP ist bequemer, zumindest für mich. Wenn ich schnell einen neuen virtuellen Host mit einem WP installieren muss, kann ich das mit MAMP + WP-CLI viel schneller tun als mit Vagrant + WP-CLI.

Welches verwenden?

Wenn Sie ausschließlich mit WordPress arbeiten, bietet ein Tool wie MAMP mehr als genug Flexibilität und Power. Es erlaubt Ihnen natürlich, mit Nicht-WordPress-Sites zu arbeiten. Wenn Sie also den einen oder anderen Job haben, der außerhalb der WP-Sphäre liegt, wird Ihnen MAMP immer noch gute Dienste leisten.

Wenn Sie mit großen Teams an Nicht-WP-Projekten arbeiten, empfehle ich Ihnen, sich Vagrant zu schnappen und es auszuprobieren. Es wird Ihnen viel darüber beibringen, wie Server intern funktionieren, und es Ihnen ermöglichen, Umgebungen genau zu teilen.

Meine Präferenz ist es, beide zu verwenden. Bei Bedarf (oder Zeit) kann ich mit Vagrant meine Umgebung bis ins kleinste Detail konfigurieren. Wenn ich etwas Einfaches oder für ein WordPress-Projekt brauche, ist MAMP meine bevorzugte Option.

Rachel McCollin, eine weitere Autorin hier bei WPMU DEV, hat eine großartige Anleitung zum Einrichten von MAMP geschrieben, und ich habe einen Leitfaden zur WordPress-Entwicklung mit Vagrant beigesteuert, mit dem Sie diese Umgebungen einrichten können.

Befehlszeilen-Tools

Ich verwende nicht viele CLI-Tools, aber die, die ich verwende, machen einen großen Teil meines Workflows aus. Die bekanntesten sind WP-CLI, Gulp, ngrok und Ultrahook, gehen wir ein wenig ins Detail.

WP-CLI

WP-CLI ist ein extrem leistungsfähiges Befehlszeilentool, mit dem Sie alles rund um WordPress automatisieren können. Ich habe bereits ein Tutorial über die fortgeschrittene WordPress-Entwicklung mit WP-CLI geschrieben, also zeige ich Ihnen nur einen Teil der Magie, die es tun kann.

Einrichten neuer Websites

Sie können WordPress mit ein paar einfachen Befehlen wie wp core download und wp core config herunterladen, konfigurieren und installieren. Die Dokumentation ist reichlich und einfach zu befolgen.

Ich verwende WP-CLI zusammen mit Bash-Skripten, um kleine Vorlagen für die Erstellung neuer Websites zu erstellen. Sie können Befehle verwenden, um Standard-Plugins und -Designs zu entfernen und regelmäßig verwendete Plugins herunterzuladen und zu aktivieren.

Suchen und Ersetzen

Suchen und Ersetzen in Datenbanken sind manchmal erforderlich, können jedoch mühsam sein. Der Wechsel zu https, der Umzug in eine neue Domain, das Umbenennen von URLs und andere können einige Massenänderungen mit sich bringen.

Da die Datenbank eine Reihe von serialisierten Arrays enthält, können Sie nicht einfach mit SQL suchen und ersetzen (es sei denn, der alte und der neue Wert haben dieselbe Länge). wp search-replace oldval newvalue das alles für Sie, indem es Ihre Arrays deserialisiert und dann neu serialisiert.

Remoteverwaltung

WP-CLI verfügt über integriertes SSH, mit dem Sie Websites über SSH verwalten können. Dies hat das Potenzial, Ihnen zu ermöglichen, Hunderte von Websites mit einem einzigen Befehl zu verwalten (z. B.: Aktualisieren eines Designs oder Plugins auf mehreren Websites).

So viel mehr…

Es gibt fast kein Ende dessen, was Sie mit WP-CLI tun können. Aus rund 35 integrierten Befehlskategorien, die eine Reihe von Unterbefehlen für Pakete von Drittanbietern enthalten, können Sie jede Aufgabe problemlos automatisieren.

Schluck

Gulp ist mein Automatisierungs-Arbeitspferd. Ich verwende es, um meine Skripte, Stile, Bilder, sogar mobile Tests und Browser-Aktualisierungsmechanismen zu verwalten. Ich habe einen ausführlichen Artikel über die Verwendung von Gulp mit WordPress geschrieben, schaue dort nach detaillierten Anweisungen.

Ich bevorzuge Gulp gegenüber der anderen beliebten Wahl – Grunt – wegen der Syntaxunterschiede. Werfen Sie einen Blick auf meinen Grunt For WordPress Development-Artikel und bilden Sie sich Ihre eigene Meinung!

Gulp verwendet Node und Node-Pakete für seine Funktionalität, was es aufgrund der Community-gesteuerten Erweiterungen extrem portabel und leistungsstark macht. Mein Arbeitsprozess mit Gulp umfasst normalerweise Folgendes:

1. Eine Erweiterung finden, die meinen Anforderungen entspricht
2. Installieren Sie das Knotenpaket mit npm
3. Erfordert das Paket im Gulpfile
4. Schreiben Sie eine kurze Automatisierungsaufgabe

Der einzige Teil davon, der überhaupt Nachdenken erfordert, ist Nummer vier. Selbst dann haben die meisten Erweiterungen Beispiele zum Kopieren und Einfügen, die wahrscheinlich nur geringfügig geändert werden müssen.

Hier sind die Erweiterungen, die ich am häufigsten verwende:

• gulp-sass zum Kompilieren von Sass in CSS
• gulp-clean-css zum Minimieren von CSS
• gulp-autoprefixer zum automatischen Hinzufügen von Herstellerpräfixen
• gulp-include zum Verketten von JS-Dateien
• gulp-uglify zum Minfizieren von JS-Dateien
• gulp-imagemin zum Optimieren von Bildern
• Browsersync zum Erstellen von Entwicklungsservern, die beim mobilen Testen helfen
• gulp-sourcemaps zum Erstellen von Quellkarten für minimierte Dateien

ngrok

ngrok ist ein kleines Dienst- und Befehlszeilentool, das ich verwende, um meine lokale Arbeit über das Internet zu teilen. ngrok erstellt sichere Tunnel zu einer lokalen Umgebung und stellt Ihre Anwendung unter einer speziellen URL wie http://7bbc49aa.ngrok.io .

Ultrahaken

Ultrahook ist so etwas wie das Gegenteil von ngrok. Wo ngrok Ihren Localhost zum Web leitet, leitet Ultrahook das Web zu Ihrem Localhost. Dies ist äußerst nützlich, um beispielsweise APIs von Drittanbietern wie Stripe zu testen.

Sie können Stripe so einrichten, dass Test-Webhooks http://stripe.danielpataki.ultrahook.com gesendet werden, die sicher an Ihren lokalen Server weitergeleitet werden.

WordPress-Plugins

Für die meisten von uns ist WordPress-Entwicklung gleichbedeutend mit Plugin- und Theme-Entwicklung. Das Repository ist voll von Plugins, die Entwicklern helfen, schneller bessere Arbeit zu leisten. Hier sind einige, die ich verwende oder regelmäßig verwende.

Theme-Check

Ein unverzichtbares Plugin für Themenersteller. Theme Check analysiert Ihr Theme und spuckt Gründe aus, die nicht den WordPress-Standards entsprechen. Es befasst sich mit veraltetem Code, überflüssigen Dateien, schlechten Praktiken, häufigen Fehlern und unzähligen anderen potenziellen Problemen.

Erweiterte benutzerdefinierte Felder

Advanced Custom Fields oder ACF ist mein absolutes Lieblings-Plugin. Es ermöglicht Entwicklern, schöne benutzerdefinierte Felder für ihre Themen und Plugins in einer intuitiven und schnellen Benutzeroberfläche zu erstellen. Sobald Sie fertig sind, können Sie ACF vollständig ausblenden und den generierten PHP-Code in Ihre Arbeit einfügen, um die Felder intakt zu halten. Ein gut ausgeführtes und äußerst nützliches Plugin!

Abfragemonitor

Mit dem Abfragemonitor können Sie genau sehen, was in Ihrer WordPress-Umgebung aus Sicht des Datenbankzugriffs vor sich geht. Sie können potenziell langsame oder redundante Abfragen abfangen, bevor sie in ein Live-Produkt gehen, und vorhandene Abfragen optimieren, um Ihren Code so viel schneller zu machen.

Bash-Skripte

Bash-Skripte enthalten eine Reihe von Befehlen, die nacheinander ausgeführt werden und zur weiteren Automatisierung von Aufgaben verwendet werden können. Beispielsweise ist es bereits einfach, WordPress mit WP-CLI zu installieren. Alles, was es braucht, ist Folgendes:

Diese Befehle müssen nacheinander abgesetzt werden, was etwas Zeit in Anspruch nimmt. Indem Sie dies in einer Datei platzieren, nennen wir sie install.sh , können Sie eine Vorlage zum Erstellen einer WP-Installation erstellen.

Legen Sie die Datei in dem Ordner ab, in dem Sie die Installation erstellen möchten, und geben Sie bash install.sh ein. Alle Befehle werden ausgegeben und in wenigen Sekunden haben Sie eine Site zum Laufen.

Durch das Hinzufügen von Parametern können Sie es noch nützlicher machen. Wenn Sie den Befehl wie folgt ausgeben: bash install.sh newsite können Sie den Parameter verwenden, um den Datenbanknamen, die URL und den Seitentitel auszufüllen.

Bash-Dateien können auch zum Erstellen endgültiger Builds (Entfernen überflüssiger Ordner und Dateien, Verschieben von Verzeichnissen usw.) und anderer ähnlicher Aufgaben nützlich sein. Sie können sogar von Gulp-Aufgaben aus ausgeführt werden, was Ihnen viel Flexibilität in Ihrem Arbeitsablauf gibt.

Verschiedene Werkzeuge

Browsererweiterungen sind eine große Hilfe beim Testen einer Website. Hier sind einige, die ich in meinem Workflow verwende.

Briefträger

Postman ist eine Chrome-Erweiterung zum Erstellen, Testen und Dokumentieren von APIs. Ich finde, dass Postman viel schneller ist als jedes andere Tool, wenn ich eine schnelle Anfrage senden muss, um zu sehen, wie eine API funktioniert.

Besonders praktisch ist die Möglichkeit, Anfragen zu speichern und zu verwalten. API-Tests mache ich seltener, aber wenn ich dazu komme, nimmt es den größten Teil meines Tages in Anspruch. Die Verwendung von etwas wie Postman macht mein Leben so viel einfacher.

EditThisCookie

EditThisCookie ist ein weiteres Beispiel für eine Chrome-Erweiterung, die ich nicht oft verwende, aber wenn ich es tue, spart es mir Stunden um Stunden. Damit können Sie die Cookies einer einzelnen Website anzeigen/löschen/bearbeiten. Das ist alles, aber oh mein Gott, wie praktisch es sein kann!

Seitenladezeit

Page Load Time macht das, was Sie denken, es analysiert die Seitenlast. Es kann auf wichtige Details wie DNS/Anfrage und Antwortzeiten eingehen, aber was mir gefällt, ist, dass es die Gesamtladezeit direkt in der Symbolleiste anzeigt. Super praktisch für schnelle Vergleiche.

JSON-Formatierer

Mein letzter Browser-Erweiterungseintrag in der Kategorie „Verschiedene Tools“ ist JSON Formatter, der erkennt, wenn eine Antwort einfach eine JSON-Zeichenfolge ist, und alles schön und ordentlich formatiert, anstatt nur einen Textblock auszugeben.

Franz

Das hat eigentlich nichts mit Entwicklung zu tun! Franz ist ein Tool, das mehrere Webservices unter einem Dach zusammenfassen kann. Meine Messenger-, Slack-, Skype-, Inbox by Gmail-, Trello-, Google Calendar- und Todoist-Apps werden alle in einem Fenster anstelle ihrer nativen Apps ausgeführt.

Es sieht alles genau so aus, als ob ich sie in ihrer üblichen Umgebung ausgeführt hätte, aber ich brauche nicht alle diese Symbole und kann einfacher zwischen ihnen wechseln. Ich erwähne Franz, weil es mir geholfen hat, mich besser zu konzentrieren und gleichzeitig besser zu kommunizieren.

VVV

Variating Vagrant Vagrants oder kurz VVV ist eine Open-Source-Vagrant-Konfiguration zum Entwickeln für WordPress und WordPress selbst. Es enthält alle Tools, die Sie für den Einstieg benötigen, einschließlich Entwicklungs-Builds von WordPress.

So viel mehr!

Es gibt so viele Tools, die ich nicht erwähnt habe, hauptsächlich weil ich sie einfach nicht benutze. Es sind großartige Tools, aber ich bin einfach nicht dazu gekommen, brauche sie nicht oder sie passen nicht in meinen Workflow. Hier ist eine Auswahlliste mit einigen großartigen Dingen, die Sie sich ansehen sollten:

• Unterstriche für eine großartige Theme-Boilerplate, die von der WordPress-Theme-Abteilung erstellt wurde
• Roots für einen ganzen WordPress-Stack, einschließlich Server, Anwendungsverwaltung und Starter-Theme. Ich finde das zu aufwendig für meinen Geschmack, aber es könnte Ihr Ding sein.
• WordPress Plugin Boilerplate für standardisierte objektorientierte Plugin-Entwicklung.

Machen Sie Ihre Entwicklungsumgebung zu Ihrer eigenen

Zusammenfassend sind dies die Tools, die ich verwende – sie sind möglicherweise nicht unbedingt die beste Lösung für Sie und auch nicht für jede Situation geeignet. Dieses Setup ist flexibel genug für meine Bedürfnisse, also nehmen Sie sich bitte die Zeit, Optionen zu recherchieren und einen Workflow zu erstellen, der sich für Sie richtig anfühlt.

Viel Glück!

• Entwicklung