Automatische Bereitstellung von WordPress-Theme-Änderungen mit GitHub und Deploy

Möchten Sie WordPress-Designänderungen automatisch auf Ihrer Website bereitstellen? Die meisten professionellen Webentwickler verwenden ein Versionskontrollsystem wie GitHub oder BitBucket und stellen ihre Änderungen automatisch auf Staging- oder Live-Sites bereit. In diesem Artikel zeigen wir Ihnen, wie Sie Änderungen an WordPress-Design automatisch mit GitHub und Deploy bereitstellen.

Gründe für die Verwendung des Versionskontrollsystems für die WordPress-Theme-Entwicklung?

Zuerst müssen wir verstehen, was Versionskontrolle meint:

… Ein System, das im Laufe der Zeit Änderungen an einer Datei oder einem Dateisatz aufzeichnet, sodass Sie später bestimmte Versionen aufrufen können http://git-scm.com/book/de/v2/Getting-Started-About-Version-Control

Mit anderen Worten: Jedes Mal, wenn wir eine WordPress-Designvorlage, ein Bild oder eine CSS-Datei ändern, verfolgt ein Versionskontrollsystem diese Änderungen. An bestimmten Stellen können wir einen Stapel von Änderungen kennzeichnen (einlesen). Wenn diese Änderungen ein Problem verursachen, können wir eine vorhandene "Version" unseres WordPress-Designs wiederherstellen (oder zurücksetzen).

Git ist ein allgemeines Versionskontrollsystem und ermöglicht mehreren Benutzern (Webentwicklern), auf derselben Codebasis (beispielsweise einem WordPress-Theme) zu arbeiten. Wenn zwei Entwickler dieselbe Datei bearbeiten, verfügt Git über integrierte Steuerelemente, um diese Probleme zu lösen (sogenannte Zusammenführungskonflikte)..

Durch gehostete Git-Versionskontrollsysteme von Drittanbietern, wie GitHub und BitBucket, können Benutzer Probleme (oder Tickets) hinterlassen, wenn sie ein Problem mit Ihrem Code feststellen. Ihre Codeänderungen können für ein bestimmtes Problem festgeschrieben (gekennzeichnet) werden, um die genauen Codeänderungen anzuzeigen, die zur Behebung eines Problems vorgenommen wurden. Dies ist sehr nützlich, wenn Sie in 6 oder 12 Monaten auf den Code zurückschauen und wissen möchten, warum Sie etwas auf eine bestimmte Weise getan haben.

Warum ein Bereitstellungssystem verwenden??

Ein Bereitstellungssystem, das in Dienste wie GitHub integriert werden kann, ermöglicht Ihnen das automatische oder manuelle Hochladen von Änderungen, die Sie an Ihrem WordPress-Design vorgenommen haben.

Sie können es als Einweg-Synchronisationssystem betrachten. Wenn Sie beispielsweise eine Datei aus Ihrem WordPress-Theme löschen, müssen Sie daran denken, sie auch über FTP zu löschen. Bei einem Implementierungssystem wird dies automatisch für Sie ausgeführt, wenn Sie Ihre Codeänderungen in GitHub festschreiben.

Einrichten eines GitHub-Repositorys für Ihr WordPress-Theme

Zuerst richten wir ein Konto bei GitHub ein. Verwenden Sie den GitHub-Client für Windows oder Mac, um unser WordPress-Theme in GitHub zu speichern.

Gehen Sie zu https://github.com und melden Sie sich für ein kostenloses Konto an.

Wenn Sie Ihre E-Mail-Adresse registriert und bestätigt haben, klicken Sie auf das Plus-Symbol in der oberen rechten Ecke des Bildschirms und wählen Sie Neues Repository (ein Repository ist ein Container für Ihren Code - in diesem Fall unser WordPress-Theme).

Beginnen Sie mit der Einstellung der Repository-Name - Der Ordnername Ihres WordPress Themes ist eine gute Idee. Wählen Sie dann aus, ob dies ein ist Öffentlichkeit oder Privatgelände Repository. Öffentliche Repositorys stehen allen zur Verfügung, um Ihren Code anzuzeigen, sie können jedoch keine Änderungen daran vornehmen. Private Repositories stehen nur Ihnen zur Verfügung.

Aktivieren Sie anschließend das Kontrollkästchen unten Initialisieren Sie dieses Repository mit einer README, und klicken Sie dann auf Repository erstellen Taste.

Wenn alles funktioniert hat, sollten Sie Ihr neues Repository auf dem Bildschirm sehen:

Installieren Sie GitHub für Windows / Mac

Als nächstes müssen wir den Code unseres WordPress Themes in unserem Repository ablegen. Wir können dies mit dem GitHub-Client tun, der auf Ihrem Computer installiert wird.

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

Starten Sie den Installationsvorgang nach dem Herunterladen durch Klicken auf Fortsetzen

Geben Sie im nächsten Bildschirm Ihr GitHub-Login (Benutzername) und das Kennwort ein, das Sie bei der Registrierung bei GitHub erstellt haben. Drücke den Einloggen Taste, wenn Sie fertig sind.

Wenn die Anmeldedaten korrekt sind, wird Ihr Konto angezeigt. Drücke den Fortsetzen Taste zum Fortfahren:

Wir können das verlassen Git Config Abschnitt als Standardeinstellungen. Stellen Sie sicher, dass Sie auf klicken Installieren Sie die Befehlszeilenprogramme Option, bevor Sie auf klicken Fortsetzen Taste:

Klicken Sie abschließend auf Fertig, und Sie sehen den GitHub-Bildschirm.

Fügen wir unser GitHub-Repository hinzu, das wir zuvor erstellt haben. Klicken Sie dazu auf das Plussymbol oben rechts und dann auf das Symbol Klon Möglichkeit. Sie sehen eine Liste Ihrer GitHub-Repositorys, einschließlich des von uns zuvor erstellten:

Klicken Sie auf das zuvor erstellte Repository und dann auf Klon Taste.

Wählen Sie den Ort auf Ihrem Computer aus, an dem Sie dieses Repository speichern möchten, und klicken Sie auf Klon Taste, sobald Sie dies ausgewählt haben.

Wir haben jetzt unser auf GitHub gehostetes Repository auf unseren Computer geklont (kopiert).  

Als Nächstes müssen wir unseren WordPress-Theme-Code zum Ordner des Repositorys hinzufügen und diesen Code dann mit GitHub festschreiben und synchronisieren.

Suchen Sie zunächst den Ordner, den Sie im obigen Schritt auf Ihrem Computer ausgewählt haben. Es sollte eine haben README.md Datei im Ordner. Abhängig von den Einstellungen Ihres Computers können Sie auch die verborgenen sehen .git Mappe:

Kopieren Sie den Code Ihres WordPress Themes und fügen Sie ihn in diesen Ordner ein:

Öffnen Sie die GitHub Mac- oder Windows-App. Jetzt werden die soeben hinzugefügten Dateien im Fenster angezeigt:

Die Änderungen werden grün hervorgehoben. Dies sind die Änderungen, die Sie im lokalen Repository gespeichert haben, diese Änderungen jedoch noch nicht festgeschrieben haben.

Als Nächstes müssen wir diese Dateien in GitHub festschreiben (hochladen). Geben Sie dazu einen Text in das ein Zusammenfassung Kästchen, um die von uns vorgenommenen Änderungen zu erläutern (z. Mein erster Einsatz) und klicken Sie auf die Commit to master Taste.

Dies übernimmt die Änderungen, die Sie am Repository vorgenommen haben. Um diese Änderungen in GitHub hochzuladen, klicken Sie auf die Schaltfläche "Sync" oben rechts im GitHub-Anwendungsfenster.

Um zu überprüfen, ob Ihr Commit in GitHub hochgeladen wurde, besuchen Sie Ihr Repository auf der GitHub-Website. Wenn alles funktioniert hat, sehen Sie Ihren Code:

Einrichten von Deploy

Bis jetzt haben wir GitHub eingerichtet und den Code unseres WordPress Themes in Ihr GitHub-Repository übernommen. Der letzte Schritt ist das Hochladen aller Änderungen an Ihrem GitHub-Repository auf Ihre WordPress-Website.

DeployHQ oder einfach 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 sich das als eine Verbindung in der Mitte Ihres Code- und Webservers vor:

Zuerst müssen Sie die Deploy-Website besuchen und sich anmelden. Bei der Bereitstellung handelt es sich um einen kostenpflichtigen Dienst, der jedoch ein kostenloses Konto für ein Projekt und zehn Bereitstellungen pro Tag bietet.

Nach Abschluss der Anmeldung können Sie sich bei Ihrem Deploy-Dashboard anmelden. Klicken Sie auf Erstellen Sie ein neues Projekt, um zu beginnen.

Als Nächstes müssen Sie einen Namen für Ihr Projekt angeben und Ihre Code-Hosting-Plattform GitHub auswählen. Klicken Sie auf die Schaltfläche Projekt erstellen, um fortzufahren.

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

Klicken Sie auf die Schaltfläche "Antrag autorisieren", um fortzufahren.

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

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

Im nächsten Schritt werden Sie von Deploy aufgefordert, Serverinformationen anzugeben. Hier erfahren Sie, wie Sie Dateien bereitstellen, um Dateien auf Ihren WordPress-Server hochzuladen.

Sie benötigen dafür Ihre FTP-Zugangsdaten.

• Name: Geben Sie einen Namen für diese Verbindung an
• Protokoll: FTP oder wenn Sie SFTP oder SSH haben, können Sie auch diese verwenden
• Hostname: Der SFTP / FTP-Host Ihrer Website.
• Hafen: SFTP / FTP-Port Ihres Website-Hosts (normalerweise SFTP = 22, FTP = 21)
• Benutzername und Passwort: FTP-Benutzername und Passwort.
• Bereitstellungspfad: Der Pfad, zu dem Sie navigieren würden, bevor Sie Ihre WordPress-Designdateien hochladen. Zum Beispiel, public_html / example.com / wp-content / themes / MyTheme, woher Mein Thema ist das WordPress-Theme, das Sie für GitHub festgelegt haben.

Klicken Sie auf die Schaltfläche Speichern, um fortzufahren.

Deploy testet nun Ihre Serververbindung. Wenn alles korrekt funktioniert, wird eine Erfolgsmeldung angezeigt.

Sie können jetzt auf die Schaltfläche Jetzt bereitstellen klicken, um Ihre GitHub-Dateien auf Ihre Website hochzuladen.

Deploy zeigt Ihnen die Details dieser Deployment an. Klicken Sie unten auf die Schaltfläche "Bereitstellen".

Sie sehen jetzt den Fortschritt der Bereitstellung. Sobald die Bereitstellung abgeschlossen ist, wird eine Erfolgsmeldung angezeigt.

Sie haben mit Deploy erfolgreich Änderungen von GitHub auf Ihrer Website implementiert. Wenn Sie jetzt Änderungen an Ihrem WordPress-Design auf Ihrem Computer vornehmen, müssen Sie sie an GitHub übergeben. Danach müssen Sie die Deploy-Website besuchen, um die Bereitstellung manuell zu starten.

Hier erfahren Sie, wie Sie die automatische Bereitstellung so einrichten, dass alle an GitHub vorgenommenen Änderungen automatisch auf Ihrer Website bereitgestellt werden.

Einrichten der automatischen Bereitstellung

Zuerst müssen Sie Ihr Deploy-Dashboard besuchen und zur Seite Projekte gehen. Klicken Sie auf den Namen Ihres Projekts.

Gehen Sie auf Ihrer Projektseite mit der Maus zum Menü Einstellungen und wählen Sie Server und Gruppen aus.

Klicken Sie auf das Bearbeitungssymbol neben Ihrem Server.

Dies bringt Sie zum Bearbeiten des Serverbildschirms. In der rechten Spalte finden Sie die Einstellungen für die automatische Bereitstellung.

Stellen Sie sicher, dass es eingeschaltet ist. Darunter sehen Sie eine URL. Kopieren Sie diese URL, da Sie sie im nächsten Schritt benötigen.

Melden Sie sich in Ihrem GitHub-Konto in einem neuen Browser-Tab an. Klicken Sie auf Ihr Repository und dann auf Einstellungen. Klicken Sie auf den Link Webhooks and Services.

Klicken Sie auf die Schaltfläche Webhook hinzufügen.

Fügen Sie die URL, die Sie von der Seite "Servereinstellungen bereitstellen" kopiert haben, in das Feld "Payload-URL" ein. Wählen application / x-www-form-urlencoded als Inhaltstyp und klicken Sie auf Webhook hinzufügen.

Das ist alles, Ihr GitHub-Repository wird Deploy jetzt benachrichtigen, wenn neue Änderungen an Ihrem Repository vorgenommen werden. Deploy stellt diese Änderungen dann automatisch auf Ihrer Website bereit.

Testen der automatischen Bereitstellung

Um die automatische Bereitstellung zu testen, nehmen Sie einfach einige Änderungen an Ihrem WordPress-Theme-Repository auf Ihrem Computer vor.

Öffnen Sie die GitHub-Desktop-App und bestätigen Sie diese Änderungen.

Vergiss nicht, auf den Sync-Button zu klicken.

Besuchen Sie jetzt Ihr Projekt unter Deploy-Dashboard. Klicken Sie auf die Bereitstellungen, und Ihre automatische Bereitstellung wird dort aufgelistet.

Wir hoffen, dass Sie in diesem Artikel erfahren haben, wie Sie Änderungen an WordPress-Themes mit GitHub und Deploy automatisch bereitstellen können. Vielleicht möchten Sie auch unser Handbuch zum Erstellen einer Staging-Umgebung für eine WordPress-Site sehen.

.