Come creare un flusso di lavoro WordPress efficace per gli sviluppatori

WordPress è un'ottima piattaforma, ma a volte può anche essere un po' disorganizzata, almeno dal punto di vista del codice. Ciò è dovuto al fatto che il codice ha subito molte iterazioni e, man mano che gli aggiornamenti vengono implementati, a volte le cose vengono codificate nel modo più efficiente possibile.

Solo perché il codice può essere un po' dappertutto a volte non significa che il tuo processo di sviluppo debba seguire l'esempio. Sebbene il codice disordinato sia spesso giustificato a causa di programmi di produzione veloci, puoi effettivamente guadagnare di più come sviluppatore web implementando un flusso di lavoro adeguato.

In questo articolo, tratteremo alcuni suggerimenti per aiutarti a sviluppare siti WordPress nel modo giusto con gli strumenti giusti a portata di mano. Forniremo anche una procedura dettagliata per aiutarti a seguire questi suggerimenti.

Seguendo questa guida, puoi evitare alcuni dei problemi comuni che si verificano durante lo sviluppo di siti WordPress. E sarai anche in grado di creare un sito facile da mantenere e aggiornare.

Quindi iniziamo!

Attributi del codice di alta qualità

Prima di approfondire la nostra guida completa sulla creazione di un flusso di lavoro di sviluppo WordPress, soffermiamoci un momento a discutere del motivo per cui un codice di alta qualità è davvero importante. Molto.

Quando pensi al codice per il tuo sito, ci sono alcuni attributi chiave che dovresti tenere a mente. Questi attributi ti aiuteranno a garantire che il tuo codice sia pulito, ben organizzato e di facile comprensione.

Ecco alcuni attributi del codice di alta qualità:

• snella
• Facile da seguire
• Modulare
• Ben commentato
• Può essere riutilizzato e mantenuto facilmente

Questi attributi possono sembrare molti da tenere a mente, ma non preoccuparti. Tratteremo completamente come raggiungerli nella nostra guida. Ma prima, dobbiamo parlare del motivo per cui il tuo flusso di lavoro di sviluppo deve semplicemente rispettare questi standard.

Perché lo sviluppo di WordPress richiede pratiche di codifica di alto livello

Affinché un sito Web WordPress funzioni correttamente, il codice che compone il sito deve essere di alta qualità. Questo è particolarmente importante per i siti Web WordPress perché sono spesso complessi, con molte parti mobili diverse.

Ci sono molte ragioni per cui le pratiche di codifica sono importanti per lo sviluppo di WordPress:

1. I siti Web WordPress sono complessi.
2. Una singola riga di codice può avere un grande impatto.
3. Il codice deve essere ben scritto e ben testato.
4. Il codice di alta qualità è più facile da mantenere.
5. Il codice di qualità può aiutare a migliorare le prestazioni.

Tenere a mente questi punti durante il processo di pianificazione dello sviluppo può aiutarti a tenere d'occhio il premio, per così dire.

Suggerimenti per il miglioramento del flusso di lavoro di WordPress

Ora che abbiamo parlato del motivo per cui è importante avere un codice ben scritto, esaminiamo alcuni suggerimenti per aiutarti a migliorare il flusso di lavoro di WordPress per ogni singolo progetto. Ognuno dei seguenti suggerimenti ti aiuterà a garantire che il tuo codice WordPress sia pulito e ottimizzato, che è quella che dovrebbe essere la tua priorità nel 2022 e oltre.

Utilizza la messa in scena

Un sito di staging è una copia del tuo sito live che puoi utilizzare per testare le modifiche prima di apportarle sul tuo sito live. Questo è uno strumento prezioso perché ti consente di sperimentare le modifiche senza influire sul tuo sito live.

Ci sono molti vantaggi nell'utilizzo di un sito di staging:

1. Puoi testare le modifiche prima di apportarle sul tuo sito live.
2. Puoi evitare potenziali problemi testando su un sito di staging.
3. Puoi assicurarti che le modifiche funzionino come previsto.
4. Puoi evitare potenziali tempi di inattività sul tuo sito live.
5. Puoi ridurre il rischio di rompere il tuo sito live.

E quando utilizzi il componente aggiuntivo Premium Staging Environment per Kinsta, puoi creare automaticamente un ambiente di staging con ciascuno dei tuoi siti WordPress senza dover eseguire operazioni manuali. È un vero risparmio di tempo.

Implementa il controllo della versione

Il controllo della versione è un sistema che tiene traccia delle modifiche ai file nel tempo. Questo è prezioso per lo sviluppo di WordPress perché ti consente di tenere traccia delle modifiche e ripristinare le versioni precedenti, se necessario.

Per la maggior parte, questo significa usare Git, che è un popolare sistema di controllo della versione. Se non hai familiarità, Git è un sistema di controllo della versione distribuito gratuito e open source progettato per gestire qualsiasi cosa, dai progetti piccoli a quelli molto grandi, con velocità ed efficienza.

È particolarmente utile quando si lavora con un grande team distribuito. L'ultima cosa in cui vuoi imbatterti sono più versioni del tuo file functions.php , tutte con un nome leggermente diverso, nell'installazione di WordPress perché più persone stavano apportando modifiche contemporaneamente.

Git contro GitHub

Git è un sistema di controllo della versione, uno strumento per gestire la cronologia del codice sorgente. GitHub è una società che fornisce hosting per progetti di sviluppo software che utilizzano Git.

Sono due cose diverse, ma la maggior parte delle persone usa il termine "Git" per riferirsi sia a Git che a GitHub.

Pianifica backup automatici

Uno degli aspetti più importanti dello sviluppo di WordPress sono i backup. I backup sono vitali perché ti consentono di ripristinare il tuo sito se qualcosa va storto.

Esistono molti modi per automatizzare i backup, ma uno dei modi più semplici è utilizzare un plug-in di backup di WordPress. Sono disponibili molti ottimi plugin di backup, ma ti consigliamo di utilizzare il componente aggiuntivo Kinsta Automated External Backups.

Questo componente aggiuntivo creerà automaticamente backup del tuo sito WordPress su base giornaliera e li memorizzerà su un server esterno.

Approfitta di Linting

Linting è il processo di verifica della presenza di errori nel codice. Questo è prezioso per lo sviluppo di WordPress perché può aiutarti a trovare e correggere gli errori nel tuo codice.

Molti editor di codice lo fanno automaticamente, ma se vuoi essere certo che la tua offra questa funzione, considera l'utilizzo di uno dei seguenti editor di codice e di testo:

• Testo sublime: questo editor di codice ha molte funzionalità, incluso il linting.
• Atom: questo editor di codice ha anche linting integrato.
• Vim: questo editor di testo offre anche linting e molte altre funzionalità.
• Codice di Visual Studio: questo editor di codice ha linting disponibile per impostazione predefinita.
• PHPStorm: questo è un ambiente di sviluppo a pagamento che dispone di linting.

Usa un generatore di codice

Un generatore di codice è uno strumento che può generare automaticamente codice per te. Questo è prezioso per lo sviluppo di WordPress perché può farti risparmiare tempo e aiutarti a evitare errori.

Sono disponibili molti generatori di codice, ma alcuni dei più popolari includono:

• GenerateWP: questo generatore di codice può generare codice per tipi di post personalizzati, tassonomie, metabox e altro.
• Hasty: questo generatore di codice può generare codice per tipi di post, tassonomie e campi personalizzati.
• Generatore di codice per temi Nimbus: questo generatore di codice può generare codice per tipi di post, tassonomie e campi personalizzati.

Usa WP-CLI

WP-CLI è un'interfaccia a riga di comando per WordPress. Questo è prezioso per lo sviluppo di WordPress perché ti consente di gestire il tuo sito WordPress dalla riga di comando.

Ciò è particolarmente utile quando è necessario eseguire attività ripetitive o che richiedono molti passaggi. Ad esempio, WP-CLI può essere utilizzato per installare WordPress, creare post e pagine, installare plugin e temi e molto altro. È anche utile quando devi apportare modifiche a più siti contemporaneamente.

Usa un framework di sviluppo WordPress

Un framework di sviluppo WordPress è uno strumento che può aiutarti a semplificare il tuo flusso di lavoro. Questo è prezioso per lo sviluppo di WordPress perché può farti risparmiare tempo e aiutarti a evitare errori.

Ci sono molti framework di sviluppo WordPress disponibili, ma alcuni dei più popolari includono:

• Genesis: questo framework di StudioPress è progettato per aiutarti a creare siti WordPress più velocemente.
• Punti di sottolineatura: questo framework di Automattic è progettato per aiutarti a iniziare a sviluppare rapidamente temi WordPress.
• Fondazione: questo framework di Zurb è progettato per aiutarti a creare siti WordPress reattivi.
• Bootstrap: questo framework di Twitter è un modo super utile per creare design reattivi per siti Web WordPress.

Usa i Task Runner

Un task runner è uno strumento in grado di automatizzare le attività. Questo è prezioso per lo sviluppo di WordPress perché può farti risparmiare tempo e aiutarti a evitare errori. Consente inoltre di eseguire più attività contemporaneamente.

Sono disponibili molti task runner, ma alcuni dei più popolari includono:

• Gulp: questo task runner può essere utilizzato per automatizzare attività come la pre-elaborazione CSS, il linting JavaScript e altro ancora.
• Grunt: Grunt è un task runner Javascript che aiuta ad automatizzare molte delle tue attività più ripetitive.
• Webpack: questo task runner può essere utilizzato per automatizzare attività come il raggruppamento di file JavaScript e altro.

Prendi familiarità con Vue.js o Reagisci ora

Anche se potresti non utilizzare subito Vue.js o React, è importante acquisire familiarità con questi framework ora. Questo è prezioso per lo sviluppo di WordPress perché stanno diventando sempre più popolari e vengono utilizzati sempre di più con il passare del tempo.

Vue.js è un framework JavaScript che consente di creare interfacce utente reattive. React è una libreria JavaScript per la creazione di interfacce utente.

Sia Vue.js che React sono scelte popolari per lo sviluppo di WordPress perché sono veloci, leggeri e facili da usare e sono essenziali per trasformare WordPress in un CMS headless.

Perché dedicare tempo alla pianificazione del flusso di lavoro di WordPress è vitale

I siti Web WordPress sono complessi ed è importante disporre di un flusso di lavoro ben pianificato prima di iniziare qualsiasi progetto. Prendendoti il ​​tempo necessario per pianificare il tuo flusso di lavoro, puoi risparmiare tempo ed evitare potenziali problemi lungo la strada.

Ci sono molti vantaggi nella pianificazione del flusso di lavoro di WordPress:

• Puoi risparmiare tempo sapendo cosa deve essere fatto.
• Puoi evitare potenziali problemi pianificando in anticipo.
• Puoi assicurarti che tutte le attività necessarie siano state completate.
• Puoi assicurarti che il tuo flusso di lavoro sia efficiente ed efficace.
• Puoi prevenire problemi durante la consegna di progetti a collaboratori o clienti

Dedicare tempo alla pianificazione del flusso di lavoro di WordPress è fondamentale perché può farti risparmiare tempo e aiutarti a evitare potenziali problemi. Prendendoti del tempo per pianificare il tuo flusso di lavoro, puoi assicurarti che tutte le attività necessarie siano completate e che il tuo flusso di lavoro sia efficiente ed efficace.

Il flusso di lavoro WordPress ideale per lo sviluppo

Esistono molti modi per affrontare il flusso di lavoro di WordPress, ma ci sono alcuni passaggi essenziali che dovrebbero essere inclusi nel processo di sviluppo.

Passaggio 1: impostare un ambiente di sviluppo locale

Il primo passo in qualsiasi flusso di lavoro di WordPress dovrebbe essere la creazione di un ambiente di sviluppo locale. Questo è importante perché ti consente di lavorare offline sul tuo sito WordPress, risparmiando tempo e prevenendo errori.

Esistono molti modi per configurare un ambiente di sviluppo locale, dipende solo dalla configurazione che preferisci utilizzare. Consigliamo DevKinsta per questo.

Ti consigliamo di utilizzare Kinsta Staging e il componente aggiuntivo Premium Staging Environments. Questo ti offre un ambiente di sviluppo WordPress completo con un clic per tornare a vivere.

Puoi anche lavorare su più progetti contemporaneamente e unire le modifiche prima di andare in diretta. Viene inoltre fornito con test A/B integrati, test di compatibilità dei plug-in e test ad alta intensità di risorse per garantire ulteriormente che le build siano strutturate in modo appropriato.

Per iniziare con il componente aggiuntivo Premium Staging Environments, devi semplicemente acquistarlo tramite il tuo account Kinsta. Per attivare l'ambiente di staging, vai su MyKinsta, quindi fai clic su Ambiente > Crea nuovo ambiente nella parte superiore dello schermo.

Passaggio 2: imposta il controllo della versione

Il secondo passaggio in qualsiasi flusso di lavoro di WordPress dovrebbe essere l'impostazione del controllo della versione. Questo è importante perché ti consente di tenere traccia delle modifiche al codice e di ripristinare le versioni precedenti, se necessario.

Per fare ciò, puoi utilizzare uno strumento come Git. Tale processo è simile al seguente

1. Crea un repository su GitHub

Per creare un repository su GitHub, puoi utilizzare i seguenti passaggi:

1. Accedi al tuo account GitHub e fai clic sul segno + nell'angolo in alto a destra.
2. Seleziona Nuovo repository dal menu a discesa.
3. Inserisci un nome per il tuo repository e una descrizione, quindi fai clic su Crea repository .

2. Clona il repository nel tuo ambiente di sviluppo locale

Nel nostro caso, useremo DevKinsta per il nostro esempio.

1. Nella pagina GitHub del tuo repository, fai clic sul pulsante Clona o scarica .
2. Nella sezione Clona con HTTPs , copia l'URL del tuo repository.
3. Nel tuo ambiente di sviluppo, apri un terminale e passa alla directory in cui desideri clonare il tuo repository.
4. Digita il seguente comando, sostituendo l'URL che hai copiato da Github:

 git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git

Questo clonerà il tuo repository nel tuo ambiente di sviluppo locale.

3. Aggiungi file e conferma le modifiche

1. Aggiungi i file che desideri monitorare con Git alla directory del repository sul tuo computer.
2. Digita git add seguito dal nome del file oppure usa git add . per aggiungere tutti i file nella directory.
3. Digita git commit -m seguito da un messaggio che descrive le modifiche apportate.
4. Per inviare le modifiche a Github, digita git push .

Ora puoi continuare ad apportare modifiche ai file sul tuo computer e inviarli a GitHub. Quando vuoi recuperare l'ultima versione dei file da Github, puoi usare il comando git pull .

Se non stai usando GitHub, puoi anche usare Bitbucket in modo simile.

Passaggio 3: sviluppo locale

Dopo aver impostato l'ambiente di sviluppo locale e il controllo della versione, è il momento di iniziare a sviluppare il tuo sito WordPress in locale offline.

Durante lo sviluppo locale, puoi testare le modifiche sul tuo sito di staging prima di pubblicarle. Questo è importante perché ti consente di rilevare eventuali errori o bug prima che influiscano sul tuo sito live.

Per trasferire le modifiche dal tuo ambiente di sviluppo locale al tuo sito di staging, puoi utilizzare uno strumento come DevKinsta. Questo strumento semplifica il push delle modifiche dal tuo ambiente di sviluppo locale al tuo sito di staging con pochi clic.

Passaggio 4: utilizzare WP-CLI

WP-CLI è un'interfaccia a riga di comando per WordPress che ti consente di gestire il tuo sito WordPress dal terminale. Questo può essere utile per attività come la creazione e la gestione degli utenti, l'installazione e l'aggiornamento dei plug-in e molto altro.

Per installare WP-CLI, attenersi alla seguente procedura:

1. Scarica il file WP-CLI phar .
2. Sposta il file in una directory nel tuo PERCORSO (ad esempio, /usr/local/bin ).
3. Rinomina il file in wp .
4. Rendi il file eseguibile (ad esempio, chmod +x /usr/local/bin/wp ).
5. Verifica che WP-CLI sia installato eseguendo wp –version .

Da lì, puoi utilizzare WP-CLI per gestire il tuo sito WordPress dalla riga di comando. Per un elenco completo dei comandi, puoi consultare la nostra guida approfondita a WP-CLI v2.

Passaggio 5: automatizza il flusso di lavoro con Gulp

Gulp è un task runner che ti consente di automatizzare attività come la minimizzazione di file CSS e JavaScript, la compilazione di file Sass e molto altro.

Per utilizzare Gulp, devi prima installarlo a livello globale sul tuo sistema. Per fare ciò, avrai bisogno di Node.js, npm e, ovviamente, Gulp. Esegui il seguente comando in Node.js:

 npm install gulp-cli -g

Una volta installato Gulp, puoi creare un file gulpfile.js nella radice del tuo progetto. Questo file contiene il codice per le tue attività Gulp.

Ad esempio, il seguente file gulpfile.js contiene un'attività per minimizzare i file CSS:

 var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); gulp.task('minify-css', function() { return gulp.src('src/*.css') .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist')); });

Per eseguire questa attività, è possibile utilizzare il comando seguente:

 gulp minify-css

Passaggio 6: usa Linting

Gli strumenti Linting sono strumenti di analisi del codice statico che ti aiutano a trovare errori nel tuo codice. Per i nostri scopi qui, stiamo usando Atom.io con i seguenti pacchetti di linting:

• atomo-abbellire
• atomo-ternjs
• linter
• linter-eslint
• linter-php
• linter-sass-lint

Nel tuo terminale, vai alla directory che vuoi lint ed esegui il seguente comando:

 find . -name "*.js" -o -name "*.scss" | xargs eslint --fix

Questo eliminerà tutti i file JavaScript e Sass nel tuo progetto.

Se vuoi lint un file specifico, puoi eseguire il seguente comando:

 eslint --fix file-name.js

Sostituisci file-name.js con il nome del file che vuoi lint.

Passaggio 7: utilizzare un preprocessore CSS

Un preprocessore CSS è uno strumento che ti consente di scrivere CSS in una lingua diversa e quindi compilarlo in CSS. I due preprocessori CSS più popolari sono Sass e Less.

In questo tutorial utilizzeremo Sass. Per utilizzare Sass, devi prima installare lo strumento da riga di comando Sass. Per fare ciò, esegui il seguente comando:

 gem install sass

Una volta installato Sass, puoi utilizzare il seguente comando per compilare un file Sass in CSS:

 sass input.scss output.css

Sostituisci input.scss con il nome del tuo file Sass e output.css con il nome del file CSS che vuoi creare.

Se vuoi controllare i tuoi file Sass per le modifiche e compilarli automaticamente in CSS, puoi usare il seguente comando:

 sass --watch input.scss:output.css

Sostituisci input.scss con il nome del tuo file Sass e output.css con il nome del file CSS che vuoi creare.

Passaggio 8: utilizzare un plug-in di distribuzione

Un plug-in di distribuzione è uno strumento che ti consente di distribuire facilmente il tuo sito WordPress da un ambiente di sviluppo locale a un server live.

Esistono diversi strumenti che puoi utilizzare per questo scopo, ma ti consigliamo di utilizzare WP Pusher. WP Pusher è un plug-in di distribuzione gratuito che puoi utilizzare con il tuo sito WordPress.

Per installare WP Pusher, innanzitutto, scarica il file ZIP dal sito Web di WP Pusher. Quindi, accedi al tuo sito WordPress e vai su Plugin> Aggiungi nuovo . Fare clic sul pulsante Carica plug -in e selezionare il file ZIP appena scaricato. Una volta installato e attivato il plug-in, puoi andare su Impostazioni> WP Pusher per configurarlo.

Una volta configurato WP Pusher, puoi distribuire plugin e temi WordPress sul tuo server live senza dover interagire con l'interfaccia FTP o fare confusione con il tuo database WordPress.

Passaggio 9: utilizza l'API Rest di WordPress

L'API REST di WordPress è un potente strumento che ti consente di interagire con il tuo sito WordPress dall'esterno dell'interfaccia di amministrazione di WordPress.

L'API REST di WordPress può essere utilizzata per creare soluzioni personalizzate per il tuo sito WordPress. Ad esempio, puoi utilizzare l'API REST di WordPress per creare un'app mobile per il tuo sito WordPress o per creare una dashboard personalizzata.

Per iniziare con l'API REST di WordPress, dovrai interfacciarti con essa tramite l'interfaccia della riga di comando di WordPress. Di recente abbiamo pubblicato un tutorial su come configurare l'API REST di WordPress che può guidarti attraverso ogni passaggio.

Passaggio 10: crea e segui una guida di stile

Una guida di stile è un insieme di linee guida per la codifica e la progettazione del tuo sito WordPress. Una guida di stile aiuta a garantire che il codice sia coerente e di facile lettura.

Esistono diverse guide di stile che puoi utilizzare per il tuo progetto WordPress. Ti consigliamo di utilizzare gli standard di codifica di WordPress come punto di partenza. Tuttavia, probabilmente apporterai numerose modifiche e aggiunte col passare del tempo.

È probabile che qualsiasi guida di stile che crei cambierà continuamente. Ma il punto importante è che fornisce una raccolta definita di passaggi da intraprendere e linee guida da seguire per tutti gli sviluppatori del tuo team.

In sostanza, la tua guida di stile dovrebbe essere il tuo flusso di lavoro WordPress in forma scritta.

Passaggio 11: invia il tuo sito in tempo reale

Dopo aver completato tutti i passaggi precedenti, il tuo sito WordPress è pronto per essere pubblicato. Se stai utilizzando un plug-in di distribuzione come WP Pusher, questo processo è semplice come inviare il codice al tuo repository Git remoto.

Puoi farlo anche direttamente all'interno di Kinsta, andando su MyKinsta > Siti , selezionando il tuo sito, quindi facendo clic su Azioni ambientali . Da lì, fai clic su Push to Live .

Quindi, seleziona la casella accanto a File o Database (per selezionare entrambi), digita il nome del sito, quindi fai clic su Push to Live .

Se non stai utilizzando un plug-in di distribuzione o Git, puoi semplicemente esportare il tuo database WordPress dal tuo ambiente di sviluppo locale e importarlo nel tuo server live. Puoi farlo andando su Strumenti > Esporta nella dashboard di amministrazione di WordPress.

Quindi, seleziona Tutto il contenuto dalle opzioni di esportazione e fai clic sul pulsante Scarica file di esportazione . Una volta che hai il tuo file di database, puoi importarlo nel tuo server live andando su Strumenti> Importa nella dashboard di amministrazione di WordPress. Seleziona il file di database che hai appena esportato e fai clic sul pulsante Carica file e importa .

Puoi anche trasferire manualmente i tuoi file WordPress dal tuo ambiente di sviluppo locale al tuo server live utilizzando un client FTP come FileZilla. Collegati semplicemente al tuo server live tramite FTP, quindi trascina e rilascia i tuoi file WordPress nella directory public_html .

Una volta che hai pubblicato il tuo sito WordPress, puoi prenderti il ​​tuo tempo per testare tutto e assicurarti che tutto funzioni come dovrebbe.

Questo sarebbe anche un buon momento per assicurarsi che Kinsta AMP sia attivo e funzionante correttamente. Questo strumento di monitoraggio delle prestazioni terrà d'occhio le prestazioni del tuo server e si assicurerà che il tuo sito funzioni il più velocemente possibile.

Riepilogo

Come puoi vedere, c'è molto da fare per creare correttamente un flusso di lavoro di sviluppo di WordPress. Ma seguire questi passaggi ti aiuterà a garantire che il tuo sito WordPress sia ben organizzato, facile da gestire e funzioni senza intoppi.

E non puoi sbagliare appoggiandoti a prodotti Kinsta come DevKinsta, componente aggiuntivo Premium Staging Environments e Kinsta AMP. Questi strumenti renderanno il flusso di lavoro di sviluppo di WordPress ancora più semplice ed efficiente.

Hai domande sulla creazione di un flusso di lavoro di sviluppo WordPress? Fateci sapere nei commenti qui sotto!