Creare un Tema WordPress – Aggiungiamo il footer
Siamo quindi arrivati all’ultima lezione dedicata alla creazione di temi per WordPress. Oggi ci occuperemo della parte finale del nostro tema, ovvero il footer. Creiamo un nuovo file vuoto e rinominiamolo footer.php. Al suo interno andrà inserito, oltre al codice html necessario per la visualizzazione degli elementi che decidiamo noi, anche la chiusura dei tag body e html, ecco perché non l’abbiamo fatto in precedenza. Apriamo il file ed aggiungiamo:
<div id="footer"> <!-- contenuto del footer --> </div> <div class="clear"></div> <!-- fine wrapper --> </div> <?php wp_footer(); ?> </body> </html>
Come avete potuto notare è presente, come nell’header, un gancio necessario ad includere eventuali tags di chiusura ed elementi generati da plugin di terze parti ma anche per il caricamento dell’admin bar una volta loggati al sito. Sto parlando di wp_footer(). Fatto questo il nostro tema è completato, volendo possiamo predisporre il footer per ospitare dei widget, poiché abbiamo già aggiunto la sidebar nel file function.php, dobbiamo solo aggiungere il codice necessario per integrarla nel footer, al posto del commento “contenuto del footer“, scriviamo:
<?php (dynamic_sidebar('footer-sidebar-area')) ?>
Mentre, nel foglio di stile, aggiungiamo:
/* Widget */
.widget-box { float:left; margin:0 5px; font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#262626; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.widget-box h2 { font-size:16px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.widget-box ul {list-style:none; }
.widget-box a, .widget-box li a {font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; margin:0 0 0 10px; }
.widget-box a:hover, .widget-box li a:hover { color:#262626;}
/* Footer */
#footer { width:950px; padding:5px; margin:auto; }
.footer-box { text-align:center;font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#262626; text-decoration:none;text-shadow:1px 1px 1px #fff; }
Infine colleghiamo il footer agli altri file necessari al nostro sito (index.php, single.php, archive.php, search.php, 404.php e page.php) inserendo, alla fine di essi:
<?php get_footer(); ?>
Ora, nell’amministrazione di WordPress, aggiungiamo qualche widget nel footer.
E questo è ciò che vedremo nel sito, certamente potrà essere migliorato graficamente lavorando con i fogli di stile e con l’html./p>
Se vogliamo, possiamo anche aggiungere un testo relativo al copyright del nostro sito/blog. Prima della chiusura dell’ultimo div scriviamo:
<div class="footer-box"> Copyright WP in Progress. </div>
La prima serie di lezioni dedicati allo sviluppo di temi per WordPress è giunto al termine, quello che avete imparato fino ad’ora è sufficiente per iniziare a realizzare un tema tutto vostro. L’unico limite è la vostra fantasia ed il livello di conoscenza di html, css e jquery. Le prossime lezioni saranno dedicate all’integrazione di nuove funzionalità al nostro tema, aggiungendo un pannello di amministrazione per gestirne le varie funzionalità, creando nuovi widget da inserire nella sidebar e nel footer e molto altro ancora. Il blog si prende una pausa estiva e quindi, nel mese di Agosto, non verrà aggiornato.
Dal pulsante “Download” in fondo all’articolo, potete scaricare il tema che abbiamo realizzato (ci sono delle lievi differenze, è presente un unico loop che viene richiamato nei template in cui è richiesto, invece di caricarlo in ognuno di essi)
Vi dò appuntamento ai primi di settembre con un tutorial su come creare un widget che visualizzi gli ultimi tweet dell’account impostato dall’amministrazione.
Buone ferie 🙂