Site icon WordPress la Guida Completa blog ufficiale

Cosa occorre per sviluppare un tema per WordPress da zero

Condividi se ti piace!

In realtà sarebbe una follia sviluppare un tema WordPress ‘da zero’, ovvero riscrivendo il codice che è alla base di qualsiasi tema, senza avere le necessarie conoscenze in fatto di codice. Per questo motivo uno degli ‘ingredienti’ principali da avere a disposizione quando si decide di cimentarsi nello sviluppo di un tema WordPress per la prima volta è il cosiddetto ‘starter theme’, ovvero un tema ridotto all’osso che si presta perciò a un’estrema personalizzazione per assumere le caratteristiche più adatte al risultate finale di un progetto di questo tipo.

Saranno, quindi, i temi starter uno dei tanti strumenti elencati in questa rassegna, mentre per le modalità operative vere e proprie non posso che indirizzarvi all’articolo che raccoglie i video sulla creazione di un tema WordPress o all’elenco di risorse alla fine di questo articolo.

Passiamo, quindi, agli elementi fondamentali per chi decide di sviluppare un tema WordPress, dando per scontate appunto quelle conoscenze indispensabili di cui si parlava in fatto di PHP, HTML, CSS e JavaScript.


1. hardware adatto

Quando si parla di web, si ha sempre l’impressione che tutto sia così ‘leggero’ da richiedere poche risorse, infatti oggi siamo abituati a visualizzare i siti su smartphon e tablet, e in generale qualsiasi computer, anche quelli meno potenti, è in grado di permettere una decente navigazione sul web.

Una postazione idonea per uno sviluppatore deve sempre comprendere un computer potente (anche se portatile), una tastiera e un mouse comodi e uno schermo ampio e ben definito, esterno nel caso del portatile, o doppio nel caso di un desktop (fonte immagine: Reddit).

Quando si tratta di sviluppo, tuttavia, è sempre consigliabile partire da una base hardware idonea, che presuppone un computer veloce (con processore recente, RAM sufficiente e disco SSD) affiancato da un buon monitor dal display ampio e definito (c’è chi ne utilizza addirittura due affiancati per avere il codice da una parte e l’anteprima del risultato dall’altra) e naturalmente da mouse e tastiera altrettanto comodi (vedi foto).


2. server locale e macchina virtuale

La cartella di XAMPP su Windows, con la sotto-cartella del sito e i file di WordPress visibili.

La velocità e flessibilità che si ottiene lavorando in locale sarà sempre maggiore rispetto a quanto si può ottenere anche con il miglior server e piano di hosting. Per questo motivo chi decide di cimentarsi nello sviluppo di temi WordPress farà bene a installare sul suo computer un server locale prima di ogni altra cosa, per esempio XAMPP per Windows o  MAMP per Mac OSX.

Volendosi spingere oltre, infine, si può ricorrere all’utilizzo di una macchina virtuale come DockerVagrant, isolando così completamente l’ambiente di sviluppo dal resto del sistema operativo e ottenendo un server in grado di simulare quelli che ospitano i siti sul web.


3. ambiente di sviluppo

La home page del sito ufficiale dell’ambiente di sviluppo Atom, piuttosto diffuso fra chi crea temi per WordPress.

Come dicevo a inizio capitolo, sarebbe follia pensare di riscrivere l’intero codice di un tema a mano, infatti qualsiasi sviluppatore che si rispetti ricorrerà inevitabilmente all’uso di un ambiente di sviluppo (IDE). Ogni sviluppatore ha i suoi IDE preferiti, c’è chi usa Atom, chi Espresso, chi Neatbeans e così via. La scelta è abbastanza ampia, e può essere utile consultarsi con chi già lavora nel settore per decidere con cognizione di causa. Infine, ogni programmatore degno di tale definizione utilizzerà, prima o poi, Github per tenere traccia delle fasi di sviluppo.


4. programma di grafica

Quando si parla di grafica viene inevitabilmente da pensare a Photoshop di Adobe, e in effetti è proprio questo il software più utilizzato da chi si occupa di sviluppo dei temi in maniera professionale, tuttavia esistono numerose alternative che, seppure meno potenti, possono risultare altrettanto valide per questo lavoro, addirittura gratuite come GIMP. Una delle caratteristiche importanti da cercare nell’eventuale applicazione che si decide di adottare è la gestione dei livelli, in quanto questi ultimi permettono di simulare più comodamente la struttura del sito, isolando gli elementi ‘fittizi’ da quelli reali, ma sono altrettanto fondamentali le guide e allo strumento di ritaglio (slice), che permettono a lavoro ultimato di separare gli elementi costitutivi del tema.


5. tema ‘starter’

La home page del framework Genesis di StudioPress.

Così come sarebbe folle mettersi a digitare il codice da zero piuttosto che usare un IDE, decidere di comporre le righe di codice di un tema partendo da zero potrebbe essere interpretato come un tentativo di suicidio se manca la base di conoscenza del codice alla base di qualsiasi tema WordPress. Non a caso, la maggior parte degli sviluppatori di temi per WordPress parte sempre da un tema ‘di base’, detto in inglese starter theme, per esempio il popolare Underscores (o semplicemente _s), utilizzato come base per lo sviluppo dei temi della serie ‘twenty’ di WordPress ma anche di altri temi starter, o qualsiasi altro tema di questo tipo come Bones. Si tratta in genere di soluzioni gratuite, ma si può anche ricorrere a soluzioni a pagamento, e altrettanto popolari fra gli sviluppatori, come il framework Genesis. Spesso, infine, gli sviluppatori finiscono per creare un loro starter theme che poi utilizzano per tutti i temi sviluppati successivamente. Insomma, dipende dal grado di esperienza e di conoscenza del codice, ma anche dal proprio ‘spirito di indipendenza e libertà’. 🙂

A proposito di starter theme, vi segnalo questo video (in inglese) dedicato al tema starter per Gutenberg su GitHub, che potete scaricare dal link ovviamente.

Un video (in inglese) che parla dello starter theme per Gutenbeg disponibile su GitHub.

6. ‘inspector’ per il browser

L’inspector del browser Chrome in azione nell’analisi di uno specifico elemento della pagina del sito wpgc.it, si notino a destra i pannelli con il codice e il richiamo al foglio stile CSS sull’elemento selezionato.

Non c’è strumento migliore, per ispezionare e utilizzare il codice di un tema, di un ‘inspector’, ovvero quell’opzione, ormai presente in ogni browser noto, che permette di visualizzare appunto il codice di un’intera pagina o dei singoli elementi di essa all’interno del programma di navigazione web. Firebug di Firefox è stato il plugin forse più popolare in questo senso, ma oggi ogni browser offre, come dicevo, almeno un inspector di base (vedi foto), il che ha reso obsolete soluzioni ‘esterne’ come Firebug.


7. plugin e codici per lo sviluppo e i contenuti di test

Theme Check

Uno dei plugin più utilizzati dagli sviluppatori di temi e plugin per WordPress è stato sicuramente Developer, che nonostante sia tra quelli ufficiali di Automattic al momento risulta abbandonato da diversi anni ed è quindi sconsigliato. Rimane invece validissimo il plugin Theme Check (vedi sopra), ma può risultare utile anche il plugin per il test delle versioni preliminari di WordPress, Beta Tester, o un plugin di ausilio al debugging come Debug Bar
Per testare invece le aree widget, a partire dalla sidebar, niente di meglio che il plugin Monster Widget, che raccoglie tutti i wdget di base in un unico elemento.

Altrettanto utile è il codice XML che permette di aggiungere al volo il contenuto essenziale per il test del tema, ovvero lo stesso utilizzato per le anteprime standard dei temi su WordPress.org. In alternativa, ce ne sono di terze parti e altrettanto interessanti, come WP Test, per esempio.


8. competenze, naturalmente!

Tutti gli strumenti sopra elencati non servono a molto, ovviamente, se alla base non c’è un’adeguata preparazione in grado di metterci nelle condizioni di intraprendere questo non facilissimo percorso professionale. Oltre agli approfondimenti che trovate qui di seguito, a tale proposito vi consiglio anche una serie di corsi particolarmente efficaci.


Approfondimenti & Risorse

Vi lascio, a questo punto, una serie di link a risorse utili per approdondire questi argomenti e per entrare nel vivo dell’attività di sviluppo e test dei temi. Buon lavoro!

risorse in italiano
risorse in inglese
Condividi se ti piace!
Exit mobile version