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 :

register_nav_menus(array(
    'header' => 'Menu Top (header)'
));

Etape 2

Nous le plaçons sur notre thème :

wp_nav_menu( array( 'theme_location' => 'header'  ) );

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 !

add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);
function add_login_logout_link($items, $args) {
 
    global $current_user;
    ob_start();
    wp_loginout('index.php');
    $loginout = ob_get_contents();
    ob_end_clean();
    if(is_user_logged_in() && $args->theme_location == 'header') {
        $items .= '<li><a href="#"><b>Bienvenue '.ucfirst($current_user->display_name).'</b><span class="sub-indicator"></span></a>';
        $items .= '<ul class="sub-menu" style="overflow: hidden; height: auto; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; display: none;">';
        $items .= '<li><a href="'.get_permalink(WPSPO_ID_COMPTE).'">Mon compte</a></li>';
        $items .= '<li><a href="'.wp_logout_url(home_url()).'">Se déconnecter</a></li>';
        $items .= '</ul>';
        $items .= '</li>';
    } else {
        $items .= '<li><a href="#">Espace membre</a>';
        $items .= '<ul class="sub-menu" style="overflow: hidden; height: auto; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; display: none;">';        
        $items .= '<li>'. $loginout .'</li>';
        $items .= '<li><a href="/wp-login.php?action=register">Créer un compte</a></li>';
        $items .= '</ul>';
        $items .= '</li>';
        
    }
    return $items;
    
}

Vous pouvez très bien ajouter un formulaire de recherche :
add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items."<li class='menu-header-search'><form action='http://example.com/' id='searchform' method='get'><input type='text' name='s' id='s' placeholder='Search'></form></li>";

    return $items;
}

Bref, grâce à ce hook, vous pouvez vous faire un menu avec seule limite votre imagination !
Qu’en pensez-vous ?

Florent Maillefaud

Ajouter des éléments personnalisés dans vos menus 1Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Abonnez-vous

Restez en contact avec moi pour recevoir mes derniers articles concernant mon activité ou mes astuces pour WordPress.

Vos données ne seront jamais exploitées par un tiers. Vous avez aussi à chaque instant la possibilité de vous désabonner

venenatis libero. ut suscipit in luctus at elementum facilisis dictum libero vel,
Share This