Menus
Les menus sont le moyen habituel d’accéder aux pages du site. S’il s’agit d’un pur blog, on peut éventuellement s’en passer, toutefois il n’est peut être pas inutile d’inclure quelques pages ne serait-ce que pour se présenter.
Référence
A la base du thème tel que nous l’avons construit, il n’y a pas de menus. Dans le tableau de bord, depuis « Apparence », on ne voit pas la page « menus », il faudra donc informer WordPress de cette possibilité.
Pour cela on demande, dans le fichier « fonctions.php » l’enregistrement d’un ou plusieurs menus.
Enregistrement de menus
Un seul
function enregistre_mon_menu() {
register_nav_menu('menu-principal',__( 'Menu de base' ));
}
add_action( 'init', 'enregistre_mon_menu' );
Il s’agit donc d’accrocher une fonction « enregistre_mon_menu » à la phase « init ». Celle-ci appelle la fonction « register_nav_menu » qui prend en paramètre un identifiant de menu ‘menu-principal’ qui nous servira pour placer ce menu dans les pages et un nom ‘Menu de base’ qui permettra de le gérer depuis le tableau de bord.
Plusieurs
Si l’on utilise plusieurs menus on peut les enregistrer en une seule fois.
function enregistre_mes_menus() {
register_nav_menus(
array(
'menu-principal' => __( 'Menu de base' ),
'menu-supp' => __( 'Menu supplémentaire' )
)
);
}
add_action( 'init', 'enregistre_mes_menus' );
Maintenant, dans le tableau de bord, sous « Apparence », on a la commande « Menus ». Dans celle-ci, l’onglet « Gérer les emplacements » nous affiche nos menus. Toutefois la partie « Menu assigné » ne nous aidera pas car nous n’avons pas encore placé le(s) menu(s) dans les pages du site.
Mise en place du menu dans le site
Généralement on les met dans le « header », éventuellement dans le « footer » ou dans les « sidebars ».
<?php
<nav id="nav-principal">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-principal',
'menu_id' => 'menu-principal-haut'
) );
?>
</nav>
Donc à l’emplacement désiré il suffit juste d’appeler la fonction wp_nav_menu qui prend en paramètre un tableau définissant le menu. La seule clef importante du tableau est « theme_location » qui indique l’identifiant du menu concerné. D’autres clefs facultatives existent, on en trouvera la liste sur :
https://developer.wordpress.org/reference/functions/wp_nav_menu/
Gestion des menus
Dans le tableau de bord, sous « Apparence », à la commande « Menus » et à l’onglet « Modifier les menus » on pourra créer des menus et leur donner des noms (penser à les enregistrer). A l’onglet « Gérer les emplacements », on les affecte aux positions dans le site.
Styles
A l’examen du site, on remarque que les menus sont constitués de listes à puces, sans styles particuliers il sont affichés ainsi.
Beaucoup préfèrent afficher les menus dans une barre avec des sous-menus déroulant. Pour cela il suffit de styler les menus.
Voici un simpl exemple inspiré de : https://codepen.io/philhoyt/pen/ujHzd
#nav-principal {
margin-top:15px;
font-size:1em;
line-height:2em;
padding:0 1.2em;
font-weight:700;
font-family: sans-serif;
}
#nav-principal ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#nav-principal ul a {
display:block;
color:#ccf;
text-decoration:none;
}
#nav-principal ul li {
position:relative;
float:left;
margin:0;
padding:0 1em;
}
#nav-principal ul li.menu-item {
background:#222;
}
#nav-principal ul li:hover {
background:#444;
}
#nav-principal ul a:hover {
color: #fcc;
}
#nav-principal ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#ddf;
padding:0;
}
#nav-principal ul ul li {
float:none;
width:15em;
}
#nav-principal ul ul a {
line-height:120%;
padding: 1em 1.5em;
}
#nav-principal ul ul ul {
top:0;
left:100%;
}
#nav-principal ul li:hover > ul {
display:block;
}
Amélioration
En examinant le code source généré par WordPress pour les menus, on remarque qu’il associe à ces éléments de nombreux noms de classes. Celles-ci indiquent en particulier le niveau du menu, si le menu contient des sous-menus et, le cas échéant, s’il s’agit de la page d’accueil du site, s’il s’agit de la page actuellement affichée.
Mise en garde
Beaucoup de menus sont constitués d’une barre horizontale. Il convient de prendre en compte les largeurs possibles des écrans d’utilisateurs, notamment pour les dispositifs mobiles afin d’avoir un affichage correct sur toutes les configurations.
Si l’on envisage la mise en place de menus déroulants à plusieurs niveaux, il faut penser aux utilisateurs n’utilisant pas un dispositif de pointage permettant le survol (souris) tels les écrans tactiles. En effet souvent pour ouvrir le menu on utilise dans les styles la pseudo-classe « hover » pour activer le menu. Sur un écran tactile cela conduira directement à l’activation du menu sans ouvrir le sous-menu. Dans ce cas il est préférable d’utiliser d’autres stratégie ou donner un autre type d’accès au menu.
Laissez un commentaire