Ajouter des éléments personnalisés dans vos menus

L’une des choses qui est limitée sur l’interface visuelle des menus, ce est que vous ne pouvez pas ajouter des liens vraiment personnalisés.

Que faire si vous souhaitez ajouter des éléments personnalisés à vos menus WordPress ?

Peut-être que vous voulez ajouter une barre de recherche, ou ajouter un lien pour vous connecter / déconnecter (et afficher un menu différent suivant le cas), la date d’aujourd’hui, ou toute autre chose…
Certes, il n’y a pas d’interface visuelle pour cela, ne signifie pas que ce n’est pas possible. Dans cet article, nous allons vous montrer comment vous pouvez utiliser le hook wp_nav_menu_items  pour ajouter des éléments personnalisés dans vos menus.

Etape 1

Nous déclarons notre nouveau menu :
[pastacode manual= »register_nav_menus(array(%0D%0A%20%20%20%20’header’%20%3D%3E%20’Menu%20Top%20(header)’%0D%0A))%3B » provider= »manual » lang= »php »/]

Etape 2

Nous le plaçons sur notre thème :
[pastacode manual= »wp_nav_menu(%20array(%20’theme_location’%20%3D%3E%20’header’%20%20)%20)%3B » provider= »manual » lang= »php »/]

Etape 3

Nous ajoutons sur ce menu, les liens que vous voulons, sans passer par la gestion du menu de l’administration. Dans l’exemple ci-dessous, j’affiche des éléments du menu suivant si l’utilisateur est connecté ou non !
[pastacode manual= »add_filter(‘wp_nav_menu_items’%2C%20’add_login_logout_link’%2C%2010%2C%202)%3B%0D%0Afunction%20add_login_logout_link(%24items%2C%20%24args)%20%7B%0D%0A%20%0D%0A%20%20%20%20global%20%24current_user%3B%0D%0A%20%20%20%20ob_start()%3B%0D%0A%20%20%20%20wp_loginout(‘index.php’)%3B%0D%0A%20%20%20%20%24loginout%20%3D%20ob_get_contents()%3B%0D%0A%20%20%20%20ob_end_clean()%3B%0D%0A%20%20%20%20if(is_user_logged_in()%20%26%26%20%24args-%3Etheme_location%20%3D%3D%20’header’)%20%7B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cli%3E%3Ca%20href%3D%22%23%22%3E%3Cb%3EBienvenue%20′.ucfirst(%24current_user-%3Edisplay_name).’%3C%2Fb%3E%3Cspan%20class%3D%22sub-indicator%22%3E%3C%2Fspan%3E%3C%2Fa%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cul%20class%3D%22sub-menu%22%20style%3D%22overflow%3A%20hidden%3B%20height%3A%20auto%3B%20padding-top%3A%200px%3B%20margin-top%3A%200px%3B%20padding-bottom%3A%200px%3B%20margin-bottom%3A%200px%3B%20display%3A%20none%3B%22%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cli%3E%3Ca%20href%3D%22′.get_permalink(WPSPO_ID_COMPTE).’%22%3EMon%20compte%3C%2Fa%3E%3C%2Fli%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cli%3E%3Ca%20href%3D%22′.wp_logout_url(home_url()).’%22%3ESe%20d%C3%A9connecter%3C%2Fa%3E%3C%2Fli%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3C%2Ful%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3C%2Fli%3E’%3B%0D%0A%20%20%20%20%7D%20else%20%7B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cli%3E%3Ca%20href%3D%22%23%22%3EEspace%20membre%3C%2Fa%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cul%20class%3D%22sub-menu%22%20style%3D%22overflow%3A%20hidden%3B%20height%3A%20auto%3B%20padding-top%3A%200px%3B%20margin-top%3A%200px%3B%20padding-bottom%3A%200px%3B%20margin-bottom%3A%200px%3B%20display%3A%20none%3B%22%3E’%3B%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cli%3E’.%20%24loginout%20.’%3C%2Fli%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3Cli%3E%3Ca%20href%3D%22%2Fwp-login.php%3Faction%3Dregister%22%3ECr%C3%A9er%20un%20compte%3C%2Fa%3E%3C%2Fli%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3C%2Ful%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%24items%20.%3D%20’%3C%2Fli%3E’%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20return%20%24items%3B%0D%0A%20%20%20%20%0D%0A%7D » provider= »manual » lang= »php »/]
Vous pouvez très bien ajouter un formulaire de recherche :
[pastacode manual= »add_filter(‘wp_nav_menu_items’%2C’add_search_box_to_menu’%2C%2010%2C%202)%3B%0D%0Afunction%20add_search_box_to_menu(%20%24items%2C%20%24args%20)%20%7B%0D%0A%20%20%20%20if(%20%24args-%3Etheme_location%20%3D%3D%20’primary’%20)%0D%0A%20%20%20%20%20%20%20%20return%20%24items.%22%3Cli%20class%3D’menu-header-search’%3E%3Cform%20action%3D’http%3A%2F%2Fexample.com%2F’%20id%3D’searchform’%20method%3D’get’%3E%3Cinput%20type%3D’text’%20name%3D’s’%20id%3D’s’%20placeholder%3D’Search’%3E%3C%2Fform%3E%3C%2Fli%3E%22%3B%0D%0A%0D%0A%20%20%20%20return%20%24items%3B%0D%0A%7D » provider= »manual » lang= »php »/]
Bref, grâce à ce hook, vous pouvez vous faire un menu avec seule limite votre imagination !
Qu’en pensez-vous ?