Un visiteur arrive sur votre site, ouvre la page «Services» et ne peut pas savoir d’un coup d’œil où il se trouve. Les éléments du menu semblent identiques. Il n’y a pas d’état actif. Il ne s’agit pas d’un bug de WordPress; par défaut, un thème n’est pas obligé de mettre en évidence l’élément courant. Mais quelques lignes de CSS règlent le problème en moins d’une minute.

WordPress attribue automatiquement un ensemble de classes CSS à chaque élément de menu depuis la version 3.0. Trois d’entre elles indiquent «l’utilisateur se trouve actuellement sur cette page ou dans cette section». Il vous suffit d’écrire les styles, et la navigation devient claire sans le moindre clic.

💡 Aperçu rapide:

• Ouvrez l’inspecteur de votre navigateur et trouvez le sélecteur CSS du menu de votre site
• Ajoutez 3 à 5 lignes de CSS dans l’outil de personnalisation ou dans style.css en ciblant les classes .current-menu-item, .current-page-ancestor et .current-post-ancestor
• Si le site comporte plusieurs menus, affinez le sélecteur pour que la mise en évidence s’applique uniquement au menu principal
• Dans les thèmes en blocs (FSE), l’approche est la même, mais le CSS s’ajoute via l’éditeur de site

Quelles classes WordPress ajoute aux éléments de menu

Lorsque WordPress génère un menu via wp_nav_menu(), chaque élément <li> reçoit plusieurs classes. Voici les trois qui contrôlent l’état «actif»:

.current-menu-item est attribuée à l’élément dont le lien pointe vers la page courante. Ouvrez «Contact», et l’élément de menu «Contact» reçoit cette classe. La plus directe et la plus couramment utilisée.

.current-page-ancestor se déclenche lorsque l’utilisateur se trouve sur une page enfant alors que l’élément de menu pointe vers la page parente. Par exemple, le menu contient «Portfolio» et le visiteur lit une étude de cas à l’intérieur de cette section. L’élément parent «Portfolio» reçoit la classe ancestor, ce qui vous permet de le mettre en évidence également et de montrer dans quelle section du site l’utilisateur se trouve.

.current-post-ancestor suit le même concept, mais pour les articles et les catégories. Si un élément de menu renvoie vers la catégorie «Actualités» et que le lecteur ouvre un article spécifique de cette catégorie, l’élément «Actualités» portera cette classe.

WordPress attribue ces trois classes automatiquement. Vous n’avez pas besoin d’écrire des conditions en PHP ni de modifier les templates manuellement, contrairement à l’époque de WP 2.9 et antérieur, où chaque lien devait être enveloppé dans une vérification if par rapport à l’URL courante. Aujourd’hui, vous pouvez simplement ouvrir l’inspecteur et voir quelle classe est déjà attachée à l’élément cible.

Étape 1: Trouver le sélecteur du menu

Ouvrez votre site, appuyez sur F12 (outils de développement) et localisez l’élément <ul> ou <nav> qui contient les éléments du menu. Il ressemble généralement à ceci:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Notez l’identifiant (#primary-menu) ou la classe (.main-navigation) de votre menu. C’est le sélecteur que nous utiliserons à l’étape suivante pour limiter la portée du CSS.

Dans les thèmes classiques, les menus sont le plus souvent générés via wp_nav_menu() avec un argument theme_location tel que 'primary'. Les classes CSS sont attribuées par la fonction nav_menu_css_class, et un filtre du même nom permet aux développeurs d’ajouter ou de supprimer des classes par programmation. Mais pour une mise en évidence de base, aucun code n’est nécessaire, seulement du CSS.

Étape 2: Ajouter le CSS de mise en évidence

L’approche la plus simple et la plus sûre consiste à insérer les styles via l’outil de personnalisation intégré. Dans l’administration WordPress, allez dans Apparence → Personnaliser → CSS additionnel.

Copiez et collez:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

Ce que fait ce code: lorsqu’un élément de menu reçoit la classe .current-menu-item, son lien change la couleur du texte en blanc et le fond en bleu, avec un léger arrondi. Le résultat est visible immédiatement dans l’aperçu de l’outil de personnalisation, avant même l’enregistrement.

Pour un contrôle plus fin, vous pouvez aussi mettre en évidence les ancêtres:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Ici, au lieu d’un remplissage, on a un soulignement avec une barre bleue. Cette option est plus épurée dans les thèmes minimalistes.

Étape 3: Limiter la portée

Si votre site comporte plusieurs menus (principal dans l’en-tête, secondaire dans le pied de page, un menu de widget dans la barre latérale), le CSS de l’étape précédente mettra en évidence l’élément actif partout. C’est rarement souhaitable.

Préfixez le sélecteur de classe avec l’identifiant ou la classe du menu spécifique que vous avez trouvé à l’étape 1:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Désormais, la mise en évidence ne se déclenchera qu’à l’intérieur de l’élément ayant id="primary-menu". Les autres menus du site restent inchangés.

Si votre thème utilise une classe au lieu d’un identifiant, écrivez .main-navigation .current-menu-item > a. Le principe est le même.

Qu’en est-il des thèmes en blocs (FSE)

Dans les thèmes basés sur les blocs (Twenty Twenty-Four, Twenty Twenty-Five et similaires), il n’y a pas d’outil de personnalisation classique avec un champ CSS additionnel. Les menus sont construits via le bloc Navigation.

Le CSS s’ajoute via l’éditeur de site: Apparence → Éditeur → Styles → trois points (menu) → CSS additionnel. Le code est exactement le même; WordPress continue d’attribuer la classe .current-menu-item et les autres classes dans les thèmes en blocs également.

La différence réside dans le sélecteur. En FSE, le conteneur du menu est un <nav> avec une classe comme .wp-block-navigation. Confirmez le sélecteur via l’inspecteur et préfixez les classes d’élément actif avec celui-ci:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Si votre site fonctionne avec un thème moderne et que le menu ne se met pas en évidence «par défaut», vérifiez si le thème lui-même ne surcharge pas les états des liens via :hover et :focus sans styles pour .current-menu-item. La solution consiste à ajouter un sélecteur de spécificité égale.

Une personnalisation plus poussée des menus (des méga menus à la navigation mobile) est traitée dans un article séparé. Il inclut également une sélection de plugins pour les cas où le CSS ne suffit plus: des constructeurs gratuits aux solutions professionnelles avec grilles et icônes.

⁉️🤔 Questions fréquentes

Pourquoi le menu ne se met-il pas en évidence après avoir ajouté le CSS?

La cause la plus fréquente est que le sélecteur ne correspond pas à la structure HTML réelle. Ouvrez l’inspecteur (F12), cliquez sur l’élément de menu actif et vérifiez: le <li> possède-t-il la classe .current-menu-item? Si la classe est absente, WordPress ne considère pas cette page comme «courante» pour cet élément. Cela peut arriver avec des types de contenu personnalisés ou des plugins qui surchargent la logique du menu. Solution: enregistrez le type personnalisé avec 'show_in_nav_menus' => true ou ajoutez la prise en charge via le filtre nav_menu_css_class.

Puis-je mettre en évidence un élément de menu avec une couleur différente pour chaque page?

Oui. WordPress ajoute une classe unique comme .menu-item-{ID} à chaque élément, par exemple .menu-item-42. Utilisez l’inspecteur pour trouver l’ID de l’élément cible et écrivez: .menu-item-42 > a { background: #d63638; }. Cela vous permet de coder le menu en couleurs pour qu’il corresponde aux sections du site.

Comment mettre en évidence un élément de menu s’il s’agit d’un lien externe ou d’une ancre?

Un lien externe ne recevra pas .current-menu-item car il pointe vers un autre site, et WordPress ne peut pas l’identifier comme «courant». Pour les ancres au sein de la même page, la classe ne se déclenche pas non plus. Dans ces cas, ajoutez manuellement une classe CSS personnalisée à l’élément: Apparence → Menus → Options de l’écran → cochez Classes CSS, puis saisissez votre classe dans les paramètres de l’élément et stylisez-la.

Est-il sûr d’ajouter du CSS via le CSS additionnel dans l’outil de personnalisation?

Oui. Les styles de ce champ sont stockés dans la base de données et ne sont pas perdus lors de la mise à jour du thème, contrairement aux modifications de style.css dans un thème enfant qui peuvent être accidentellement écrasées. Ce champ est disponible depuis WordPress 4.7 et est pris en charge par pratiquement tous les thèmes classiques.

Cela en vaut-il la peine: résumé en trois lignes

Mettre en évidence l’élément de menu actif n’est pas un caprice de designer; c’est une base de navigation. Sans cela, les visiteurs passent des secondes supplémentaires à s’orienter. Avec cela, la structure du site est claire au premier coup d’œil.

La tâche est entièrement prise en charge par trois classes: .current-menu-item, .current-page-ancestor et .current-post-ancestor. Cela tient en cinq lignes de code. La mise en œuvre prend trois minutes via l’outil de personnalisation.

Si vous avez besoin de plus (comportement de menu non standard, mise en évidence conditionnelle par rôle utilisateur ou indicateurs personnalisés), consultez la sélection de plus de 15 plugins de menu. Pour une mise en évidence de base, le CSS suffit.