I menu di WordPress possono essere creati direttamente dalla dashborad (Aspetto > Menu) ma per personalizzarli come si desidera è necessario modificare il proprio tema. La modifica del tema consente di decidere la posizione e l’aspetto di ciascun menu.

Se il tema non prevede delle aree in cui posizionare il menu sarà possibile inserire i menu solo attraverso il widget Menu personalizzato (Aspetto > Widget).

Definire i menu di WordPress nel tema

I menu devono essere registrati nel file functions.php.

Attenzione prima di modificare il tema crearne una copia di backup in modo da poterlo ripristinare in caso di errori.

L’esempio mostra come registrare due menu all’interno del tema con la funzione register_nav_menu().

register_nav_menus( 
  array( 'menu-primario' => __( 'Menu Primario' ),
  'menu-secondario' => __( 'Menu Secondario' ))
);

Salvare il file functions.php e poi, definire le aree del tema in cui visualizzare i menu.

La posizione dei menu nel tema

Per definire l’area del tema in cui visualizzare un menu si utilizza la funzione wp_nav_menu().

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

Prima di visualizzare un menu è opportuno verificare con la funzione condizionale has_nav_menu() che il menu sia stato utilizzato dall’utente.

Personalizzare i menu di wordpress

Personalizzare i menu di wordpress

I menu possono essere inseriti in qualsiasi punto del tema, nell’esempio il menu primario viene inserito nell’intestazione del documento e il menu secondario nel footer.

Aprire il file header.php oppure qualsiasi altro file del tema in cui si vuole inserire il menu principale e inserire il codice per visualizzare il menu principale.

<div id="row1">
 <header class="wrapper">
 <h1><a href="<?php bloginfo('url'); ?>">
 <?php bloginfo('name'); ?>
 </a>
 </h1>
 <nav><!-- Menu principale -->
  <?php if ( has_nav_menu( 'menu-primario' ) ) { ?>
  <?php wp_nav_menu( array( 'theme_location' => 'menu-primario' ) ); ?>
  <?php } ?>
 </nav>
 </header>
</div><!-- /#row1 -->

Aprire il file footer.php o qualsiasi altro file del tema in cui si vuole inserire l’area del menu secondario.

<div id="row3">
 <footer class="wrapper">
  <p>Copyright 2015 &copy; Sintesi-design.it</p>
  <nav><!-- Menu secondario -->
   <?php if ( has_nav_menu( 'menu-secondario' ) ) { ?>
   <?php wp_nav_menu( array( 'theme_location' => 'menu-secondario' ) ); ?>
   <?php } ?>
  </nav>
 </footer>
 </div>
 <!-- /#row3 -->
 <?php wp_footer(); ?>
</body>
</html>

Personalizzare l’aspetto dei menu di WordPress

La funzione wp_nav_menu() consente di personalizzare l’aspetto del singolo menu modificando l’array passato come argomento. L’elemento che contiene gli elementi del menu è definito con la chiave container.

<?php wp_nav_menu( array(
 'theme_location' => 'menu-primario',
 'container' => 'nav',
 'container_class' => 'menu',
 'container_id'    => 'menu',
 ) ); ?>

Al contenitore del menu può essere assegnata una classe e un id con le voci container_class e container_id.

Per inserire prima o dopo ciascuna voce del menu un icona o qualsiasi altro contenuto si può utilizzare link_before o link_after.

<?php wp_nav_menu( array(
 'theme_location' => 'menu-primario',
 'before'          => '',
 'after'           => '',
 'link_before'     => '&raquo;',
 'link_after'      => '' ) ); 
?>

Altre informazioni sulla funzione wp_nav_menu() e sulle tecniche per personalizzare i menu di WordPress sono disponibili nella documentazione ufficiale.