Cum să implementați automat modificările temei WordPress utilizând GitHub și Deploy

Majoritatea dezvoltatorilor web profesioniști folosesc un sistem de control al versiunilor precum GitHub sau Bitbucket și implementează automat modificările lor pe site-uri de staging sau live.

Am încercat mai multe instrumente pentru a implementa automat modificările. Pe baza acestei experiențe din lumea reală, am constatat că puteți folosi DeployHQ pentru a trimite dezvoltarea temei pe site-ul dvs. DeployHQ acționează ca un intermediar între depozitul dvs. Git și serverul dvs.

În acest articol, vă vom arăta cum să implementați automat modificările temei WordPress folosind GitHub și Deploy.

De ce să folosiți un sistem de control al versiunilor pentru dezvoltarea temelor WordPress?

Un sistem de control al versiunilor vă permite să înregistrați modificările aduse unui fișier sau unui set de fișiere în timp, astfel încât să puteți rechema versiuni specifice mai târziu. Cu alte cuvinte, de fiecare dată când modificăm un șablon de temă WordPress, o imagine sau un fișier CSS, un sistem de control al versiunilor ține evidența acestor modificări.

De exemplu, să spunem că decideți să rulați un lot de modificări. Dacă acele modificări cauzează o problemă, atunci puteți reveni (sau anula) la o „versiune” existentă a temei noastre WordPress.

Git este un sistem comun de control al versiunilor și permite mai multor utilizatori să lucreze la aceeași bază de cod, cum ar fi o temă WordPress. Dacă doi dezvoltatori editează același fișier, Git are controale încorporate pentru a gestiona aceste probleme (cunoscute sub denumirea de conflicte de îmbinare).

Pentru mai multe informații, consultați ghidul nostru pentru începători în utilizarea Git cu WordPress.

De ce să folosiți un sistem de implementare?

Un sistem de implementare care se integrează cu servicii precum GitHub vă permite să încărcați automat sau manual modificările pe care le-ați făcut temei WordPress.

Îl poți vedea ca un sistem de sincronizare unidirecțional. De exemplu, dacă ștergi un fișier din tema ta WordPress, va trebui să îl ștergi și prin FTP. Cu un sistem de implementare, acest lucru este făcut automat pentru tine atunci când salvezi modificările codului tău în GitHub.

În acest articol, vom lucra cu un sistem de implementare numit DeployHQ, sau pur și simplu Deploy. Deploy funcționează cu alți furnizori de depozite Git precum Bitbucket, dar ne vom limita la GitHub pentru acest tutorial.

Configurarea unui depozit GitHub pentru tema dvs. WordPress

Mai întâi, va trebui să configurați un cont pe GitHub și apoi să utilizați clientul GitHub pentru Windows sau Mac pentru a stoca modificările la tema dvs. WordPress.

Pentru a începe, poți vizita site-ul web GitHub și să introduci adresa ta de e-mail pentru a crea un cont nou.

În continuare, va trebui să introduceți un nume de utilizator și o parolă.

GitHub vă va cere, de asemenea, să alegeți preferințele de e-mail.

După aceea, poți derula în jos și îți poți verifica contul rezolvând un puzzle.

Este la fel ca reCAPTCHA pe site-ul dvs. WordPress.

Odată ce contul dvs. este verificat, veți vedea tabloul de bord GitHub.

De aici, puteți face clic pe pictograma „+” din partea de sus și selecta opțiunea „New repository”.

Apoi, puteți începe prin a seta numele depozitului, cum ar fi numele folderului temei dvs. WordPress.  

Apoi, va trebui să alegi dacă acesta este un depozit Public sau Privat. Depozitele publice permit tuturor să-ți vadă codul, dar nu pot face modificări la acesta. Depozitele private sunt disponibile doar pentru tine.

În cele din urmă, puteți bifa caseta dacă doriți să adăugați un fișier README.

Odată ce acest lucru este gata, pur și simplu faceți clic pe butonul „Create repository”.

Depozitul tău GitHub va fi acum gata de utilizare.

Instalați GitHub pentru Windows sau Mac

Apoi, trebuie să introduceți codul temei noastre WordPress în depozitul nostru. O modalitate simplă de a face acest lucru este prin utilizarea clientului GitHub, care se instalează pe computerul dvs.

Pur și simplu vizitează site-ul GitHub Desktop și descarcă clientul Desktop disponibil pentru Windows sau Mac.

Odată ce descărcarea este completă, lansați clientul GitHub.

Apoi, va trebui să vă conectați folosind contul dvs. GitHub. Puteți face clic pe butonul „Sign in to GitHub.com”.

Aceasta va lansa GitHub în browserul tău web.

Pur și simplu faceți clic pe butonul „Autorizare desktop” pentru a permite GitHub Desktop să vă acceseze contul.

După aceea, puteți deschide clientul GitHub Desktop.

Apoi, va trebui să configurați Git. Pur și simplu selectați opțiunea „Utilizați numele și adresa de e-mail ale contului meu GitHub” și faceți clic pe butonul „Finalizare”.

Apoi, vom adăuga depozitul GitHub pe care l-ai creat anterior.

Pentru a face acest lucru, faceți clic pe opțiunea „Clonare un depozit de pe internet”.

Veți vedea o listă a depozitelor dvs. GitHub, inclusiv cel pe care l-ați creat anterior.

Pur și simplu selectați depozitul și alegeți unde doriți să îl stocați pe computerul dvs. în câmpul „Cale locală”. Odată ce acest lucru este gata, puteți face clic pe butonul „Clonare”.

Acum ați clonat (copiat) depozitul dvs. găzduit pe GitHub pe computerul nostru.  

În continuare, trebuie să adăugați codul temei WordPress în folderul depozitului și apoi să confirmați și să sincronizați acest cod cu GitHub.

Puteți începe prin a găsi folderul pe care l-ați selectat în pasul de mai sus pe computerul dvs. Acesta ar trebui să aibă un fișier README.md în folder. În funcție de setările computerului dvs., este posibil să vedeți și folderul ascuns .git.

Când ați făcut modificări la codul temei dvs. WordPress, pur și simplu copiați-le și lipiți-le în acest folder.

După aceea, poți deschide aplicația GitHub pentru Mac sau Windows și vei vedea fișierele pe care tocmai le-ai adăugat apărând în fereastră:

Vei vedea modificările evidențiate cu verde. Acestea sunt modificările pe care le-ai salvat în depozitul local, dar pe care nu le-ai confirmat încă.

În continuare, va trebui să confirmați (încărcați) aceste fișiere pe GitHub. Pentru a face acest lucru, pur și simplu introduceți text în caseta Rezumat pentru a explica modificările pe care le-am făcut și faceți clic pe butonul „Confirmă în master”.

Acest lucru înregistrează modificările pe care le-ați făcut în depozit.

Pentru a încărca acele modificări pe GitHub, puteți face clic pe butonul „Push origin”.

Pentru a verifica dacă confirmarea dvs. a fost încărcată pe GitHub, vizitați depozitul dvs. pe site-ul GitHub. Dacă totul funcționează, veți vedea modificările codului dvs.

Configurarea implementării

Ultimul pas este să vă asigurați că orice modificări din depozitul dvs. GitHub sunt trimise către site-ul dvs. WordPress.

DeployHQ, sau Deploy, este un serviciu bazat pe web care va monitoriza modificările din depozitul tău GitHub și va încărca automat sau manual doar acele modificări pe site-ul tău WordPress.

Imaginați-vă ca o conexiune între codul dvs. și serverul web.

Mai întâi, trebuie să vizitați site-ul web Deploy și să vă înregistrați pentru un cont nou. Deploy este un serviciu plătit, dar oferă un cont gratuit pentru un proiect și 5 implementări pe zi.

După ce ai terminat înregistrarea, te poți conecta la tabloul de bord Deploy.

De aici, puteți face clic pe butonul „Creare proiect” pentru a începe.

Apoi, va trebui să oferi un nume proiectului tău.

După aceea, puteți selecta GitHub ca platformă de găzduire a codului.

Dacă derulați în jos, veți găsi mai multe opțiuni, cum ar fi alegerea unei zone pentru proiectul dvs. și opțiuni avansate.

Odată ce acest lucru este gata, faceți clic pe butonul „Creare proiect” pentru a continua.

Deploy te va redirecționa acum către GitHub.

Dacă nu sunteți deja conectat, vi se va cere să vă autentificați. După aceea, vi se va cere să permiteți Deploy să acceseze contul dvs. GitHub.

Pur și simplu faceți clic pe butonul „Authorize krystal” pentru a continua.

Deploy va prelua lista depozitelor dvs. de pe GitHub și vă va cere să selectați un depozit pentru acest proiect.

Pur și simplu faceți clic pe depozitul dvs. de teme WordPress, iar Deploy îl va importa pentru dvs.

În pasul următor, Deploy vă va solicita să furnizați informații despre server. Aici îi spuneți lui Deploy cum să încarce fișierele pe serverul dvs. WordPress.

Puteți începe prin a introduce un nume și selectând „FTP” ca opțiune de protocol.

Apoi, va trebui să derulați în jos și să introduceți acreditările FTP.

• Nume gazdă: Gazda SFTP/FTP a site-ului dvs.
• Port: Portul SFTP/FTP al gazdei site-ului dvs. web (de obicei SFTP = 22, FTP = 21)
• Nume de utilizator și parolă: Nume de utilizator și parolă FTP
• Calea de implementare: Calea pe care ai naviga înainte de a încărca fișierele temei tale WordPress. De exemplu, public_html/example.com/wp-content/themes/MyTheme, unde MyTheme este tema WordPress pe care ai confirmat-o în GitHub.

După introducerea acestor detalii, faceți clic pe butonul „save ‘Create Server’”.

Deploy va testa acum conexiunea la serverul dvs. și, dacă totul funcționează corect, vă va afișa un mesaj de succes.

Acum puteți face clic pe butonul „Deploy” pentru a încărca fișierele GitHub pe site-ul dvs. web.

Veți vedea acum progresul implementării.

Odată ce Deploy a terminat, veți vedea un mesaj de succes.

Ați implementat cu succes modificări de la GitHub pe site-ul dvs. web folosind Deploy. Acum, când faceți modificări la tema dvs. WordPress pe computer, trebuie să le înregistrați în GitHub. După aceea, trebuie să vizitați site-ul web Deploy pentru a începe implementarea manual.

Să vedem cum să configurăm implementarea automată, astfel încât orice modificare pe care o salvezi în GitHub să fie implementată automat pe site-ul tău.

Configurarea implementării automate

Mai întâi, trebuie să vizitați tabloul de bord Deploy și să accesați pagina „Proiecte”. De aici, pur și simplu faceți clic pe numele proiectului dvs.

Apoi, puteți accesa fila „Implementări automate” din meniul din stânga.

Aici, va trebui să activați opțiunea de lângă serverul dvs. pentru implementări automate.

După aceea, va trebui să copiați URL-ul Webhook și să-l adăugați în contul dvs. GitHub.

Pur și simplu conectați-vă la contul dvs. GitHub într-o nouă filă de browser. Apoi faceți clic pe depozitul dvs. și accesați fila „Setări”. De aici, puteți accesa secțiunea Webhooks din meniul din stânga și faceți clic pe butonul „Adăugați webhook”.

Acum lipiți URL-ul webhook pe care l-ați copiat din pagina de setări a serverului Deploy în câmpul Payload URL.

După aceea, selectați „application/x-www-form-urlencoded” ca „Tip conținut” din meniul derulant:

În continuare, puteți derula în jos și selecta ce evenimente ar trebui să declanșeze webhook-ul. Puteți folosi setarea implicită.

Odată ce acest lucru este gata, pur și simplu faceți clic pe butonul „Adăugați webhook”.

Asta e tot. Depozitul dvs. GitHub va notifica acum Deploy atunci când există modificări noi în depozitul dvs. Deploy va implementa apoi automat acele modificări pe site-ul dvs. web.

Sperăm că acest articol v-a ajutat să învățați cum să implementați automat modificările temei WordPress folosind GitHub și Deploy. De asemenea, ați putea dori să consultați ghidul nostru despre cum să actualizați jQuery la cea mai recentă versiune în WordPress și cum să verificați și să actualizați cea mai recentă versiune WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.