Avez-vous besoin d’ajouter un style personnalisé au premier et au dernier élément de votre menu de navigation WordPress ?
Vous pouvez simplement ajouter une classe CSS personnalisée aux premier et dernier éléments de menu, mais si le menu est réorganisé, ces éléments ne seront plus les premiers et derniers.
Dans cet article, nous allons vous montrer comment ajouter une classe .first et .last qui stylisera les premier et dernier éléments de menu même si les éléments de menu sont réorganisés.
Pourquoi styliser différemment le premier et le dernier élément de navigation ?
Dans un précédent projet de conception personnalisée, nous devions ajouter un style personnalisé aux éléments du menu de navigation d’un site Web WordPress. Cette conception en particulier nécessitait un style différent pour le premier élément de menu et le dernier élément de menu.
Maintenant, nous pouvons facilement modifier le menu et ajouter une classe CSS personnalisée au premier et au dernier élément de menu. Mais parce que nous livrions le projet à un client, notre solution devait fonctionner même s’ils réorganisaient l’ordre des menus.
Nous avons donc décidé d’utiliser des filtres à la place.
Dans ce didacticiel, nous allons vous montrer deux manières de styliser le premier et le dernier élément de votre menu de navigation. Vous pouvez choisir votre méthode préférée dans la liste ci-dessous :
- Méthode 1 : Ajout de la première et de la dernière classe à l’aide d’un filtre
- Méthode 2 : Styliser le premier et le dernier élément à l’aide des sélecteurs CSS
Méthode 1 : Ajout de la première et de la dernière classe à l’aide d’un filtre
La première façon de styliser différemment vos premier et dernier éléments de menu de navigation consiste à ajouter un filtre à votre thème.
Vous devrez ajouter du code au fichier functions.php de votre thème. Si vous ne l’avez pas encore fait, consultez notre guide sur la façon de copier et coller du code dans WordPress.
Tout ce que vous avez à faire est d’ouvrir le fichier functions.php de votre thème puis de coller l’extrait de code suivant :
function wpb_first_and_last_menu_class($items) { $items[1]->classes[] = 'first'; $items[count($items)]->classes[] = 'last'; return $items; } add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
Cela crée respectivement les classes CSS .first et .last pour vos premier et dernier éléments de menu de navigation. Vous pouvez utiliser ces classes pour styliser les éléments de menu.
Pour savoir comment faire cela en détail, reportez-vous à notre guide sur la façon de styliser les menus de navigation WordPress.
Pour ce didacticiel, nous ajouterons la mise en forme CSS de base suivante à la feuille de style style.css de notre thème pour simplement mettre en gras les premier et dernier éléments de menu :
.first a { font-weight: bold; } .last a { font-weight: bold; }
Ici, vous pouvez voir des captures d’écran avant et après l’ajout du code à notre site de démonstration.
Méthode 2 : Styliser le premier et le dernier élément à l’aide des sélecteurs CSS
Une deuxième façon de styliser différemment le premier et le dernier élément de menu consiste à utiliser des sélecteurs CSS. Cette méthode est plus simple, mais elle peut ne pas fonctionner avec certains navigateurs plus anciens, comme Internet Explorer.
Pour suivre cette méthode, vous devrez ajouter du code à la feuille de style de votre thème ou à la section « CSS supplémentaire » du personnalisateur de thème WordPress.
Si vous ne l’avez pas encore fait, consultez notre guide sur la façon d’ajouter facilement du CSS personnalisé à votre site WordPress.
Vous devriez commencer par éditer le fichier style.css de votre thème, ou en naviguant vers Apparence » Personnaliser et en cliquant sur « CSS supplémentaire ».
Après cela, vous devez coller l’extrait de code suivant, puis enregistrer ou publier vos modifications.
ul#yourmenuid > li:first-child { } ul#yourmenuid > li:last-child { }
Notez que vous devrez remplacer « votremenuid » par l’ID réel du menu de navigation. Les sélecteurs ‘first-child’ et ‘last-child’ sélectionnent un élément s’il est le premier et le dernier enfant de son parent, qui est le menu de navigation.
Par exemple, nous avons utilisé ce code pour mettre en gras les premier et dernier éléments du menu de navigation sur notre site de démonstration :
ul#primary-menu-list > li:first-child a { font-weight: bold; } ul#primary-menu-list > li:last-child a { font-weight: bold; }
Nous espérons que ce didacticiel vous a aidé à apprendre comment ajouter les classes .first et .last aux menus de navigation WordPress.
Vous voudrez peut-être également apprendre à corriger 50 erreurs WordPress courantes ou consulter notre liste des meilleurs constructeurs de pages par glisser-déposer.