Come creare un template WordPress da zero

WordPress è una delle piattaforme più diffuse al mondo per la gestione e la pubblicazione di contenuti di vario genere. Viene utilizzato sia per la messa in rete di articoli e contenuti multimediali sia per la creazione di siti web più o meno strutturati.

La piattaforma CMS consente di creare il proprio portale online da zero, pur in assenza di particolari competenze e senza rinunciare ad una vasta gamma di opzioni in fatto di personalizzazione della veste grafica (colori, sfondo, logo, font, disposizione dei contenuti e quant’altro).

La personalizzazione delle impostazioni grafiche (e non solo) è possibile grazie ai template, che viene realizzato attraverso dei file in php e che permette di modificare la veste grafica o la struttura di una o più sezioni del sito, in base al tipo di contenuto o ad esigenze di altro tipo. Il template, chiamato anche tema, è quindi il totale di tutti gli elementi che contribuiscono all’aspetto grafico del sito in ogni sua parte. In pratica un un tema WordPress comprende tutti i file specifici per generare la visualizzazione di un sito o blog.

Cartella template WordPress

Prima di tutto è necessario sottolineare che in WordPress esiste una directory specifica nella quale devono essere installati tutti i temi. Infatti il CMS andrà a reperire solo ed esclusivamente da questa specifica cartella i file per la generazione del tema grafico da visualizzare agli utenti.

Il percoso dei template di WordPress è: https://domain.ext/wp-content/themes/

Ogni tema dovrà essere installato in ciascuna cartella specifica. Ad esempio se si vuole creare un tema dal nome pippo, sarà necessario creare una cartella con nome ‘pippo’ (può essere anche un altro nome, ma per ordine è sempre meglio chiamare la relativa cartella con lo stesso nome del template) all’interno della directory ‘wp-content/themes’.

Gerarchia del template

I template sono file presenti all’interno di un tema grafico e determinano le caratteristiche dello stesso (soprattutto layout e design). Ne esistono diversi tipi a seconda della funzione che devono svolgere; nello specifico, sono file PHP che contengono HTML, tag e codice PHP.

Esiste una gerarchia poiché WordPress utilizza un algoritmo per determinare quale template (o gruppo di template) devono essere utilizzati per mostrare una determinata pagina del sito.

In altre parole, “la gerarchia del template è la struttura scelta che WordPress utilizza per determinare quale file del tema sarà usato per generare l’HTML completo finale per una data pagina del sito web”, come si apprende sull’apposita sezione del sito ufficiale WordPress.

I file principali

I template WordPress più importanti per realizzare un template di base sono:

• index.php
• style.css
• header.php
• footer.php

Questi sono i file più importanti e che senza i quali WordPress risulterebbe funzionare in maniera errata. Soprattutto se dovesse mancare il file index.php, il sito non funzionerà bene, a meno che siano presenti tutti (ma proprio tutti) gli altri file template richiamati dall’algoritmo WordPress. Questo perchè se dovesse mancare uno dei file specifici sarà sempre index.php che mostrerà il template e se anche quest’ultimo non esistesse il sito non funzionerebbe.

Chiaramente è fondamentale anche il foglio di style css, dove sono contenute tutte le righe di codice per la formattazione corretta del tema.

Altri file importanti che compongono un tema di WordPress sono:

• single.php
• page.php
• archive.php
• category.php
• tag.php

Questi vanno a personalizzare ancor di più uno stile di WordPress. Ma come detto se uno di essi manca, l’algoritmo di WordPress andrà a pescare nella gerarchia sempre il file di template index.php.

Template Header (header.php)

La testata (o header) di una pagina web è la parte più alta della stessa. Generalmente contiene i tag di apertura html ed head per la generazione dei tag title e description, fondamentali per la SEO di una pagina web, e del tag body.

Nell’header di ogni pagina sono sempre presenti la denominazione e il logo del sito al quale appartiene la pagina (che costituiscono la porzione ‘fissa’ del prospetto).

L’aspetto della testata dipendono quindi dal file header.php che contiene, oltre alle informazioni lato SEO, anche indicazione circa gli script che utilizza la pagina, il tipo di documento e altri dati del genere.

Template Footer (footer.php)

Il footer è la parte inferiore di una pagina web, speculare alla testata, in cui possono trovarsi le icone dei collegamenti alle pagine del sito, ai profili social associati, un disclaimer ed altre funzionalità del sito.

Il file di riferimento della gerarchia dei template WordPress è footer.php e contiene la parte finale del tema grafico che compare in ogni pagina, più i tag di chiusura html e body, che vengono aperti dal file header.

Template Index (index.php)

Al vertice della gerarchia dei template si colloca il file index.php, quello al quale la piattaforma fa riferimento quanto non rintraccia nessun altro elemento della stringa di ricerca. Per questo, si tratta del template principale e deve pertanto essere presente in ogni tema.

Esso in pratica gestisce la visualizzazione delle pagine, includendo il template header per mostrare la testate, il codice del corpo della pagina (il codidetto loop di WordPress), il template della sidebar (se presente) e quindi il template del footer. A meno che il sito non preveda una home page statica, gli articoli più recenti vengono visualizzati in ordine cronologico sulla pagina principale, attraverso il loop principale di WordPress.

Il file index.php è il template più importante di un tema WordPress e se viene a mancare il sito non funzionerà più correttamente.

Foglio di style CSS

Ogni tema contiene generalmente un file CSS (ossia il linguaggio utilizzato per formattare i documenti HTML). Esso è style.css ed è, al pari del template index.php, indispensabile per la funzionalità del tema. Si tratta del principale ‘foglio di stile’ che contiene il codice CSS che definisce la veste grafica del sito.

In casi particolari può essere richiesto un differente file di style che è il rtl.css, ovvero il file ‘right-to-left’. Esso serve quando la lingua del sito si deve leggere ‘da destra a sinistra’; gli esempi più eclatanti possono essere la lingua cinese o quella ebraica.

Il nome del template

Il file style.css è fondamentale anche per identificare il nome del template che verrà visualizzato nell’admin di WordPress. Per identificare il nome del template dovrà essere scritto nel file il seguente codice:

/*
Theme Name: Nome Template
*/

Se non viene inserito il campo ‘Theme Name’ nel foglio di stile principale del sito il nome del template visualizzato sarà lo stesso della cartella inserita al percorso wp-content/themes.

Template articoli (single.php)

La maggior parte dei siti web è destinata alla pubblicazione di articoli. Questo genere di contenuto viene distribuito su una o più pagine, soprattutto se il portale prevede una divisione settoriale, in cui ciascuna sezione è destinata ad una particolare tipologia di contenuto.

Il template che genera un articolo prevede solitamente l’include di header e footer ad inizio e fine codice, ed in mezzo il codice per la generazione del content principale. E’ possibile effettuare diverse personalizzazioni come possono essere la visualizzazioni di articoli correlati di una stessa categoria in una determinate parte dell’articolo, oppure una determinata pubblicità.

I template utilizzati per gli articoli sono contrassegnati dal nome single. Quando un visitatore apre un singolo articolo, viene utilizzato il template single.php (se questo template non è presente, la piattaforma ricorre al template singular.php e se non esiste neanche quest’ultimo WordPress si rifarà al template index.php).

Il template single-$posttype.php serve invece per avere un differente template per un determinato Post Type, dove $posttype viene sostituito dallo slug del Post Type. di  E’ una features avanzata di WordPress che viene utilizzata in particolare quando si hanno degli articoli molto differenti tra di loro, come possono essere gli articoli di un blog (che hanno solo contenuto testuale) rispetto agli articoli di recensione di prodotti (che hanno foto, gallery, reviews, votazioni).

Template pagine (page.php)

Le pagine sono un’altra tipologia di post che esistono di default in WordPress. Solitamente gli articoli vengono inseriti nei post, mentre nelle pagine vengono inserite tutte quelle informazioni ‘statiche’ come la pagina con il form per i contatti, il disclaimer della privacy e tutte le altre pagine simili.

Il file del template che viene pescato quando si apre un formato pagina di WordPress è page.php; se essa non esiste nel proprio tema l’algoritmo del CMS va a pescare prima il file singular.php e se anche questo non esiste, il file index.php.

Per avere un template diverso in una pagina, basterà inserire un file di template apposito chiamato page-$slug.php (o page-$id.php) che sarà destinato per la sola visualizzazione di una determinata pagina attraverso lo slug (o l’ID).

Template barra laterale (sidebar.php)

Altro elemento caratteristico della struttura e del layout di un sito web è la barra laterale (conosciuta anche come sidebar). Solitamente sulla barra laterale vengono inseriti collegamenti verso l’interno del sito come link ad archivi (categoria o tag), gli ultimi articolo o gli articoli più visti, lista delle pagine o menù di vario tipo.

Il file template relativo è sidebar.php. Esso non è un file obbligatorio poichè non viene interpellato dal core di WordPress per la generazione delle pagine, tuttavia è molto utilizzato per tenere in ordine il codice della barra laterale in modo da poter intervenire solo su quel file in caso di necessità. Per visualizzare la barra (o le barre se ne sono presenti più di una), si dovrà includere il file sidebar.php all’interno del file di template nella quale si vorrà visualizzare.

Template archivi (archive, category, tag)

I siti che pubblicano articoli sono dotati anche di archivi, ossia di sezioni in cui sono reperibili i post pubblicati in passato e non solo. I tipi di archivi di WordPress sono:

• Autori (author.php)
• Categorie (category.php)
• Tag (tag.php)
• Data (date.php)
• Tassonomie Personalizzate (taxonomy.php)
• Archivio per Custom post type (archive-$posttype.php)

Quindi ogni template relativo viene utilizzato dal core di WordPress per generare le pagine di archivio quando i visitatori ne richiedono un particolare tipo; se non template non è presente il file dedicato WordPress genera la visualizzazione front end del sito tramite il file archive.php.

Esistono anche diverse possibilità per diversificare i template a seconda degli archivi. Infatti è possibile creare un diverso template per una determinata categoria aggiungendo tra i file il template category-$id.php o category-$slug.php, dove al posto di ‘-$id’ e ‘-$slug’ si deve scrivere il numero di ID della categoria oppure il relativo slug (lo stesso ragionamento può essere fatto sulle pagine di archivi tag).

I Child Themes

I child themes (template figli) servono per effettuare piccole modifiche al template di un sito, pur conservando l’aspetto e la funzionalità del tema principale. Per capire come funzionano i Child themes, è necessario capire la relazione che intercorre tra il tema principale ed il relativo Child theme..

Il template principale è un tema di WordPress completo, che include tutti i file richiesti da core WordPress affinché il tema funzioni. Tutti i temi, esclusi i Child Themes, sono considerati temi principali.

Quindi cos’è un Child Theme? Nella pratica esso eredita l’aspetto del tema principale e tutte le sue funzioni, ma può essere utilizzato per apportare modifiche a qualsiasi parte del tema. Con l’utilizzo dei child, le personalizzazioni vengono mantenute separate dai file del template principale.

I principali vantaggi dei template figli:

• rendere le modifiche portatili e replicabili;
• mantenere la personalizzazione separata dalle funzioni del tema principale;
• consentire l’update dei temi principali senza perdere eventuali modifiche che erano state implementate.

Maggiori dettagli sui Child themes sono disponibili a questa pagina.

Corsi WordPress

Come detto, la piattaforma WordPress è largamente utilizzata per la realizzazione di siti web. Per questo, conoscerne tutte le funzionalità, è fondamentale per chi intende inserirsi nel settore del mercato del lavoro informatico.

Naturalmente, in un ambito altamente competitivo, è consigliabile raggiungere un elevato livello di preparazione, debitamente attestato. A tale scopo esistono corsi di formazione professionale, sia frontali che online, organizzati da portali specializzati.

Ne sono un esempio quelli presenti all’indirizzo unidformazione.com. Siti di questo genere consentono agli interessati di reperire tutte le informazioni di cui hanno bisogno, ossia orario di svolgimento delle lezioni (se in aula), il computo complessivo delle ore che formano il corso e la certificazione rilasciata al termine dello stesso.

L’attestato è un aspetto molto rilevante, poiché va ad integrare le qualifiche e le referenze presenti nel proprio curriculum.