Come creare e gestire un menù in WordPress

come creare e gestire i menu con wordpress

Uno degli aspetti fondamentali della User Experience è legato alla facilità di consultazione delle diverse pagine che compongono il nostro sito web, che abbiamo realizzato con il nostro amato WordPress.

Per rendere la navigazione sulle diverse pagine di un sito web, o blog, più fluida ed intuita si è soliti organizzare le pagine in menù.

Solitamente, infatti, in ogni sito web o blog troviamo un menù che ci indica quali sono le pagine principali del sito stesso e che possiamo raggiungere con un semplice click.

I menù in WordPress

Ovviamente anche WordPress, nativamente, prevede l’uso dei menù.

Sicuramente avrai notato che andando in Aspetto > Menu trovi, per l’appunto la parte in cui andare a creare e gestire i tuoi menù. Parlo al plurale perché ovviamente i menù possono anche essere più di uno.

Prima di andare avanti ci tengo però a precisare che in WordPress i menù dipendono dal tema in uso.

Quindi, in base al tema che stai usando puoi avere diverse posizioni per far apparire il o i menù ed il loro relativo aspetto, sia da desktop che da mobile.

Ma procediamo con ordine. Il primo passo, senza dubbio, da compiere è quello di andare a creare il nostro primo menù.

Creare un menù con WordPress

Iniziamo subito ad entrare nel vivo di questo tutorial.

Vai in Aspetto > Menu

Creiamo il nostro primo menù con WordPress

Ti ritroverai davanti a questa pagina, può sembrare complessa ma fidati che non è assolutamente così.

La prima cosa da fare (contrassegnata con il numero 1) è scegliere un nome da dare al menù. Qui sei libero di scegliere cosa vuoi, non ha importanza come lo andrai a chiamare.

Io, però, ti consiglio di usare nome che ti verrà facile ricordare. Per esempio, il menù nel quale vuoi inserire le pagine più importanti potresti chiamarlo: principale ma, ripeto, è una tua scelta.

Una volta scelto il nome non ti resta che fare click su Crea menu.

Perfetto! Hai creato un menu in WordPress, facile vero?

Assegnare le voci ad un menu WordPress

Adesso non ti resta che assegnargli le pagine (voci) che desideri.

Potrai scegliere tra:

  • Pagine
  • Articoli
  • Link personalizzati
  • Categorie

Leggi anche: Come si crea una pagina con il CMS WordPress

Aggiungere le varie voci è molto semplice.

Sulla sinistra trovi i vari elementi tra i quali scegliere e non devi fare altro che cliccare su Aggiungi al menu e li vedrai apparire nella parte destra, che è la struttura del menu.

Utilizzando il sistema del drag & drop (clicca, tieni premuto e trascina) puoi cambiare l’ordine delle varie voci di menù nella parte della struttura.

Una volta aggiunte tutte le voci che ritieni opportune e scelto il loro ordinamento non ti resta che fare un click su Salva menu, che trovi sia in alto che in basso.

Assegnare una posizione al menu di WordPress

Adesso che hai creato il tuo menu ed assegnato ed ordinato le varie voci dovrai assegnargli una posizione.

Infatti, per ora, se guardi la parte pubblica del tuo sito o blog non troverai il menu creato.

Come ti dicevo all’inizio la posizione da assegnare al menù cambia da tema a tema.

Ci sono temi che non prevedono nessun menù (anche se sono rari) altri che hanno una sola posizione menù ed altri ancora che hanno, invece, diverse posizioni.

Io, per questo tutorial sto usando un tema di default di WordPress che è il Twenty Fifteen.

Questo tema prevede due posizioni per il menù. Ma vediamo come procedere.

Per prima cosa spostati nel tab Gestione posizioni

Gestire le posizioni dei menu con wordpress

Come devi dallo screenshot che ho fatto, lui mi propone le due posizioni previste dal tema per i menù che sono: Menu principale e Menu social link.

Quindi, io posso assegnare il mio menù, appena, creato, ad una delle due posizioni. Nulla vieta di assegnare lo stesso menù a più posizioni anche se io non te lo consiglio.

In questo esempio, il menu da me creato è un menu con le voci principali e che io ritengo più essenziali quindi andrò ad usare la posizione denominata: Menu principale.

Accanto al nome della posizione c’è un menù a tendina dal quale non dovrò fare altro che selezionare il menu che desidero mostrare in quella posizione.
Ecco perché ti consigliavo di usare nomi con un senso logico e di facile intuizione.

Una volta scelto il menu da assegnare a quella posizione non resta altro che cliccare su Salva modifiche.

Adesso possiamo andare a vedere la parte pubblica del nostro sito web o blog per vedere il nostro menù appena creato.

Creare una nuova posizione menu

In questo tutorial la creazione di un menu del nostro sito o blog WordPress è stata molto semplice anche per via del tema in uso che prevede già due posizioni menu create da chi ha realizzato il tema.

Come detto in precedenza ci sono temi che, però, non includono nessuna posizione per i menu.

A dire il vero sono rare eccezioni però potrebbe capitare. Quindi, se fosse il tuo caso, o valuta un cambio tema con qualche tema più completo oppure segui questi passaggi per creare tu una posizione a cui assegnare un menu.

Nota bene: se stai lavorando direttamente sul tuo sito o blog, prima di andare avanti assicurati di aver fatto un backup totale.

Fatto questo apri con un editor di testo (su Windows ti consiglio Notepad+) ed apri il file function.php del tuo tema.

Dentro questo file dobbiamo creare una nuova funzione. Copia ed incolla il seguente codice

function crea_menu() {
  register_nav_menu('menu-principale',__( 'Menu principale' ));
}
add_action( 'init', 'creamenu' );

Con questa funzione andiamo a creare una nuova posizione menu, nel caso in cui volessimo avere più posizioni per gestire più menu, dovremmo usare questo codice

function crea_menu() {
  register_nav_menus(
    array(
      'menu-principale' => __( 'Menu principale' ),
      'menu-secondario' => __( 'Menu secondario' )
    )
  );
}
add_action( 'init', 'crea_menu' );

Utilizzando il secondo codice avremmo due posizioni menu, una denominata Menu principale e l’altra Menu secondario.

Adesso andando in Aspetto > Menu possiamo creare i nostri menu ed assegnarli alle posizioni create. Qui, però nasce una piccola difficoltà. Essendo che questo sono posizioni custom, cioè create da noi, non saranno richiamate dal tema in uso.

Per risolvere questo problema, apriamo il file del tema dove vogliamo richiamare uno dei menù appena creati, ad esempio il Menu principale lo potremmo richiamare nel file header.php in modo che sia mostrato in tutte le pagine del nostro sito o blog WordPress.

All’interno inseriamo questo codice

<?php if ( has_nav_menu( 'menu-princiale' ) ) : ?>
<nav id="mio-id" class="mia-classe" role="navigation">
   <?php
	// Menu principale.
	wp_nav_menu(
	 array(
	   'menu_class'     => 'nome-classe-css',
	   'theme_location' => 'menu-principale',
		)
		  );
	?>
</nav>
<?php endif; ?>

Ecco fatto.

Ovviamente adesso il tutto va sistemato graficamente tramite l’uso del codice CSS ma questo varia da tema e tema quindi non c’è nessun codice preciso.

P.S nel codice ho aggiunto anche una logica condizionale così se il menu principale non viene creato il div “nav” non sarà richiamato dal codice.

Conclusioni

Con il tutorial di oggi ti ho mostrato quanto sia facile creare e gestire i menu con WordPress.

Verso la fine del tutorial ti ho voluto mostrare anche qualcosa di più avanzato, cioè la creazione di una nuova posizione di menu per WordPress.

Il mio consiglio, tuttavia, è quello di scegliere un tema che ha già tutto quello che ti serve pronto all’uso.

Fammi sapere che ne pensi di questa guida nei commenti. Ovviamente, se qualcosa non ti è chiara scrivimelo pure, ti risponderò il prima possibile.

Condividi su facebook
Facebook
Condividi su twitter
Twitter
Condividi su linkedin
LinkedIn
Condividi su pinterest
Pinterest
Condividi su telegram
Telegram
Giuseppe
Ciao, mi chiamo Giuseppe Musumeci e da oltre 9 anni sono un appassionato del web e di tutto quello che vi ruota attorno. Nel lontano 2009 ho scoperto il mondo dei CMS e quindi anche di Wordpress ed è stato puro amore fin da subito. Con i miei articoli spero di aiutare sempre più persone ad avvicinarsi a questo fantastico mondo.

Leggi anche...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *