Ciao 🙂

Ecco un altro passo della guida Come creo un tema WordPress?. Non è difficilissimo imparare a creare un tema WordPress di base, ma potrebbero servirti alcune conoscenze di base. Ti consiglio quindi di partire dall’inizio di questa guida per capire se sei pronto.

In questo articolo vedremo come migliorare il CSS dell’header creato al passo precedente ed aggiungeremo un menù in alto a destra espandibile.

Creazione di un menù in WordPress

Per prima cosa entra in “Pagine” e aggiungi 4 nuove pagine:

Home
Chi Sono
Contatti
News

Dunque vai in “Impostazioni > Lettura”:

Imposta come “Modalità di visualizzazione della prima pagina” una pagina statica con:

Pagina iniziale: Home
Pagina articoli: News

Aggiungiamo il menù nell’header

WordPress adesso ha un menù impostato di default con le pagine e sa che dovrà mostrare come pagina iniziale la pagina Home e non gli ultimi articoli inseriti. Il menù ovviamente non possiamo vederlo perché il nostro tema non lo gestisce ancora. Quindi apriamo Sublime Text ed apriamo il file “header.php”.

Quello che dovremo fare è andare ad aggiungere la scritta “Menù” in alto a destra ed al click far aprire un menù con tutte le voci.

Quindi per prima cosa posizioniamoci dove c’è la riga che scrive il nome del nostro blog in alto a sinistra ed andiamo ad aggiungere un’altra colonna Bootstrap contenente la voce “Menù”. Registriamo un evento “onClick” che richiami una funzione apposita per gestire apertura e chiusura del menù:

    <div class = "header-row">
        <div class = "container">
            <div class = "row">
                <div class = "col-xs-8 col-md-8 col-lg-7">
                    <h3 class = "main-blog-title">
                       <a href="<?php echo home_url(); ?>/" title="Home Page">
                          <?php bloginfo('name'); ?>
                       </a>
                    </h3>
                </div>
                <div class = "col-xs-2 col-md-2 col-lg-1 offset-xs-2 offset-md-2 offset-lg-4">
                    <h3 class = "menu-icon" onClick = "openMenuFunction()">
                        Menù
                    </h3>
                </div>
            </div>
        </div>
    </div>

Tra riga 11 e 15 puoi vedere il nuovo blocco di codice in cui andiamo a definire un <div> per il menù che si troverà distanziato dal <div> con il titolo del blog tramite un offset. All’interno il div per il menù contiene un titolo <h3>. Al click sul titolo chiamiamo la funzione openMenuFunction.

Deep Learning Specialization on Coursera

Ancora però il click sul menù non è gestito ed abbiamo inserito solo un’intestazione. Quello che devi fare adesso è aggiungere sempre nel file “header.php”, dopo la chiusura del div con classe “header-row”, le seguenti righe di codice:

<div class = "row menu-content hidden" id = "menu-content">
    <div class = "col-xs-3 col-md-2 col-lg-1 offset-xs-8 offset-md-9 offset-lg-10 menu-content-items">
        <?php wp_page_menu('menu_class=nav&show_home=1'); ?>
    </div>
</div>

In queste righe stiamo definendo il div che si aprirà grazie all’utilizzo della funzione openMenuFunction ed all’utilizzo del CSS. Questo div ha infatti inizialmente le classi:

row – Bootstrap
menu-content – Creata da noi
hidden – Creata da noi

All’interno di questa riga viene creata una colonna spostata totalmente a destra ed all’interno viene chiamata la function di WordPress che ci restituisce il menù. A questa funzione diciamo che vogliamo un menù con classe “nav” e che deve mostrare la home tra le voci.

Il menù ritornato sarà quindi presente in un div con classe “nav” contenente una lista <ul> e tante voci <li> quante sono le pagine (nel nostro caso 4 pagine).

Dunque ancora il click sulla voce “Menù” non fa nulla. Quello che devi fare è creare la funzione openMenuFunction che adesso parcheggeremo dentro al tag <head>, esattamente sotto alla chiamata “wp_head()”. Il codice è il seguente:

<script>
 function openMenuFunction(){

    var elem = document.getElementById("menu-content");
    if(elem.className === "row menu-content hidden"){
        elem.className = "row menu-content visible";
    }else{
       elem.className = "row menu-content hidden";
    }
 }
 </script>

Questa funzione recupera l’elemento con id uguale a “menu-content” e dopo di che con un if va a controllare la classe. Se il menù è nascosto gli applica la classe visible altrimenti gli applica la classe hidden.

In futuro potremo spostare la funzione in un file separato, al momento credo ti sia più comodo vedere tutto più vicino per capire quello che accade. Se adesso provi ad aggiornare il sito web ed a vedere se ci sono differenze noterai che il risultato ottenuto è questo:

Aggiungiamo il CSS

Per rendere l’header realmente funzionante e più carino dobbiamo agire sul CSS. Apri quindi il file “style.css” e inserisci sotto a quanto già presente:

* HEADER */ 
.header-row {
   background-color: white;
   border-bottom: 1px solid grey;
   position: fixed;
   z-index: 10;
   width: 100%;
   height: 42px;
}
.header-row .row {
   margin-right: 0px;
}

Quindi la nostra riga dell’header avrà uno sfondo bianco ed un bordo basso di 1 pixel di colore grigio. Definiamo il CSS per il titolo del sito:

h3.main-blog-title {
   padding: 8px 0px 0px 0px;
}
h3.main-blog-title a {
   text-decoration: none;
   color: black;
   padding: 5px 20px 0px 0px;
   font-size: 25px;
}
h3.main-blog-title a:active, a:focus, a:hover {
   text-decoration: none;
   color: black;
   font-size: 25px;
}

Gli stiamo dando un po’ di padding, stiamo definendo che il link con tag <a> non deve avere lo stile classico in questo caso, ci piace di più nero con un font-size maggiorato e nessuna decorazione. Inoltre quando il link è attivo, ha il focus, o ci passiamo sopra con il mouse (hover) non vogliamo nessuna variazione su dimensione del testo, colore e decorazione.

Infine bisogna definire il CSS per il menù:


.custom-content {
  margin-top: 5%;
}
.menu-content-items .nav {
  z-index: 9;
  position: fixed;
  background-color: rgba(163, 164, 165, 0.47);
  padding: 40px 40px 0px 40px;
}
.menu-content-items .nav ul {
  list-style: none;
}
.menu-content-items .nav ul li {
  padding: 5px 20px 0px 0px;
}
.menu-content-items .nav ul li a, a:active, a:focus, a:hover {
  text-decoration: none;
  color: black;
  font-size: 25px;
}
.menu-content-items .nav ul li a:hover {
  text-decoration: none;
  color: white;
  font-size: 35px;
}
h3.menu-icon {
  cursor: pointer;
  padding: 8px 0px 0px 0px;
}
.menu-content.hidden {
  display: none;
}
.menu-content.visible {
  display: visible;
}

Con questo CSS non solo definiamo lo stile del menù dando a ciascuna voce il corretto puntatore del mouse ed un colore nero su sfondo grigio leggermente trasparente. Stiamo anche definendo le proprietà delle classi per mostrare e nascondere il menù (ultime righe del CSS).

Il risultato è questo:

Conclusione

Con questo articolo hai imparato a creare un menù espandibile ed a rendere l’header molto più carino utilizzando il CSS. Vedremo nei prossimi articoli come riempire il contenuto della pagina e dunque come inserire un footer al nostro tema.

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