in blog

Guida Sviluppo temi in WordPress: quale metodo seguire

Oggi riporto la mia traduzione di un’articolo del noto blog Smashingmagazine su come organizzare il lavoro per lo sviluppo di temi WordPress.

Una guida alle diverse possibilità per lo sviluppo di temi WordPress
Nel recente Wordcamp di Edimburgo, ho partecipato a una tavola rotonda sullo sviluppo di temi WordPress e le possibilità a disposizione degli sviluppatori quando sviluppano temi. La conclusione prevalente nella sessione è stata che non esiste un’unica risposta e che i migliori metodi dipendono dai bisogni del sito web e dalle capacità dello sviluppatore.
Ma se stai iniziando a sviluppare temi WordPress o vuoi sviluppare un sistema per costruirne di più efficienti o robusti, come decidi quale approccio seguire? In questo articolo descriveremo velocemente come funzionano i temi WordPress e daremo uno sguardo ai diversi approcci per il loro sviluppo, con suggerimenti su quale metodo adottare per il proprio sito e in base alle circostanze.
Come funziona un tema WordPress?
In WordPress, i temi guidano un sito web e determinano cosa il sito contiene, come si comporta e come appare. Il tema è separato dal contenuto, che si trova nel database. Questo significa che puoi usare lo stesso tema in più di un sito, incurante dei contenuti – cosa che starai gia facendo se hai scaricato temi da WordPress.org.
Un tema consiste in un numero di files template, tutti situati nella cartella del tema, che è collocata in wp-content/themes nella tua installazione WordPress. Qualsiasi tema WordPress deve includere almeno due files: index.php e style.css. Il file index definisce quale contenuto è visualizzato dal tema, e lo style.css è il foglio di stile che deve contenere le meta informazioni riguardo il tema che WordPress usa per farlo funzionare correttamente.
Attualmente, molti temi hanno qualche file aggiuntivo:
  • header.php: contiene la sezione <head> di ogni pagina, più l’header del design del sito.
  • sidebar.php: contiene il sidebar, incluse le aree widget
  • footer.php: contiene il footer, che può avere o meno le aree widget
  • functions.php: contiene qualsiasi funzione specifica per il tuo tema. Puoi trovare altro sul file functions nel WordPress Codex (in inglese).
  • Files che contengono il loop, che chiama il contenuto dal database. In base al tipo di sito su cui stai lavorando, questo può essere uno di un numero di files:
    • page.php: per pagine statiche
    • single.php: per post individuali (es.: post del blog)
    • index.php, archive.php, category.php, ecc…: per le pagine in cui di sono gli elenchi dei post
Yoast ha scritto un’importante rappresentazione visuale su come i file di un tema funzionano (consigliata da WordPress.org stesso), e il WordPress Codex include descrizioni dettagliate dei temi, inclusi dettagli sui vari files e quando vengono chiamati.
Direi comunque che il foglio di stile è il file più importante e il primo da cui dovresti partire, perchè un “child theme” (tema figlio, vedi meglio più sotto) ha bisogno di un foglio si tile anche se non contiene nient’altro. Il foglio di stile contiene meta informazioni importanti riguardo il tema stesso, collocate prima degli stili. Qui sotto riporto i commenti per l’attuale tema di default di WordPress, Twenty Eleven:
/*
   Theme Name: Twenty Eleven
   Theme URI: http://wordpress.org/extend/themes/twentyeleven
   Author: the WordPress team
   Author URI: http://wordpress.org/
   Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. …
   Version: 1.3
   License: GNU General Public License
   License URI: license.txt
   Tags: dark, light, white, black, …
*/
Questa informazione è commentata in modo da non venire letta dai browser, ma solo da WordPress, e fornisce informazioni a chiunque sta usando il tuo tema. Torneremo brevemente su questo quando vedremo come creare un tema figlio.
Ora che sai come funzionano i temi, il passo successivo è quello di capire come fare a costruire il proprio. Prima di partire, è meglio prendere in considerazione alcuni punti che ti aiuteranno a prendere una decisione in merito.
Cosa considerare quando si sviluppa un tema WordPress?
Prima di decidere quale approccio adottare per sviluppare il tuo tema, identifica i tuoi limiti, che possono essere:
  • Tempo: quanto tempo hai da dedicare allo sviluppo del tuo tema, quanto da dedicare per imparare a come farlo?
  • Budget: è connesso col tempo, ma ha a che fare anche col quanto ci si può permettere per comprare un tema premium o un tema framework.
  • Capacità: quanta familiarità hai con lo sviluppo di temi, con CSS e PHP e con il funzionamento dei temi?
  • Lavoro futuro: il tuo tema avrà bisogno di essere aggiornato? Altri sviluppatori ci lavoreranno oltre a te? Se si, allora il tuo metodo avrà bisogno di essere il più robusto possibile.
  • Ripetizione: ti vedi sviluppando un numero di temi simili in futuro? Se si, il tuo metodo dovrà consentire il riutilizzo del codice.
Rivedremo queste considerazioni alla fine dell’articolo e identificheremo quali possibilità sono più adatte per lo sviluppo in determinate situazioni.
Sviluppo temi: le tue possibilità
Qualche opzione è disponibile per sviluppare il tuo tema o i tuoi temi, e prima di rimboccarsi le maniche e scrivere codice varrebbe la pena indagare. Scegliere il giusto approccio si tradurrà in un tema migliore, con codice più robusto, e si ridurrà al minimo la quantità di revisioni da fare in seguito. Ti aiuterà anche a costruire il tema in modo più efficiente.
Le possibilità sono:
  • Costruire un tema da zero,
  • Modifica (o “Hack”) di un tema esistente,
  • Usare il Tema Customizer per modificare un tema esistente,
  • Creare un tema figlio per fare cambiamenti a un tema esistente,
  • Creare il tuo tema genitore (usando una delle metodologie viste finora) e i temi figlio;
  • Usare un framework tema.
1. Costruire un tema da zero
Questo approccio è il più difficile se non hai esperienza. Ma se sei uno sviluppatore di temi stagionato ti consente un maggiore controllo. Potrebbe essere il metodo più appropriato se stai impotando HTML da un sito statico esistente che viene aggiornato a WordPress senza ulteriori modifiche.
Ad ogni modo, durante il trasferimento di un sito web in WordPress, operare una sua revisione come parte del processo piuttosto che copiare semplicemente il codice, è sempre una buona idea. Se stai copiando un sito web statico, hai bisogno di tenere gli occhi aperti sul codice per assicurarti che sia pulito, efficiente e valido.
2. Modifica (o “hack”) di un tema esistente
Questo è il metodo con cui la maggior parte delle persone inizia a sviluppare temi in WordPress: lavorando a un tema che hanno scaricato, osservano che non ci siano errori nello stile, nel qual caso operano le giuste modifiche nel file CSS. Una partenza allettante perchè è un modo semplice e veloce per ottenere l’effetto desiderato. Ma esistono alcuni pericoli:
  • L’aggiornamento annullerà tutte le modifiche fatte.
  • È facile aggiungere codice ripetitivo aggiungendo nuovi stili alla fine del file CSS che annullano il codice sovrastante anzichè rimuovere ciò che non ti serve.
  • Il sito può finire con più codice del necessario.
  • Se il codice del tema non è ben scritto o commentato all’inizio del file, potresti ritrovarti un gran disordine e scoprire di dover apportare un sacco di correzioni.
D’altro canto, hackerare un tema può funzionare se tieni gli occhi bene aperti. Può essere un’opzione da prendere in considerazione se:
  • Il tema che stai usando è ben scritto, valido e commentato (es. il tema default di WordPress, Twenty Eleven);
  • I cambiamenti che stai facendo sono così drastici che non avresti bisogno di aggiornare il tema originale;
  • Sei in grado di comprendere i codici PHP e CSS contenuti nel tema e sono facili da modificare con aggiunte e rimozioni di codice senza creare danni al tema.
Se decidi di seguire questa strada, le cose più importanti sono mantenere un backup del tema originale e commentare a fondo il tuo codice. Consiglierei anche di commentare tutto il codice che non ti serve e testare cosa accade quando viene eliminato.
3. Usare il Tema Customizer per modificare un tema esistente
Le opzioni del tema sono state rilasciate con WordPress 3.4. Ti danno la possibilità di personalizzare un tema senza scrivere codice semplicemente utilizzando un’interfaccia WYSIWYG. Nel caso sia stato scritto bene il customizer nel tema stesso, potresti usarlo per cambiare immagini, titoli, colori e anche il layout. Aspettati di vedere più temi con il customizer integrato.
4. Creare un tema figlio per fare cambiamenti a un tema esistente
Questo metodo è simile alla modifica di un tema, ma più sicuro. Consiste nella creazione di un tema nuovo di zecca come figlio del tema esistente. Quando il tuo tema figlio non ha un particolare file ma il tema genitore lo possiede, verrà usato quest’ultimo. Quando il tema figlio possiede un certo file, sostituirà quello del tema genitore. Vediamo un esempio:
Files tema genitore Files tema figlio
  • style.css
  • page.php
  • single.php
  • archive.php
  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php

Nell’esempio qui sopra, WordPress utilizzerebbe i seguenti files per creare contenuto:

  • style.css dal tema figlio,
  • page.php dal tema figlio,
  • single.php dal tema genitore,
  • archive.php dal tema genitore,
  • header.php dal tema figlio,
  • sidebar.php dal tema genitore,
  • footer.php dal tema genitore.
Puoi vedere l’utilità di ciò se volessi usare il markup del tema genitore ma volessi cambiare il contenuto dell’header (es.: aggiungere il tuo logo e indirizzo) e qualsiasi pagina statica (magari cambiando il modo in cui vengono visualizzati i meta data).
Il file che ogni tema figlio dovrebbe avere per funzionare è il file CSS perchè contiene tutte le informazioni che servono a WordPress per far funzionare correttamente il tema figlio. Per farlo, aggiungi il seguente codice extra ai commenti CSS:
/*
	Theme Name: Twenty Eleven Child Theme
	Theme URI: http://example.com
	Author: you!
	Author URI: http://example.com/
	Description:  Child theme based on Twenty Eleven.
	Template: twentyeleven
	Version: 1.0
	Tags: your tags (optional)
 */
@import url("../twentyeleven/style.css");
Riesci a individuare le linee extra? La prima è:
Template: twentyeleven
Questa linea di codice dice a WordPress che il tema è un tema figlio e che Twenty Eleven è il suo genitore.
La seconda è:
@import url("../twentyeleven/style.css");
Questa linea dice al browser di caricare lo stile del tema genitore prima di interpretare gli stili di questo tema. Questo ti sgrava dal compito di dover duplicare stili nel tema genitore che vuoi usare.
Ecco come funzionano i temi figli. Ma quand’è che si tratta della giusta scelta? Io suggerirei di utilizzarlo nei casi seguenti:
  • Hai gia un tema (da essere usato come genitore) che contiene la maggior parte di ciò che ti serve per il tuo tema;
  • Vuoi essere in grado di aggiornare il tuo tema genitore (per esempio quando gli aggiornamenti del tema vengono rilasciati in seguito agli aggiornamenti di WordPress);
  • Non vuoi essere costretto a fare l’hacking di un tema esistente;
  • Vuoi l’opzione di tornare al tema genitore o sviluppare un altro tema simile in futuro (un nuovo tema figlio);
  • Stai sviluppando un certo numero di siti simili con alcune differenze minori sullo stile o sul contenuto (ho usato questo metodo nello sviluppo di temi simili tra loro per un cliente che aveva diverse società);
  • La differenza tra un tema figlio e un tema genitore non è così grande da dover iniziare da zero, o non è così grande da far si che il codice del tema figlio sostituisca qualsiasi cosa venga aggiornata nel tema genitore.
5. Creare il tuo tema genitore (usando una delle metodologie viste finora) e i temi figlio
La situazione di cui sto parlando, la creazione di un numero di siti web per un cliente con diverse società, avviene nel caso si possa creare un tema principale e quindi impostare temi figlio per singoli siti. Potresti anche considerare questa possibilità nei seguenti casi:
  • Vuoi sviluppare in futuro un certo numero di siti con simile contenuto e markup (non solo per un cliete);
  • Gestisci un certo numero di siti e li devi modificare regolarmente e vuoi che il codice sia molto simile;
  • Ti senti a tuo agio nel creare il tuo tema genitore modificando il codice per crearne uno robusto che funzionerà bene con i temi figlio.
Se decidi di adottare questo metodo potresti creare il tuo tema genitore da zero o modificarne uno esistente. Per la maggior parte dei siti che realizzo uso un tema genitore che ho sviluppato modificando il tema Twenty Ten, il primo tema di default di WordPress. Ho fatto così tanti cambiamenti che non ho pù bisogno di fare aggiornamenti al tema originale. Mi sono trovato bene anche con il codice nel tema che mi ha consentito di fare modifiche significative riducendo il codice per adattarsi al mio modo di lavorare e rimuovendo il codice che sapevo che non mi sarebbe servito.
Puoi anche creare un tema figlio basato su un tema esistente e quindi creare dei temi figlio del tema figlio – effettivamente temi nipoti del tema esistente. Il vantaggio di questo metodo è che non dovrai sostituire il codice nel tema originale e manterrai la flessibilità di fare modifiche al tema figlio che le trasmetterà a tutti i temi nipoti. In questo caso però ti do un’avvertimento: con tre temi in uso è facile confondersi su ciò che accade, e potresti finire a scrivere molto codice non necessario.
6. Usare un tema framework
L’ultima possibilità da prendere in considerazione è quella usata da migliaia di utenti e sviluppatori WordPress. Esiste un numero di temi framework che puoi usare come un tipo di tema genitore ma con molte più funzionalità e in qualche caso con la possibilità di fare layout modifiche allo style abbastanza fantasiosi senza scrivere una linea di codice. Alcuni framework sono free, altri sono a pagamento. Questi sono gia stati recensiti in passato da Smashing Magazine, ma i principali sono elencati qui sotto.
Framework WordPress free:
  • Theme Hybrid include una miriade di hooks e aree widget per aiutarti a personalizzare i tuoi temi. Sono disponibili anche alcuni temi figlio. Il framework e i temi figlio sono free, ma se vuoi supporto dovrai pagare registrandoti nel sito web di Theme Hybrid. Può essere piuttosto complesso lavorare con questo framework se non conosce il PHP o se si utilizza uno dei temi figlio.
  • Wonderflux è basato su un sistema a griglia flessibile. È dotato di opzioni per modificare il layout e gli stili senza scrivere codice e include molti hooks e aree widget. È free e supportato dal forum WordPress.
  • Carrington è il più affermato fra i framework free e ha un certo numero di temi figlio.
  • Thematic è sviluppato da Automattic, che sviluppa WordPress stesso. Include un certo numero di hooks, filtri e aree widget.
Premium WordPress frameworks:
  • Genesis: i suoi sviluppatori lo descrivono come lo standard del settore. Viene fornito con un’ampia varietà di temi figlio, opzioni per la personalizzazione senza la scrittura di codice, e funzionalità SEO.
  • Thesis è l’altro grande framework premium e ti da pure la possibilità di personalizzare i temi figlio senza scrivere codice.
Riepilogo: scegliere un metodo
È probabile che dopo aver letto questo articolo ti sia fatto un’idea di quale metodo seguire. Ma nel caso ci stia ancora pensando ti faccio un riepilogo dei metodi adottabili:
Metodo Tempo Costo Capacità Future
modifiche
Ripetitività
Realizzare da zero Molto Basso
Molta
Poche
Poca
Modificare un tema esistente Poco
Basso
Media
Poche
Poca
Usare il customizer
Poco
Basso
Poca
Poche
Poca
Creare un tema figlio da un genitore esistente Medio
Basso
Media
Molte
Molta
Creare un tema genitore
Molto
Basso
Molta
Molte
Molta
Tema framework (free)
Medio
Basso
Media
Molte
Molta
Tema framework (premium)
Medio
Alto Poca o Media
Molte
Molta
Nel complesso qualsiasi metodo ha il suo perchè, dipende solo dal tuo sito web e da te. La cosa importante è quella di non buttarsi a fare senza prima avere valutato tutti i pro e i contro nella scelta della metodologia più appropriata o potresti scoprire che un tema non funziona più o che ti sei creato/creata un sacco di lavoro aggiuntivo.
E come sempre, qualsiasi cosa tu decida, non dimenticare di fare i backup.

Rachel gestisce Compass Design, un’agenzia di web design a Birmingham, UK specializzata in sviluppo WordPress responsive e mobile. È anche l’autrice di “Mobile WordPress Development”, una guida completa sulla realizzazione di siti WordPress mobile-friendly edita da Packt.

Liberamente tradotto dall’articolo “WordPress Theme Development – A Guide to the Options

 

Altri articoli che potrebbero interessarti


Scrivi un commento

Commento