La struttura di un template di WordPress

La struttura di un template di WordPress è divisa in quattro parti:

Testata (header), corpo della pagina (content), una o più aree dedicate ai widget (sidebar) e il piede della pagina (footer).

Per quanto riguarda invece le pagine degli articoli deve essere considerata un’area per i commenti.

Nel PHP per incorporare il contenuto di un file esterno viene usata la funzione include().

Qundo si sviluppa un tema di WordPress al posto di include() dobbiamo usare funzioni specifiche del framework che permetto di inserire con molta facilità i template che formano le parti della pagina.

Quindi le funzioni get_header(), get_sidebar() e get_footer(), detti Template Tags, hanno la funzione di includere in modo dinamico i file header.php, sidebar.php e footer.php.

Mentre i contenuti della pagina vengono creati da un ciclo chiamato Loop che appare così:

[php]<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    ...
<?php endwhile; ?>[/php]

In questo Loop vengono richiamati altri Template Tag mediante i quali si interpella il database che a sua volta stampa le informazioni a video.

Struttura di un template di WordPress

Template, template tags e template parts. La suddivisione di tutti i Template.

Header (header.php)

Il template tag get_header() include il contenuto del file header.php.

Se desideriamo una testata più specifica per una 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 potrebbe avere un’intestazione specifica nel template header-home.php dove quindi il valore name va sostituito con home ottenendo questa stringa get_header( ‘home’ ).

Il file header.php contiene l’intestazione del documento HTML, con i vari tag meta, link e script.

È il file che costruisce la parte superiore della pagina e include anche il menu di navigazione.

Sotto il codice di un header.php molto semplificato:

Header WordPress

Header di WordPress codice php del file header.php. Da qui potete vedere com’è costruito tutta la parte che apparirà nella testata del sito.

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 chiamata la funzione wp_head(), da aggiungere prima della chiusura del tag head (per i dettagli visionare il codex.

Sidebar (sidebar.php)

La sidebar è un contenitore di blocchi di codice HTML (widget) che contengono informazioni correlate ai contenuti del sito Web.

In una pagina possono esserci diverse sidebar, ognuna collocata in un’area diversa.

La sidebar viene ricostruita nel 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 particolari alla funzione andrà passata la stringa ‘name’.

Sidebar wordpress

Sidebar di wordpress codice php del file sidebar.php. Da qui potete vedere com’è costruito tutta la parte che apparirà nei widget del sito.

Footer (footer.php)

Il footer è la parte inferiore della pagina del sito per capirci il piede della pagina. Questa spesso contiene informazioni, copyright e un menù secondario.

Spesso nel footer trova posto un’ulteriore sidebar sempre incorporata dal template tag get_sidebar().

Il footer ha sempre un richiamo alla funzione wp_footer(), da collocare subito prima della chiusura del body, come potete vedere nel Codex.

Footer di WordPress

Footer di WordPress codice php del file footer.php. Da qui potete vedere com’è costruito tutta la parte che apparirà al piede del sito.

Codex per capire meglio la struttura di un template di WordPress

Il Codex è il riferimento ufficiale per chiunque voglia sviluppare su WordPress, e al Codex si farà frequente rinvio in questa guida.

Qui trovate l’elenco completo dei template tags e l’indice delle risorse relative ai template.

Altra risorsa fondamentale è l’articolo Stepping into templates.


HAI BISOGNO DI UN TECNICO PER PROBLEMI AL TUO SITO?

CONTATTACI PER UN PREVENTIVO

Open chat
1
Se vuoi maggiori info contattaci!
Scan the code
Ciao... Hai bisogno di un sito web, di una grafica o un servizio fotografico?