Récemment, en travaillant sur un projet de conception personnalisé, nous avons découvert la nécessité d’ajouter un style personnalisé aux éléments du menu de navigation WordPress. Cette conception particulière nécessitait un style différent pour le premier élément de menu et le dernier élément de menu. Maintenant, nous pouvons facilement accéder à l’administrateur WordPress et ajouter une classe css personnalisée au premier et au dernier élément de menu. Cependant, puisque nous livrons cela à un client, il est très probable qu’il sera en mesure de réorganiser l’ordre des menus à l’avenir. Utiliser la façon d’ajouter des classes à partir 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 vous montrerons comment créer votre premier et dernier élément de menu WordPress différemment en ajoutant une classe CSS .first et .last.
Il vous suffit d’ouvrir le thème. fichier functions.php. Collez ensuite le code suivant:
wpb_first_and_last_menu_class ($ articles) {
$ items (1) -> classes () = ‘premier’;
$ items (count ($ items)) -> classes () = ‘last’;
retourner $ articles;
}
add_filter (‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’);
Une autre façon de concevoir différemment les premier et dernier éléments de menu serait d’utiliser des sélecteurs CSS qui fonctionnent dans la plupart des navigateurs modernes.
ul # yourmenuid> li: premier enfant {}
ul # yourmenuid> li: dernier enfant {}
Remarque: Si vous avez de nombreux utilisateurs dans d’anciens navigateurs (Internet Explorer), vous souhaiterez 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 standard générées par WordPress qui peut également être utile lors de la conception des éléments de menu.
