Ciao 🙂

In questo articolo ti spiegherò come aggiungere il footer al tuo tema WordPress. Se è la prima volta che ti imbatti in questa serie di articoli ti consiglio di partire dall’inizio della guida: Come creo un tema WordPress?.

Aggiungere il footer, dopo che abbiamo già visto come aggiungere l’header in questo articolo, sarà una passeggiata per te! Quindi direi di iniziare subito e di imparare a gestire il footer in un tema.

Creazione di footer.php

La prima cosa che dobbiamo implementare per avere il footer nel tema è proprio il codice relativo al footer. Quindi crea un nuovo file chiamandolo “footer.php“. A questo punto vogliamo mostrare un footer sobrio al momento, delimitato da una linea grigia rispetto al resto del contenuto e con scritto il Copyright. Il testo sarà disposto al centro del footer.

Contenuto non disponibile
Consenti i cookie cliccando su "Accetta" nel banner"

Per farlo è necessario implementare per prima la struttura HTML del footer. Inseriamo quindi nel file footer.php queste righe di codice:

<div class="footer">
   <p>Copyright 2017 &copy; Paolo Dell'Aguzzo</p>
</div>

Creazione dello stile

In questo momento il nostro footer non ha stili applicati e non viene ancora mostrato. E’ facile dedurre che al momento non avrebbe né una riga che divide il footer dal contenuto né un testo con posizione centrale.

Creiamo quindi uno stile adatto al <div> con classe CSS “footer“. Apri il file style.css e, dopo lo stile già inserito per l’header, vai ad inserire:

/* FOOTER */
.footer{
  text-align: center;
  border-top: 1px solid grey;
}

Da questo momento in poi il <div> all’interno di footer.php con classe “footer” avrà un testo accentrato ed un bordino in alto di colore grigio.

Caricamento footer nella pagina

Abbiamo un footer ed abbiamo il suo stile. Non ci resta che inserire il footer all’interno del file “index.php“. Per visualizzare il footer devi aprire il file “index.php” e sarà necessario:

Deep Learning Specialization on Coursera

Creare un contenuto tra header e footer
Richiamare il footer tramite la function get_footer

Vediamo il codice:

           <?php get_header(); ?>

           <div class="container" style="height:90vh">

           </div>


           <?php get_footer(); ?>
        </div>
    </body>
</html>

Per prima cosa abbiamo il richiamo all’header, già presente dalle lezioni precedenti. Dunque introduciamo un <div> con classe “container” che come stile ha un’altezza (height) di 90vh (vh, o viewport height – 90vh indica il 90% dell’altezza della pagina così come viene disegnata dal browser nello schermo).

Questo <div> ci permette di simulare un contenuto avendogli dato un’ altezza quindi il footer non si troverà nascosto sotto l’header. Dopo il <div> contenitore c’è infatti il richiamo alla function get_footer che andrà in automatico a recuperare il file che abbiamo appena creato “footer.php“.

Infine chiudiamo il <div> aperto nell’header con classe “custom-container“, dunque chiudiamo il <body> ed il tag <html> (sempre aperti nel file header.php).

Il risultato

Una volta salvati tutti i file vai a vedere il risultato nel tuo browser. Il tema deve aver iniziato a prendere questa forma:

Conclusioni

A questo punto il tema ha header, footer ed un finto contenuto. Fino a quì abbiamo creato i primi file ed i primi stili. Siamo partiti con questi argomenti che sono più facili per giungere dunque a quella che sarà la presentazione dei contenuti all’interno del tema. L’utente che utilizzerà il tema infatti vorrà visualizzare una bella homepage con immagini e testo ed avere altre sezioni dedicate ai contatti ed agli articoli (non ti perdere tutta la guida a questo indirizzo!).

Se hai dubbi o domande non esitare a scrivermi nei commenti 🙂

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!)

Commenti