Per concludere la nostra Homepage creiamo ora il footer, ovvero la parte che sta più in basso nella nostra homepage.
La cosa più immediata sarebbe aprire il file index.php posizionarsi sull'ultima riga e inserire la nostra porzione di codice dedicata al footer. Vogliamo però, come già abbiamo fatto con l'header, che il footer sia ricorsivo, ovvero che venga visualizzato in tutte le pagine e non solo in homepage.
Come per l'header anche per il footer wordpress mette a disposizione una funzione get_footer() che richiama il file footer.php
Quindi creiamo il file footer.php lo apriamo e scriviamo:
<div class="clearfix"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h4 class="text-center">Codeplus</h4>
</div>
<div class="col-sm-6">
<h4 class="text-center">Social</h4>
</div>
</div>
</div>
<p class="text-center">Copyright Codeplus</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Abbiamo creato un footer diviso in due sezioni. Notiamo però una nuova funzione wp_footer(), questa funzione è molto simile a wp_head() vista nella lezione crazione dell'header. Queste funzioni servono da aggancio per inserire porzioni di codice html. Solitamente vengono utilizzate per inserire link a fogli di stile css o script javascript, rispettivamente all'interno di <head></head> o nel footer.
Ora che abbiamo creato il footer lo richiamiamo nell'index, in questo modo:
get_footer();
Infine sistemiamo il tutto dal punto di vista stilistico, aprendo il file style.css:
footer {background: #000000;
color: #ffffff;
padding:10px 0px;}
Ora il risultato dovrebbe essere il seguente:
Nel prossimo articolo vedremo come rendere dinamici i contenuti del footer attraverso i widget.
Commenti
Ancora nessun commento per questo articolo