Sviluppare Temi

On this page... (hide)

  1. 1. Utilizzare i Temi
  2. 2. Introduzione
  3. 3. Perché Costruire un Tema?
  4. 4. Anatomia di un Tema
    1. 4.1  Il Foglio Stile del Tema
    2. 4.2 I Temi dei Template
  5. 5. Utilizzare i Temi
  6. 6. Introduzione
  7. 7. Perché Costruire un Tema?
  8. 8. Anatomia di un Tema
    1. 8.1  Il Foglio Stile del Tema
    2. 8.2 I Temi dei Template
    3. 8.3 Gli Agganci Disponibili per le Azioni
  9. 9. Linee Guida Generali
  10. 10. Riferimenti
    1. 10.1 Gli Agganci Disponibili per le Azioni
  11. 11. Linee Guida Generali
  12. 12. Riferimenti

1.  Utilizzare i Temi

Se foste interessati ad imparare su come installare ed utilizzare i temi si veda la documentazione relativa all'Utilizzo dei Temi.

2.  Introduzione

Si può voler sviluppare dei temi WordPress per il proprio utilizzo o per distribuirli. Questa pagina differisce da quella riguardante l'Utilizzo dei Temi in quanto tratta gli aspetti tecnici della scrittura del codice necessario a costruire un tema piuttosto che spiegare come attivare un tema o ottenere nuovi temi.

3.  Perché Costruire un Tema?

Vi sono diversi motivi per costruire temi per WordPress. I vantaggi di utilizzare un tema anziché modificare i file di WordPress sono evidenti:

  • Aggiornando WordPress non si sovrascriveranno le modifiche ai template personalizzati.
  • Fornire template alternativi per specifiche funzioni del sito, quali pagine per le categorie, pagine per i risultati delle ricerche.
  • Possibilità di passare rapidamente da un tema all'altro.
  • Utilizzare il tema su più siti in maniera facile oppure renderlo disponibile per il download.

4.  Anatomia di un Tema

I Temi di WordPress si trovano in directory contenute in wp-content/themes/. Questa directory conterrà tutti i fogli stile del tema, i Template e le immagini. Ad esempio un tema denominato "test" si troverà nella directory wp-content/themes/test/.

WordPress include due temi nella sua distribuzione, un tema "Classic" ed un tema "Default". Si esaminino i file di questi temi per avere un'idea di come costruire i propri file di tema.

Un tema WordPress deve avere un foglio stile di nome style.css perché il tema venga riconosciuto da WordPress.

4.1  Il Foglio Stile del Tema

il foglio stile style.css deve fornire informazioni sul tema, sotto forma di commenti. Inoltre, non è consentito a due temi di avere i medesimi dettagli, in quanto ciò provoca problemi nella finestra di selezione dei temi. Quindi, se si realizza un tema partendo da una copia di un tema esistente, assicurarsi di modifcare per prima cosa queste informazioni.

Il seguente esempio mostra le prime righe di un foglio stile per un tema di nome "Rose": 

 /*
Theme Name: Rose 
 Theme URI: homepage-del-tema
 Description: una-breve-descrizione
 Author: il-vostro-nome
 Author URI: la-vostra-URI
 Template: utilizzare-questa-voce-per-definire-un-tema-padre-opzionale
 Version: un-numero-opzionale
 .
 Commenti/Condizioni di Licenza (se esistenti).
 .
 */

Il tema più semplice include solo un file style.css oltre alle immagini se necessarie. Per creare un simile tema, si dovrà specificare un insieme di template da ereditare per essere utilizzati dal tema, modificando la riga Template: nei commenti di style.css (come mostrato precedentemente). Ad esempio, se volessi che il tema "Rose" erediti i template da un altro tema di nome "test", dovrò inserire Template: test nei commenti all'inizio del file style.css di Rose. Ora "test" è il tema padre per "Rose", che consiste solo del file style.css e delle relative immagini, tutti collocati nella directory wp-content/themes/Rose. (Si noti che indicando un tema padre tutti i file di template dipenderanno da questo tema. Ciò significa che qualsiasi file di template presente nella directory del tema figlio verrà ignorato.)

Le linee di commento in style.css come descritto in precedenza sono richieste da WordPress perché possa identificare un tema e visualizzarlo nel pannello di amministrazione come un tema disponibile assieme agli altri temi installati.

Nota: ''Quando si definisce un tema padre nella sezione Template: si dovrà utilizzare il nome della directory dello stile. Ad esempio, per utilizzare come template padre il tema Default di WordPress non si dovrà scrivere "Template: WordPress Default", ma "Template: default", in quanto default è la directory che contiene questo tema. Inoltre non lasciate alcuno spazio fra Template: e la directory.

4.2  I Temi dei Template

I Template sono dei file sorgenti in PHP utilizzati per generare le pagine richieste dai visitatori. Questa sezione descrive i vari template che possono essere specificati come parte di un tema. WordPress permette di definire template separati per i vari aspetti del weblog, tuttavia, non è essenziale avere tutti questi template differenti perché il proprio blog funzioni perfettamente. In Gerarchia dei Template viene descritto come vengono scelti i template, in funzione di quali template sono disponibili in un determinato tema. Da sviluppatore di temi, è possibile scegliere il livello di personalizzazione che si desidera implementare utilizzando i template. Ad esempio, in un caso estremo, è possibile utilizzare un solo file di template denominato index.php come template per tutte le pagine generate e visualizzate dal weblog.

Template di Base

Un tema può fornire il proprio Template. Per fare ciò, la directory del tema deve contenere un file index.php. Si tratta del template principale per il tema e deve esistere obbligatoriamente. Altri template che spesso si desidera inserire nel proprio tema sono comments.php e comments-popup.php. Questi forniscono i template per i commenti ed i commenti popup per il tema. Se non vengono forniti, di base vengono utilizzati i file wp-comments.php e wp-comments-popup.php. Questi template standard potrebbero non abbinarsi molto bene al proprio tema, quindi probabilemnte si vorranno fornire i propri template.

Questi sono i file principali necessari a creare un tema. Porre style.css, index.php, comments.php e comments-popup.php nella loro directory sotto wp-content/themes/ e così si ha un tema. Ma aspettate, c'è di più! È possibile suddividere index.php in:

  1. header.php
  2. index.php
  3. sidebar.php
  4. footer.php

cio permetterà una maggior modularità e migliorerà la leggibilità oltre a fornire accesso ai vari elementi in maniera indipendente. In tal modo è possibile riutilizzare la testata, la sidebar ed il pié di pagina in altre pagine - basterà chiamare i Tag di Inclusione get_header(), get_sidebar() o get_footer() in qualsiasi posizione del template.

Sviluppare Temi

5.  Utilizzare i Temi

Se foste interessati ad imparare su come installare ed utilizzare i temi si veda la documentazione relativa all'Utilizzo dei Temi.

6.  Introduzione

Si può voler sviluppare dei temi WordPress per il proprio utilizzo o per distribuirli. Questa pagina differisce da quella riguardante l'Utilizzo dei Temi in quanto tratta gli aspetti tecnici della scrittura del codice necessario a costruire un tema piuttosto che spiegare come attivare un tema o ottenere nuovi temi.

7.  Perché Costruire un Tema?

Vi sono diversi motivi per costruire temi per WordPress. I vantaggi di utilizzare un tema anziché modificare i file di WordPress sono evidenti:

  • Aggiornando WordPress non si sovrascriveranno le modifiche ai template personalizzati.
  • Fornire template alternativi per specifiche funzioni del sito, quali pagine per le categorie, pagine per i risultati delle ricerche.
  • Possibilità di passare rapidamente da un tema all'altro.
  • Utilizzare il tema su più siti in maniera facile oppure renderlo disponibile per il download.

8.  Anatomia di un Tema

I Temi di WordPress si trovano in directory contenute in wp-content/themes/. Questa directory conterrà tutti i fogli stile del tema, i Template e le immagini. Ad esempio un tema denominato "test" si troverà nella directory wp-content/themes/test/.

WordPress include due temi nella sua distribuzione, un tema "Classic" ed un tema "Default". Si esaminino i file di questi temi per avere un'idea di come costruire i propri file di tema.

Un tema WordPress deve avere un foglio stile di nome style.css perché il tema venga riconosciuto da WordPress.

8.1  Il Foglio Stile del Tema

il foglio stile style.css deve fornire informazioni sul tema, sotto forma di commenti. Inoltre, non è consentito a due temi di avere i medesimi dettagli, in quanto ciò provoca problemi nella finestra di selezione dei temi. Quindi, se si realizza un tema partendo da una copia di un tema esistente, assicurarsi di modifcare per prima cosa queste informazioni.

Il seguente esempio mostra le prime righe di un foglio stile per un tema di nome "Rose": 

 /*
Theme Name: Rose 
 Theme URI: homepage-del-tema
 Description: una-breve-descrizione
 Author: il-vostro-nome
 Author URI: la-vostra-URI
 Template: utilizzare-questa-voce-per-definire-un-tema-padre-opzionale
 Version: un-numero-opzionale
 .
 Commenti/Condizioni di Licenza (se esistenti).
 .
 */

Il tema più semplice include solo un file style.css oltre alle immagini se necessarie. Per creare un simile tema, si dovrà specificare un insieme di template da ereditare per essere utilizzati dal tema, modificando la riga Template: nei commenti di style.css (come mostrato precedentemente). Ad esempio, se volessi che il tema "Rose" erediti i template da un altro tema di nome "test", dovrò inserire Template: test nei commenti all'inizio del file style.css di Rose. Ora "test" è il tema padre per "Rose", che consiste solo del file style.css e delle relative immagini, tutti collocati nella directory wp-content/themes/Rose. (Si noti che indicando un tema padre tutti i file di template dipenderà da questo tema. Ciò significa che qualsiasi file di template presente nella directory del tema figlio verrà ignorato.)

Le linee di commento in style.css come descritto in precedenza sono richiesti da WordPress perché possa identificare un tema e visualizzarlo nel pannello di amministrazione come un tema disponibile assieme agli altri temi installati.

Nota: ''Quando si definisce un tema padre nella sezione Template: si dovrà utilizzare il nome della directory dello stile. Ad esempio, per utilizzare come template padre il tema Default di WordPress non si dovrà scrivere "Template: WordPress Default", ma "Template: default", in quanto default è la directory che contiene questo tema. Inoltre non lasciate alcuno spazio fra Template: e la directory.

8.2  I Temi dei Template

I Template sono dei file sorgenti in PHP utilizzati per generare le pagine richieste dai visitatori. Questa sezione descrive i vari template che possono essere specificati come parte di un tema. WordPress permette di definire template separati per i vari aspetti del weblog, tuttavia, non è essenziale avere tutti questi template differenti perché il proprio blog funzioni perfettamente. In Gerarchia dei Template viene descritto come vengono scelti i template, in funzione di quali template sono disponibili in un determinato tema. Da sviluppatore di temi, è possibile scegliere il livello di personalizzazione che si desidera implementare utilizzando i template. Ad esempio, in un caso estremo, è possibile utilizzare un solo file di template denominato index.php come template per tutte le pagine generate e visualizzate dal weblog.

Template di Base

Un tema può fornire il proprio Template. Per fare ciò, la directory del tema deve contenere un file index.php. Si tratta del template principale per il tema e deve esistere obbligatoriamente. Altri template che spesso si desidera inserire nel proprio tema sono comments.php e comments-popup.php. Questi forniscono i template per i commenti ed i commenti popup per il tema. Se non vengono forniti, di base vengono utilizzati i file wp-comments.php e wp-comments-popup.php. Questi template standard potrebbero non abbinarsi molto bene al proprio tema, quindi probabilmente si vorranno fornire i propri template.

Questi sono i file principali necessari a creare un tema. Porre style.css, index.php, comments.php e comments-popup.php nella loro directory sotto wp-content/themes/ e così si ha un tema. Ma aspettate, c'è di più! È possibile suddividere index.php in:

  1. header.php
  2. index.php
  3. sidebar.php
  4. footer.php

ciò permetterà una maggior modularità e migliorerà la leggibilità oltre a fornire accesso ai vari elementi in maniera indipendente. In tal modo è possibile riutilizzare la testata, la sidebar ed il pié di pagina in altre pagine - basterà chiamare i Tag di Inclusione get_header(), get_sidebar() o get_footer() in qualsiasi posizione del template.

Template Query-based

WordPress può caricare differenti Template per differenti tipi di interrogazioni (query). I vari tipi di query sono qui brevemente descritti. Di base se il tema fornisce un template di nome category.php e viene interrogata una categoria, category.php verrà caricato al posto di index.php. Se category.php non è presente verrà utilizzato index.php come al solito. Si veda anche Gerarchia dei Template e Tag Condizionali.

Se si desidera creare un template per una categoria specifica allora si dovrà denominarlo category-#.php dove "#" è il numero di ID della categoria (che si ricava in Gestione->Categorie quando si è collegati al sito come amministratori). Questo template supererà category.php se fosse presente nel template. Per ulteriori informazioni si veda Template di Categoria.

È possibile anche disegnare Template differenti per Pagine differenti. Si faccia riferimento a questo link per ulteriori informazioni.

Ecco una lista dei file di template di un tema riconosciuti da WordPress. Ovviamente, il tema può contenere qualsiasi altro foglio stile, immagini, o file che si desideri includere. Si ricordi sempre però the i file seguenti hanno un significato speciale per WordPress.

  • style.css - Il foglio stile principale. Deve essere incluso nel tema.
  • index.php - Il template principale. Se il tema fornisce i propri template, index.php deve essere presente.
  • comments.php - Il template dei commenti. Se non è presente, verrà utilizato comments.php presente nel tema "default".
  • comments-popup.php - Il template dei commenti popup. Se non è presente, verrà utilizato comments-popup.php presente nel tema "default".
  • home.php - Il template della home page.
  • single.php - Il template per un singolo articolo. Utilizzato quando viene richiesto un singolo articolo. Per questo e gli altri template di richiesta verrà utilizzato index.php se il template di richiesta non fosse presente.
  • page.php - Il template di pagina. Utilizzato quando viene richiesta una Pagina singola.
  • category.php - Il template di categoria. Utilizzato quando viene richiesta una categoria.
  • author.php - Il template dell'autore. Utilizzato quando viene richiesto un autore.
  • date.php - Template data/ora. Utilizzato quando una data o un orario vengono richiesti. Anno, mese, giorno, ora, minuto, secondo.
  • archive.php - Template di archivio. Utilizzato quando viene richiesta una categoria, un autore o una data. Si noti che questo template verrà superato da category.php, author.php e date.php per le rispettive richieste.
  • search.php - Template di ricerca. Utilizzato quando viene effettuata una ricerca.
  • 404.php - Il template 404 Not Found. Utilizzato quando WordPress non riesce a trovare un articolo o una pagina che corrisponde all'interrogazione effettuata.

Questi file hanno un significato speciale per WordPress in quanto vengono utilizzati come sostituti di index.php, quando disponibili, e quando i corrispondenti Tag Condizionali (detti anche funzioni is_*();) restituiscono il valore vero. Ad esempio se viene visualizzato un singolo articolo il Tag Condizionale is_single() restituisce 'vero', e, se esiste un file single.php@@ file nel tema corrente, tale template viene utilizzato per presentare la pagina.

Il tema Default incluso con WordPress (basato sul lavoro di Michael Heilemann Kubrick per WordPress 1.2) fornisce un esempio di come le interrogazioni vengono mappate sui template.

Fare Riferimento a File dai Template

Il codice <?php bloginfo('template_directory'); ?> inserisce l'URL della directory del template nell'output del template. Potete appendere qualsiasi informazione URI addizionale a questo output per fare riferimento a qualsiasi file del tema.

Il codice <?php bloginfo('stylesheet_directory'); ?> inserisce l'URL della directory che contiene il foglio stile del tema corrente nell'output del template. Potete appendere qualsiasi informazione URI addizionale a questo output per fare riferimento a qualsiasi file del tema, specificatamente quelli utilizzati dal foglio stile.

La costante TEMPLATEPATH è un riferimento assoluto al percorso dell directory del tema corrente (senza / alla fine).

Si noti che l'URI utilizzato dal foglio di stile sono relative al foglio di stile, non alla pagina che fa riferimento al foglio stile. Ciò ovvia alla necessità di dover inserire del codice PHP nel file CSS per specificare le directory. Ad esempi, se si include una directory images/ nel proprio tema, si dovrà specificare i riferimenti a questa directory nel CSS così: 

 h1 {
   background-image: URL(images/my_background.jpg);
 }

È buona pratica utilizzare le URI nel modo descritto sopra per far riferimento a file all'interno di un template, in tal modo il template sarà indipendente dal percorso relativo.

Definire Template Personalizzati

È possibile utilizzare il sistema di plugin di WordPress per definire template aggiuntivi che vengono visualizzati secondo i propri criteri. Questa funzionalità avanzata viene realizzata utilizzando l'aggancio template_redirect. Altre informazioni sulla creazione di plugin si trovano in Plugin API.

8.3  Gli Agganci Disponibili per le Azioni

Quando si sviluppa un tema, è opportuno tener presente che ci sono degli agganci che permettono di interagire con le API dei Plugin. Se si eliminano tali agganci dal proprio template, sarà poi impossibile richiamare alcune importanti azioni effettuate dai plugin quando il tema sarà attivo. Gli agganci dei plugin vengono richiamati dai plugin sotto forma di funzioni do_action('nome aggancio', [secondo parametro opzionale]) e vengono referenziati dai template tramite i seguenti Tag di Template; ecco una breve lista di agganci che si possono inserire nel proprio template, specialmente se si prevede di distribuirlo a terzi. Si veda anche Gli Agganci Disponibili per le Azioni.

wp_head
Dovrebbe venir incluso in header.php. Questo aggancio non ha un secondo parametro.
wp_footer
Dovrebbe venir incluso in footer.php. Questo aggancio non ha un secondo parametro.
comment_form
Dovrebbe venir incluso in comments.php e comments-popup.php. Il suo secondo parametro è $post->ID.
wp_meta
Dovrebbe venir incluso nella sezione <li>Meta</li> della sidebar.php del tema o in posizione simile.

9.  Linee Guida Generali

Siate chiari riguardo alle seguenti cose nella documentazione (sarebbe opportuno inserire un file README assieme al tema):

  1. Indicare con precisione quale scopo hanno il tema ed i file di template.
  2. Indicare, se esistono, gli eventuali limiti del tema.
  3. Se vi sono delle necessità particolari, che possono includere delle regole di riscrittura personalizzate, o l'utilizzo di template aggiuntivi o speciali, immagini o file, esplicitare i passi che un utente deve fare affinché il tema funzioni.
  4. Provare e testare il tema sui vari browser per scoprire una buona parte dei problemi che gli utenti potrebbero incontrare in un secondo tempo.

Poiché il concetto di utilizzo dei temi è attualmente nuovo per WordPress, ogni sforzo per rendere i temi il più facili da gestire per gli utenti finali, verrà molto apprezzato.

10.  Riferimenti

Questa pagina trae gran parte delle informazioni dai seguenti articoli:

Il codice <?php bloginfo('template_directory'); ?> inserisce l'URL della directory del template nell'output del template. Potete appendere qualsiasi informazione URI addizionale a questo output per fare riferimento a qualsiasi file del tema.

Il codice <?php bloginfo('stylesheet_directory'); ?> inserisce l'URL della directory che contiene il foglio stile del tema corrente nell'output del template. Potete appendere qualsiasi informazione URI addizionale a questo output per fare riferimento a qualsiasi file del tema, specificatamente quelli utilizzati dal foglio stile.

La costante TEMPLATEPATH è un riferimento assoluto al percorso dell directory del tema corrente (senza / alla fine).

Si noti che l'URI utilizzato dal foglio di stile sono relative al foglio di stile, non alla pagina che fa riferimento al foglio stile. Ciò ovvia alla necessità di dover inserire del codice PHP nel file CSS per specificare le directory. Ad esempi, se si include una directory images/ nel proprio tema, si dovrà specificare i riferimenti a questa directory nel CSS così: 

 h1 {
   background-image: URL(images/my_background.jpg);
}

È buona pratica utilizzare le URI nel modo descritto sopra per far riferimento a file all'interno di un template, in tal modo il template sarà indipendente dal percorso relativo.

Definire Template Personalizzati

È possibile utilizzare il sistema di plugin di WordPress per definire template aggiuntivi che vengono visualizzati secondo i propri criteri. Questa funzionalità avanzata viene realizzata utilizzando l'aggancio template_redirect. Altre informazioni sulla creazione di plugin si trovano in Plugin API.

10.1  Gli Agganci Disponibili per le Azioni

Quando si sviluppa un tema, è opportuno tener presente che ci sono degli agganci che permettono di interagire con le API dei Plugin. Se si eliminano tali agganci dal proprio template, sarà poi impossibile richiamare alcune importanti azioni effettuate dai plugin quando il tema sarà attivo. Gli agganci dei plugin vengono richiamati dai plugin sotto forma di funzioni do_action('nome aggancio', [secondo parametro opzionale]) e vengono referenziati dai template tramite i seguenti Tag di Template; ecco una breve lista di agganci che si possono inserire nel proprio template, specialmente se si prevede di distribuirlo a terzi. Si veda anche Gli Agganci Disponibili per le Azioni.

wp_head
Dovrebbe venir incluso in header.php. Questo aggancio non ha un secondo parametro.
wp_footer
Dovrebbe venir incluso in footer.php. Questo aggancio non ha un secondo parametro.
comment_form
Dovrebbe venir incluso in comments.php e comments-popup.php. Il suo secondo parametro è $post->ID.
wp_meta
Dovrebbe venir incluso nella sezione <li>Meta</li> della sidebar.php del tema o in posizione simile.

11.  Linee Guida Generali

Siate chiari riguardo alle seguenti cose nella documentazione (sarebbe opportuno inserire un file README assieme al tema):

  1. Indicare con precisione quale scopo hanno il tema ed i file di template.
  2. Indicare, se esistono, gli eventuali limiti del tema.
  3. Se vi sono delle necessità particolari, che possono includere delle regole di riscrittura personalizzate, o l'utilizzo di template aggiuntivi o speciali, immagini o file, esplicitare i passi che un utente deve fare affinché il tema funzioni.
  4. Provare e testare il tema sui vari browser per scoprire una buona parte dei problemi che gli utenti potrebbero incontrare in un secondo tempo.

Poiché il concetto di utilizzo dei temi è attualmente nuovo per WordPress, ogni sforzo per rendere i temi il più facili da gestire per gli utenti finali, verrà molto apprezzato.

12.  Riferimenti

Questa pagina trae gran parte delle informazioni dai seguenti articoli:

Ultima modifica il 17/08/2010 ore 02:54