Comment ajouter le premier et le dernier cours aux éléments du menu de navigation de WordPress

Récemment, alors que nous travaillions sur un projet de conception personnalisé, nous avons constaté la nécessité d’ajouter du style personnalisé à nos éléments de menu de navigation WordPress. Cette conception nécessitait en particulier un style différent pour le premier et le dernier élément de menu. Maintenant, nous pourrions facilement accéder à l’administrateur WordPress et ajouter une classe CSS personnalisée au premier et au dernier élément du menu. Mais comme nous livrons cela à un client, il est très probable qu'il puisse réorganiser l'ordre des menus à l'avenir. L'utilisation de la méthode d'ajout de classes du panneau d'administration n'était pas la méthode la plus efficace. Nous avons donc décidé de le faire en utilisant des filtres. Dans cet article, nous allons vous montrer comment styliser différemment vos premier et dernier éléments de menu WordPress en ajoutant une classe CSS .first et .last.

Tout ce que vous avez à faire est d'ouvrir votre thème functions.php fichier. Puis collez le code suivant:

 fonction wpb_first_and_last_menu_class ($ items) $ items [1] -> classes [] = 'premier'; $ items [count ($ items)] -> classes [] = 'dernier'; retourner les articles $;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Une autre façon de styler différemment le premier et le dernier élément de menu serait d’utiliser des sélecteurs CSS qui fonctionnent dans la plupart des navigateurs modernes..

 ul # votremenuid> li: premier-enfant  ul # votremenuid> li: dernier-enfant  

Remarque: si vous avez beaucoup d'utilisateurs sur des navigateurs plus anciens (Internet Explorer), vous voudrez probablement éviter la technique suivante..

Nous espérons que cet article vous a aidé. Nous avons créé une feuille de triche sur les classes CSS générées par WordPress par défaut, ce qui peut s'avérer utile lors de la création d'éléments de menu..