Mettre en surbrillance l’élément de menu actif dans le menu principal de votre site Web est vraiment bon pour la convivialité afin que la personne qui consulte votre site sache exactement quelle page elle consulte et cela facilite la navigation dans le menu à partir de la page actuelle. Avant WordPress 3.0, la mise en surbrillance de l’élément de menu actuel en fonction de la page sur laquelle se trouvait un visiteur était plus laborieuse, car vous deviez exécuter des instructions if sur chaque lien pour tester s’il s’agissait de la page actuelle ou d’un ancêtre de la page actuelle, cependant , avec l’introduction du nouveau système de menu glisser-déposer dans la version 3 de WordPress, des classes spéciales sont désormais attribuées à chaque lien, ce qui facilite leur style.
Sortie de base du menu WordPress
Prenons d’abord un moment pour regarder la sortie de base du menu WordPress (basée sur un menu simple utilisant le Thème WordPress Vingt-Dix) afin que vous puissiez voir le type de classes ajoutées automatiquement aux liens :
<ul id="menu-my-menu" class="menu"><li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="http://mysite.com">Home</a></li>
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="http://mysite.com/sample-page">Page 1</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="http://mysite.com/sample-page-2">Page 2</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-6"><a href="http://mysite.com/drop-down">Drop Down</a>
<ul class="sub-menu">
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://mysite.com/drop-down-1">Drop Down 1</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-8"><a href="http://mysite.com/drop-down-2">Drop Down 2</a></li>
</ul>
</li>
</ul>Mise en surbrillance des pages/catégories/autres liens de menu actuels
Si vous jetez un œil au code ci-dessus, vous pouvez voir toutes les différentes classes que WordPress ajoute aux liens du menu, mais celles sur lesquelles vous souhaitez vous concentrer pour la mise en évidence sont les suivantes :
- .élément de menu actuel
- .current-page-ancestor
- .current-post-ancêtre
.élément-de-menu-actuel : Classe ajoutée à l’élément de menu de la page en cours d’affichage par l’utilisateur.
~ Exemple : si vous êtes sur la page « à propos » et qu’il y a un lien vers la page « à propos », alors il héritera de cette classe
.current-page-ancestor: Classe ajoutée à l’élément de menu de la page parent si une page enfant est actuellement affichée.
~ Exemple : si vous avez une page appelée « Pages » et une page enfant appelée « à propos », si vous êtes sur la page « à propos », alors le lien de menu appelé « Pages » héritera de cette classe.
.current-post-ancêtre: Classe ajoutée à l’élément de menu tant que la catégorie est un ancêtre de la publication en cours de visualisation.
~ Exemple : la classe est ajoutée à la catégorie « Film » dans le menu si vous consultez actuellement le message intitulé « Harry Potter », qui se trouve dans cette catégorie.
Surbrillance du menu de l’échantillon de base
Il s’agit d’une méthode de mise en évidence très basique et générale, mais elle peut vous donner un bon départ. Copiez et modifiez simplement le CSS suivant dans votre fichier style.css pour mettre en évidence les liens de votre menu :
.current-menu-item a,
.current-page-ancestor a,
.current-post-ancestor a { background: #000; }Bien sûr, ce CSS cible TOUTES les classes actuelles, ce qui signifie que si vous avez plusieurs menus sur le site ou même des menus dans vos zones de widgets, ils seront ciblés. Assurez-vous donc de modifier le CSS pour qu’il corresponde à votre thème afin qu’il ne cible que le menu que vous souhaitez cibler spécifiquement.
