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 24

Come creare un tema WordPress: aggiunta del menù espandibile nell’header

  • 24/08/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione, Wordpress
  • programmazione, tema wordpress, theme, wordpress
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.

Web Hosting

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:

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

Development Category (English)728x90

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

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