Wie man einen effektiven WordPress-Workflow für Entwickler erstellt

WordPress ist eine großartige Plattform, aber manchmal kann sie auch ein bisschen unorganisiert sein – zumindest aus der Sicht des Codes. Das liegt daran, dass der Code viele Iterationen durchlaufen hat und bei Aktualisierungen manchmal nicht so effizient kodiert ist, wie es sein könnte.

Das bedeutet aber nicht, dass dein Entwicklungsprozess genauso ablaufen muss. Während unordentlicher Code oft mit schnellen Produktionsplänen entschuldigt wird, hast du als Webentwickler/in die Möglichkeit, dich von anderen abzuheben, indem du einen guten Arbeitsablauf einführst.

In diesem Artikel findest du einige Tipps, die dir helfen, WordPress-Websites mit den richtigen Tools zu entwickeln. Er enthält außerdem eine Schritt-für-Schritt-Anleitung, die dir hilft, diese Tipps zu befolgen.

Wenn du diesen Leitfaden befolgst, kannst du einige der häufigsten Probleme vermeiden, die bei der Entwicklung von WordPress-Websites auftreten. Und du kannst eine Website erstellen, die leicht zu pflegen und zu aktualisieren ist.

Also, lass uns loslegen!

Eigenschaften von qualitativ hochwertigem Code

Bevor wir uns mit unserem vollständigen Leitfaden zur Erstellung eines WordPress-Entwicklungsworkflows befassen, sollten wir einen Moment innehalten und besprechen, warum qualitativ hochwertiger Code wichtig ist.

Wenn du über den Code für deine Website nachdenkst, solltest du ein paar wichtige Eigenschaften im Auge behalten. Diese Eigenschaften sorgen dafür, dass dein Code sauber, übersichtlich und leicht verständlich ist.

Hier sind einige Merkmale für hochwertigen Code:

• Gestrafft
• Leicht nachvollziehbar
• Modular
• Gut kommentiert
• Wiederverwendbar und wartbar

Diese Attribute mögen viel erscheinen, aber keine Sorge. Wir werden in diesem Leitfaden ausführlich darauf eingehen, wie du sie erreichst. Aber zuerst wollen wir verstehen, warum dein Entwicklungsworkflow diese Standards einhalten muss.

Warum die WordPress-Entwicklung erstklassige Coding-Praktiken braucht

Damit eine WordPress-Website richtig funktioniert, muss der Code, aus dem die Seite besteht, von hoher Qualität sein. Das ist für WordPress-Websites besonders wichtig, weil sie oft komplex sind und viele verschiedene Komponenten enthalten.

Es gibt viele Gründe, warum Kodierungspraktiken für die WordPress-Entwicklung wichtig sind:

1. WordPress-Websites sind komplex.
2. Eine einzige Codezeile kann eine große Wirkung haben.
3. Gut geschriebener und gut getesteter Code ist wichtig.
4. Hochwertiger Code ist leichter zu pflegen.
5. Hochwertiger Code kann die Leistung verbessern.

Wenn du diese Punkte bei deiner Entwicklungsplanung im Hinterkopf behältst, kannst du sozusagen den Preis im Auge behalten.

Tipps zur Verbesserung des WordPress-Workflows

Jetzt, wo wir darüber gesprochen haben, warum es wichtig ist, gut geschriebenen Code zu haben, wollen wir uns ein paar Tipps ansehen, mit denen du deinen WordPress-Workflow für jedes einzelne Projekt verbessern kannst. Jeder der folgenden Tipps kann dazu beitragen, dass dein WordPress-Code sauber und optimiert ist, was deine Priorität sein sollte.

Wähle einen guten Hosting-Anbieter

Wenn es um das Hosting deiner WordPress-Website geht, ist die Wahl des richtigen Anbieters entscheidend für die optimale Leistung, Sicherheit und das allgemeine Nutzererlebnis. Ein zuverlässiger Hosting-Service kann die Geschwindigkeit, Stabilität und Skalierbarkeit deiner Website erheblich beeinflussen. Kinsta ist eine ausgezeichnete Wahl für das Hosting deiner WordPress-Website und bietet eine breite Palette von Funktionen und Vorteilen, die zu einem hervorragenden Hosting-Erlebnis beitragen.

1. Powered by Google Cloud Platform (GCP) C2: Kinsta nutzt die hochmoderne Infrastruktur der Google Cloud Platform, insbesondere die rechenoptimierten C2-Maschinen. Diese leistungsstarke Cloud-Infrastruktur sorgt für blitzschnelle Ladezeiten und erhöhte Zuverlässigkeit und bietet eine solide Grundlage für deine Website.
2. Containerisierte Website-Verwaltung: Kinsta verfolgt einen Container-basierten Ansatz für die Website-Verwaltung. Das bedeutet, dass jede Website in einem eigenen Container isoliert ist und keine Störungen durch andere Websites auf demselben Server auftreten können. Diese Isolierung sorgt für mehr Sicherheit und Stabilität und verhindert das Risiko von Ressourcenkonflikten.
3. Fortschrittliche Caching-Mechanismen: Caching ist wichtig, um die Geschwindigkeit deiner Website zu erhöhen und die Serverlast zu verringern. Kinsta bietet Caching auf Serverebene, Edge-Caching, automatisches Page-Caching und die Integration von Content Delivery Networks (CDN). Dieses intelligente Caching-System sorgt dafür, dass deine Seiten schnell und effizient für Besucher auf der ganzen Welt geladen werden. Du kannst auch die Kinsta-API nutzen, um den Cache oder Edge-Cache deiner Website zu löschen.
4. Performance-Optimierung: Kinsta ist bestrebt, erstklassige Tools zur Leistungsoptimierung bereitzustellen. Sie bieten Funktionen wie PHP-Unterstützung, HTTP/3 und MariaDB für schnellere Datenbankabfragen. Mit der leistungsorientierten Infrastruktur von Kinsta ist deine Website gut gerüstet, um mit Trafficspitzen fertig zu werden.
5. Kostenlose Staging-Umgebung: Jede WordPress-Installation bei Kinsta kann ohne zusätzliche Kosten eine eigene Staging-Umgebung haben. So kannst du Updates, Plugins und Änderungen sicher testen, bevor du sie auf die Live-Site überträgst, und ein reibungsloses Nutzererlebnis gewährleisten.
6. Sicherheitsmaßnahmen: Kinsta nimmt die Sicherheit ernst und setzt Maßnahmen wie DDoS-Erkennung, Hardware-Firewalls und Betriebszeitüberwachung ein.
7. Entwicklerfreundliche Funktionen: Für Entwickler bietet Kinsta Funktionen wie SSH-Zugang, WP-CLI und Git-Integration. Diese Tools ermöglichen eine einfachere Entwicklung, Versionskontrolle und eine effiziente Zusammenarbeit im Team.

Staging nutzen

Eine Staging-Site ist eine Kopie deiner Live-Site, die du nutzen kannst, um Änderungen zu testen, bevor du sie auf deiner Live-Site vornimmst. Das ist ein wertvolles Werkzeug, denn so kannst du mit Änderungen experimentieren, ohne dass sich diese auf deine Live-Site auswirken.

Der Einsatz einer Staging-Site hat viele Vorteile:

1. Teste die Änderungen, bevor du sie auf deiner Live-Site durchführst.
2. Vermeide mögliche Probleme, indem du auf einer Staging-Site testest.
3. Vergewissere dich, dass deine Änderungen wie vorgesehen funktionieren.
4. Du vermeidest mögliche Ausfallzeiten auf deiner Live-Site.
5. Reduziere das Risiko, dass deine Live-Site kaputt geht.

Bei Kinsta hast du die Möglichkeit, für jede WordPress-Installation eine eigene Staging-Umgebung zu erstellen, in der du neue Versionen, Plugins und Code testen und allgemeine Entwicklungsarbeiten durchführen kannst. Diese Staging-Umgebung lässt sich leicht einrichten und mit deinem Team teilen. Für zusätzliche Staging-Umgebungen, Staging-Umgebungen, die sich eng an dein Live-Setup anlehnen, oder ressourcenintensive Tests und Entwicklungen kannst du das Premium Staging Environment Add-on nutzen.

Außerdem bietet Kinsta die Möglichkeit, diese Umgebungen über die Kinsta-API programmatisch zu erstellen. Damit kannst du auf die Umgebungsdetails deiner Website zugreifen, Aktionen wie das Löschen oder Klonen einer Umgebung durchführen und sogar einfache Umgebungen ohne oder mit einer bereits installierten WordPress-Installation erstellen.

WordPress Core, Plugins und Themes sind in PHP geschrieben. Kinsta unterstützt immer die aktuellste Version von PHP und unterstützt verschiedene Versionen für Staging-Umgebungen. Der Wechsel zwischen den PHP-Versionen erfolgt mit nur wenigen Klicks im MyKinsta-Dashboard.

Versionskontrolle einführen

Die Versionskontrolle ist ein System, das Änderungen an Dateien im Laufe der Zeit verfolgt. Das ist für die WordPress-Entwicklung sehr wertvoll, denn so kannst du Änderungen nachverfolgen und bei Bedarf zu früheren Versionen zurückkehren.

Für die meisten bedeutet das, Git zu verwenden, ein beliebtes Versionskontrollsystem, das von Kinsta unterstützt wird. Git ist ein kostenloses und quelloffenes, verteiltes Versionskontrollsystem, mit dem sich sowohl kleine als auch sehr große Projekte schnell und effizient bearbeiten lassen. Mit Kinsta kannst du dich ganz einfach mit deinem Git-Repository von GitHub, GitLab und Bitbucket aus verbinden.

Das ist besonders nützlich, wenn du mit einem großen, verteilten Team arbeitest. Das Letzte, was du willst, ist, dass es in deiner WordPress-Installation mehrere Versionen deiner functions.php-Datei gibt, die alle einen leicht unterschiedlichen Namen haben, weil mehrere Personen gleichzeitig Änderungen vorgenommen haben.

Automatisierte Backups planen

Einer der wichtigsten Aspekte der WordPress-Entwicklung sind Backups. Backups sind lebenswichtig, denn sie ermöglichen es dir, deine Website wiederherzustellen, wenn etwas schief läuft.

Es gibt viele Möglichkeiten, Backups zu automatisieren. Wenn du Kinsta nutzt, hast du automatisch Zugriff auf sechs Arten von Backups: kostenlose automatische/tägliche, optionale stündliche, manuelle, vom System generierte, herunterladbare und externe Premium-Backups, die automatisch an deinen Amazon S3- oder Google Cloud-Speicher gesendet werden und die du als Teil deiner Disaster-Recovery-Strategie nutzen kannst.

Dieses Add-on erstellt automatisch Backups deiner WordPress-Website in einem festgelegten Rhythmus und speichert sie auf einem externen Server.

Wenn du Kinsta nicht nutzt, kannst du WordPress-Plugins für die Datensicherung verwenden. Das ist eine praktikable Strategie, aber bedenke, dass Plugins in Konflikt miteinander geraten und die Leistung deiner Website beeinträchtigen können.

Nutze die Vorteile von Linting

Linting ist die Überprüfung des Codes auf Fehler. Das ist für die WordPress-Entwicklung sehr wertvoll, denn es kann dir helfen, Fehler in deinem Code zu finden und zu beheben.

Viele Code-Editoren tun dies automatisch, aber wenn du sicher sein willst, dass dein Code-Editor diese Funktion bietet, solltest du einen der folgenden Code- und Texteditoren verwenden:

• Visual Studio Code: Dieser Code-Editor verfügt standardmäßig über Linting sowie über Plugins, die das Linting unterstützen, wie z. B. ESLint.
• Sublime Text: Dieser Code-Editor verfügt über viele Funktionen, darunter auch Linting.
• Atom: Auch bei diesem Code-Editor ist Linting mit inbegriffen.
• Vim: Dieser Texteditor bietet ebenfalls Linting und viele andere Funktionen.
• PHPStorm: Dies ist eine kostenpflichtige Entwicklungsumgebung, die Linting anbietet.

Wenn du deine Website aus einem Skript erstellst, kannst du auch Linting-Pakete einbinden, um sie beim Erstellen zu testen.

Verwende einen Code-Generator

Ein Code-Generator ist ein Werkzeug, das automatisch Code für dich generieren kann. Das ist für die WordPress-Entwicklung sehr wertvoll, weil es dir Zeit spart und dir hilft, Fehler zu vermeiden.

Es gibt viele Code-Generatoren, aber einige der beliebtesten sind:

• GenerateWP: Dieser Codegenerator kann Code für benutzerdefinierte Beitragstypen, Taxonomien, Meta-Boxen und vieles mehr generieren.
• Hasty: Dieser Codegenerator kann Code für benutzerdefinierte Beitragstypen, Taxonomien und Felder erzeugen.
• Nimbus Themes Code Generator: Mit diesem Codegenerator kannst du Code für benutzerdefinierte Beitragstypen, Taxonomien und Felder erstellen.

WP-CLI verwenden

WP-CLI ist eine Befehlszeilenschnittstelle für WordPress. Sie ist wertvoll für die WordPress-Entwicklung, denn sie ermöglicht es dir, deine WordPress-Website von der Kommandozeile aus zu verwalten. Du hast bei allen Kinsta-Tarifen Zugriff auf die WP-CLI, da sie standardmäßig auf allen Kinsta-Servern vorhanden ist.

Das ist besonders nützlich, wenn du Aufgaben erledigen musst, die sich wiederholen oder viele Schritte erfordern. Mit der WP-CLI kannst du zum Beispiel WordPress installieren, Beiträge und Seiten erstellen, Plugins und Themes installieren und vieles mehr. Es ist auch hilfreich, wenn du Änderungen an mehreren Websites gleichzeitig vornehmen musst.

Verwende ein WordPress-Entwicklungsframework

Ein WordPress-Entwicklungsframework ist ein Werkzeug, das dir helfen kann, deinen Arbeitsablauf zu rationalisieren. Das ist für die WordPress-Entwicklung sehr wertvoll, weil es dir Zeit spart und dir hilft, Fehler zu vermeiden.

Es gibt viele WordPress-Entwicklungsframeworks, aber einige der beliebtesten sind:

• Genesis: Dieses Framework von StudioPress wurde entwickelt, damit du WordPress-Seiten schneller erstellen kannst.
• Underscores: Dieses Framework von Automattic soll dir helfen, WordPress-Themes schnell zu entwickeln.
• Foundation: Dieses Framework von Zurb hilft dir, responsive WordPress-Seiten zu erstellen.
• Bootstrap: Dieses Framework von Twitter ist eine sehr hilfreiche Methode, um responsive Designs für WordPress-Websites zu erstellen.

Verwende Task-Runner

Ein Task-Runner ist ein Tool, das Aufgaben automatisieren kann. Das ist für die WordPress-Entwicklung sehr wertvoll, weil es dir Zeit spart und dir hilft, Fehler zu vermeiden. Außerdem kannst du damit mehrere Aufgaben gleichzeitig ausführen.

Es gibt viele Task-Runner, aber einige der beliebtesten sind:

• Gulp: Mit diesem Task-Runner lassen sich Aufgaben wie CSS-Vorverarbeitung, JavaScript-Linting und vieles mehr automatisieren.
• Grunt: Grunt ist ein Javascript-Taskrunner, der dir hilft, viele deiner sich wiederholenden Aufgaben zu automatisieren.
• Webpack: Mit diesem Task-Runner kannst du Aufgaben wie das Bündeln von JavaScript-Dateien automatisieren und vieles mehr.

Mach dich jetzt mit Vue.js oder React vertraut

Auch wenn du Vue.js oder React nicht sofort einsetzen wirst, ist es wichtig, dass du dich jetzt mit diesen Frameworks vertraut machst. Das ist für die WordPress-Entwicklung wichtig, denn sie werden immer beliebter und kommen immer häufiger zum Einsatz.

Vue.js ist ein JavaScript-Framework, mit dem du reaktive Benutzeroberflächen erstellen kannst. React ist eine JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen.

Sowohl Vue.js als auch React sind eine beliebte Wahl für die WordPress-Entwicklung, weil sie schnell, leichtgewichtig und einfach zu benutzen sind und für die Umwandlung von WordPress in ein Headless CMS unerlässlich sind.

Hier findest du eine detaillierte Anleitung, wie du mit Vue.js und React.js eine headless WordPress-Website erstellen kannst.

Warum es wichtig ist, sich Zeit für die Planung des WordPress-Workflows zu nehmen

WordPress-Websites sind komplex und es ist wichtig, einen gut geplanten Arbeitsablauf zu haben, bevor du ein Projekt beginnst. Wenn du deine Arbeitsabläufe planst, kannst du Zeit sparen und mögliche Probleme auf dem Weg vermeiden.

Die Planung deines WordPress-Workflows hat viele Vorteile:

• Du sparst Zeit, wenn du weißt, was getan werden muss.
• Vermeide mögliche Probleme, indem du im Voraus planst.
• Du stellst sicher, dass alle notwendigen Aufgaben erledigt werden.
• Du stellst sicher, dass dein Arbeitsablauf effizient und effektiv ist.
• Verhindere Probleme bei der Übergabe von Projekten an Mitarbeiter/innen oder Kund/innen.

Der ideale WordPress-Workflow für die Entwicklung

Es gibt viele Möglichkeiten, den WordPress-Workflow anzugehen, aber es gibt einige wesentliche Schritte, die in deinem Entwicklungsprozess enthalten sein sollten.

Schritt 1: Einrichten einer lokalen Entwicklungsumgebung

Der erste Schritt in jedem WordPress-Workflow sollte das Einrichten einer lokalen Entwicklungsumgebung sein. Das ist wichtig, denn so kannst du offline an deiner WordPress-Website arbeiten, was Zeit spart und Fehler vermeidet.

Es gibt viele Möglichkeiten, eine lokale Entwicklungsumgebung einzurichten, es kommt nur darauf an, welches Setup du bevorzugst. Wir empfehlen dafür DevKinsta (WordPress Multisite wird unterstützt). Mit DevKinsta kannst du deine Projekte lokal klonen und entwickeln. Sobald deine Updates fertig sind, kannst du sie auf Kinsta pushen.

DevKinsta ist vollständig in MyKinsta und die Hosting-Plattform von Kinsta integriert, sodass du lokal entwickeln und Updates direkt in eine Staging-Umgebung auf Kinsta pushen kannst. Wir empfehlen, Kinsta Staging und das Premium Staging Environments Add-on zu verwenden. Damit erhältst du eine komplette WordPress-Entwicklungsumgebung, die du mit einem Klick in Betrieb nehmen kannst.

Du kannst auch an mehreren Projekten gleichzeitig arbeiten und Änderungen zusammenführen, bevor du live gehst. Außerdem gibt es integrierte A/B-Tests, Plugin-Kompatibilitätstests und ressourcenintensive Tests, mit denen du sicherstellen kannst, dass deine Builds richtig strukturiert sind.

Um mit dem Premium Staging Environments Add-on loszulegen, erwirb es über dein Kinsta-Konto. Um die Staging-Umgebung zu aktivieren, gehst du zu MyKinsta, klickst auf das Dropdown-Menü mit der Standardumgebung Live und dann auf Neue Umgebung erstellen oben auf dem Bildschirm.

Schritt 2: Versionskontrolle einrichten

Der zweite Schritt in jedem WordPress-Workflow sollte das Einrichten der Versionskontrolle sein. Das ist wichtig, denn so kannst du Änderungen an deinem Code verfolgen und bei Bedarf zu früheren Versionen zurückkehren.

Dazu kannst du Git verwenden, das von Kinsta unterstützt wird, indem du wie folgt vorgehst:

1. Ein Git-Repository erstellen

Du kannst ein Repository auf GitHub, GitLab oder Bitbucket erstellen, um deinen Code zu speichern. Für diese Demonstration beschreiben wir, wie du es auf GitHub erstellst. Für die anderen unterstützten Plattformen ist der Arbeitsablauf sehr ähnlich.

Um ein Repository auf GitHub zu erstellen, befolge die folgenden Schritte:

1. Melde dich bei deinem GitHub-Konto an und klicke auf das + Zeichen in der oberen rechten Ecke.
2. Wähle Neues Repository aus dem Dropdown-Menü.
3. Gib einen Namen für dein Repository und eine Beschreibung ein und klicke dann auf Repository erstellen.

2. Klone das Repository in deine lokale Entwicklungsumgebung

Um ein GitHub-Repository zu klonen, befolge die folgenden Schritte:

1. Klicke auf die Schaltfläche Klonen deines GitHub-Repositorys.
2. Kopiere die URL für dein Repository.
3. Öffne dein Terminal oder deine Eingabeaufforderung und wechsle in das Verzeichnis, in das du dein Repository klonen möchtest.
4. Gib den folgenden Befehl ein und ersetze ihn durch die URL, die du von GitHub kopiert hast:

git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git

Damit wird dein Projektarchiv auf deinen Computer geklont. Jetzt kannst du Dateien hinzufügen und Änderungen vornehmen und sie anschließend wieder auf GitHub pushen.

3. Dateien hinzufügen und Änderungen committen

1. Füge die Dateien, die du mit Git verfolgen willst, zum Verzeichnis des Projektarchivs auf deinem Computer hinzu.
2. Gib git add gefolgt von dem Namen der Datei ein oder benutze git add ., um alle Dateien im Verzeichnis hinzuzufügen.
3. Gib git commit -m ein, gefolgt von einer Nachricht, in der du die Änderungen beschreibst, die du vorgenommen hast.
4. Um deine Änderungen auf GitHub zu veröffentlichen, gib git push ein.

Du kannst weiterhin Änderungen an den Dateien auf deinem Computer vornehmen und sie an GitHub weiterleiten. Wenn du die neueste Version der Dateien von GitHub abrufen willst, kannst du den Befehl git pull verwenden.

Schritt 3: Lokale Entwicklung

Nachdem du deine lokale Entwicklungsumgebung und die Versionskontrolle eingerichtet hast, ist es an der Zeit, mit der lokalen Entwicklung deiner WordPress-Website zu beginnen.

Wenn du lokal entwickelst, kannst du Änderungen auf deiner Staging-Site testen, bevor du sie live schaltest. Das ist wichtig, weil du so Fehler oder Bugs abfangen kannst, bevor sie sich auf deine Live-Site auswirken.

Um Änderungen von deiner lokalen Entwicklungsumgebung auf deine Staging-Site zu übertragen, kannst du DevKinsta mit nur wenigen Klicks verwenden.

Schritt 4: WP-CLI verwenden

WP-CLI ist eine Befehlszeilenschnittstelle für WordPress, mit der du deine WordPress-Website über das Terminal verwalten kannst. Das kann für Aufgaben wie das Anlegen und Verwalten von Benutzern, das Installieren und Aktualisieren von Plugins und vieles mehr nützlich sein.

Um WP-CLI zu installieren, befolge diese Schritte:

1. Lade die Datei WP-CLI.phar herunter.
2. Verschiebe die Datei in ein Verzeichnis in deinem PATH (z.B. /usr/local/bin).
3. Benenne die Datei in wp um.
4. Mache die Datei ausführbar (z.B. chmod +x /usr/local/bin/wp).
5. Teste, ob WP-CLI installiert ist, indem du wp --version ausführst.

Von dort aus kannst du WP-CLI verwenden, um deine WordPress-Website über das Terminal zu verwalten. Eine vollständige Liste der Befehle findest du in unserer ausführlichen Anleitung zu WP-CLI v2.

Schritt 5: Automatisiere deinen Workflow mit Gulp

Gulp ist ein Task-Runner, mit dem du Aufgaben wie das Minifizieren von CSS- und JavaScript-Dateien, das Kompilieren von Sass-Dateien und vieles mehr automatisieren kannst.

Um Gulp zu verwenden, installiere es global auf deinem System. Vergewissere dich dazu, dass Node.js und npm auf deinem Computer installiert sind, indem du node -v und npm -v aufrufst. Wenn eine Version für beides angezeigt wird, kannst du Gulp mit dem folgenden Befehl installieren:

npm install gulp-cli -g

Sobald Gulp installiert ist, kannst du eine gulpfile.js-Datei im Stammverzeichnis deines Projekts erstellen. Diese Datei enthält den Code für deine Gulp-Aufgaben.

Die folgende gulpfile.js-Datei enthält zum Beispiel eine Aufgabe zum Mining von CSS-Dateien:

var gulp = require('gulp');

var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function() {

return gulp.src('src/*.css')

.pipe(cleanCSS({compatibility: 'ie8'}))

.pipe(gulp.dest('dist'));

});

Um diese Aufgabe auszuführen, kannst du den folgenden Befehl verwenden:

gulp minify-css

Schritt 6: Linting verwenden

Linting-Tools sind Werkzeuge zur statischen Codeanalyse, die dir helfen, Fehler in deinem Code zu finden. Für diesen Artikel verwenden wir Atom.io mit den folgenden Linting-Paketen:

• atom-beautify
• atom-ternjs
• linter
• linter-eslint
• linter-php
• linter-sass-lint

Navigiere in deinem Terminal zu dem Verzeichnis, das du linten willst, und führe den folgenden Befehl aus:

find . -name "*.js" -o -name "*.scss" | xargs eslint --fix

Dadurch werden alle JavaScript- und Sass-Dateien in deinem Projekt gelintet.

Wenn du eine bestimmte Datei lintest, kannst du den folgenden Befehl ausführen:

eslint --fix file-name.js

Ersetze Dateiname.js durch den Namen der Datei, die du lintest.

Schritt 7: Verwende einen CSS-Präprozessor

Ein CSS-Präprozessor ist ein Werkzeug, mit dem du CSS in einer anderen Sprache schreiben und dann in CSS kompilieren kannst. Die beiden beliebtesten CSS-Präprozessoren sind Sass und Less.

In diesem Leitfaden werden wir Sass verwenden. Um Sass zu verwenden, musst du zunächst das Sass-Kommandozeilentool installieren. Dazu führst du den folgenden Befehl aus:

gem install sass

Sobald Sass installiert ist, kannst du den folgenden Befehl verwenden, um eine Sass-Datei in CSS zu kompilieren:

sass input.scss output.css

Ersetze input.scss durch den Namen deiner Sass-Datei und output.css durch den Namen der CSS-Datei, die du erstellen willst.

Wenn du deine Sass-Datei auf Änderungen überwachen und automatisch neu in CSS kompilieren möchtest, kannst du dem Befehl das Flag --watch hinzufügen:

sass --watch input.scss output.css

Du kannst auch ein Sass-Verzeichnis überwachen und in ein anderes Verzeichnis ausgeben. Das ist nützlich, wenn du mehrere Sass-Dateien hast und den gesamten Prozess mit einem Befehl abwickeln willst. Dazu trennst du die beiden Verzeichnisse mit einem Doppelpunkt:

sass --watch app/sass:public/stylesheets

Sass überwacht kontinuierlich alle Dateien im Ordner app/sass auf Änderungen und kompiliert dann die resultierenden CSS-Dateien im Ordner public/stylesheets. Du kannst die Ordnerpfade auch an deine eigene Ordnerstruktur anpassen.

Schritt 8: Nutze die WordPress Rest API

Die WordPress REST API ist ein leistungsfähiges Tool, mit dem du von außerhalb der WordPress-Administrationsoberfläche mit deiner WordPress-Website interagieren kannst.

Mit der WordPress REST API kannst du individuelle Lösungen für deine WordPress-Website erstellen. Du könntest die WordPress REST API zum Beispiel nutzen, um eine mobile App für deine WordPress-Website zu erstellen oder um ein benutzerdefiniertes Dashboard zu erstellen.

Um mit der WordPress REST API zu arbeiten, musst du dich über die WordPress-Befehlszeilenschnittstelle mit ihr verbinden. Wir haben eine Anleitung zum Einrichten der WordPress REST API veröffentlicht, die dich durch die einzelnen Schritte führt.

Schritt 9: Erstelle und befolge einen Style Guide

Ein Styleguide ist eine Sammlung von Richtlinien für die Programmierung und Gestaltung deiner WordPress-Website. Ein Styleguide hilft dir dabei, sicherzustellen, dass dein Code konsistent und leicht zu lesen ist.

Es gibt eine Reihe verschiedener Styleguides, die du für dein WordPress-Projekt verwenden kannst. Wir empfehlen, die WordPress Coding Standards als Ausgangspunkt zu verwenden. Im Laufe der Zeit wirst du jedoch wahrscheinlich zahlreiche Änderungen und Ergänzungen vornehmen.

Jeder Style Guide, den du erstellst, wird sich wahrscheinlich ständig ändern. Wichtig ist jedoch, dass er eine festgelegte Sammlung von Schritten und Richtlinien enthält, an die sich alle Entwickler/innen in deinem Team halten müssen.

Schritt 10: Schalte deine Seite live

Wenn du alle oben genannten Schritte abgeschlossen hast, ist deine WordPress-Website bereit, live geschaltet zu werden. Wenn du ein Deployment-Plugin wie WP Pusher verwendest, ist dieser Prozess so einfach wie das Pushen deines Codes in dein remotes Git-Repository.

Du kannst dies direkt in Kinsta tun, indem du zu MyKinsta > Sites gehst, deine Site auswählst und dann auf Umgebungsaktionen klickst. Dort klickst du auf Push to Live.

Aktiviere das Kästchen neben Dateien oder Datenbank (um beide zu aktivieren), gib den Namen der Website ein und klicke dann auf Push to Live.

Wenn du kein Deployment-Plugin oder Git verwendest, kannst du deine WordPress-Datenbank einfach aus deiner lokalen Entwicklungsumgebung exportieren und auf deinen Live-Server importieren. Dazu gehst du in deinem WordPress-Admin-Dashboard auf Extras > Exportieren.

Wähle dann Alle Inhalte aus den Exportoptionen und klicke auf die Schaltfläche Exportdatei herunterladen . Sobald du deine Datenbankdatei hast, kannst du sie auf deinen Live-Server importieren, indem du in deinem WordPress-Admin-Dashboard auf Extras > Importieren gehst. Wähle die Datenbankdatei aus, die du gerade exportiert hast, und klicke auf die Schaltfläche Datei hochladen und importieren .

Du kannst deine WordPress-Dateien auch manuell von deiner lokalen Entwicklungsumgebung auf deinen Live-Server übertragen, indem du einen SFTP-Client wie FileZilla benutzt. Verbinde dich einfach per FTP mit deinem Live-Server und ziehe deine WordPress-Dateien per Drag & Drop in das Verzeichnis public_html.

Sobald du deine WordPress-Website live geschaltet hast, kannst du in aller Ruhe alles testen und sicherstellen, dass alles so funktioniert, wie es soll.

Dies ist auch ein guter Zeitpunkt, um sicherzustellen, dass Kinsta APM ordnungsgemäß funktioniert. Dieses Tool zur Leistungsüberwachung überwacht die Leistung deines Servers und sorgt dafür, dass deine Website so schnell wie möglich läuft. Es liefert dir wichtige Einblicke in die WordPress-Performance und Metriken, ohne dass du für Drittanbieter-Abonnements anderer APM-Dienste bezahlen musst.

Um das APM-Tool zu aktivieren, melde dich bei MyKinsta an, wähle die Website aus, die du überwachen möchtest, navigiere zum APM-Tab deiner Website und klicke auf die Schaltfläche APM aktivieren. Weitere Informationen findest du in unserer Dokumentation.

Zusammenfassung

Wie du siehst, gibt es eine Menge zu beachten, wenn du einen WordPress-Entwicklungsworkflow erstellen willst. Aber wenn du diese Schritte befolgst, kannst du sicherstellen, dass deine WordPress-Website gut organisiert und einfach zu verwalten ist und reibungslos läuft.

Und du kannst nichts falsch machen, wenn du dich auf Kinsta-Produkte wie DevKinsta, das Premium Staging Environments Add-on und Kinsta AMP verlässt. Diese Tools machen deinen WordPress-Entwicklungsworkflow noch einfacher und effizienter.

Weitere Kinsta-Funktionen wie containerisierte Websites auf der GCP-Infrastruktur, die auf C2-Maschinen mit 37 Rechenzentren laufen, die Premium-Integration mit Cloudflare für ein Hochleistungs-CDN, das deine Website von 260+ Points of Presence (PoPs) aus bedient, DDoS-Schutz durch eine Firewall auf Unternehmensniveau, Malware Security Pledge, Edge Caching, PHP-Versionswechsel mit einem Klick und Uptime-Monitoring (mit 99% Uptime-Garantie) sorgen dafür, dass deine Website schnell und sicher läuft und zuverlässig im Internet verfügbar ist.

Hast du Fragen zur Erstellung eines WordPress-Entwicklungsworkflows? Lass es uns in den Kommentaren unten wissen!