Come distribuire automaticamente le modifiche ai temi di WordPress utilizzando GitHub e Deploy

La maggior parte degli sviluppatori web professionisti utilizza un sistema di controllo delle versioni come GitHub o Bitbucket e distribuisce automaticamente le proprie modifiche ai siti di staging o live.

Abbiamo provato diversi strumenti per distribuire automaticamente le modifiche. Sulla base di questa esperienza reale, abbiamo scoperto che è possibile utilizzare DeployHQ per distribuire lo sviluppo dei temi sul sito. DeployHQ funge da intermediario tra il repository Git e il server.

In questo articolo vi mostreremo come distribuire automaticamente le modifiche al tema di WordPress utilizzando GitHub e Deploy.

Perché utilizzare un sistema di controllo delle versioni per lo sviluppo di temi WordPress?

Un sistema di controllo delle versioni consente di registrare le modifiche apportate a un file o a un insieme di file nel corso del tempo, in modo da poter richiamare versioni specifiche in un secondo momento. In altre parole, ogni volta che cambiamo un modello di tema WordPress, un’immagine o un file CSS, un sistema di controllo delle versioni tiene traccia di queste modifiche.

Ad esempio, supponiamo che decidiate di eseguire un lotto di modifiche. Se queste modifiche causano un problema, è possibile tornare indietro (o rollback) a una ‘versione’ esistente del nostro tema WordPress.

Git è un comune sistema di controllo delle versioni e consente a più utenti di lavorare sulla stessa base di codice, come ad esempio un tema di WordPress. Se due sviluppatori modificano lo stesso file, Git ha dei controlli integrati per gestire questi problemi (noti come conflitti di fusione).

Per ulteriori informazioni, consultate la nostra guida per principianti all’uso di Git con WordPress.

Perché utilizzare un sistema di distribuzione?

Un sistema di distribuzione che si integra con servizi come GitHub consente di caricare automaticamente o manualmente le modifiche apportate al tema WordPress.

Si può considerare un sistema di sincronizzazione a senso unico. Ad esempio, se si elimina un file dal tema di WordPress, bisogna anche eliminarlo via FTP. Con un sistema di distribuzione, questo viene fatto automaticamente quando si effettuano le modifiche al codice su GitHub.

In questo articolo lavoreremo con un sistema di distribuzione chiamato DeployHQ, o semplicemente Deploy. Deploy funziona con altri fornitori di repository Git, come Bitbucket, ma per questo tutorial ci atterremo a GitHub.

Impostazione di un repository GitHub per il vostro tema WordPress

Per prima cosa, dovrete creare un account su GitHub e poi utilizzare il client GitHub per Windows o Mac per memorizzare le modifiche al vostro tema WordPress.

Per iniziare, potete visitare il sito web di GitHub e inserire il vostro indirizzo e-mail per creare un nuovo account.

Successivamente, è necessario inserire un nome utente e una password.

GitHub vi chiederà anche di scegliere le preferenze di posta elettronica.

Dopodiché, è possibile scorrere verso il basso e verificare il proprio account risolvendo un enigma.

È come un reCAPTCHA sul vostro sito WordPress.

Una volta verificato l’account, verrà visualizzata la dashboard di GitHub.

Da qui è possibile fare clic sull’icona “+” in alto e selezionare l’opzione “Nuovo repository”.

Quindi, si può iniziare impostando il nome del repository, come il nome della cartella del tema di WordPress.

Quindi, è necessario scegliere se si tratta di un repository pubblico o privato. I repository pubblici consentono a tutti di vedere il codice, ma non di modificarlo. I repository privati sono disponibili solo per voi.

Infine, è possibile selezionare la casella di controllo se si desidera aggiungere un file README.

Una volta fatto ciò, è sufficiente fare clic sul pulsante “Crea repository”.

Il vostro repository GitHub sarà ora pronto per l’uso.

Installare GitHub per Windows o Mac

Successivamente, è necessario inserire il codice del nostro tema WordPress nel nostro repository. Un modo semplice per farlo è utilizzare il client GitHub, che si installa sul computer.

È sufficiente visitare il sito web di GitHub Desktop e scaricare il client Desktop disponibile per Windows o Mac.

Una volta completato il download, lanciare il client GitHub.

Successivamente, è necessario effettuare l’accesso utilizzando il proprio account GitHub. Potete fare clic sul pulsante “Accedi a GitHub.com”.

In questo modo si avvia GitHub sul browser web.

È sufficiente fare clic sul pulsante “Autorizza desktop” per consentire a GitHub Desktop di accedere al proprio account.

Dopodiché, è possibile aprire il client GitHub Desktop.

Successivamente, è necessario configurare Git. È sufficiente selezionare l’opzione “Usa il nome e l’indirizzo e-mail del mio account GitHub” e fare clic sul pulsante “Fine”.

Aggiungiamo quindi il repository GitHub creato in precedenza.

Per farlo, fare clic sull’opzione “Clona un repository da Internet”.

Verrà visualizzato un elenco dei repository GitHub, compreso quello creato in precedenza.

È sufficiente selezionare il repository e scegliere dove memorizzarlo sul computer nel campo “Percorso locale”. Una volta fatto questo, si può fare clic sul pulsante “Clona”.

Ora avete clonato (copiato) il vostro repository ospitato su GitHub sul nostro computer.

Successivamente, è necessario aggiungere il codice del nostro tema WordPress alla cartella del repository e quindi eseguire il commit e la sincronizzazione del codice su GitHub.

Si può iniziare trovando sul computer la cartella selezionata nel passaggio precedente. Dovrebbe esserci un file README.md nella cartella. A seconda delle impostazioni del vostro computer, potreste anche vedere la cartella .git nascosta.

Una volta apportate le modifiche al codice del tema WordPress, è sufficiente copiarle e incollarle in questa cartella.

Successivamente, è possibile aprire l’applicazione GitHub per Mac o Windows e vedere i file appena aggiunti nella finestra:

Le modifiche sono evidenziate in verde. Si tratta delle modifiche salvate nel repository locale, ma non ancora impegnate.

Successivamente, è necessario eseguire il commit (caricare) di questi file su GitHub. Per farlo, basta inserire del testo nella casella Riepilogo per spiegare le modifiche apportate e fare clic sul pulsante “Commit to master”.

Questa operazione effettua il commit delle modifiche apportate al repository.

Per caricare le modifiche su GitHub, si può fare clic sul pulsante “Push origin”.

Per verificare che il commit sia stato caricato su GitHub, visitare il proprio repository sul sito web di GitHub. Se tutto funziona, si vedranno le modifiche al codice.

Impostazione di Deploy

Il passo finale consiste nell’assicurarsi che tutte le modifiche apportate al repository GitHub vengano trasferite al sito web WordPress.

DeployHQ, o Deploy, è un servizio basato sul web che monitora le modifiche al vostro repository GitHub e carica automaticamente o manualmente solo quelle modifiche sul vostro sito WordPress.

Immaginatelo come una connessione tra il vostro codice e il server web.

Per prima cosa, è necessario visitare il sito web di Deploy e registrarsi per un nuovo account. Deploy è un servizio a pagamento, ma offre un account gratuito per un progetto e 5 distribuzioni al giorno.

Dopo aver terminato la registrazione, è possibile accedere alla dashboard di Deploy.

Da qui è possibile fare clic sul pulsante “Crea un progetto” per iniziare.

Successivamente, è necessario fornire un nome al progetto.

Successivamente, è possibile selezionare GitHub come piattaforma di hosting del codice.

Se si scorre verso il basso, si trovano altre opzioni, come la scelta di una zona per il progetto e le opzioni avanzate.

Una volta terminato, fare clic sul pulsante “Crea progetto” per continuare.

Deploy vi reindirizzerà a GitHub.

Se non siete già registrati, vi verrà chiesto di effettuare il login. Successivamente, vi verrà chiesto di consentire a Deploy di accedere al vostro account GitHub.

È sufficiente fare clic sul pulsante “Autorizza krystal” per continuare.

Deploy recupera l’elenco dei repository da GitHub e chiede di selezionare un repository per questo progetto.

Basta fare clic sul repository del tema di WordPress e Deploy lo importerà per voi.

Nella fase successiva, Deploy vi chiederà di fornire le informazioni sul server. Qui si indica a Deploy come caricare i file sul vostro server WordPress.

Si può iniziare inserendo un nome e selezionando “FTP” come opzione di protocollo.

Successivamente, è necessario scorrere verso il basso e inserire le credenziali FTP.

• Hostname: l ‘host SFTP/FTP del vostro sito web
• Porta: la porta SFTP/FTP dell’host del sito web (in genere SFTP = 22, FTP = 21).
• Nome utente e password: Nome utente e password FTP
• Percorso di distribuzione: Il percorso in cui navigare prima di caricare i file del tema WordPress. Ad esempio, public_html/example.com/wp-content/themes/MyTheme, dove MyTheme è il tema di WordPress che avete caricato su GitHub.

Dopo aver inserito questi dati, fare clic sul pulsante “Salva ‘Crea server'”.

A questo punto Deploy testerà la connessione al server e, se tutto funziona correttamente, mostrerà un messaggio di successo.

Ora è possibile fare clic sul pulsante “Deploy” per caricare i file di GitHub sul sito web.

A questo punto viene visualizzato l’avanzamento dell’installazione.

Al termine di Deploy, verrà visualizzato un messaggio di successo.

Avete distribuito con successo le modifiche da GitHub al vostro sito web utilizzando Deploy. Ora, quando si apportano modifiche al tema WordPress sul computer, è necessario eseguire il commit su GitHub. Dopodiché, è necessario visitare il sito web di Deploy per avviare la distribuzione manuale.

Vediamo come impostare la distribuzione automatica, in modo che tutte le modifiche apportate a GitHub vengano automaticamente distribuite al vostro sito web.

Impostazione della distribuzione automatica

Per prima cosa, è necessario visitare la dashboard di Deploy e andare alla pagina ‘Progetti’. Da qui, è sufficiente fare clic sul nome del progetto.

Successivamente, si può passare alla scheda “Distribuzioni automatiche” dal menu a sinistra.

Qui è necessario abilitare l’opzione accanto al server per le distribuzioni automatiche.

Successivamente, dovrete copiare l’URL del webhook e aggiungerlo al vostro account GitHub.

È sufficiente accedere al proprio account GitHub in una nuova scheda del browser. Quindi fare clic sul proprio repository e dirigersi verso la scheda “Impostazioni”. Da qui, si può andare alla sezione Webhooks dal menu a sinistra e fare clic sul pulsante “Aggiungi webhook”.

Ora incollate l’URL del webhook copiato dalla pagina delle impostazioni del server Deploy nel campo dell’URL del payload.

Quindi, selezionare “application/x-www-form-urlencoded” come “Tipo di contenuto” dall’elenco a discesa:

Successivamente, è possibile scorrere verso il basso e selezionare quali eventi devono attivare il webhook. È possibile utilizzare l’impostazione predefinita.

Una volta fatto ciò, è sufficiente fare clic sul pulsante “Aggiungi webhook”.

Questo è tutto. Il vostro repository GitHub ora notificherà a Deploy le nuove modifiche apportate al vostro repository. Deploy implementerà automaticamente le modifiche al vostro sito web.

Speriamo che questo articolo vi abbia aiutato a capire come distribuire automaticamente le modifiche ai temi di WordPress utilizzando GitHub e Deploy. Potreste anche voler consultare la nostra guida su come aggiornare jQuery all’ultima versione di WordPress e su come verificare e aggiornare l’ultima versione di WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.