Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Ago 25
guida wordpress

Come creare un tema WordPress: creazione del footer

  • 25/08/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione, Wordpress
  • programmazione, tema wordpress, wordpress, wordpress theme

Ciao 🙂

Web Hosting

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.

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

WooCommerce tema
<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.

Development Category (English)728x90

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:

Tema WordPress header e footer

 

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

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • I principali engine utilizzati per lo sviluppo di videogiochi30/01/2023
  • Imparare a programmare con Udemy – Sondaggio tra programmatori16/01/2018
  • Udemy I Migliori Corsi per Programmatori27/11/2017
  • I 5 Linguaggi che Dovrebbe Conoscere Ogni Programmatore03/10/2017

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...