Anatomia di un Tema WordPress

Composizione dei Temi WordPress
Tempo di Lettura: 6 min.

La scelta del template in un sito WordPress è sempre una fase di grande importanza, molto spesso ci si affida a template già pronti, ma questo molto spesso significa appesantire notevolmente il proprio sito di funzioni e caratteristiche inutili. In generale è sempre una scelta vincente sviluppare il proprio tema in autonomia, e per questo risulta fondamentale conoscere l’anatomia di un tema WordPress.

Blocchi Logici di un tema WordPress

Prima di addentrarci nella descrizione degli elementi che compongono un tema WordPress è importante comprenderne la logica di funzionamento, illustrando prima i blocchi logici che lo compongono:

Anatomia di un Tema WordPress - Blocchi Logici

Nella figura sopra vediamo quindi che i macro blocchi di un tema WordPress sono:

  • Header.php: parte superiore del tema che normalmente richiama il logo e il menù di navigazione (il menù è dichiarato in un altro file molto importante che si chiama function.php);
  • Content: porzione del tema che mostra il contenuto, tale contenuto in mancanza di altri file viene mostrato dal file index.php, ma è possibile che siano presenti altri file specifici per tipologia di contenuto come ad esempio:
    • single.php: file che richiama il contenuto degli articoli;
    • page.php: file che richiama il contenuto delle pagine;
    • archive.php: file archivio degli articoli o dei Custom Post Type;
    • search.php: file che mostra i risultati di ricerca
    • Altri file che è possibile personalizzare con le proprie funzioni (ad es. home.php, ecc.)
  • Sidebar.php: file responsabile del rendering della sidebar (se prevista)
  • Footer.php: parte inferiore del tema, nella quale generalmente compaiono i widget, il copyright, ecc.

Gli altri file importanti sono:

  • Style.css: indispensabile per dichiarare a WordPress la presenza del tema e contenitore degli stili del nostro sito;
  • Function.php: file in cui sono presenti tutte le funzioni del nostro tema, del nostro sito, dove vengono inclusi altri stili, ecc.
  • Comments.php: file responsabile dei commenti, se previsti dal nostro tema.

Ora che conosciamo i blocchi che regolano il funzionamento di un tema WordPress, spingiamoci oltre e andiamo ad esplorare tutti i file di cui un tema è composto. Alcuni di questi file sono fondamentali, altri sono facoltativi, ma permettono una personalizzazione estrema del nostro tema.

File di un tema WordPress

Abbiamo quindi detto prima che alcuni file sono fondamentali per il corretto funzionamento di un tema WordPress, ma quali sono e quanti sono questi file? La risposta ti sorprenderà: solo 2. Sì hai letto bene, i file assolutamente necessari per un tema WordPress sono 2: style.css, in cui dichiariamo che il nostro è effettivamente un tema; e index.php, nel quale sono presenti le funzioni che richiamano il contenuto del nostro sito con il fantomatico LOOP. Il loop rappresenta la vera forza di WordPress, inizia con una query e finisce con un’istruzione PHP, e tutto quello che succede in mezzo è una tua completa decisione. Possiamo decidere di visualizzare titolo, immagine e riassunto di un post, oppure sono immagine, o immagine e pulsante Read more…, insomma, tutto ciò che vogliamo possiamo farlo con il loop.

In particolare, abbiamo prima detto che nel file style.css dichiariamo la presenza e le caratteristiche del nostro tema, ma come? L’immagine seguente ve lo mostra:

File Style.css di un tema custom

Come potete vedere la parte che ci interessa è quella immediatamente posta in alto, sotto forma di commenti. In particolare WordPress “leggerà” questi commenti e capirà di trovarsi di fronte ad un tema. Semplice no? Vediamoli in dettaglio:

  1. Theme Name: dichiariamo il nome del nostro Tema;
  2. Theme URI: indirizzo web del nostro tema;
  3. Author: il nome dello sviluppatore del tema;
  4. Author URI: link al sito dello sviluppatore;
  5. Description: descrizione del nostro tema;
  6. Version: versione del tema;
  7. License: licenza sotto la quale distribuite il vostro tema;
  8. Text Domain: nome del dominio del tema utile per l’identificazione delle stringhe e per la loro traduzione.

Semplicemente inserendo questi testi WordPress vedrà il nostro come un tema e ne permetterà l’installazione.

Tutto qui? No, assolutamente. Abbiamo detto prima che l’altro file necessario è index.php che a sua volta contiene le funzioni di loop, che permettono la visualizzazione del contenuto del nostro sito. Vediamo quindi lo schema di funzionamento e le funzioni di questo fantomatico Loop:

Il loop in un tema WordPress

In particolare gli elementi del loop sono:

  1. Query per Post o Pagine > Avvio il Loop
  2. Visualizzo i contenuti che mi servono > Titolo, riassunto, immagine, ecc.
  3. Termino e chiudo il loop.

Come potete notare è un ciclo che si ripete fino a quando tutti i post o le pagine non sono visualizzate. Bene, ecco cosa è presente nel file index.php, e in mancanza di altri file con altre istruzioni WordPress visualizzerà il contenuto grazie ad esso.

È possibile però personalizzare il contenuto da visualizzare, ecco quindi che possiamo dichiarare nuovi file per tipologia di contenuto. Possiamo ad esempio creare un file template per la home, un file archivio, un file per categoria e molto altro, le possibilità sono infinite. Per alcuni di questi file basta il semplice nome del file stesso per far capire a WordPress cosa siano, per altri invece occorre dichiararli, così come fatto nel file style.css, con la stringa:

/* Template Name: Homepage */

In questo modo abbiamo detto a WordPress che questo file è il template della nostra Homepage, lo ritroveremo nel menù a tendina sulla destra nella schermata di creazione della nuova pagina. Ora in questo template possiamo personalizzare il contenuto da mostrare, possiamo creare un nuovo loop e tanto altro.

Ora vediamo, entrando nel dettaglio dell’anatomia di un tema WordPress, lo schema completo dei file e la loro relazione con tutti gli altri. Potete approfondire questo aspetto andando a consultare la documentazione ufficiale di WordPress.

gerarchia files tema wordpress

Come potete notare dallo schema sono presenti le pagine necessarie che abbiamo visto in precedenza e altre pagine non necessarie, ma che ci permettono di personalizzare il contenuto del nostro sito. Facciamo un esempio concreto:

Immaginiamo di voler visualizzare degli elementi aggiuntivi SOLO per una categoria di post del nostro sito. Ci basta duplicare il file category.php (file archivio di categoria) e chiamarlo category-idnostracategoria.php e qui inserire gli elementi e le personalizzazioni che desideriamo. Da questo momento quando l’utente visualizzerà la categoria vedrà il contenuto che noi abbiamo deciso in precedenza.

Con la stessa filosofia funzionano anche i file page.php, single.php, ecc.

Sviluppo di un Tema WordPress

Ora che abbiamo una panoramica completa dell’anatomia di un Tema WordPress mi dirai: da cosa inizio per sviluppare un tema?

La risposta può avere due strade: sviluppo interamente da zero oppure ti affidi ad un framework.

Nel primo caso può sicuramente essere di grande aiuto farti uno schema su carta del design generale del tuo tema, dei vari template di pagina da creare, dei loop che ti serviranno, dei vari archivi, ecc. Se ad esempio il tuo tema non prevede l’utilizzo di sidebar, è inutile creare template di pagina con sidebar a destra e sinistra. Basterà creare direttamente un unico template fullwidth. Se ancora il tuo tema sarà sviluppato per una categoria merceologica precisa, tieni conto dei Custom Post Type (Se vuoi sapere cosa sono puoi visionare le mie slide) da creare e di come devono essere visualizzati, quindi crea dei template per essi, come ad esempio il file archive-customposttype.php, ovvero il file responsabile dell’elenco di tutti i nostri CPT.

Occorrerà anche scegliere se affidarti ad un framework css, come bootstrap, foundation, ecc., oppure creartene uno da te.

La seconda strada è la più veloce e a volte anche la più saggia: puoi affidarti ad un framework di sviluppo.

Theme Framework per WordPress

Prima di elencarti quelli che per me sono i migliori framework di sviluppo temi WordPress, vorrei accennare brevemente alla definizione di framework. Come dice la parola stessa il framework è un ambiente di sviluppo di base, ovvero nel caso di WordPress è un tema con grafica e funzioni essenziali che puoi personalizzare a tuo piacimento.

Pro di un Framework

  1. Maggiore velocità di sviluppo
  2. Codice controllato e sicuro
  3. Plugin Dedicati
  4. Aggiornamenti frequenti
  5. Supporto disponibile
  6. Personalizzazione illimitata
  7. Ottimizzazione SEO

Contro di un Framework

  1. Prezzo spesso alto
  2. Curva di apprendimento spesso ripida
  3. Alcune limitazioni
  4. Meno libertà di sviluppo
  5. Conoscenza della logica utilizzata

Quindi la scelta è vostra, ma vorrei comunque elencarvi quelli che per me sono i migliori e più diffusi framework per WordPress, e magari in un secondo articolo andare ad approfondire quelli maggiormente utilizzati:

Alcuni di essi sono veri e propri ecosistemi di sviluppo, altri sono dei semplici starter theme (Temi di base essenziali da personalizzare), ma tutti hanno lo scopo di migliorare il nostro sviluppo, di velocizzarlo e di spingerci anche a scrivere codice migliore.

Conclusioni

Abbiamo quindi fatto un’ampia panoramica sull’anatomia di un tema WordPress, potremmo ancora parlarne tanto e ci sarebbe tanto da approfondire, ma mi riprometto di farlo al più presto. Nei prossimi articoli potremmo entrare nel dettaglio dello sviluppo di un tema andando a costruire un semplice sito web di poche pagine, ma ora, citando un noto programma televisivo, sapete come è fatto! 😉

Sommario
Guida alla composizione e anatomia temi WordPress
Nome Articolo
Guida alla composizione e anatomia temi WordPress
Descrizione
Una semplice guida, con alcuni consigli di sviluppo, sulla composizione e anatomia temi WordPress. Vedremo insieme come è composto un template per WordPress e tutto ciò che occorre conoscere per svilupparne uno.
Autore
Nome Editore
ideaGrafica
Logo Editore
Share it