R\u00e9cemment, en travaillant sur un projet de conception personnalis\u00e9, nous avons d\u00e9couvert la n\u00e9cessit\u00e9 d’ajouter un style personnalis\u00e9 aux \u00e9l\u00e9ments du menu de navigation WordPress. Cette conception particuli\u00e8re n\u00e9cessitait un style diff\u00e9rent pour le premier \u00e9l\u00e9ment de menu et le dernier \u00e9l\u00e9ment de menu. Maintenant, nous pouvons facilement acc\u00e9der \u00e0 l’administrateur WordPress et ajouter une classe css personnalis\u00e9e au premier et au dernier \u00e9l\u00e9ment de menu. Cependant, puisque nous livrons cela \u00e0 un client, il est tr\u00e8s probable qu’il sera en mesure de r\u00e9organiser l’ordre des menus \u00e0 l’avenir. Utiliser la fa\u00e7on d’ajouter des classes \u00e0 partir du panneau d’administration n’\u00e9tait pas la m\u00e9thode la plus efficace. Nous avons donc d\u00e9cid\u00e9 de le faire en utilisant des filtres. Dans cet article, nous vous montrerons comment cr\u00e9er votre premier et dernier \u00e9l\u00e9ment de menu WordPress diff\u00e9remment en ajoutant une classe CSS .first et .last.<\/p>\n
Il vous suffit d’ouvrir le th\u00e8me. fichier functions.php. Collez ensuite le code suivant:<\/p>\n
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’);<\/p>\n
Une autre fa\u00e7on de concevoir diff\u00e9remment les premier et dernier \u00e9l\u00e9ments de menu serait d’utiliser des s\u00e9lecteurs CSS qui fonctionnent dans la plupart des navigateurs modernes. <\/p>\n
ul # yourmenuid> li: premier enfant {}
ul # yourmenuid> li: dernier enfant {}<\/p>\n
Remarque: Si vous avez de nombreux utilisateurs dans d’anciens navigateurs (Internet Explorer), vous souhaiterez probablement \u00e9viter la technique suivante. <\/p>\n
Nous esp\u00e9rons que cet article vous a aid\u00e9. Nous avons cr\u00e9\u00e9 une feuille de triche sur les classes CSS standard g\u00e9n\u00e9r\u00e9es par WordPress qui peut \u00e9galement \u00eatre utile lors de la conception des \u00e9l\u00e9ments de menu.<\/p>\n ","protected":false},"excerpt":{"rendered":"
R\u00e9cemment, en travaillant sur un projet de conception personnalis\u00e9, nous avons d\u00e9couvert la n\u00e9cessit\u00e9 d’ajouter un style personnalis\u00e9 aux \u00e9l\u00e9ments du menu de navigation WordPress. Cette conception particuli\u00e8re n\u00e9cessitait un style diff\u00e9rent pour le premier \u00e9l\u00e9ment de menu et le dernier \u00e9l\u00e9ment de menu. Maintenant, nous pouvons facilement acc\u00e9der \u00e0 l’administrateur WordPress et ajouter une […]<\/p>\n","protected":false},"author":1,"featured_media":33420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[274,856,116,31,704,1429,519,1035],"class_list":["post-33419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","tag-ajouter","tag-aux","tag-classe","tag-comment","tag-derniere","tag-elements","tag-menu","tag-premiere"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/33419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=33419"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/33419\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/33420"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=33419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=33419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=33419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}