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

Vuoi distribuire automaticamente le modifiche ai temi di WordPress sul tuo sito web? La maggior parte degli sviluppatori web professionisti usa un sistema di controllo della versione come GitHub o BitBucket e distribuisce automaticamente le loro modifiche alla staging o al sito live. In questo articolo, ti mostreremo come distribuire automaticamente le modifiche ai temi di WordPress usando GitHub e Deploy.

Perché utilizzare il sistema di controllo versione per lo sviluppo di temi WordPress?

Per prima cosa, dobbiamo capire cosa controllo della versione si intende:

... un sistema che registra le modifiche a un file o un insieme di file nel tempo in modo che sia possibile richiamare versioni specifiche successivamente http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control

In altre parole, ogni volta che cambiamo un modello di tema WordPress, un'immagine o un file CSS, un sistema di controllo della versione tiene traccia di queste modifiche. In determinati punti, possiamo etichettare (commettere) un lotto di modifiche. Se tali modifiche causano un problema, possiamo ripristinare (o eseguire il rollback) su una "versione" esistente del nostro tema WordPress.

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

I sistemi di controllo di versione Git di terze parti ospitati, come GitHub e BitBucket, consentono agli utenti di lasciare problemi (o ticket) se individuano un problema con il codice. Le modifiche al codice possono essere inoltrate (etichettate) a fronte di un particolare problema, per mostrare le esatte modifiche al codice apportate per risolvere un problema. Questo è davvero utile quando si guarda indietro sul codice tra 6 o 12 mesi e si vuole sapere perché si è fatto qualcosa in un modo particolare.

Perché utilizzare un sistema di distribuzione?

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

Puoi vederlo come un sistema di sincronizzazione unidirezionale; ad esempio, se elimini un file dal tuo tema WordPress, dovresti ricordarti di eliminarlo tramite FTP. Con un sistema di distribuzione, questo viene fatto automaticamente quando si commettono le modifiche al codice in GitHub.

Configurare un repository GitHub per il tema WordPress

Per prima cosa configureremo un account su GitHub, useremo il client GitHub per Windows o Mac per archiviare il nostro tema WordPress in GitHub.

Vai su https://github.com e registrati per un account gratuito.

Dopo aver registrato e confermato il tuo indirizzo email, fai clic sull'icona più in alto a destra dello schermo e scegli Nuovo repository (un repository è un contenitore per il tuo codice - in questo caso, il nostro tema WordPress).

Inizia impostando il nome del repository - il nome della cartella del tuo tema WordPress è una buona idea. Quindi, scegli se questo è un Pubblico o Privato repository. Repository pubblici sono disponibili per tutti per vedere il tuo codice, ma non possono apportare modifiche ad esso. I repository privati ​​sono disponibili solo per te da vedere.

Infine, seleziona la casella di controllo qui sotto Inizializza questo repository con un README, e quindi fare clic su Crea repository pulsante.

Se tutto ha funzionato, dovresti vedere il tuo nuovo repository sullo schermo:

Installa GitHub per Windows / Mac

Successivamente, dobbiamo inserire il codice del nostro tema WordPress nel nostro repository. Possiamo farlo usando il client GitHub, che si installa sul tuo computer.

Basta visitare il sito Web GitHub Desktop e scaricare il client GitHub Desktop disponibile per Windows e Mac.

Una volta scaricato, avviare il processo di installazione facendo clic Continua

Nella schermata successiva, inserisci GitHub Login (Username) e Password, che hai creato quando ti sei registrato su GitHub. Clicca il Registrati pulsante quando fatto.

Se i dettagli di accesso sono corretti, verrà visualizzato il tuo account. Clicca il Continua pulsante per procedere:

Possiamo lasciare il Git Config sezione come impostazioni predefinite. Assicurati di fare clic sul Installa gli strumenti della riga di comando opzione, prima di fare clic sul Continua pulsante:

Infine, fai clic su Fine, e ti verrà presentata la schermata GitHub.

Aggiungiamo il nostro repository GitHub che abbiamo creato in precedenza. Per fare ciò, fai clic sull'icona più nell'angolo in alto a destra, quindi su Clone opzione. Vedrai un elenco dei tuoi repository GitHub, incluso quello che abbiamo creato in precedenza:

Fare clic sul repository creato in precedenza, quindi fare clic su Clone pulsante.

Scegli dove vuoi salvare il repository sul tuo computer e fai clic su Clone pulsante una volta scelto questo.

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

Successivamente, dobbiamo aggiungere il nostro codice Tema WordPress alla cartella del repository, quindi impegnare e sincronizzare questo codice in GitHub.

Inizia trovando la cartella selezionata nel passaggio precedente sul tuo computer. Dovrebbe avere un README.md file nella cartella. A seconda delle impostazioni del tuo computer, potresti anche vedere il nascosto .idiota cartella:

Copia e incolla il codice del tuo tema WordPress in questa cartella:

Apri l'app GitHub Mac o Windows e vedrai ora i file che hai appena aggiunto apparire nella finestra:

Vedrai le modifiche evidenziate in verde. Queste sono le modifiche che hai salvato nel repository locale ma non hai ancora effettuato il commit di tali modifiche.

Successivamente, dobbiamo impegnare (caricare) questi file su GitHub. Per fare ciò, inserisci del testo nel Sommario box per spiegare le modifiche che abbiamo apportato (ad es. Il mio primo impegno) e fare clic su Impegnati a padroneggiare pulsante.

Ciò impegna le modifiche apportate al repository. Per caricare tali modifiche su GitHub, fai clic sul pulsante Sincronizza nell'angolo in alto a destra della finestra dell'applicazione GitHub.

Per verificare che il tuo impegno sia stato caricato su GitHub, visita il tuo repository sul sito web GitHub. Se tutto ha funzionato, vedrai il tuo codice:

Impostazione della distribuzione

Finora, abbiamo installato GitHub e inserito il codice del tema WordPress nel repository GitHub. Il passaggio finale è caricare qualsiasi modifica sul repository GitHub sul tuo sito Web WordPress.

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

Immagina come una connessione nel mezzo del tuo codice e server web:

Per prima cosa è necessario visitare il sito Web di distribuzione e l'iscrizione. La distribuzione è un servizio a pagamento, ma offre un account gratuito per un progetto e 10 distribuzioni al giorno.

Dopo aver terminato la registrazione, è possibile accedere al dashboard di distribuzione. Clicca su crea un nuovo progetto per iniziare.

Successivamente è necessario fornire un nome per il progetto e selezionare la piattaforma di hosting del codice, GitHub. Clicca sul pulsante crea progetto per continuare.

La distribuzione ora ti reindirizzerà a GitHub. Se non hai già effettuato l'accesso, ti verrà chiesto di effettuare il login. Successivamente, ti verrà chiesto di consentire a Deploy di accedere al tuo account GitHub.

Fare clic sul pulsante "Autorizza applicazione" per continuare.

Deploy preleverà l'elenco dei tuoi repository da GitHub e ti chiederà di selezionare un repository per questo progetto.

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

Nel passaggio successivo, Deploy ti chiederà di fornire le informazioni sul server. Qui è dove dici Distribuire come caricare i file sul tuo server WordPress.

Avrai bisogno delle tue credenziali FTP per questo.

• Nome: Fornire un nome per questa connessione
• Protocollo: FTP o se si dispone di SFTP o SSH, quindi è possibile utilizzare anche quelli
• Nome host: Host SFTP / FTP del tuo sito web.
• Porta: Porta SFTP / FTP del tuo host del sito web (tipicamente SFTP = 22, FTP = 21)
• Nome utente e password: Nome utente e password FTP.
• Percorso di distribuzione: Il percorso verso cui avresti navigato prima di caricare i tuoi file tematici WordPress. Per esempio, public_html / example.com / wp-content / themes / MyTheme, dove MyTheme è il tema WordPress che ti sei impegnato a GitHub.

Fare clic sul pulsante Salva per continuare.

La distribuzione testerà ora la connessione al server e se tutto funziona correttamente, mostrerà un messaggio di successo.

Ora puoi fare clic sul pulsante Distribuisci ora per caricare i tuoi file GitHub sul tuo sito web.

La distribuzione mostrerà i dettagli di questa distribuzione. Basta fare clic sul pulsante Distribuisci in basso.

Ora vedrai i progressi della distribuzione. Al termine della distribuzione, verrà visualizzato un messaggio di successo.

Avete distribuito con successo le modifiche da GitHub al vostro sito Web usando Deploy. Ora quando apporti modifiche al tuo tema WordPress sul tuo computer, devi impegnarli su GitHub. Dopodiché è necessario visitare il sito Web Deploy per avviare manualmente la distribuzione.

Vediamo come configurare la distribuzione automatica in modo che le modifiche che apporti a GitHub vengano distribuite automaticamente sul tuo sito web.

Impostazione della distribuzione automatica

Per prima cosa è necessario visitare il dashboard Deploy e andare alla pagina Progetti. Clicca sul nome del tuo progetto.

Dalla pagina del progetto, porta il mouse nel menu Impostazioni e seleziona Server e gruppi.

Fai clic sull'icona di modifica accanto al tuo server.

Questo ti porterà a modificare lo schermo del server. Nella colonna di destra troverai le impostazioni di distribuzione automatica.

Assicurati che sia acceso. Di seguito visualizzerai un URL. Copia questo URL come ne avrai bisogno nel prossimo passaggio.

Accedi al tuo account GitHub in una nuova scheda del browser. Fare clic sul repository e quindi fare clic su Impostazioni. Clicca sul link Webhooks e servizi.

Fai clic sul pulsante Aggiungi Webhook.

Incollare l'URL copiato dalla pagina delle impostazioni del server di distribuzione nel campo Payload URL. Selezionare application / x-www-form-urlencoded come il tipo di contenuto e premere Aggiungi webhook.

Questo è tutto, il tuo repository GitHub ora notificherà la distribuzione quando ci sono nuove modifiche al tuo repository. La distribuzione quindi distribuirà automaticamente tali modifiche sul tuo sito web.

Test della distribuzione automatica

Per testare la distribuzione automatica è sufficiente apportare alcune modifiche al repository di temi WordPress sul tuo computer.

Apri l'app per desktop GitHub e poi conferma le modifiche.

Non dimenticare di fare clic sul pulsante di sincronizzazione.

Ora visita il tuo progetto sulla dashboard di distribuzione. Fai clic sulle distribuzioni e troverai la distribuzione automatica elencata lì.

Questo è tutto, ci auguriamo che questo articolo ti abbia aiutato a scoprire come distribuire automaticamente le modifiche ai temi di WordPress mediante GitHub e Deploy. Potresti anche voler vedere la nostra guida su come creare un ambiente di staging per un sito WordPress.

.