,

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

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 :

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 ?

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *