Temi di WordPress: componenti e struttura

Il software per la creazione di blog WordPress è caratterizzato da una separazione di design, funzionalità e contenuti. I temi consentono di adattare la visualizzazione dei contenuti front-end, senza dover apportare modifiche al programma stesso. In linea generale, un tema di WordPress mette a disposizione un codice sorgente, che descrive come devono essere visualizzati e combinati i contenuti salvati su un server, affinché da questi, quando viene visualizzato un sito, possa essere creata una pagina web e possa essere visualizzata in un browser. Per i gestori di una pagina i temi offrono pertanto la possibilità di organizzare liberamente design e layout di un sito WordPress e di tutte le sue pagine.

La struttura di base di un tema di WordPress comprende diversi file PHP, che vengono chiamati template file, fogli di stile e file di localizzazione, nonché file JavaScript e immagini. Vi mostriamo quali componenti e temi di WordPress è importante conoscere, quali funzioni svolgono e come mettere insieme i singoli elementi.

Mentre una pagina web statica si basa sostanzialmente su un unico documento HTML che contiene tutti i contenuti nonché elementi JavaScript e file CSS, un tema WordPress è costituito da più template file. Questi vengono collegati tra di loro tramite gli include tag e descrivono, con l’aiuto dei template tag, come i contenuti del database presente sul server debbano essere visualizzati nel browser quando si accede ad un sito. Qualora la visualizzazione sia subordinata a condizioni specifiche, vengono utilizzati i cosiddetti conditional tag. Inoltre è possibile integrare dei plug-in tramite i template hook. La diffusione di contenuti viene amministrata tramite un meccanismo che nella terminologia WordPress viene chiamato loop.

Il tema di WordPress, con tutti i suoi elementi base, può essere considerato come una struttura, che definisce il modo in cui un sito viene visualizzato. La pagina dinamica, che viene consegnata al browser, è creata combinando diversi elementi, a seconda che un utente richieda di visualizzare la pagina generale del blog WordPress, un singolo articolo o un solo commento. Le componenti vengono chiamate template file. Si tratta di file PHP che contengono un mix di html, php e template tags e che svolgono ciascuno una funzione precisa.

Un tema di WordPress deve necessariamente contenere i template file index.php e style.css. Di regola in un tema di WordPress si trovano diversi template file, che permettono di visualizzare diversi tipi di contenuti e possono sfruttare tutte le funzionalità di questa piattaforma di blogging. La seguente lista mostra i template di base che si possono trovare in quasi ogni tema di WordPress:

• style.css: il style.css è uno dei due elementi obbligatori di ogni tema WordPress. Questo template contiene le cosiddette informazioni dell’header, come nome del tema (theme name), una breve descrizione (description), il nome dello sviluppatore (author), il numero della versione (version), la licenza con cui viene rilasciato il tema (license), nonché un suo link (license URI). Inoltre il style.css è il foglio di stile principale del sito di WordPress e ospita pertanto il codice CSS del tema.
   
• index.php: il secondo elemento obbligatorio di ogni tema di WordPress è l’index.php, che funge da pagina generale e può essere utilizzato come homepage. All’interno della gerarchia dei template, l’index.php è quello che viene utilizzato in caso di fallback. In altre parole: se per alcuni contenuti non viene specificato un template, il software ricorre all’index.php. La struttura dell’index.php dipende essenzialmente da quanto codice viene inserito nel resto del template. Mentre l’index.php di un semplice tema WordPress spesso contiene la maggior parte dell’intero codice inclusi header, footer, sidebar e menu di navigazione, questi elementi possono anche essere definiti in file aggiuntivi come header.php, footer.php e sidebar.php, in modo che l’index.php svolga solo la funzione di una struttura base. L’index.php mostra di solito un’anteprima ridotta di alcuni articoli nell’area admin.
   
• header.php: il file header.php in WordPress, contiene informazioni fondamentali di un sito come doctype, il tag html di apertura nonché l’head-element con i meta tag, i link ai fogli di stile e gli script. Inoltre, nell’header.php viene aperto di regola il body tag; di conseguenza è possibile integrare la parte visibile dell’intestazione del tema nell’header.php.
• footer.php: il footer.php è la controparte del file header.php. Qui viene inserita la parte visibile del footer. Nel footer.php vengono di regola chiusi sia il body tag sia il tag html.
   
• sidebar.php: la sidebar di WordPress è l’area destinata all’inserimento di contenuti nella barra laterale. Questi possono essere incorporati direttamente tramite codice oppure utilizzando i Widget attraverso la funzione dynamic_sidebar. Questo procedimento ha il vantaggio che i contenuti della sidebar possono essere gestiti in seguito nell’area admin di WordPress.
   
• content.php: i post nella schermata generale del blog contengono di regola un titolo con link e un’immagine di anteprima, nonché un teaser o una breve descrizione del post con un altro link che ne consente la visualizzazione completa. È possibile inserire questi contenuti tramite il file content.php. Lo stesso vale per metadati come la data, l’autore dell’articolo, le categorie e i tag.
   
• single.php: mentre l’index.php offre una panoramica degli articoli, il template single.php viene utilizzato quando un utente vuole visualizzare un singolo articolo.
   
• home.php: questo template offre la possibilità di creare una homepage ad hoc per il blog. Se nel vostro tema di WordPress non utilizzate una struttura con home.php, il sito mostrerà in homepage una panoramica dei post più recenti, seguendo il file index.php.
   
• page.php: i temi di WordPress sono ottimizzati per fare in modo che i post del blog vengano visualizzati in ordine cronologico. Insieme a questi contenuti dinamici, molti gestori di siti web mettono a disposizione dei visitatori contenuti speciali come le sezioni “About me” o le note legali sotto forma di pagine statiche. È possibile creare queste pagine indipendentemente dal layout e dal design di altri template come index.php o single.php.
   
• 404.php: se per il vostro blog volete creare una pagina di errore 404, potete utilizzare il relativo template con lo stesso nome. Su questa pagina è inoltre possibile incorporare la funzione di ricerca di WordPress per dare ai visitatori la possibilità di cercare le informazioni desiderate all’interno del sito.
   
• search.php: è possibile mostrare i risultati di ricerca di WordPress tramite il template search.php.
   
• archive.php, category.php, tag.php, author.php, date.php: insieme alla funzione di ricerca, WordPress offre una serie di template con i quali è possibile classificare i post dei blog in base a determinati criteri di ricerca. Tra i filtri disponibili è possibile utilizzare categorie, parole chiave (tag), autori e la data di pubblicazione. La selezione dei contenuti avviene su WordPress tramite i template category.php, tag.php, author.php o date.php. Se questi template mancano, il software ricorre al template archive.php.
   
• comment.php: se volete attivare i commenti sul vostro blog, avete bisogno di un template a parte che contenga il modulo per gestire i commenti.
   
• attachment.php: il file attachment.php è usato quando i visitatori di un sito vogliono visualizzare contenuti aggiuntivi come immagini, PDF o file multimediali in un’unica schermata.
   
• image.php: una versione particolare dell’attachment.php è il template image.php, con il quale è possibile definire un template specifico per la visualizzazione di immagini in una schermata singola. Se non è disponibile il template image.php, è possibile usare il template attachment.php.
   
• rtl.css: se volete che il vostro tema di WordPress supporti anche altre lingue che utilizzano un sistema di scrittura da destra a sinistra (come per esempio l’arabo o l’ebraico), è necessario utilizzare il foglio di stile rtl.css.

Per collegare tra di loro le singole componenti di una pagina WordPress e caricare i contenuti dai database, è possibile utilizzare alcune funzionalità dei template che nella terminologia di WordPress vengono chiamate template tag.

I template tag sono funzioni utilizzate all’interno di un template per richiamare i contenuti del database. Mentre nei siti statici i contenuti vengono memorizzati direttamente nel testo sorgente HTML, i template di WordPress contengono solo istruzioni sui contenuti del database che devono essere selezionati. I template tag consentono al software di creare ogni pagina web in modo dinamico nel momento in cui la pagina viene visualizzata. Il seguente esempio mostra quale sia il vantaggio di questa forma di pagina web: il titolo del sito viene visualizzato in ogni sottopagina. Per poter integrare questo nome su un qualsiasi template, si deve utilizzare il seguente tag:

Mentre la funzione bloginfo('nome') serve da segnaposto per il nome del sito, il wp_title() serve a generare il titolo della sottopagina. WordPress ricava dal server le informazioni su quali contenuti debbano essere effettivamente generati al posto del segnaposto durante la visualizzazione di una pagina. Infine genera un titolo secondo il seguente schema:

Con un sito statico invece è necessario inserire il titolo su ogni pagina html del vostro sito:

E se voleste cambiare il nome del vostro blog? Con un sito web statico dovreste aprire i documenti html di ogni singola spagina nell’editor ed eseguire le modifiche manualmente. Con un sito web dinamico, al contrario, effettuate aggiornamenti di questo tipo in modo decisamente più facile: le modifiche che riguardano tutte le pagine possono essere effettuate in una volta sola e un unico punto del database e possono essere caricate su ogni pagina grazie ai template tag.

Secondo lo stesso schema vengono caricati anche titoli, post o metadati nei template ad hoc:

Una panoramica di tutti i tag template la trovate sul Codex di WordPress.

Una forma particolare di tag template di WordPress sono i cosiddetti include tag, utilizzati all’interno di un tema per caricare template come header.php, footer.php o sidebar.php. Questo tag riguarda funzioni interne a WordPress che vengono integrate in template base come index.php, single.php o page.php nella forma seguente:

Anche in questo caso il vantaggio è lo stesso: se il codice per l’header, il footer e la sidebar di un sito viene caricato da template ad hoc, le modifiche apportate a questi tre template vengono applicate automaticamente a tutte le sottopagine che hanno accesso a questi contenuti tramite i tag include.

I template hook (anche “action hook”), collegano il tema con funzioni individuali o plug-in del software. La maggior parte di questi “ganci” sono già presenti in WordPress. In questo modo è quindi possibile includere informazioni specifiche direttamente nell’header, nel footer o nella sidebar. Inoltre gli sviluppatori possono integrare hook personalizzati nei propri temi.

Il conditional tag (in italiano “istruzioni condizionali”) è composto da funzioni php come if, else o while e, in combinazione con le funzionalità di WordPress, consente di collegare la visualizzazione di determinati contenuti ad alcune condizioni. Questo può essere per esempio uno speciale saluto di benvenuto per utenti registrati:

Con loop si indica il meccanismo all’interno di WordPress addetto all’organizzazione dei contenuti da visualizzare. Fondamentalmente si tratta di diverse funzioni di WordPress collegate tra di loro tramite diversi conditional tag:

La sezione di codice if (have_post()) nella riga 1 indica a WordPress di verificare se ci sono dei post. Se si trovano dei post del database, la sezione di codice while (have_posts()) : the_post() fa in modo che il software esegua le seguenti funzioni in loop, fino a quando have_posts() non è più valida: ovvero fino a quando non ci sono più post.

Il loop comprende pertanto tutte le funzioni fino all’istruzione php endwhile nella riga 6: in questo esempio troviamo la funzione the_title() che serve a generare il titolo e la funzione the_excerpt(), che indica al software di caricare dal database un estratto del post. Per la visualizzazione dei contenuti si stabilisce che il titolo dell’articolo venga generato nelle dimensioni h2 e che l’anteprima dell’articolo appaia all’interno di un div-box con il nome della classe CSS entry.

Nella homepage di un blog di WordPress, un semplice loop di questo tipo fa in modo che il titolo e l’anteprima del testo dei post vengano generati uno sotto l’altro a partire dal più recente. Nell’area admin è possibile configurare Il numero di post mostrati. Esistono loop di WordPress più complessi, che insieme ai diversi metadati come autore, data, categoria e tag contengono anche un link per la singola visualizzazione dei post.