Drei Entwicklungsautomatisierungs-Workflows für WordPress-Agenturen

Ich schreibe diesen Artikel in einem ruhigen Moment und denke über die Automatisierungsworkflows nach, die wir in unserer Agentur haben. Als Agenturinhaber und Entwickler verbringe ich unzählige Stunden damit, an der Automatisierung zu basteln, um Zeit zu sparen und die Produktivität zu steigern.

Die Nutzung von Workflows zur Entwicklungsautomatisierung ist eine der besten Möglichkeiten, die Produktivität in Ihrer WordPress-Agentur zu steigern und gleichzeitig die Codequalität sicherzustellen.

In unserer Agentur setzen wir insbesondere bei unseren Coding-Prozessen auf Automatisierung. Genau das wird dieser Artikel erklären. Obwohl ich Sie nicht durch die genauen Schritte zum Einrichten der Automatisierungsprozesse führen kann, haben Sie sicherlich ein gutes Verständnis dafür, wie diese Automatisierungsworkflows funktionieren und wie Sie Ihre eigenen Workflows einrichten können.

Für den Anfang verwenden wir eine automatisierte Bereitstellung basierend auf GitHub. Durch das Pushen von Dateien auf unsere Live- oder Staging-Server basierend auf GitHub-Commits vermeiden wir effektiv die Übertragung von Dateien über SFTP oder SCP und damit alle Fallstricke, die mit manuellen Übertragungen verbunden sind. Insbesondere wenn Sie mit mehreren Entwicklern oder Agenturen an demselben Projekt arbeiten, profitieren Sie von automatisierten Bereitstellungen mit Ihrem bevorzugten Versionskontrollsystem. Für die automatisierte Bereitstellung verwenden wir die Open-Source-Software Jenkins.

Zweitens verwenden wir in unseren Theme- und Plugin-Entwicklungsprozessen einen automatisierten WPGulp-basierten Workflow. Mit diesem Prozess können wir sicher sein, dass unser Code richtig formatiert, minimiert, verkettet, mit Präfixen versehen und vieles mehr wird. Ich werde Sie durch die Einrichtung von WPGulp und die Erstellung Ihres ersten Plugins mit diesem Workflow führen.

Schauen Sie sich auch die besten WordPress-Automatisierungs-Plugins an

Schließlich erkläre ich, wie Sie den Open-Source-Editor VS Code so einrichten, dass er beim Speichern einer PHP-Datei automatisch WordPress Coding Standards verwendet. Die richtige Codeformatierung gewährleistet die Lesbarkeit und hilft, Fehler zu vermeiden.

Erstellen automatisierter Bereitstellungsworkflows mit Jenkins

Denken Sie über das folgende Szenario nach.

Sie haben mehrere Entwickler in verschiedenen Städten (oder sogar Ländern), die an derselben Website arbeiten, wobei jeder Code über SFTP auf dem Server bereitstellt. Auch wenn Sie den Code in einem Repository verwalten, ist es durch die Übertragung per SFTP einfach, Codeänderungen ohne Vorwarnung zu überschreiben.

Automatisierte Bereitstellungsworkflows sind eine großartige Möglichkeit, die durch Codeüberschreibungen verursachten Probleme zu vermeiden.

Ich zeige Ihnen nun, wie Sie Ihren eigenen Jenkins-Server einrichten und ein GitHub-Repository konfigurieren, um beim Empfang eines Git-PUSH-Befehls automatisch Code auf Ihrem Server bereitzustellen.

Während Sie Github jetzt nativ mit Cloudways für die Bereitstellung verwenden können, bietet ein Jenkins-Server, der die Bereitstellung übernimmt, Ihrer Behörde viel mehr Flexibilität beim Schreiben und Bereitstellen von Code.

Häufige Anwendungsfälle für Jenkins sind:

• PHP-Dokumentation im Handumdrehen mit phpDox erstellen
• Integration von Tools wie NodeJS, Grunt, Gulp oder Bower in Ihren Workflow
• Gesamtabwicklung von Continuous Integration & Continuous Delivery Prozessen

Beginnen Sie mit dem Jenkins-Setup

Um Jenkins in Ihrer Agentur einzusetzen, müssen Sie es auf einem Server mit Root-Shell-Zugriff installieren. Es ist wichtig, dass Sie Skripts ausführen und Softwarepakete nach Bedarf auf dem Server installieren können.

Ein Wort zur Vorsicht: Jenkins zum Laufen zu bringen ist nicht in fünf Minuten erledigt – aber es lohnt sich.

Der erste Schritt besteht darin, Jenkins auf Ihrem Server zu installieren. Digital Ocean hat einen schönen Artikel über die Installation von Jenkins auf ihren Ubuntu-Servern, aber Sie können jeden anderen Server mit den entsprechenden Anforderungen verwenden.

Zweitens müssen Sie Ihr Projekt für Jenkins konfigurieren. Wenn Sie über die automatisierte Bereitstellung sprechen, möchten Sie wahrscheinlich nur, dass das Thema oder das Plugin, an dem Sie gerade arbeiten, bereitgestellt wird. Grundsätzlich würden Sie nicht die gesamte Website zu einem Git-Repository hinzufügen und mit Jenkins bereitstellen. In vielen Fällen wird nur das Theme oder das Plugin bereitgestellt, an dem Sie gerade arbeiten.

Daher sollten Sie Ihre Arbeitsverzeichnisse und GitHub-Repositorys so konfigurieren, dass sie von Ihrem neuen Jenkins-Server verarbeitet werden. Ich werde jedoch nicht vollständig in diesen Prozess eintauchen, da dies den Rahmen dieses Artikels sprengen würde. Stattdessen gebe ich Ihnen einen kurzen Überblick über das Notwendige und verweise Sie dann auf dieses fantastische Tutorial zu WebDevStudios, dem Sie leicht folgen können.

1. Stellen Sie sicher, dass Jenkins eingerichtet ist und ausgeführt wird.
2. Richten Sie das Git-Repository nach Bedarf ein (zB konfigurieren Sie .gitignore richtig).
3. Installieren Sie PHPLoy auf Ihrem System, da dies die Bereitstellung übernimmt.
4. Richten Sie eine Jenkins-Datei ein, die die Anweisungen für Jenkins enthält.
5. Fügen Sie die Pipeline zu Ihrem Jenkins-Server hinzu und führen Sie einen Testlauf durch.

Mit dieser kurzen Übersicht verfügen Sie über alle Ressourcen, die Sie für den Einstieg in Jenkins benötigen. Glauben Sie mir, wenn ich sage, dass es jede Woche meine Agenturstunden spart. Wir kümmern uns nicht mehr um Codebereitstellungen und können die Bereitstellungen für jedes Projekt problemlos überwachen.

Wenn Ihnen dieser Vorgang zu viel Arbeit macht, haben Sie Glück. Im Cloudways-Blog haben wir umfangreiche Artikel zu alternativen Bereitstellungsprozessen.

Schnellliste, damit Sie nichts verpassen

Diese umfangreiche Liste enthält alles, was Sie wissen müssen, bevor Sie auf die Schaltfläche Website veröffentlichen klicken.

Ich stimme den Cloudways-Nutzungsbedingungen und der Datenschutzrichtlinie zu

HOL ES DIR JETZT

Danke schön

Ihre herunterladbare Website-Checkliste ist auf dem Weg in Ihren Posteingang.

Einrichten von WPGulp für die Entwicklungsautomatisierung

Ein weiterer leistungsstarker Workflow, den wir mögen, ist die Verwendung des WPGulp-Frameworks für die Entwicklung von Themes und Plugins. WP-Kernmitarbeiter Ahmad Awais hat ein nettes Tool entwickelt, das hilft, die Entwicklung zu beschleunigen und gleichzeitig eine hohe Codequalität beizubehalten.

Die Gründe für die Verwendung von WPGulp sind vielfältig:

• Verbesserte Entwicklungsumgebung
• Optimierte CSS-Entwicklung
• JS-Verkettung, Verhöhnung und Verkleinerung
• Bildoptimierung
• Generieren von .pot-Dateien für I18N und I10N

Sie werden sehen, was ich meine, wenn Sie die readme.txt des Github-Repositorys für WPGulp (oben verlinkt) durchlesen. Lassen Sie mich Ihnen ein Beispiel dafür geben, wie wir WPGulp bei der Entwicklung eines benutzerdefinierten WordPress-Plugins verwenden.

Zuerst verwenden wir den WPPB-Generator , um die Basis-Plugin-Boilerplate zu erstellen. Indem wir immer wieder dieselbe Plugin-Boilerplate verwenden, stellen wir sicher, dass alle von uns entwickelten Plugins bekannt vorkommen und jeder Entwickler die gesuchten Funktionen leicht finden kann.

Als nächstes fügen wir WPGulp zum Plugin-Ordner hinzu. Dazu führen wir den Shell-Befehl „ npx wpgulp “ im Plugin-Ordner aus. Stellen Sie sicher, dass die Voraussetzungen NodeJS und NPM installiert sind.

Nachdem Sie WPGulp in Ihrem Plugin-Ordner installiert haben, wird Ihnen diese Befehlszeilenausgabe angezeigt:

Drittens konfigurieren wir wpgulp.config.js nach Bedarf für das Projekt. Diese Konfigurationsdatei verarbeitet alle Einstellungen, die WPGulp benötigt, einschließlich der Projekt-URL und der Pfade zu Assets (CSS, JS, Bilder). Zum Glück hat Ahmad fantastische Arbeit geleistet, die Konfigurationsdatei zu kommentieren, sodass jede Einstellung kristallklar ist.

Zuletzt lösen wir WPGulp aus und beginnen mit der Entwicklung. Durch einfaches Ausführen von „ npm start “ können wir mit der Entwicklung beginnen und gleichzeitig die volle Leistung von WPGulp nutzen.

Wenn Sie WPGulp in den oben beschriebenen Jenkins-Workflow integrieren möchten, müssen Sie nur Ihre .gitignore-Datei ändern, damit nur die optimierten Versionen Ihrer CSS-Dateien, JS-Skripte und Bilder versioniert werden (der Pfad zu diesen Dateien lautet in der Datei wpgulp.config.js angegeben).

Anwenden von WP-Codierungsstandards mit VS Code

Lassen Sie uns zum Schluss über ein Thema sprechen, zu dem jeder Entwickler eine besondere Beziehung hat: Codeformatierung. Wenn Sie jemals Code gelesen haben, der von jemand anderem geschrieben wurde, werden Sie wahrscheinlich wütend auf falsch eingerückte if/else-Klauseln, fehlende Leerzeichen oder Bedingungsprüfungen, die nicht dem Yoda-Stil folgten.

In unserer Agentur verwenden wir zum Schreiben unseres Codes das Open-Source-Tool VS Code. Wir haben zuvor PHPStorm verwendet, aber festgestellt, dass der VS-Code viel mehr Flexibilität und Benutzerfreundlichkeit bietet.

WordPress hat Codierungsstandards und Best Practices implementiert, und das aus gutem Grund. Bei Hunderttausenden von Entwicklern im Ökosystem ist es zwingend erforderlich, den Code zumindest etwas ähnlich zu strukturieren, indem bestimmte Standards befolgt werden.

Als Menschen haben wir jedoch eine begrenzte Gedächtniskapazität. Und sich an Codierungsstandards zu erinnern, ist sicherlich nicht die beste Nutzung dieser Kapazität (ich glaube, sie sollte für Dinge reserviert werden, die nicht automatisiert werden können). Um Speicherplatz in Ihrem Speicher freizugeben und beim Formatieren von Code Zeit zu sparen, können Sie Ihren Code von VS Code gemäß den WordPress-Codierungsstandards automatisch formatieren lassen.

Die Einrichtung hängt von Ihrem Betriebssystem ab, ist aber recht einfach. Für Mac können Sie Jasons hervorragendem Tutorial folgen. Für Windows-Benutzer gibt es hier eine gute Erklärung. Und für Linux-Benutzer gibt es diese Anleitung von Tom McFarlin.

Grundsätzlich hängt die Implementierung der WP-Coding-Standards in VS Code von zwei Dingen ab:

• PHP-Codesniffer
• Der Regelsatz der WP Coding Standards (oft als „wpcs“ bezeichnet)

PHP Codesniffer ist ein Tool zum Modifizieren von PHP-Code (wie Sie vielleicht schon erraten haben), das Sie mit dem Regelsatz für die WP Coding Standards verknüpfen und als Erweiterung in VS Code hinzufügen können.

Dann müssen Sie VS Code nur mitteilen, welcher Regelsatz auf Ihren PHP-Code angewendet werden soll und ob er beim Tippen oder beim Speichern einer Datei angewendet werden soll. Wir bevorzugen, dass PHP Codesniffer beim Speichern ausgeführt wird, da es ziemlich überwältigend werden kann, wenn Sie es ausführen, während Sie den Code eingeben. Der Screenshot unten zeigt ein Beispiel für die PHP-Einstellungen, die wir in unserer VS Code-Konfiguration verwenden.

Nutzen Sie einen dieser Workflows bereits in Ihrem Agenturalltag? Oder haben Sie andere Routinen implementiert? Lass es mich in den Kommentaren unten wissen! Wenn Sie Fragen zur Umsetzung der beschriebenen Prozesse haben, zögern Sie nicht, einen Kommentar zu hinterlassen – ich springe gerne ein und helfe Ihnen weiter.