Modificare il tema di WordPress (parte 2): menù di navigazione

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. 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 “Menu Intestazione”:

function register_my_menus() {
  register_nav_menus(
    array('menu-intestazione' => __( 'Menu Intestazione' ))
  );
}

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

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

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' );

A questo punto resta da inserire nel tema la posizione in cui vogliamo che il menù (o i vari 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 “Menu Intestazione”, 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' => 'menu-intestazione' ));  ?>

IMPORTANTE: il nome associato a theme_location deve essere lo stesso inserito in functions.php.

Questa funzione crea una lista del tipo

<ul> 
  <li></li>
  <li></li>
</ul>

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' => 'menu-intestazione',
        'container_class' => 'classe_menu_intestazione'));  ?>

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

Oppure, come nel mio caso, se già esiste nel foglio di stile una classe per i menù tradizionali, basta sostituire il codice all’interno, per esempio, del

<div id=”menu”>......</div>

richiamando la funzione

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

Enjoy it and.. see you soon!