WordPress: come rendere dinamici Header e Sidebar del template?

di Nando Pappalardo | 29 Giu 2010 | in: Guide, Wordpress

Nel corso delle lezioni di questa guida abbiamo realizzato buona parte del nostro template; oggi, prima di spingerci avanti introducendo la personalizzazione di altri elementi riguardanti il tema, vedremo com’è possibile migliorare l’organizzazione del codice finora scritto.

WordPress, infatti, mette a disposizione delle funzioni che permettono di includere automaticamente – all’interno dei template – il codice di alcuni file .php presenti all’interno della cartella del nostro tema. In questo modo è possibile migliorare la comprensione del codice e rendere il tutto più modulare, richiamando in modo dinamico porzioni di codice da utilizzare su diversi template all’interno dello stesso tema.

In una delle prime lezioni abbiamo detto che quando si realizza un tema per WordPress è possibile creare più template (differenti tra di loro) da assegnare ai diversi elementi del blog: archivi, categorie, singoli articoli, pagine, ecc.

Se volessimo creare un template dedicato alla visualizzazione del singolo articolo che sia leggermente diverso dal template standard che stiamo realizzando (per esempio vogliamo che contenga l’elenco dei commenti, il modulo per lasciare un nuovo commento, una breve descrizione dell’autore, ecc), con molta probabilità utilizzeremmo comunque degli elementi comuni, come per esempio l’header e la sidebar che abbiamo già realizzato (intestazione e barra laterale).

Le funzioni get_header() e get_sidebar() fornite da WordPress permettono rispettivamente di includere in modo dinamico il contenuto di due file denominati: header.php e sidebar.php che dovranno essere presenti all’interno della cartella del tema.

Indice dell’articolo

Come rendere dinamico l’header del template?
Come rendere dinamica anche la sidebar?
Qual è la differenza tra template e tema?
Perché rendere dinamiche alcune sezioni del template?
I parametri delle funzioni get_header() e get_sidebar()
Aggiungere il footer al template
1. Come rendere dinamica l’inclusione del footer sul template?
Conclusione
Indice degli articoli trattati in questa guida

1. Come rendere dinamico l’header del template?

Per rendere dinamico il contenuto dell’header del nostro template – in modo da poterlo richiamare in seguito mediante la funzione get_header() – è necessario creare un nuovo file che salveremo nella stessa cartella del tema con il nome header.php.

A questo punto basterà togliere dal file index.php del nostro template tutta la parte di codice riguardante la visualizzazione dell’header e incollarla all’interno del nuovo file che abbiamo appena creato.

Questo sarà dunque il markup della nostra pagina header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
</head>

<body>
	<!-- START CONTAINER -->
	<div class="container">
		<!-- START HEADER -->
		<h1>
			<a href="<?php echo get_option('home'); ?>/" title="Ritorna alla Home Page">
				<?php bloginfo('name'); ?>
			</a>
		</h1>

		<p class="center"><?php bloginfo('description'); ?></p>

		<!-- START NAVIGATION -->
		<?php wp_page_menu('menu_class=nav&show_home=1'); ?>
		<!-- END NAVIGATION -->

		<!-- END HEADER -->

Adesso nel nostro file index.php, al posto della porzione di codice che abbiamo tolto, basterà inserire la funzione get_header() che una volta eseguita includerà in modo dinamico tutto il codice presente nel file header.php.

La parte iniziale della nostra pagina index.php a questo punto sarà così composta:

<?php get_header(); ?>

<!-- START COLONNA SINISTRA -->
<div id="content">
	<?php if (have_posts()) : ?>
	...

Dopo la creazione di questo nuovo file – che abbiamo chiamato header.php – la cartella contenente il nostro tema sarà composta come mostrato nella Figura 1.

Figura 1 - Elenco file presenti all'interno della cartella del tema.

2. Come rendere dinamica anche la sidebar?

Lo stesso concetto è applicabile anche alla sidebar, basterà infatti tagliare tutto il codice relativo alla sidebar che abbiamo realizzato nella precedente lezione e incollarlo all’interno di un nuovo file, che chiameremo sidebar.php e che salveremo nella cartella principale del tema che stiamo realizzando.

Di seguito il contenuto del file sidebar.php:


<div id="sidebar">
	<ul>
		<!-- START SEARCH FORM -->
		<li>
			<h2>Cerca</h2>

			<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
				<input type="text" name="s" id="s" value="<?php the_search_query(); ?>"    />
				<input type="submit" id="searchsubmit" value="cerca" />
			</form>
		</li>
		<!-- END SEARCH FORM -->

		<!-- START ARCHIVES -->
		<li>
			<h2>Archivio</h2>

			<ul>
				<?php wp_get_archives('type=monthly&show_post_count=1'); ?>
			</ul>

		</li>
		<!-- END ARCHIVES -->

		<!-- START CATEGORIES -->
		<ul>
			<?php wp_list_categories('title_li=<h2>Categorie</h2>&hide_empty=0'); ?>
		</ul>
		<!-- END CATEGORIES -->

		<!-- START BLOGROLL -->
		<?php wp_list_bookmarks(); ?>
		<!-- END BLOGROLL -->

	</ul>
</div>

E questo invece il contenuto del file index.php come si presenta adesso:

<?php get_header(); ?>

<!-- START COLONNA SINISTRA -->
<div id="content">
	<?php if (have_posts()) : ?>

		<!-- START LOOP -->
		<?php while (have_posts()) : the_post(); ?>

			<!-- BEGIN POST -->
			<div <?php post_class(); ?>>

				<!-- START TITLE -->
				<h2>
					<a href="<?php the_permalink() ?>">
						<?php the_title(); ?>
					</a>
				</h2>
				<!-- END TITLE -->

				<!-- START DATE -->
				<p class="data">
					<?php the_time('j F Y') ?> di <?php the_author() ?>
				</p>
				<!-- END DATE -->

				<!-- START POST CONTENT -->
				<div class="entry">
					<?php the_content(__('|| continua a leggere &raquo;')); ?>
				</div>
				<!-- END POST CONTENT -->

				<!-- START CATEGORY POST -->
				<p class="postmetadata">
					Pubblicato in <?php the_category(', ') ?>
				</p>
				<!-- END CATEGORY POST -->

				<!-- START COMMENTS -->
				<p class="right">
					<?php comments_popup_link('Nessun commento &raquo;', '1 Commento &raquo;', '% Commenti &raquo;'); ?>
				</p>
				<!-- END COMMENTS -->

			</div>
			<!-- END POST -->

		<?php endwhile; ?>
		<!-- END LOOP -->

		<!-- START NAVIGATION -->
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link(__('&laquo; Precedenti')) ?></div>
			<div class="alignright"><?php previous_posts_link(__('Successivi &raquo;')) ?></div>
		</div>
		<!-- END NAVIGATION -->

	<?php else: ?>
		<h2><?php _e('Non trovato'); ?></h2>
		<p class="center"><?php _e('Siamo spiacenti, quello che stavi cercando non è su questa pagina'); ?></p>
	<?php endif; ?>

</div>
<!-- END COLONNA SINISTRA -->

	<!-- START SIDEBAR -->
	<?php get_sidebar(); ?>
	<!-- END SIDEBAR -->

</div>
<!-- END CONTAINER -->

</body>

</html>

Nota che adesso nel markup della pagina index.php tutta la parte riguardante l’header e la sidebar sono state rimosse e che al loro posto sono state utilizzate le funzioni get_header() e get_sidebar() per richiamare dinamicamente il codice necessario.

Nella Figura 2 puoi vedere come si presenta adesso la struttura dei file presenti all’interno della cartella del tema.

Figura 2 - Elenco file presenti all'interno della cartella del tema.

3. Qual è la differenza tra template e tema?

Per i meno esperti forse è meglio spiegare la differenza che sussiste tra tema e template quando parliamo di WordPress perché ho notato che molti tendono a utilizzare indistintamente entrambi i termini come fossero sinonimi.

Con il termine template indichiamo i singoli layout grafici da applicare alle diverse tipologie di pagine che compongono il sito, possiamo quindi avere un template per le pagine che visualizzano gli articoli, un template per le pagine che visualizzano l’indice delle categorie, un template per le pagine che visualizzano i risultati delle ricerche, ecc.

L’insieme di questi template, che comporranno le varie pagine del sito/blog, prende il nome di tema.

Fatta chiarezza su questi due termini vediamo perché rendere dinamiche alcune sezioni del template.

4. Perché rendere dinamiche alcune sezioni del template?

Rendendo dinamiche alcune sezioni del template principale abbiamo reso molto più leggibile e comprensibile il codice oltre ad averlo reso modulare, possiamo cioè caricare queste porzioni di codice anche su altri template dello stesso tema.

Per esempio se volessimo realizzare un nuovo template da applicare alla visualizzazione degli articoli e desiderassimo che questo template avesse lo stesso header e la stessa sidebar di quello generale (come spesso accade in molti blog), basterà richiamare – all’interno del nuovo template – le due sezioni in modo dinamico con le relative funzioni che abbiamo visto.

In questo modo aumentiamo anche la mantenibilità poiché se dovessimo apportare in futuro una modifica all’header (o alla sidebar) utilizzati contemporaneamente da più template diversi del nostro tema, basterà modificare semplicemente un unico file header.php o sidebar.php che contiene il markup utilizzato. Così facendo la modifica avrà effetto in modo istantaneo su tutti i template.

5. I parametri delle funzioni get_header() e get_sidebar()

Le funzioni get_header() e get_sidebar() accettano un parametro che, se passato, andrà a includere il contenuto di un file che come nome ha il nome del file principale (header.php o sidebar.php ) seguito da un trattino e dalla stringa che è stata passata come parametro.

Così facendo get_header(‘nome’) includerà il contenuto del file header-nome.php.

Facciamo subito un esempio pratico per chiarire un po’ le idee: sulla pagina Contatti vogliamo visualizzare un header diverso da quello utilizzato sulle altre pagine del blog/sito. Possiamo quindi creare un nuovo file che chiameremo header-contatti.php all’interno del quale andremo a inserire il markup relativo all’header che intendiamo visualizzare solo sulla pagina Contatti. Possiamo in seguito richiamare il contenuto di questo file mediante la solita funzione passandogli come parametro la stringa contatti che abbiamo aggiunto al nome del file: get_header(‘contatti’) includerà dunque il contenuto del file header-contatti.php.

Quanto detto è valido anche per la funzione get_sidebar(), così se desiderassimo caricare una sidebar diversa su una determinata pagina, potremmo creare un file ad hoc, esempio: sidebar-news.php e richiamarne il contenuto mediante la funzione get_sidebar(‘news’).

Vedremo in azione queste funzionalità nelle prossime lezioni, quando ci occuperemo di sviluppare altri template per il tema che stiamo realizzando.

6. Aggiungere il footer al template

Nelle lezioni affrontate finora abbiamo realizzato l’header (l’intestazione), il contenuto principale (gli articoli da mostrare) e la sidebar (la barra laterale) del nostro template. Prima di addentrarci nella personalizzazione di altri elementi ultimiamo lo sviluppo del template generale (index.php) con l’aggiunta di un footer in fondo alla pagina.

Sulla nostra pagina index.php, subito dopo il richiamo della sidebar, aggiungiamo la seguente riga:


<div class="clearer"></div>

Nel foglio di stile andiamo ad aggiungere la regola appropriata:


.clearer {height:0px;overflow:hidden;margin:0px;clear:both;}

L’uso del div con classe clearer non ha motivo strutturale ma solo di presentazione: nel caso in cui il contenuto di una delle due sezioni (l’elenco degli articoli e la sidebar posizionati mediante la proprietà float dei CSS) sia troppo corto e non riesca a coprire l’altezza dell’altra sezione, è necessario contenere il float.

Adesso aggiungiamo questo markup al file index.php per ottenere il footer del nostro template:

<!-- START FOOTER -->
<div class="footer">
	<p>Copyright 2010 &copy; Your Inspiration WordPress</p>
</div>
<!-- END FOOTER -->

E questa nuova regola sul foglio di stile associato:

/*footer*/
.footer p  {text-align:center;font-size:90%;margin:20px 0;}

Nella Figura 3 puoi vedere il template generale del nostro tema come si presenta alla fine di questa lezione.

Figura 3 - Ecco come si presenta il layout del template alla fine di questa lezione.

6.1 Come rendere dinamica l’inclusione del footer sul template?

Il concetto esposto in questa lezione per l’header e la sidebar vale anche per il footer, infatti WordPress ci mette a disposizione la funzione get_footer() per richiamare dinamicamente il contenuto del file footer.php. Non dimentichiamo che tale file dovrà essere posto all’interno della cartella principale del tema.

A questo punto dovresti essere in grado di richiamare dinamicamente il contenuto del footer che abbiamo appena inserito. Lascio a te questo piccolo compito come esercitazione da portare a termine.

7. Conclusione

Con questa lezione abbiamo ultimato lo sviluppo del template generale del nostro tema. Al momento questo contiene un unico template (index.php) che sarà impiegato per visualizzare qualsiasi tipo di contenuto presente all’interno del nostro blog, poiché non ci sono altri template disponibili.

E se nella pagina dedicata alla visualizzazione dei singoli articoli volessimo impostare una visualizzazione diversa? Nelle prossime lezioni vedremo come personalizzare la visualizzazione di altre sezioni del blog attraverso la creazione di ulteriori template all’interno dello stesso tema.

8. Indice degli articoli trattati in questa guida

Per agevolarti la consultazione della guida alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.

Scarica articolo in PDF

Tag: guida, tema wordpress, template Wordpress

L'autore

Nando è fondatore di Edi Group, società di Comunicazione e Formazione fondata nel 2005. È inoltre Trainer Microsoft e docente di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi di Formazione Professionale regionali e privati. È stato speaker in diverse prestigiose conferenze, anche per conto di Microsoft Italia. Tiene abitualmente corsi di formazione presso le aziende. È autore di diversi libri sul Web Design, in italiano ed inglese. +

Sito web dell'autore | Altri articoli scritti da Nando Pappalardo

31 commenti

Apnea

29 Giugno 2010 a 09:22

# 1

Questa era probabilmente la lezione che aspettavo di più, soprattutto perché leggendo all’inizio la struttura del corso mi ero sorpreso dell’assenza di un capitolo dedicato al footer e sospettavo sarebbe finito da queste parti. Inutile dire che chiarezza e completezza la fanno sempre da padrone :)

Rispondi
- nando pappalardo
  
  29 Giugno 2010 a 12:49
  
  # 2
  
  Ciao Apnea, nel mio piano didattico originale pensavo di far rientrate quanto detto in questa lezione nel contenuto della precedente lezione, ma non volevo trascurare importanti nozioni e così sono stato costretto a suddividere il tutto in due lezioni separate.
  
  Nell’eBook conto di approfondire ulteriormente molti dei concetti affrontati, purtroppo con gli articoli del blog mi devo limitare come ho già accennato a qualcuno sul nostro forum.
Luca

29 Giugno 2010 a 09:34

# 3

Molto bella questa lezione e mi ha chiarito alcune cose sulla struttura di un tema di WP.

Già con la prossima lezione siamo a buon punto.

[OT]
Ma perché nessuno ha scritto del wordcamp di Catania?
[/OT]

Rispondi
- nando pappalardo
  
  29 Giugno 2010 a 12:56
  
  # 4
  
  Ciao Luca, grazie per essere passato anche questa settimana.
  
  [OT]
  Dovrei parlare del WordCamp di Catania proprio questo giovedì, purtroppo sono stato sommerso da mille impegni che mi hanno impedito di realizare un sunto della giornata. Con la scusa aspettavo che nel frattempo pubblicassero i vari contributi (video e slide degli speech proposti) anche se mi pare di vedere che manca ancora un po’ di materiale.
  [OT]
Vito

29 Giugno 2010 a 10:58

# 5

eheheh…sta serie di guide su wordpress farà la felicità di tutti quelli che vogliono impararne l’utilizzo…

personalmente sto aspettando trepidante la parte 10 sui widget. Ci sarà da divertirsi :-D

Rispondi
- nando pappalardo
  
  29 Giugno 2010 a 13:00
  
  # 6
  
  Ciao Vito, ben trovato!
  
  Questa guida ce l’avete chiesta con tanto vigore che non potevamo ignorare la vostra richiesta =)
- Vito
  
  29 Giugno 2010 a 17:02
  
  # 7
  
  Eh….ben trovato sì! Non ho avuto granchè tempo questi giorni.
  
  Buttavo un occhio appena potevo per vedere cosa ci fosse di nuovo ma solo di rado avevo il tempo per scrivere qualcosa di intelligente.
- nando pappalardo
  
  29 Giugno 2010 a 18:48
  
  # 8
  
  Capitano anche di questi periodi, vito.
  
  Anche noi siamo sommersi di lavoro ultimamente, non vediamo l’ora che arrivi il mese di agosto per prenderci qualche giorno di meritato riposo =)
yesWEBcan

29 Giugno 2010 a 11:38

# 9

Ottimo, sta venendo fuori una guida di altissimo livello :D
Spero che non hai fatto le 6 di mattina anche stavolta
Complimenti veramente

Rispondi
- nando pappalardo
  
  29 Giugno 2010 a 13:03
  
  # 10
  
  Ciao Salvatore e grazie per i complimenti!
  
  Questo è stato uno di quei rari casi in cui sono riuscito a preparare l’articolo con qualche giorno di anticipo =) giusto perchè buona parte l’avevo già scritto la scorsa settimana, quando pensavo di far rientrare tutto nell’articolo precedente =)
Donald

29 Giugno 2010 a 13:27

# 11

Non vedo l’ora di vedere il vostro e-book. :-)

Rispondi
- nando pappalardo
  
  29 Giugno 2010 a 17:29
  
  # 12
  
  Ciao Donald, tempo permettendo conto di finirlo e pubblicarlo per fine settembre.
Lùca

29 Giugno 2010 a 21:10

# 13

Nando,anche se non ti ho scritto nelle scorse puntate,ho forse letto per primo i tuoi articoli,visto che dalle 7 del mattino di ogni martedì mi connetto qui facendo refresh ogni mezzora =)…
Prende sempre più forma il tema ed è bello aver visto i procedimenti da zero.
Sarebbe bello che in una seconda guida,spiegassi anche l’inserimento di qualche slideshow,elemento importantissimo per gli ultimi temi di wordpress,soprattutto rivolti per magazine o vetrine online.
Rimango dell’idea che questa è la miglior guida per wordpress mai prodotta nel web e (lo dico) nel cartaceo.
Continua così,Nando sei il numero 1,dico davvero!
Lùca.

Rispondi
- nando pappalardo
  
  30 Giugno 2010 a 12:27
  
  # 14
  
  Ciao Luca, grazie per le belle parole.
  
  Ho intenzione di trattare l’argomento che hai accennato nell’eBook che sto realizzando (tempo permettendo).
  Questa vuole essere solo una guida base sulla realizzazione di un tema per WordPress, di aspetti avanzati da prendere in considerazione e approfondire ce ne stanno tantissimi, alcuni dei quali li affronterò proprio nell’eBook perchè nel blog ci vorrebbe una mina guida dedicata a ciascuno di essi per poterne parlare bene.
Massimiliano

30 Giugno 2010 a 10:08

# 15

Fin qui tutto bene, aspetto con impazienza la prossima! Come al solito…. complimenti!

Massimiliano

Rispondi
- nando pappalardo
  
  30 Giugno 2010 a 12:29
  
  # 16
  
  Grazie anche a te Massimiliano!
Simone Forti

13 Novembre 2010 a 12:02

# 17

Riferendomi al paragrafo 5:

Riguardo l’esempio che hai fatto, di avere un layout diverso nella pagina contatti, nel momento in cui ad get_header(), passo il valore contatti get_header(‘contatti’), è vero che la pagina contatti vedrà l’header presente in header-contatti.php, ma anche tutte le altre pagine vedranno quell’header, dato che la funzione che richiama l’header non si trova all’interno della pagina contatti ma nella pagina dinamica index.php o page.php
scusami, correggimi se sbaglio, e ancora complimenti per questa guida…MANNA DAL CIELO!

Rispondi
- nando pappalardo
  
  14 Novembre 2010 a 23:58
  
  # 18
  
  ciao simone, intanto grazie per i complimenti.
  
  riguardo il tuo dubbio, la soluzione è molto semplice, ti basta creare un template personalizzato per la pagina contatti e utilizzare la funzione get_header(‘contatti’) solo all’interno di questo template.
paolo

25 Febbraio 2011 a 21:06

# 19

fantastica questa lezione…. comincio a pensare che non farò mai più a meno di wp

Rispondi
Stefania

9 Febbraio 2012 a 12:38

# 20

Volevo farti tanti tanti complimenti per questo corso. E’ davvero il migliore, sopratutto perché è in italiano!
Finalmente sono riuscita a capirci qualcosa! Grazie grazie!!
Ciao.

Rispondi
Davide

25 Luglio 2013 a 18:08

# 21

Complimenti! Sei stato l’unico tra tutti quelli che ho trovato googlando che ha affrontato il tema in maniera breve ed esaustiva. Grazie!

Rispondi
Andrew Sopen

4 Dicembre 2013 a 12:06

# 22

Io preferisco avere l’index pulito (senza nessun tag html intendo) e richiamarvi all’interno altri .php, get_header – get_sidebar – get_footer funzionano alla grande, il problema è se voglio aggiungere altri contenuti da altre directory per mantenere il mio progetto pulito e ordinato. Spulciando tra i vari tag ho trovato questo che funziona alla grande, volevo solo una conferma per la fattibilità. Con questo sistema potremmo creare ad esempio una pagina per il loop dei post, un’altra per le categorie etc ed inserirli dove vogliamo. Saluti e buona continuazione

Rispondi
domenico

22 Luglio 2015 a 19:58

# 23

Ciao complimenti per la guida. Mi sfugge una questione fondamentele. Se io oltre al titolo e sal motto richiamati dalle funzioni <?php bloginfo('name'); e volessi rendere dinamico anche un numero di telefono e un indirizzo civico messi nel footer per esempio come faccio???? Mi pare che nel annello di amministrazione di woordpress non ci siano tali campi da compilare. Grazie Ciao

Rispondi