Aggiungere un menù di navigazione ad un tema di WordPress

WordPress include un meccanismo semplice per introdurre dei menù di navigazione personalizzati nel proprio tema. Per incorporare nel tema il supporto al menù, è necessario aggiungere poche righe di codice ai file del tema.

Modifiche a functions.php

Innanzitutto nel file functions.php del tema, si deve scrivere una funzione per registrare il nome dei menù che si vogliono creare. Il nome sarà quello che comparirà nella pagina del pannello di amministrazione di WordPress alla pagina Aspetto ->Menu. Per esempio, tramite questo codice, nel box “Posizione dei temi” comparirà la posizione “Header Menu”:
function register_my_menus() {
register_nav_menus(
array('header-menu' => __( 'Header Menu' ))
);
}

questo codice, invece, farà comparire due nuove posizioni:

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' ))
);
}

Per assicurarsi che il tema attivi l’opzione dei menù personalizzati, è necessario aggiungere anche questa riga che comunica al tema di eseguire la funzione “register_my_menus”:

add_action( 'init', 'register_my_menus' );

Aggiungere le posizioni al template del tema

A questo punto la procedura è quasi completata. Resta da inserire nel tema le posizioni in cui vogliamo che il/i menù siano visualizzati. Per far questo si deve aprire nell’editor il file del template corrispondente alla posizione desiderata e inserire una chiamata alla funzione wp_nav_menu per ciascuna posizione. Per esempio, si vuole posizionare il menu “Header Menu”, precedentemente registrato nel file header.php, in modo che compaia nella testata del tema. Il codice da inserire è il seguente:

<?php wp_nav_menu(  array( 'theme_location' => 'header-menu' ));  ?>

L’importante è che il nome associato a theme_location sia lo stesso inserito in functions.php. Si deve usare “header-menu”, che è il nome vero e proprio del tema, così come viene compreso da WordPress, mentre “Header Menu” è un’etichetta che lo rende più leggibile per le persone e viene usato nella pagine di amministrazione. Se si aggiunge alla funzione wp_nav_menu il parametro “container_class”, si può specificare la classe associata al menù:

<?php wp_nav_menu(array('theme_location' => 'header-menu',
	'container_class' => 'my_header_menu_class'));  ?>

In questo modo si può personalizzare la grafica del menù specificando nel CSS gli attributi della classe “my_header_menu_class”.

Pannello di amministrazione

Terminate le varie operazioni, si può entrare nella pagina Aspetto -> Menu, creare un nuovo menù personalizzato e scegliere dal box “Posizione dei temi” una delle posizioni che si è creato in precedenza. Salvando il menù, lo vedremo comparire nella posizione desiderata.

Precedente Introduzione ai blog Successivo Constellation: tema con layout che si adatta alla risoluzione dello schermo
  • Paolo

    ho seguito alla lettera il tuo post, e ho inserito questo codice

    'header-menu', 'container_class' => 'menu')); ?>

    alla pagina “notizie” ho delle sottopagine che adesso sono spuntate e le ho a vista… ma se volessi fare una tendina che sbuca al passaggio del muose??? grazie mille paolo

    • Ok. Dal pannello di controllo è possibile aggiungere le pagine della tendina via drag&drop. Basta aggiungere un elemento sotto un’altro ma spostato leggermente verso destra. L’hai già fatto?

  • Paolo

    si l’ho già fatto, ma non mi compare nessuna tendina e ho le voci del menu tutte in una riga, le sottopagine sono nel rigo di sotto… quando clicco su una voce del menu mi compare la pagina bianca con “oggetto non trovato”. cosa dovrei fare secondo te??? ti ringrazio

    • Mi scrivi un link al sito? perché ho difficoltà a capire fino a che punto sei arrivato. Dai anche un’occhiata a questa guida, che è ben fatta.

  • Paolo

    ciao niccolò… io non ho la versione 3 di wp e lavoro in locale, per cui non posso indicarti il link…

    • Allora dovresti aggiornare all’ultima versione disponibile. Le vecchie versioni non hanno le patch di sicurezza incluse negli ultimi aggiornamenti, quindi è rischioso usarle.

  • Chiara

    spero di non uscire dal tema, ma non riesco a trovare la soluzione al mio problema…io vorrei inserire il menù creato da me nella sidebar…in quali file devo apportare modifiche?
    p.s. ho già modificato function.php inserendo i miei nuovi menù, (uno nel footer e uno appunto nella sidebar)…quello nel footer è visualizzato correttamente, l’altro invece non riesco a vederlo.
    Spero tu mi possa aiutare, grazie in anticipo
    🙂

    • Per inserirlo nella sidebar ti converrebbe usare l’apposito widget “Menu personalizzato“, così non è necessario modificare il codice di sidebar.php.

  • mauri

    Ciao. Ma in theme_location devo cambiare con qualcos’altro?

    Grazie.

    • Il valore assegnato a theme_location deve essere lo stesso che hai specificato in functions.php quando hai registrato il menù.

      • mauri

        Perfetto grazie!

  • Ho inserito il codice nell’ editor del tema ma dopo aver salvato sembra che il Blog sia andato perso, quando clicco su qualsiasi pagina o elemento mi da una pagina bianca, come posso ripristinare ?