La mise en surbrillance de l’élément de menu actif dans le menu principal de votre site Web est vraiment bonne pour la convivialité afin que la personne qui consulte votre site sache exactement quelle page elle consulte et facilite la navigation dans le menu à partir de la page actuelle. Avant WordPress 3.0, mettre en évidence l’élément de menu actuel en fonction de la page sur laquelle se trouvait un visiteur demandait plus de travail, 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. , 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 menu WordPress de base

Prenons d’abord un moment pour regarder le menu de base WordPress Ouput (basé sur un menu simple utilisant le Thème WordPress Twenty Ten) 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 évidence des pages / catégories / autres liens de menu en cours

Si vous regardez le code ci-dessus, vous pouvez voir toutes les différentes classes que WordPress ajoute aux liens de menu, mais celles sur lesquelles vous souhaitez vous concentrer pour la mise en évidence sont les suivantes:

  1. .current-menu-item
  2. .current-page-ancestor
  3. .current-post-ancêtre

.current-menu-item: Classe ajoutée à l’élément de menu de la page en cours de visualisation par l’utilisateur.

~ Exemple: si vous êtes sur la page «à propos de» et qu’il existe un lien vers la page «à propos de», 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 en cours d’affichage.

~ Exemple: Si vous avez une page appelée «Pages» et une page enfant appelée «about», si vous êtes sur la page «about» 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 du message affiché.

~ Exemple: la classe est ajoutée à la catégorie «Film» dans le menu si vous visualisez actuellement le message intitulé «Harry Potter», qui est dans cette catégorie.

Sélection de menu d’exemple de base

C’est une méthode de mise en évidence très basique et générale, mais elle peut vous permettre de bien démarrer. 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 d’ajuster le CSS pour qu’il corresponde à votre thème afin qu’il ne cible que le menu que vous souhaitez cibler spécifiquement.

Share: