Data 29 agosto 2016

WordPress – 1°

Per ingrandire il testo, cliccare sul browser

Per ingrandire le foto, cliccarci sopra

WordPress

1. Cos’è un tema di WordPress

Le funzioni dei temi di WordPress

Un tema svolge due macro-funzioni: genera il layout e la componente grafica del sito, e aggiunge funzionalità al core di WordPress. Un tema, quindi, non fornisce solo la veste grafica, ma è anche uno strumento utile a sviluppare la dimensione “comportamentale” di un sito Web, ciò nello stesso modo dei plugin.

Di regola, un tema dovrebbe essere abbastanza generico da poter essere utilizzato per finalità differenti, ma dovrebbe anche offrire alcune funzionalità uniche, cosicché l’utente (o acquirente) possa distinguerlo nella miriade di temi disponibili.

Il file system di WordPress

Dal punto di vista strutturale, WordPress si presenta con una directory principale, contenente file di valenza globale, come il file di configurazione wp-config.php e il file.htaccess, e le tre sub-directory wp-admin, wp-content e wp-includes. Di queste ultime, la prima contiene i file che generano il pannello di amministrazione; la seconda ospita i temi, i plugin, i file lingua e gli allegati ai contenuti del sito; infine, wp-includes contiene una serie corposa di script che aggiungono funzionalità all’istallazione, sia dal lato admin che dal lato front-end.

I temi sono collocati nella directory /wp-content/themes e, nel caso specifico di WordPress, “installare un tema” significa semplicemente caricarlo all’interno di questa directory. Una volta istallato, l’anteprima del tema sarà visualizzata nella pagina denominata “Gestione Temi” del pannello di amministrazione, alla quale si potrà accedere attraverso il percorso di menu “Aspetto > Temi”.

Gli unici file indispensabili perché un tema funzioni sono i file style.css e index.php; di questiil primo non è solo un foglio di stile, ma anche il file in cui vengono memorizzati i metadati necessari al corretto funzionamento del tema stesso. Quella che segue è una parte dell’intestazione del file style.css del magazine theme denominato Twenty Fourteen, il tema predefinito di WordPress per il 2014:

Come anticipato, il secondo file indispensabile per un tema è index.php, questo fornisce il template della pagina iniziale del sito e viene normalmente strutturato in quattro diverse sezioni:

– intestazione;

– contenuti;

– sidebar;

– fondo pagina.

È prassi incorporare il codice che compone le diverse sezioni in file esterni, si avranno così i file header.php, sidebar.php e footer.php. Anche i contenuti della pagina possono essere generati sia all’interno del file index.php, che in template esterni, dipendenti dal formato dell’articolo.

Il file index.php viene caricato ogni qual volta non esista un template più specifico per il tipo di pagina richiesta, secondo una gerarchia prestabilita, definita Template Hierarchy. In base a questa gerarchia, dei template, quando l’utente accede alla Home Page, WordPress cercherà prima il file home.php; ma se questo non esiste, sarà caricato il file index.php. Così, in base alla pagina, un tema potrà essere dotato di un file single.php, per i singoli articoli,archive.php, per le pagine di archivio, page.php, per le pagine statiche, e così via. Mancando questi, sarà sempre caricato index.php.

WordPress permette anche di creare template pagina, ossia particolari template destinati alle pagine statiche. Sempre all’interno della directory del tema, potranno essere collocati una cartella destinata ai file di lingua, nonché tutti gli script e i fogli di stile necessari allo sviluppo del sito.

La distribuzione dei temi per WorPress

È buona norma progettare un tema avendo come obiettivo la sua distribuzione. Un tema può essere distribuito gratuitamente, al fine di accrescere la reputazione dello sviluppatore o per promuovere una versione a pagamento; oppure può essere distribuito commercialmente e diventare fonte diretta di guadagno. In entrambi i casi, bisogna tener presente che WordPress è rilasciato sotto licenza GPL, la quale prevede che ogni opera derivata venga rilasciata sotto le stesse condizioni.

I temi (e i plugin), quindi, utilizzando le funzioni PHP del framework, vanno considerati come opere derivate, da distribuire secondo la stessa licenza GPL. Se ciò è vero per il codice PHP, non può dirsi altrettanto per il codice CSS e per i file immagine, che non dipendono da WordPress. Questi ultimi tipi di file devono quindi essere considerati opere separate e non derivate.

In conclusione, la licenza GPL non si applica al tema nel suo complesso, ma solo ai file PHP.

2. I template generali in WordPress

Il Codex definisce i template come quei file che controllano il modo in cui vengono rese a video le pagine di WordPress. Ogni pagina viene normalmente strutturata in sezioni, ognuna delle quali è generata da un determinato template, incorporato nella pagina principale grazie a specifiche funzioni del framework, definite template tag.

La struttura di una pagina

In WordPress una pagina si struttura in quattro blocchi: intestazione (header), corpo della pagina (content), una o più aree dedicate ai widget (sidebar), fondo pagina (footer). Nel caso delle pagine dedicate a singoli articoli, va prevista un’area aggiuntiva destinata ai commenti.

In PHP, la funzione include() incorpora all’interno di uno script il contenuto di un file esterno; quando si sviluppa un tema di WordPress, però, al posto di include() è opportuno utilizzare funzioni specifiche del framework che permettono di inserire con maggior sicurezza e semplicità i template che costituiscono le parti della pagina. L’immagine che segue mostra il file index.php del Blank Theme di HTML5 Reset, cui si farà spesso riferimento:

Le funzioni get_header(), get_sidebar() e get_footer() sono Template Tags e hanno lo scopo specifico di includere dinamicamente i template generali header.php, sidebar.php efooter.php. I contenuti della pagina, invece, vengono generati da un ciclo iterativo definito Loop che si presenta in questo modo:

All’interno del Loop vengono invocati altri template tags, tramite i quali si accede al database e si manda l’output a video.

Header

Il template tag get_header() include il template header.php. Se esiste un template più specifico per il tipo di pagina, questo andrà nominato header-{name}.php, e alla funzione andrà passata la stringa name come argomento: get_header( ‘name’ ). La home page del sito, ad esempio, potrebbe avere un’intestazione specifica nel template header-home.php, che andrebbe inclusa con get_header( ‘home’ ).

Il file header.php contiene l’intestazione del documento HTML, con i vari tag meta, link escript. È il file che genera la parte superiore della pagina con il menu di navigazione. Quello che segue è il codice di un header.php notevolmente semplificato:

Come gli altri template generali, il file header.php utilizza i tag del core per recuperare informazioni dal database e con queste generare la struttura HTML della pagina. Oltre ai template tag, nell’header della pagina andrebbe sempre invocata la funzione wp_head(), da inserire prima della chiusura del tag head (ci si riferisca al Codex per i dettagli).

Sidebar

La sidebar è un contenitore di blocchi di codice HTML – definiti widget – che contengono informazioni correlate ai contenuti del sito Web. In una pagina possono essere inserite diverse sidebar, ognuna collocata in un’area diversa. La sidebar viene generata dal file sidebar.php, o da più specifici file sidebar-{name}.php, e incorporata nei template del sito grazie al template tag get_sidebar() (maggiori info nel Codex). Nel caso di template specifici, alla funzione andrà passata la stringa 'name'. Ecco un generico sidebar.php:

Footer

Il footer è la parte inferiore della pagina del sito. Questa spesso contiene informazioni aggiuntive, note di copyright, form di ricerca. Vista l’eterogeneità delle informazioni, spesso nel footer trova posto un’ulteriore sidebar, sempre incorporata dal template tag get_sidebar().

Il footer deve sempre contenere un richiamo alla funzione wp_footer(), da collocare subito prima della chiusura del body, come illustrato nel Codex.

Riferimenti del Codex

Il Codex è il riferimento ufficiale e imprescindibile per chiunque voglia sviluppare su WordPress, e al Codex si farà frequente rinvio in questa guida. Qui si troverà l’elenco completo dei template tags e l’indice delle risorse relative ai template. Altra risorsa indispensabile è l’articolo Stepping into templates.

3. I template files di WordPress

Quando l’utente clicca su una voce di menu, il client invia al server una query string in base alla quale WordPress seleziona i contenuti dal database e sceglie il template da utilizzare per generare la pagina, seguendo la rigorosa logica della Template Hierarchy.

Il Loop: introduzione

Sebbene non esistano regole generali sulla struttura che deve avere un template file, generalmente questo non manca dei tag get_header(), get_sidebar() e get_footer(), che includono le parti della pagina e del ciclo iterativo (Loop) che accede al database e lancia a video i contenuti:

Il Loop genera quindi un elenco di articoli, il cui markup dipende dalle decisioni di chi sviluppa il tema. Per ogni articolo potrà essere visualizzato un estratto del contenuto principale o un testo alternativo (excerpt); potrà essere visualizzata o meno un’immagine di anteprima (post thumbnail); potranno essere visualizzate le categorie, i tag, la data di pubblicazione, l’autore e tutti i possibili metadati. Tutte queste opzioni devono essere attentamente vagliate quando si progetta un tema.

Quelli che seguono sono i principali template da tenere in considerazione quando si progetta un tema.

Il file index.php

index.php costituisce il template principale di un tema, sebbene sia allo stesso tempo quel template cui WordPress ricorre solo come soluzione di fallback, ossia quando mancano template specifici per il tipo di richiesta del client.

Proprio per questa sua caratteristica, il file index.php deve essere adatto a generare ogni tipo di pagina, dagli archivi di notizie, agli articoli singoli fino alle pagine statiche.

Gli archivi di notizie

Per WordPress un archivio è un elenco di post. L’utente può chiedere i post pubblicati in un dato periodo, creati da un determinato autore, appartenenti ad una certa categoria, o etichettati con uno specifico tag. In tutti questi casi viene richiesta una pagina d’archivio. Qualora non esista un template più specifico per il tipo di pagina richiesta, WordPress cercherà il generico file di archivio archive.php (in mancanza del quale tornerà al file index.php).

Normalmente il template archive.php è simile al file index.php, avendo anch’esso lo scopo di fornire un elenco di articoli.

I template specifici: categorie, tag, autori

Esistono numerosi tipi di archivi, e WordPress permette di creare una pagina specifica per ognuna delle varie tipologie. Si avranno, quindi, i seguenti template:

author.php

category.php

date.php

tag.php

taxonomy.php

La specificità può essere ancora maggiore: è possibile creare, infatti, template diversi per ogni categoria/autore/tag/tassonomia, aggiungendo un suffisso al nome del file. Così, ad esempio, per le categorie si avranno i seguenti template:

category.php

category-$id.php

category-$slug.php

Allo stesso modo, per i tag si avrà:

tag.php

tag-$id.php

tag-$slug.php

L’elenco dei template è lungo, e si rinvia ancora al Codex per ogni utile approfondimento.

Post singoli e pagine statiche

Oltre che per gli archivi, è possibile creare template adatti alla visualizzazione di singoli contenuti, che possono essere articoli del blog, pagine statiche, attachment, e post personalizzati.

In questo caso la struttura del template sarà sensibilmente diversa dai file di archivio, sebbene in entrambi i casi saranno presenti i tag get_header(), get_sidebar() e get_footer(), oltre che, ovviamente, il Loop, che in questo caso manderà a video un solo elemento.

Per i singoli contenuti, WordPress dispone dei seguenti template:

attachment.php

page.php

single.php

custom.php

Anche questa volta è possibile creare template più specifici. Nel caso dei post, avremo:

single.php

single-$post.php

single-$posttype.php

Come prima, si rinvia al Codex per la descrizione analitica dei template

Altri template

WordPress dispone di altri template, che vanno a completare il mosaico permettendo un controllo assoluto dell’aspetto del sito.

I template front-page.php e home.php sono utilizzati per la visualizzazione della pagina iniziale: il primo nel caso di una pagina statica, il secondo nel caso in cui si voglia un template più specifico del file index.php;

Il template 404.php è destinato alle pagine di errore;

search.php mostra i risultati di una ricerca interna al sito;

comments-popup.php genera una finestra di popup per i commenti.

Conclusioni e riferimenti

Si è voluta offrire una panoramica dei template file di WordPress e si è fatto riferimento ai seguenti articoli del Codex:

Stepping into Templates

Templates

Template Hierarchy

Theme Development

4. I file style.css e functions.php nei temi di WordPress

Un tema dispone sempre di un file style.css, richiesto obbligatoriamente da WordPress, e di un file functions.php, che, sebbene non strettamente necessario per i temi, è fondamentale qualora si debbano aggiungere funzionalità al core del CMS.

Il file style.css

È molto di più di un foglio di stile. Il file, infatti, fornisce a WordPress tutte le informazioni necessarie a gestire il tema: nome, autore, descrizione, licenza, e molto altro. L’immagine seguente mostra l’intestazione del file style.css del tema Twenty Fourteen:

I metadati che compongono l’intestazione del file style.css devono essere forniti all’interno di un commento. Particolare attenzione va posta al nome del tema, che deve sempre essere univoco. Nel caso dovessero essere istallati due temi con lo stesso nome, infatti, WordPress non potrebbe gestirli correttamente.

Quello che segue è l’elenco degli Header-Names che possono essere utilizzati nel foglio di stile:

Author

Author URI

Description

Domain Path

Status

Il file functions.php

Sebbene, come anticipato, non sia strettamente necessario, il file functions.php è presente nella quasi totalità dei temi. Questo permette di estendere il core di WordPress con quelle funzionalità che spesso vengono aggiunte tramite plugin. Ciò avviene sia attraverso la definizione di nuove funzioni, sia utilizzando le funzioni del framework. Il file consente, inoltre, di attivare tutte quelle funzionalità che sono specifiche dei temi, come i post thumbnail, i menu personalizzati, le aree destinate ai widget. La figura proposta di seguito mostra un estratto del codice del file functions.php del tema twenty Fourteen:

Una differenza da sottolineare tra il file functions.php di un tema e lo script principale di un plugin è che le funzionalità aggiunte dal primo si applicano solo se il tema è attivo; al contrario, le funzionalità di un plugin vengono aggiunte al core indipendentemente dal tema attivo. Ilfunctions.php è inoltre il file in cui richiamare quelle funzioni dell’API (Application Programming Interface), comunemente definite filtri e azioni, che estendono le funzionalità di WordPress fino al punto di trasformare un normale sito Web in una vera e propria Web application.

La funzione del file rimane la stessa, sia che si sviluppi un tema, sia che si lavori su un Child Theme. In quest’ultimo caso è opportuno precisare che il functions.php è l’unico file del tema derivato che non sovrascrive il corrispondente file del tema originale, ma viene caricato in aggiunta al suo corrispondente. Più precisamente, il functions.php del Child Theme viene caricato prima del file presente nella directory del parent.

Riferimenti online

Abbiamo fatto riferimento alle seguenti risorse:

Sul file style.css

File Header