"Fil d'Ariane pour Menu" permet d'afficher un fil d'ariane correspondant à la navigation en cours sur un site utilisant un "Menu" personnalisé ("menu" au sens WorPress, pouvant contenir liens, catégories, pages).
Ce plugin fonctionne avec un site contenant jusqu'à 3 menus différents (pour un site en trois grandes parties par exemple).
Le principe est de définir une catégorie du même nom que le menu, pour chaque menu. Puis de rattacher les catégories affichées dans un menu à cette catégorie mère.
L'interface du plugin permet de faire le lien explicite entre les menus et les "catégories mères" créées.
Chaque menu doit également être rattaché à une page mère, qui est en quelque sorte, la page portail du menu.
Principe
Le plugin affiche en fait le menu lui-même, en le transformant : en remplaçant les balises ul et li (listes) en span, et en déterminant pour chaque élément s'il est un parent de la page ou de l'article en cours (ajout de la classe "unparent").
L'affichage ou non se gère ensuite dans votre fichier CSS.
Dépendances
Vous pouvez installer le plugin "yoast_fil_ariane" pour une meilleure couverture de votre site, puisque par défaut, lorsque le plugin ne parvient pas à déterminer le fil d'ariane, il affiche celui de yoast_fil_ariane.
- Téléchargez
fil_ariane_menu.php vers le répertoire /wp-content/plugins/fil_ariane_menu/
- Activez l'extension à travers le menu "Extensions" dans WordPress
- Configurez les correspondances entre menus, catégories et pages dans le menu d'administration du plugin ("Fil d'Ariane Menu" : dans le cadre "Réglages" de la colonne de gauche)
- Insérez les lignes suivantes dans votre template :
if ( function_exists('fil_ariane_menu') ) {
fil_ariane_menu($menu_correspondance_config);
}
- Configurez votre fichier style.css pour afficher uniquement les éléments de classe "unparent" :
.menubreadcrumb span{
display:none;
}
.menubreadcrumb span.current-menu-ancestor,
.menubreadcrumb span.current-menu-item,
.menubreadcrumb span.current-page-item,
.menubreadcrumb span.current-category-ancestor,
.menubreadcrumb span.current-post-ancestor,
.menubreadcrumb span.current-menu-parent,
.menubreadcrumb span.current-post-parent,
.menubreadcrumb span.current-item{
display:inline;
font-weight:bold;
}
.menubreadcrumb span.current-menu-item a,
.menubreadcrumb span.current-page-item a,
.menubreadcrumb span.current-item a{
text-decoration: none;
color:black;
}
li.unparent{
display:list-item!important;
}
li.unparent > a{
/* color:orange!important; */
}
li.unparent > ul > li{
display:list-item!important;
}
span.unparent {
display:inline!important;
}
span.unparent > a{
/* color:orange!important; */
}