Il software per la creazione di blog WordPress è ca­rat­te­riz­za­to da una se­pa­ra­zio­ne di design, fun­zio­na­li­tà e contenuti. I temi con­sen­to­no di adattare la vi­sua­liz­za­zio­ne dei contenuti front-end, senza dover apportare modifiche al programma stesso. In linea generale, un tema di WordPress mette a di­spo­si­zio­ne un codice sorgente, che descrive come devono essere vi­sua­liz­za­ti e combinati i contenuti salvati su un server, affinché da questi, quando viene vi­sua­liz­za­to un sito, possa essere creata una pagina web e possa essere vi­sua­liz­za­ta in un browser. Per i gestori di una pagina i temi offrono pertanto la pos­si­bi­li­tà di or­ga­niz­za­re li­be­ra­men­te 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 lo­ca­liz­za­zio­ne, nonché file Ja­va­Script e immagini. Vi mostriamo quali com­po­nen­ti e temi di WordPress è im­por­tan­te conoscere, quali funzioni svolgono e come mettere insieme i singoli elementi.

Elementi base dei temi WordPress

Mentre una pagina web statica si basa so­stan­zial­men­te su un unico documento HTML che contiene tutti i contenuti nonché elementi Ja­va­Script e file CSS, un tema WordPress è co­sti­tui­to da più template file. Questi vengono collegati tra di loro tramite gli include tag e de­scri­vo­no, con l’aiuto dei template tag, come i contenuti del database presente sul server debbano essere vi­sua­liz­za­ti nel browser quando si accede ad un sito. Qualora la vi­sua­liz­za­zio­ne sia su­bor­di­na­ta a con­di­zio­ni spe­ci­fi­che, vengono uti­liz­za­ti i co­sid­det­ti con­di­tio­nal tag. Inoltre è possibile integrare dei plug-in tramite i template hook. La dif­fu­sio­ne di contenuti viene am­mi­ni­stra­ta tramite un mec­ca­ni­smo che nella ter­mi­no­lo­gia WordPress viene chiamato loop.

Template Files

Il tema di WordPress, con tutti i suoi elementi base, può essere con­si­de­ra­to come una struttura, che definisce il modo in cui un sito viene vi­sua­liz­za­to. La pagina dinamica, che viene con­se­gna­ta al browser, è creata com­bi­nan­do diversi elementi, a seconda che un utente richieda di vi­sua­liz­za­re la pagina generale del blog WordPress, un singolo articolo o un solo commento. Le com­po­nen­ti vengono chiamate template file. Si tratta di file PHP che con­ten­go­no un mix di html, php e template tags e che svolgono ciascuno una funzione precisa.

Un tema di WordPress deve ne­ces­sa­ria­men­te contenere i template file index.php e style.css. Di regola in un tema di WordPress si trovano diversi template file, che per­met­to­no di vi­sua­liz­za­re diversi tipi di contenuti e possono sfruttare tutte le fun­zio­na­li­tà di questa piat­ta­for­ma 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 ob­bli­ga­to­ri di ogni tema WordPress. Questo template contiene le co­sid­det­te in­for­ma­zio­ni dell’header, come nome del tema (theme name), una breve de­scri­zio­ne (de­scrip­tion), il nome dello svi­lup­pa­to­re (author), il numero della versione (version), la licenza con cui viene ri­la­scia­to il tema (license), nonché un suo link (license URI). Inoltre il style.css è il foglio di stile prin­ci­pa­le del sito di WordPress e ospita pertanto il codice CSS del tema.
     
  • index.php: il secondo elemento ob­bli­ga­to­rio di ogni tema di WordPress è l’index.php, che funge da pagina generale e può essere uti­liz­za­to come homepage. All’interno della gerarchia dei template, l’index.php è quello che viene uti­liz­za­to in caso di fallback. In altre parole: se per alcuni contenuti non viene spe­ci­fi­ca­to un template, il software ricorre all’index.php. La struttura dell’index.php dipende es­sen­zial­men­te 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 na­vi­ga­zio­ne, questi elementi possono anche essere definiti in file ag­giun­ti­vi 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 in­for­ma­zio­ni fon­da­men­ta­li 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 con­se­guen­za è possibile integrare la parte visibile dell’in­te­sta­zio­ne del tema nell’header.php.
  • footer.php: il footer.php è la con­tro­par­te 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’in­se­ri­men­to di contenuti nella barra laterale. Questi possono essere in­cor­po­ra­ti di­ret­ta­men­te tramite codice oppure uti­liz­zan­do i Widget at­tra­ver­so la funzione dynamic_sidebar. Questo pro­ce­di­men­to 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 con­ten­go­no di regola un titolo con link e un’immagine di anteprima, nonché un teaser o una breve de­scri­zio­ne del post con un altro link che ne consente la vi­sua­liz­za­zio­ne 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 pa­no­ra­mi­ca degli articoli, il template single.php viene uti­liz­za­to quando un utente vuole vi­sua­liz­za­re un singolo articolo.
     
  • home.php: questo template offre la pos­si­bi­li­tà di creare una homepage ad hoc per il blog. Se nel vostro tema di WordPress non uti­liz­za­te una struttura con home.php, il sito mostrerà in homepage una pa­no­ra­mi­ca dei post più recenti, seguendo il file index.php.
     
  • page.php: i temi di WordPress sono ot­ti­miz­za­ti per fare in modo che i post del blog vengano vi­sua­liz­za­ti in ordine cro­no­lo­gi­co. Insieme a questi contenuti dinamici, molti gestori di siti web mettono a di­spo­si­zio­ne dei vi­si­ta­to­ri contenuti speciali come le sezioni “About me” o le note legali sotto forma di pagine statiche. È possibile creare queste pagine in­di­pen­den­te­men­te 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 uti­liz­za­re il relativo template con lo stesso nome. Su questa pagina è inoltre possibile in­cor­po­ra­re la funzione di ricerca di WordPress per dare ai vi­si­ta­to­ri la pos­si­bi­li­tà di cercare le in­for­ma­zio­ni de­si­de­ra­te 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 clas­si­fi­ca­re i post dei blog in base a de­ter­mi­na­ti criteri di ricerca. Tra i filtri di­spo­ni­bi­li è possibile uti­liz­za­re categorie, parole chiave (tag), autori e la data di pub­bli­ca­zio­ne. 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.
     
  • at­ta­ch­ment.php: il file at­ta­ch­ment.php è usato quando i vi­si­ta­to­ri di un sito vogliono vi­sua­liz­za­re contenuti ag­giun­ti­vi come immagini, PDF o file mul­ti­me­dia­li in un’unica schermata.
     
  • image.php: una versione par­ti­co­la­re dell’at­ta­ch­ment.php è il template image.php, con il quale è possibile definire un template specifico per la vi­sua­liz­za­zio­ne di immagini in una schermata singola. Se non è di­spo­ni­bi­le il template image.php, è possibile usare il template at­ta­ch­ment.php.
     
  • rtl.css: se volete che il vostro tema di WordPress supporti anche altre lingue che uti­liz­za­no un sistema di scrittura da destra a sinistra (come per esempio l’arabo o l’ebraico), è ne­ces­sa­rio uti­liz­za­re il foglio di stile rtl.css.

Per collegare tra di loro le singole com­po­nen­ti di una pagina WordPress e caricare i contenuti dai database, è possibile uti­liz­za­re alcune fun­zio­na­li­tà dei template che nella ter­mi­no­lo­gia di WordPress vengono chiamate template tag.

Template tag

I template tag sono funzioni uti­liz­za­te all’interno di un template per ri­chia­ma­re i contenuti del database. Mentre nei siti statici i contenuti vengono me­mo­riz­za­ti di­ret­ta­men­te nel testo sorgente HTML, i template di WordPress con­ten­go­no solo istru­zio­ni sui contenuti del database che devono essere se­le­zio­na­ti. I template tag con­sen­to­no al software di creare ogni pagina web in modo dinamico nel momento in cui la pagina viene vi­sua­liz­za­ta. Il seguente esempio mostra quale sia il vantaggio di questa forma di pagina web: il titolo del sito viene vi­sua­liz­za­to in ogni sot­to­pa­gi­na. Per poter integrare questo nome su un qualsiasi template, si deve uti­liz­za­re il seguente tag:

bloginfo('name')

È possibile uti­liz­za­re questo tag, ad esempio, per far apparire il titolo del sito in modo au­to­ma­ti­co.

<title><?php bloginfo('name'); ?> |<?php wp_title(); ?></title>

Mentre la funzione bloginfo('nome') serve da se­gna­po­sto per il nome del sito, il wp_title() serve a generare il titolo della sot­to­pa­gi­na. WordPress ricava dal server le in­for­ma­zio­ni su quali contenuti debbano essere ef­fet­ti­va­men­te generati al posto del se­gna­po­sto durante la vi­sua­liz­za­zio­ne di una pagina. Infine genera un titolo secondo il seguente schema:

Nome del blog | Titolo della sottopagina

Con un sito statico invece è ne­ces­sa­rio inserire il titolo su ogni pagina html del vostro sito:

<title>Nome del blog | Titolo della sottopagina</title>

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 ma­nual­men­te. Con un sito web dinamico, al contrario, ef­fet­tua­te ag­gior­na­men­ti di questo tipo in modo de­ci­sa­men­te più facile: le modifiche che ri­guar­da­no tutte le pagine possono essere ef­fet­tua­te 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:

the_title() 
the_content()
the_author() 
the_time()
the_category() 
the_tags()

Una pa­no­ra­mi­ca di tutti i tag template la trovate sul Codex di WordPress.

Include tag

Una forma par­ti­co­la­re di tag template di WordPress sono i co­sid­det­ti include tag, uti­liz­za­ti 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:

get_header()
get_footer()
get_sidebar()

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 au­to­ma­ti­ca­men­te a tutte le sot­to­pa­gi­ne che hanno accesso a questi contenuti tramite i tag include.

Template hook

I template hook (anche “action hook”), collegano il tema con funzioni in­di­vi­dua­li o plug-in del software. La maggior parte di questi “ganci” sono già presenti in WordPress. In questo modo è quindi possibile includere in­for­ma­zio­ni spe­ci­fi­che di­ret­ta­men­te nell’header, nel footer o nella sidebar. Inoltre gli svi­lup­pa­to­ri possono integrare hook per­so­na­liz­za­ti nei propri temi.

Con­di­tio­nal tag

Il con­di­tio­nal tag (in italiano “istru­zio­ni con­di­zio­na­li”) è composto da funzioni php come if, else o while e, in com­bi­na­zio­ne con le fun­zio­na­li­tà di WordPress, consente di collegare la vi­sua­liz­za­zio­ne di de­ter­mi­na­ti contenuti ad alcune con­di­zio­ni. Questo può essere per esempio uno speciale saluto di benvenuto per utenti re­gi­stra­ti:

if ( is_user_logged_in() ):
    echo 'Welcome, registered user!';
else:
    echo 'Welcome, visitor!';
endif;

Il loop

Con loop si indica il mec­ca­ni­smo all’interno di WordPress addetto all’or­ga­niz­za­zio­ne dei contenuti da vi­sua­liz­za­re. Fon­da­men­tal­men­te si tratta di diverse funzioni di WordPress collegate tra di loro tramite diversi con­di­tio­nal tag:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry">
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; endif; ?>

La sezione di codice if (have_post()) nella riga 1 indica a WordPress di ve­ri­fi­ca­re 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’istru­zio­ne 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 vi­sua­liz­za­zio­ne dei contenuti si sta­bi­li­sce che il titolo dell’articolo venga generato nelle di­men­sio­ni 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 con­fi­gu­ra­re Il numero di post mostrati. Esistono loop di WordPress più complessi, che insieme ai diversi metadati come autore, data, categoria e tag con­ten­go­no anche un link per la singola vi­sua­liz­za­zio­ne dei post.

Vai al menu prin­ci­pa­le