Anatomia di un tema WordPress

Capire a grandi linee l’anatomia di un sito/blog WordPress può essere davvero di grande aiuto in caso di necessità, magari per effettuare delle modifiche, facendoti risparmiare un sacco di tempo e avendo bene in mente dove andare a toccare.

La struttura e la grafica di un sito WP dipende dal tema installato e viene divisa in blocchi. Tema diverso, struttura e grafica diversa.

Bene o male, la maggior parte dei siti è composta in questo modo:

• header: è la parte superiore del tema, dove solitamente viene mostrato il logo e il menù di navigazione
• content: è la parte centrale del tema, dove viene mostrato il vero contenuto del sito, a seconda della pagina che si visita (articolo, pagina, archivio, …)
• sidebar: è la zona laterale, che può trovarsi a sinistra o a destra (è molto più usata in questa posizione), che serve per mostrare informazioni utili all’utente, come il campo “cerca tra gli articoli”, gli articoli recenti, eventuali ebook, zona social, banner pubblicitari.
• footer: è la parte finale del tema, dove inserire i link utili come le pagine più importanti, chi siamo, contatti, sitemap, condizioni d’uso, privacy-policy, e magari anche un box autore.

Solitamente, l’header, la sidebar e il footer rimangono uguali per tutto il sito, mentre quello che cambia è il content.

I file del tema

Ok, hai capito che il tema è composto da vari blocchi, ad esempio inizia con l’header, poi prosegue con il content, la sidebar ed infine il footer.

Ma la cosa più importante da capire è che ogni blocco è caricato grazie ad uno specifico file che contiene il codice PHP (un linguaggio di programmazione) necessario a mostrare il contenuto del blocco stesso. Quindi il tema WordPress è composto da file php (ma non solo):

Vuoi vedere una cosa interessante?

Come puoi vedere sono presenti i file:

• header.php: contiene il codice per mostrare l’header
• content.php: contiene il codice per mostrare il content
• sidebar.php: contiene il codice per mostrare la sidebar
• footer.php: contiene il codice per mostrare il footer

Molto intuitivo, non trovi?

Il content

Come ho già detto, la parte che cambia il proprio contenuto è il blocco content. Questo dipende dal tipo di pagina, e ogni tipologia di pagina ha il relativo file:

• homepage: viene mostrata attraverso il file index.php, è la prima pagina che si vede del sito
• articolo: viene mostrato attraverso il file single.php, è la pagina degli articoli
• pagina: viene mostrata attraverso il file page.php, è la pagina delle pagine 🙂
• archivio: viene mostrato attraverso il file archive.php, è la pagina degli archivi (dove vengono mostrati gli articoli per data, autore, …)
• …

È importante sottolineare che prima viene caricato il file index.php o single.php o …, poi qui dentro c’è del codice php che carica il file content.php.

Ecco una parte di un’interessante infografica:

Nella pratica cosa accade?

Facciamo finta di voler simulare la visualizzazione di un articolo, ecco cosa accade a grandi linee:

• viene caricato il file header.php
• viene caricato il file single.php
  • viene caricato il file content.php
  • viene caricato il file comments.php, per mostrare la sezione dei commenti
• viene caricato il file sidebar.php
• viene caricato il file footer.php

E questo è il codice php che fa tutto ciò:

Sempre semplificando, possiamo dire che:

• get_header(): richiama il file header.php
• get_template_part( ‘content’, get_post_format() ): richiama il file content.php
• comments_template(): richiama il file comments.php
• get_sidebar(): richiama il file sidebar.php
• get_footer(): richiama il file footer.php

Per capire il significato di qualsiasi funzione, fai riferimento al codex.

Diagramma

Nella realtà le cose sono un po’ più complesse di come le ho spiegate io, ci possono essere molte varianti del file da caricare (page.php, page-$slug.php, page-$id.php e così anche per altri file). Magari questo diagramma ti potrà dare una mano:

Link utili

• Stepping into Templates
• Template Hierarchy
• The Loop

E anche la mia sezione dei temi professionali per WordPress 🙂