Comment ajouter la première et la dernière classe CSS aux éléments de menu WordPress

Avez-vous déjà remarqué des sites web avec des éléments de menu uniques stylisés en premier et en dernier ? Ce n'est pas un hasard, c'est une astuce CSS. Cette technique peut mettre en évidence des liens importants, comme votre page de contact ou une offre spéciale.

Beaucoup de nos lecteurs ont essayé d'ajouter des classes personnalisées à leurs éléments de menu, pour constater que lorsqu'ils réorganisent leur menu, le style se casse. Les éléments étiquetés comme 'premier' et 'dernier' ne sont plus à ces positions, laissant le menu incohérent.

C'est pourquoi ce guide vous montrera comment ajouter une classe .first et .last qui restera attachée à vos éléments de menu, même si vous les déplacez plus tard. Nous couvrirons deux méthodes : un filtre pour les thèmes classiques et des sélecteurs CSS pour tous les thèmes, y compris les thèmes de bloc.

Pourquoi styliser différemment les premier et dernier éléments de navigation ?

Parfois, vous devrez peut-être ajouter un style personnalisé aux premier et dernier éléments d'un menu de navigation. Cela peut faire ressortir des liens importants, tels que le lien vers le formulaire de contact de votre site ou la page de panier WooCommerce.

Dans ce cas, vous pourriez simplement ajouter une classe CSS personnalisée aux premier et dernier éléments de menu. Cependant, si vous changez l'ordre du menu à tout moment, cela pourrait complètement casser le style personnalisé.

Pour cette raison, nous recommandons d'utiliser des filtres à la place.

Dans ce guide, nous vous montrerons comment styliser le premier et le dernier élément de votre menu de navigation, afin que vous puissiez réorganiser le menu sans casser le style personnalisé. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1 : Ajouter une classe Premier et Dernier à l'aide d'un filtre (recommandé)
• Méthode 2 : Styliser les premiers et derniers éléments à l'aide de sélecteurs CSS (fonctionne avec tous les thèmes)

Méthode 1 : Ajouter une classe Premier et Dernier à l'aide d'un filtre (recommandé)

Remarque : Cette méthode ne fonctionne qu'avec un thème WordPress classique. Si vous utilisez un thème de bloc, accédez à la Méthode 2.

La manière la plus simple de styliser les éléments de votre menu de navigation est d'ajouter un filtre à votre thème.

Souvent, vous trouverez des extraits de code dans les tutoriels WordPress avec des instructions pour les ajouter au fichier functions.php de votre thème.

Le plus gros problème est qu'une petite erreur dans l'extrait de code personnalisé peut casser votre site WordPress et le rendre inaccessible. Sans parler du fait que si vous mettez à jour votre thème WordPress, vous perdrez toutes vos personnalisations.

C'est là que WPCode intervient.

Ce plugin gratuit permet d'ajouter facilement du CSS, du PHP, du HTML personnalisé, etc. à WordPress sans mettre votre site en danger.

La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, rendez-vous sur Extraits de code » Ajouter un extrait.

Ici, survolez simplement votre souris sur ‘Ajouter votre code personnalisé.’

Lorsqu'il apparaît, cliquez sur ‘Utiliser l'extrait.’

Pour commencer, tapez un titre pour l'extrait de code personnalisé. Cela peut être n'importe quoi qui vous aide à identifier l'extrait dans le tableau de bord WordPress.

Après cela, ouvrez le menu déroulant ‘Type de code’ et sélectionnez ‘Extrait PHP.’

Vous pouvez ensuite ajouter le code PHP suivant dans la boîte de code :

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');

Après cela, vous êtes prêt à faire défiler jusqu'en haut de l'écran et à cliquer sur le bouton ‘Inactif’ pour qu'il devienne ‘Actif.’

Enfin, cliquez sur ‘Enregistrer l'extrait’ pour rendre l'extrait PHP actif.

Cela crée des classes CSS .first et .last pour vos premier et dernier éléments de menu. Vous pouvez maintenant utiliser ces classes pour appliquer un style unique à ces éléments sur votre menu de navigation personnalisé.

Pour ce faire, vous devrez ajouter un deuxième extrait de code à votre site WordPress. Pour commencer, créez un nouvel extrait de code personnalisé en suivant le même processus décrit ci-dessus.

Après cela, tapez un titre pour le fragment de code personnalisé.

Ensuite, ouvrez le menu déroulant « Type de code », mais cette fois, sélectionnez « Extrait CSS ».

Pour ce guide, nous allons simplement mettre en gras les premier et dernier éléments de menu en ajoutant le formatage CSS suivant à la boîte de code :

.first a {font-weight: bold;}

.last a {font-weight: bold;}

Une fois cela fait, cliquez sur le bouton « Inactif » pour qu'il devienne « Actif ».

Enfin, cliquez sur « Enregistrer l'extrait » pour rendre l'extrait CSS actif.

Maintenant, si vous visitez votre site Web, vous verrez le menu nouvellement stylisé en direct.

Méthode 2 : Styliser les premiers et derniers éléments à l'aide de sélecteurs CSS (fonctionne avec tous les thèmes)

Si vous ne souhaitez pas utiliser un plugin d'extraits de code, vous pouvez styliser les premier et dernier éléments de menu à l'aide de sélecteurs CSS. Cependant, cette méthode peut ne pas fonctionner avec certains anciens navigateurs, tels qu'Internet Explorer.

Dans cet esprit, il est conseillé de tester votre site WordPress dans différents navigateurs.

Pour suivre cette méthode, vous devrez ajouter du code à la feuille de style de votre thème ou à la section « CSS additionnel » du personnalisateur de thème WordPress.

Si vous n’avez jamais fait cela auparavant, consultez notre guide sur comment ajouter facilement du CSS personnalisé à votre site WordPress.

La première étape consiste à modifier le fichier style.css de votre thème ou à vous rendre dans Apparence » Personnaliser, puis à cliquer sur « CSS additionnel ».

Après cela, ajoutez l'extrait de code suivant à votre site :

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Notez que vous devrez remplacer « yourmenuid » par l'ID de votre menu de navigation.

Les sélecteurs « first-child » et « last-child » sélectionnent le premier et le dernier enfant de leur parent, qui sont les premier et dernier éléments du 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 blog WordPress :

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
}

Si vous utilisez un thème WordPress basé sur des blocs, le personnalisateur de thème sera manquant dans votre administration WordPress. Vous devez entrer cette URL dans votre navigateur pour accéder au personnalisateur de thème :

https://yourdomainname.com/wp-admin/customize.php

Assurez-vous de remplacer « domain » par le nom de domaine de votre site web.

Après cela, ouvrez l'onglet « CSS additionnel » comme précédemment et insérez le code suivant. Notez que le code est légèrement différent car vous n'avez pas besoin d'ajouter l'ID de votre menu.

li:first-child a,
li:last-child a {
    background-color: black;
    border: none;
    color: white !important; /* Ensures the color white is prioritized */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}

N'hésitez pas à personnaliser le code selon vos besoins. Dans l'exemple ci-dessous, nous avons transformé les premiers et derniers liens en boutons.

Voici à quoi cela ressemble :

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter les classes .first et .last aux menus de navigation WordPress. Vous pourriez également vouloir consulter notre article sur comment créer un menu de navigation vertical dans WordPress et notre guide pour débutants sur la création d'un menu déroulant sur un site WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.