So stellen Sie WordPress-Theme-Änderungen automatisch mit GitHub und Deploy bereit

Die meisten professionellen Webentwickler verwenden ein Versionskontrollsystem wie GitHub oder Bitbucket und stellen ihre Änderungen automatisch auf Staging- oder Live-Sites bereit.

Wir haben mehrere Tools ausprobiert, um Änderungen automatisch bereitzustellen. Basierend auf dieser realen Erfahrung haben wir festgestellt, dass Sie DeployHQ verwenden können, um die Theme-Entwicklung auf Ihrer Website zu pushen. DeployHQ fungiert als Vermittler zwischen Ihrem Git-Repository und Ihrem Server.

In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Theme-Änderungen automatisch mit GitHub und Deploy bereitstellen.

Warum ein Versionskontrollsystem für die Entwicklung von WordPress-Themes verwenden?

Ein Versionskontrollsystem ermöglicht es Ihnen, Änderungen an einer Datei oder einer Gruppe von Dateien im Laufe der Zeit aufzuzeichnen, sodass Sie bestimmte Versionen später wieder abrufen können. Mit anderen Worten, jedes Mal, wenn wir eine WordPress-Theme-Vorlage, ein Bild oder eine CSS-Datei ändern, behält ein Versionskontrollsystem diese Änderungen im Auge.

Nehmen wir zum Beispiel an, Sie entscheiden sich, eine Reihe von Änderungen vorzunehmen. Wenn diese Änderungen ein Problem verursachen, können Sie zu einer vorhandenen 'Version' unseres WordPress-Themes zurückkehren (oder zurücksetzen).

Git ist ein gängiges Versionskontrollsystem und ermöglicht es mehreren Benutzern, an derselben Codebasis zu arbeiten, wie z. B. einem WordPress-Theme. Wenn zwei Entwickler dieselbe Datei bearbeiten, verfügt Git über integrierte Kontrollen, um diese Probleme zu bewältigen (bekannt als Merge-Konflikte).

Weitere Informationen finden Sie in unserem Anfängerleitfaden zur Verwendung von Git mit WordPress.

Warum ein Bereitstellungssystem verwenden?

Ein Bereitstellungssystem, das sich mit Diensten wie GitHub integriert, ermöglicht es Ihnen, Änderungen, die Sie an Ihrem WordPress-Theme vorgenommen haben, automatisch oder manuell hochzuladen.

Sie können dies als Einweg-Synchronisationssystem betrachten. Wenn Sie beispielsweise eine Datei aus Ihrem WordPress-Theme löschen, müssten Sie sie auch über FTP löschen. Mit einem Bereitstellungssystem wird dies automatisch für Sie erledigt, wenn Sie Ihre Codeänderungen in GitHub committen.

In diesem Artikel arbeiten wir mit einem Bereitstellungssystem namens DeployHQ, oder einfach Deploy. Deploy funktioniert mit anderen Git-Repository-Anbietern wie Bitbucket, aber für dieses Tutorial bleiben wir bei GitHub.

Einrichtung eines GitHub-Repositories für Ihr WordPress-Theme

Zuerst müssen Sie ein Konto auf GitHub einrichten und dann den GitHub-Client für Windows oder Mac verwenden, um Änderungen an Ihrem WordPress-Theme zu speichern.

Besuchen Sie zunächst die GitHub-Website und geben Sie Ihre E-Mail-Adresse ein, um ein neues Konto zu erstellen.

Als Nächstes müssen Sie einen Benutzernamen und ein Passwort eingeben.

GitHub wird Sie auch bitten, E-Mail-Präferenzen auszuwählen.

Danach können Sie nach unten scrollen und Ihr Konto verifizieren, indem Sie ein Rätsel lösen.

Es ist genau wie reCAPTCHA auf Ihrer WordPress-Website.

Sobald Ihr Konto verifiziert ist, sehen Sie das GitHub-Dashboard.

Von hier aus können Sie oben auf das Symbol „+“ klicken und die Option „Neues Repository“ auswählen.

Als Nächstes können Sie mit der Festlegung des Repository-Namens beginnen, z. B. dem Ordnernamen Ihres WordPress-Themes.  

Dann müssen Sie wählen, ob es sich um ein öffentliches oder privates Repository handelt. Öffentliche Repositories erlauben es jedem, Ihren Code einzusehen, aber keine Änderungen daran vorzunehmen. Private Repositories sind nur für Sie einsehbar.

Schließlich können Sie das Kontrollkästchen aktivieren, wenn Sie eine README-Datei hinzufügen möchten.

Sobald das erledigt ist, klicken Sie einfach auf die Schaltfläche ‘Repository erstellen’.

Ihr GitHub-Repository ist nun einsatzbereit.

GitHub für Windows oder Mac installieren

Als Nächstes müssen Sie den Code unseres WordPress-Themes in unser Repository einfügen. Eine einfache Möglichkeit, dies zu tun, ist die Verwendung des GitHub-Clients, der auf Ihrem Computer installiert wird.

Besuchen Sie einfach die GitHub Desktop-Website und laden Sie den Desktop-Client für Windows oder Mac herunter.

Sobald der Download abgeschlossen ist, starten Sie den GitHub-Client.

Als Nächstes müssen Sie sich mit Ihrem GitHub-Konto anmelden. Sie können auf die Schaltfläche ‘Bei GitHub.com anmelden’ klicken.

Dies startet GitHub in Ihrem Webbrowser.

Klicken Sie einfach auf die Schaltfläche „Desktop autorisieren“, um GitHub Desktop den Zugriff auf Ihr Konto zu gestatten.

Danach können Sie den GitHub Desktop-Client öffnen.

Als Nächstes müssen Sie Git konfigurieren. Wählen Sie einfach die Option „Mein GitHub-Konto-Name und meine E-Mail-Adresse verwenden“ und klicken Sie auf die Schaltfläche „Fertig stellen“.

Als Nächstes fügen wir das zuvor erstellte GitHub-Repository hinzu.

Klicken Sie dazu auf die Option „Ein Repository aus dem Internet klonen“.

Sie sehen eine Liste Ihrer GitHub-Repositories, einschließlich des zuvor erstellten.

Wählen Sie einfach das Repository aus und wählen Sie unter dem Feld 'Lokaler Pfad' aus, wo Sie es auf Ihrem Computer speichern möchten. Sobald dies erledigt ist, können Sie auf die Schaltfläche 'Klonen' klicken.

Sie haben nun Ihr Repository, das auf GitHub gehostet wird, auf unseren Computer geklont (kopiert).  

Als Nächstes müssen Sie unseren WordPress-Theme-Code zum Repository-Ordner hinzufügen und diesen Code dann auf GitHub committen und synchronisieren.

Sie können damit beginnen, den Ordner zu finden, den Sie im obigen Schritt auf Ihrem Computer ausgewählt haben. Er sollte eine README.md-Datei im Ordner enthalten. Je nach den Einstellungen Ihres Computers sehen Sie möglicherweise auch den ausgeblendeten .git-Ordner.

Wenn Sie Änderungen am Code Ihres WordPress-Themes vorgenommen haben, kopieren Sie diese einfach und fügen Sie sie in diesen Ordner ein.

Danach können Sie die GitHub Mac- oder Windows-App öffnen und sehen, wie die gerade hinzugefügten Dateien im Fenster erscheinen:

Sie sehen die Änderungen grün hervorgehoben. Dies sind die Änderungen, die Sie im lokalen Repository gespeichert, aber noch nicht committet haben.

Als Nächstes müssen Sie diese Dateien auf GitHub committen (hochladen). Geben Sie dazu einfach Text in das Feld 'Zusammenfassung' ein, um die von uns vorgenommenen Änderungen zu erklären, und klicken Sie auf die Schaltfläche 'Commit to master'.

Dies committet die von Ihnen vorgenommenen Änderungen im Repository.

Um diese Änderungen auf GitHub hochzuladen, können Sie auf die Schaltfläche 'Push origin' klicken.

Um zu überprüfen, ob Ihr Commit auf GitHub hochgeladen wurde, besuchen Sie Ihr Repository auf der GitHub-Website. Wenn alles funktioniert, sehen Sie Ihre Code-Änderungen.

Bereitstellung einrichten

Der letzte Schritt ist sicherzustellen, dass alle Änderungen in Ihrem GitHub-Repository auf Ihre WordPress-Website übertragen werden.

DeployHQ, oder Deploy, ist ein webbasierter Dienst, der Änderungen an Ihrem GitHub-Repository überwacht und diese Änderungen automatisch oder manuell auf Ihre WordPress-Website hochlädt.

Stellen Sie es sich als Verbindung zwischen Ihrem Code und dem Webserver vor.

Zuerst müssen Sie die Deploy-Website besuchen und sich für ein neues Konto anmelden. Deploy ist ein kostenpflichtiger Dienst, bietet aber ein kostenloses Konto für ein Projekt und 5 Bereitstellungen pro Tag.

Nach Abschluss der Registrierung können Sie sich bei Ihrem Deploy-Dashboard anmelden.

Von hier aus können Sie auf die Schaltfläche „Projekt erstellen“ klicken, um zu beginnen.

Als Nächstes müssen Sie Ihrem Projekt einen Namen geben.

Danach können Sie GitHub als Ihre Code-Hosting-Plattform auswählen.

Wenn Sie nach unten scrollen, finden Sie weitere Optionen, wie die Auswahl einer Zone für Ihr Projekt und erweiterte Optionen.

Sobald dies erledigt ist, klicken Sie auf die Schaltfläche „Projekt erstellen“, um fortzufahren.

Deploy leitet Sie nun zu GitHub weiter.

Wenn Sie noch nicht angemeldet sind, werden Sie aufgefordert, sich anzumelden. Danach werden Sie aufgefordert, Deploy den Zugriff auf Ihr GitHub-Konto zu gestatten.

Klicken Sie einfach auf die Schaltfläche ‘krystal autorisieren’, um fortzufahren.

Deploy ruft die Liste Ihrer Repositories von GitHub ab und fordert Sie auf, ein Repository für dieses Projekt auszuwählen.

Klicken Sie einfach auf Ihr WordPress-Theme-Repository, und Deploy wird es für Sie importieren.

Im nächsten Schritt wird Deploy Sie auffordern, Serverinformationen anzugeben. Hier teilen Sie Deploy mit, wie Dateien auf Ihren WordPress-Server hochgeladen werden sollen.

Sie können damit beginnen, einen Namen einzugeben und ‘FTP’ als Protokolloption auszuwählen.

Als Nächstes müssen Sie nach unten scrollen und Ihre FTP-Zugangsdaten eingeben.

• Hostname: Der SFTP/FTP-Host Ihrer Website
• Port: Der SFTP/FTP-Port Ihres Website-Hosts (typischerweise SFTP = 22, FTP = 21)
• Benutzername und Passwort: FTP-Benutzername und -Passwort
• Bereitstellungspfad: Der Pfad, zu dem Sie navigieren würden, bevor Sie Ihre WordPress-Theme-Dateien hochladen. Zum Beispiel public_html/example.com/wp-content/themes/MyTheme, wobei MyTheme das WordPress-Theme ist, das Sie in GitHub committet haben.

Nachdem Sie diese Details eingegeben haben, klicken Sie auf die Schaltfläche ‘Server erstellen speichern’.

Deploy testet nun Ihre Serververbindung und wenn alles korrekt funktioniert, wird Ihnen eine Erfolgsmeldung angezeigt.

Sie können nun auf die Schaltfläche 'Deploy' klicken, um Ihre GitHub-Dateien auf Ihre Website hochzuladen.

Sie sehen nun den Fortschritt der Bereitstellung.

Sobald Deploy fertig ist, sehen Sie eine Erfolgsmeldung.

Sie haben erfolgreich Änderungen von GitHub auf Ihre Website mit Deploy bereitgestellt. Wenn Sie nun Änderungen an Ihrem WordPress-Theme auf Ihrem Computer vornehmen, müssen Sie diese in GitHub committen. Danach müssen Sie die Deploy-Website besuchen, um die Bereitstellung manuell zu starten.

Sehen wir uns an, wie die automatische Bereitstellung eingerichtet wird, damit alle Änderungen, die Sie in GitHub committen, automatisch auf Ihrer Website bereitgestellt werden.

Automatische Bereitstellung einrichten

Zuerst müssen Sie Ihr Deploy-Dashboard besuchen und zur Seite 'Projekte' navigieren. Von hier aus klicken Sie einfach auf den Namen Ihres Projekts.

Als Nächstes können Sie im Menü auf der linken Seite zum Tab „Automatische Bereitstellungen“ wechseln.

Hier müssen Sie die Option neben Ihrem Server für automatische Bereitstellungen aktivieren.

Danach müssen Sie die Webhook-URL kopieren und zu Ihrem GitHub-Konto hinzufügen.

Melden Sie sich einfach in einem neuen Browser-Tab bei Ihrem GitHub-Konto an. Klicken Sie dann auf Ihr Repository und gehen Sie zum Tab 'Einstellungen'. Von hier aus können Sie zum Abschnitt Webhooks im Menü auf der linken Seite navigieren und auf die Schaltfläche 'Webhook hinzufügen' klicken.

Fügen Sie nun die Webhook-URL ein, die Sie von der Seite mit den Deploy-Servereinstellungen kopiert haben, in das Feld Payload-URL ein.

Wählen Sie danach aus dem Dropdown-Menü „application/x-www-form-urlencoded“ als „Content type“ aus:

Als Nächstes können Sie nach unten scrollen und auswählen, welche Ereignisse den Webhook auslösen sollen. Sie können die Standardeinstellung verwenden.

Sobald dies erledigt ist, klicken Sie einfach auf die Schaltfläche 'Webhook hinzufügen'.

Das ist alles. Ihr GitHub-Repository benachrichtigt Deploy nun, wenn es neue Änderungen in Ihrem Repository gibt. Deploy implementiert diese Änderungen dann automatisch auf Ihrer Website.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie WordPress-Theme-Änderungen automatisch mit GitHub und Deploy bereitstellen. Möglicherweise möchten Sie auch unseren Leitfaden zum Aktualisieren von jQuery auf die neueste Version in WordPress und Überprüfen und Aktualisieren der neuesten WordPress-Version sehen.

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.