WordPress-themawijzigingen automatisch implementeren met GitHub en Deploy

Wilt u automatisch WordPress-themawijzigingen implementeren op uw website? De meeste professionele webontwikkelaars gebruiken een versiebeheersysteem zoals GitHub of BitBucket en zetten hun wijzigingen automatisch in voor staging of live-site. In dit artikel laten we u zien hoe u WordPress-themawijzigingen automatisch implementeert met GitHub en Deploy.

Waarom Versie Controlesysteem gebruiken voor WordPress Theme Development?

Eerst moeten we begrijpen wat versiebeheer middelen:

... een systeem dat veranderingen in een bestand of set bestanden registreert, zodat u later specifieke versies kunt terughalen http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control

Met andere woorden, elke keer dat we een WordPress-themasjabloon, afbeelding of CSS-bestand wijzigen, houdt een versiecontrolesysteem deze wijzigingen bij. Op bepaalde punten kunnen we een partij wijzigingen labelen (vastleggen). Als die wijzigingen een probleem veroorzaken, kunnen we teruggaan naar een bestaande 'versie' van ons WordPress-thema.

Git is een veelvoorkomend versiecontrolesysteem en stelt meerdere gebruikers (webontwikkelaars) in staat te werken op dezelfde codebasis (zoals een WordPress-thema). Als twee ontwikkelaars hetzelfde bestand bewerken, heeft Git ingebouwde besturingselementen om met deze problemen om te gaan (ook wel bekend als samenvoegconflicten).

Gehoste Git-versiecontrolesystemen van derden, zoals GitHub en BitBucket, stellen gebruikers in staat om problemen (of tickets) achter te laten als ze een probleem met uw code vaststellen. Uw codewijzigingen kunnen worden vastgelegd (gelabeld) tegen een bepaald probleem, om de exacte codewijzigingen weer te geven die zijn aangebracht om een ​​probleem op te lossen. Dit is echt handig als je binnen zes of twaalf maanden terugkijkt op code en wilt weten waarom je iets op een bepaalde manier hebt gedaan.

Waarom een ​​implementatiesysteem gebruiken??

Een implementatiesysteem, dat is geïntegreerd met services zoals GitHub, biedt u de mogelijkheid om wijzigingen die u heeft aangebracht in uw WordPress-thema automatisch of handmatig te uploaden.

Je kunt het zien als een eenrichtingssynchronisatiesysteem. Als je bijvoorbeeld een bestand uit je WordPress-thema verwijdert, moet je onthouden dat je het ook via FTP moet verwijderen. Met een implementatiesysteem wordt dit automatisch voor u gedaan wanneer u uw codewijzigingen toewijst aan GitHub.

Een GitHub-opslagplaats instellen voor uw WordPress-thema

Eerst zullen we een account instellen op GitHub, de GitHub-client gebruiken voor Windows of Mac om ons WordPress-thema op te slaan in GitHub.

Ga naar https://github.com en meld je aan voor een gratis account.

Nadat u uw e-mailadres hebt geregistreerd en bevestigd, klikt u op het pluspictogram in de rechterbovenhoek van het scherm en kiest u Nieuwe repository (een repository is een container voor uw code - in dit geval ons WordPress-thema).

Begin met het instellen van repository naam - de mapnaam van je WordPress Theme is een goed idee. Kies vervolgens of dit een is Openbaar of Privaat repository. Openbare opslagplaatsen zijn beschikbaar voor iedereen om uw code te bekijken, maar ze kunnen er geen wijzigingen in aanbrengen. Privé-repositories zijn alleen voor u beschikbaar om te zien.

Vink tot slot het onderstaande selectievakje aan Initialiseer deze repository met een README, en klik vervolgens op de Maak een repository knop.

Als alles goed is gegaan, zou je je nieuwe repository op het scherm moeten zien:

Installeer GitHub voor Windows / Mac

Vervolgens moeten we de code van onze WordPress Theme in onze repository plaatsen. We kunnen dit doen met behulp van de GitHub-client, die op uw computer wordt geïnstalleerd.

Ga eenvoudig naar de GitHub Desktop-website en download de GitHub Desktop-client die beschikbaar is voor Windows en Mac.

Na het downloaden start u het installatieproces door op te klikken Doorgaan met

Voer in het volgende scherm je GitHub-login (gebruikersnaam) en wachtwoord in, die je hebt gemaakt toen je je registreerde op GitHub. Klik op de Aanmelden knop wanneer klaar.

Als de inloggegevens correct zijn, wordt uw account weergegeven. Klik op de Doorgaan met knop om door te gaan:

We kunnen de Git Config sectie als de standaardinstellingen. Zorg ervoor dat u op de knop klikt Installeer Command Line Tools optie, voordat u op klikt Doorgaan met knop:

Klik ten slotte op Gereed en je krijgt het GitHub-scherm te zien.

Laten we onze GitHub-repository toevoegen die we eerder hebben gemaakt. Klik hiervoor op het pluspictogram in de rechterbovenhoek en vervolgens op de Clone keuze. Je ziet een lijst met je GitHub-opslagplaatsen, inclusief degene die we eerder hebben gemaakt:

Klik op de repository die u eerder hebt gemaakt en klik op de Clone knop.

Kies waar u deze repository op uw computer wilt opslaan en klik op de Clone knop zodra je dit hebt gekozen.

We hebben nu onze repository gehost (gekopieerd) die op GitHub wordt gehost op onze computer.  

Vervolgens moeten we onze WordPress-themacode toevoegen aan de map van de repository en deze code vervolgens vastleggen en synchroniseren met GitHub.

Begin met het zoeken naar de map die u in de bovenstaande stap op uw computer hebt geselecteerd. Het zou een moeten hebben README.md bestand in de map. Afhankelijk van de instellingen van uw computer, ziet u mogelijk ook de verborgen .git map:

Kopieer en plak de code van je WordPress Theme in deze map:

Open de GitHub Mac- of Windows-app en je ziet nu de bestanden die je net hebt toegevoegd in het venster verschijnen:

U ziet de wijzigingen groen gemarkeerd. Dit zijn de wijzigingen die u in de lokale repository hebt opgeslagen, maar u hebt die wijzigingen nog niet vastgelegd.

Vervolgens moeten we deze bestanden vastleggen (uploaden) naar GitHub. Om dit te doen, voert u wat tekst in in Samenvatting kader om de wijzigingen die we hebben aangebracht (bijv. Mijn eerste commit) en klik op de Vastleggen om te beheersen knop.

Hiermee worden de wijzigingen aangebracht die u in de repository hebt aangebracht. Als u deze wijzigingen naar GitHub wilt uploaden, klikt u op de knop Synchroniseren in de rechterbovenhoek van het toepassingsvenster van GitHub.

Om te controleren of je commit is geüpload naar GitHub, ga je naar je repository op de GitHub-website. Als alles werkte, ziet u uw code:

Implementatie instellen

Tot nu toe hebben we GitHub geïnstalleerd en de code van onze WordPress-thema's vastgelegd in je GitHub-repository. De laatste stap is om alle wijzigingen in uw GitHub-repository naar uw WordPress-website te uploaden.

DeployHQ of Simply Deploy, is een webgebaseerde service die wijzigingen in uw GitHub-repository bewaakt en die wijzigingen automatisch in uw WordPress-website automatisch of handmatig uploadt.

Stel je het voor als een verbinding in het midden van je code en webserver:

Eerst moet je de website Implementeren bezoeken en je aanmelden. Deploy is een betaalde service, maar biedt een gratis account voor één project en 10 implementaties per dag.

Nadat u zich heeft aangemeld, kunt u inloggen op uw Deploy-dashboard. Klik op Maak een nieuw project om aan de slag te gaan.

Vervolgens moet u een naam voor uw project opgeven en uw codehostingplatform, GitHub, selecteren. Klik op de knop Create project om verder te gaan.

Deploy zal u nu omleiden naar GitHub. Als u nog niet bent aangemeld, wordt u gevraagd om u aan te melden. Hierna wordt u gevraagd om Deploy toegang te geven tot uw GitHub-account.

Klik op 'Applicatie autoriseren' om verder te gaan.

Deploy haalt de lijst met uw repositories op van GitHub en vraagt ​​u om een ​​repository te selecteren voor dit project.

Klik eenvoudigweg op uw WordPress-themarepository en Deploy zal het voor u importeren.

In de volgende stap vraagt ​​Deploy u om serverinformatie te verstrekken. Dit is waar u Deploy vertelt hoe u bestanden naar uw WordPress-server kunt uploaden.

Daar heb je je FTP-inloggegevens voor nodig.

• Naam: Geef een naam op voor deze verbinding
• Protocol: FTP of als je SFTP of SSH hebt, dan kun je die ook gebruiken
• hostnaam: De SFTP / FTP-host van uw website.
• Haven: De SFTP / FTP-poort van uw websitehost (meestal SFTP = 22, FTP = 21)
• Gebruikersnaam en wachtwoord: FTP-gebruikersnaam en wachtwoord.
• Implementatiepad: Het pad waarnaar je navigeert voordat je je WordPress-themabestanden uploadt. Bijvoorbeeld, public_html / example.com / wp-content / themes / & Anticonceptie, waar Mijn thema is het WordPress-thema dat je hebt vastgelegd voor GitHub.

Klik op de knop Opslaan om verder te gaan.

Deploy test nu uw serververbinding en als alles goed werkt, toont het u een succesbericht.

U kunt nu klikken op de knop Nu implementeren om uw GitHub-bestanden naar uw website te uploaden.

Deploy toont u de details van deze implementatie. Klik eenvoudig onderaan op de knop Implementeren.

U ziet nu de voortgang van de implementatie. Nadat Deploy is voltooid, ziet u een succesbericht.

U hebt met succes wijzigingen vanuit GitHub geïmplementeerd in uw website met behulp van Deploy. Wanneer u nu wijzigingen aanbrengt in uw WordPress-thema op uw computer, moet u deze toewijzen aan GitHub. Daarna moet je de Deploy-website bezoeken om de implementatie handmatig te starten.

Laten we eens kijken hoe u automatische implementatie instelt, zodat alle wijzigingen die u aan GitHub commit, automatisch worden geïmplementeerd op uw website.

Automatische implementatie instellen

Eerst moet je je dashboard voor Implementeren bezoeken en naar de pagina Projecten gaan. Klik op de naam van uw project.

Ga vanuit je projectpagina met de muis naar het menu Instellingen en selecteer Servers en groepen.

Klik op het bewerkingspictogram naast uw server.

Dit brengt u naar het serverscherm te bewerken. In de rechterkolom vindt u de instellingen voor automatische implementatie.

Zorg ervoor dat het is ingeschakeld. Daaronder ziet u een URL. Kopieer deze URL zoals u deze in de volgende stap nodig heeft.

Log in op uw GitHub-account in een nieuw browsertabblad. Klik op uw repository en klik vervolgens op Instellingen. Klik op de koppeling Webhooks en services.

Klik op de knop Webhook toevoegen.

Plak de URL die u hebt gekopieerd vanaf de pagina Serverinstellingen distribueren in het veld URL van payload. kiezen application / x-www-form-urlencoded als het inhoudstype en klik op Webhook toevoegen.

Dat is alles, uw GitHub-repository zal nu Deploy informeren wanneer er nieuwe wijzigingen in uw repository zijn. Deploy zal vervolgens die wijzigingen automatisch in uw website implementeren.

Testen van automatische implementatie

Als u de automatische implementatie wilt testen, brengt u eenvoudig enkele wijzigingen aan in uw WordPress-themarepository op uw computer.

Open de GitHub-desktop-app en voer vervolgens die wijzigingen door.

Vergeet niet op de synchronisatieknop te klikken.

Bezoek nu uw project op het Deploy-dashboard. Klik op de implementaties en u vindt uw automatische implementatie daar vermeld.

Dat is alles, we hopen dat dit artikel u heeft geholpen om automatisch WordPress-themawijzigingen te implementeren met GitHub en Deploy. U wilt misschien ook onze handleiding bekijken over het maken van een staging-omgeving voor een WordPress-site.

.