Intégrer un menu WordPress dans un fichier php

Dans le cas où vous souhaitez intégrer un menu dans une partie spécifique de votre site, vous devez d’abord le déclarer dans votre fichier functions.php via cet ajout avec la fonction register_nav_menu :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

// Menu de navigation spécial
register_nav_menus(array(
    'spécial' => 'Menu spécial)'
));

[/pastacode]

Après l’avoir déclaré dans votre fichier functions.php, vous pourrez le configurer dans Apparence > Menus.

Pour l’afficher dans un fichier spécifique, il vous suffira d’ajouter ce code à l’endroit exact où vous souhaiter le voir s’afficher :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

<div id="menu" role="navigation">
    <?php wp_nav_menu(array('theme_location' => 'special')); ?>
</div>

[/pastacode]

En bonus, voici un code CSS pour l’afficher avec un peu plus de style qu’une simple liste à puce.

[pastacode lang= »css » message= » » highlight= » » provider= »manual »]

#menu{
    margin:30px 10px 9px; height:30px;
}
#menu ul{
    list-style:none;
    margin:0; padding:0;
    font:bold 12pt "Montserrat";
}
#menu li{
    position:relative;
    display:block;
    float:left;
    margin-right:1px;
}
#menu a{
    display:block;
    background: white; 
    color:#F68A1E;
    text-decoration:none; 
    padding:0 10px; 
    line-height:31px;
}
/* Sous-menu 1 */
#menu ul ul{
    position:absolute; 
    left:0; 
    top:31px; 
    z-index:99999;
    display:none; 
    width:180px; 
    float:left;
    font:lighter 10pt;
    color: white;
}
#menu ul ul li{
  min-width:180px;
}
/* Sous-menu 2 */
#menu ul ul ul{
  left:100%; top:0;
}
#menu ul ul a{
    background:white; 
    line-height:1em; 
    padding:10px;
    width:160px; 
    height:auto;
}
#menu li:hover > a,
#menu ul ul :hover > a{
    background:#F68A1E;
    color:white;
}
#menu ul li:hover > ul{
  display:block;
}
#menu ul li.current_page_item > a,
#menu ul li.current-menu-ancestor > a,
#menu ul li.current-menu-item > a,
#menu ul li.current-menu-parent > a{
    color: black;
}

[/pastacode]