Ajouter un deuxième menu à son site wordpress

Aujourd’hui on va voir comment rajouter très rapidement une deuxième section « menu » sur son site. Ici je veux avoir un deuxième menu « fixed top » c’est à dire fixé en haut de la page, comme on peut le voir sur de nombreux sites. On pourra par exemple y mettre les liens des réseaux sociaux.

Si on a crée son thème from scratch avec comme base un theme Automatic, (http://copier-coller.com/un-framework-wordpress/), ou qu’on part d’un Template déjà fait, il suffit de retrouver, dans functions.php, la ligne suivante :

    // This theme uses wp_nav_menu() in one location.
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'utopia'),
      
            )
    );

C’est la fonction de déclaration et d’enregistrement du menu. Dans ce code, il suffit de déclarer un deuxième menu:

    register_nav_menus(array(
        'primary' => __('Primary Menu', 'utopia'),
        'secondary' => __('Top Menu', 'utopia')
            )
    );

Ensuite, il va falloir créer un espace pour ce nouveau menu. On se rend donc dans notre fichier header.php, puis on appelle ce deuxième menu. Voici un exemple de code : Ici je le place tout en haut de ma page, pour des raisons pratiques, je l’ai retiré de mon header mais on peut le placer ou on veut.

   <body <?php body_class(); ?>>
        <div class="wrapper">
             <?php // Display Top Navigation
				if ( has_nav_menu( 'secondary' ) ) : ?>
					<nav id="topnav" class="clearfix" role="navigation">
						<p id="topnav-icon"></p>
						<?php wp_nav_menu(	array(
							'theme_location' => 'secondary', 
							'container' => false, 
							'menu_id' => 'topnav-menu', 
							'fallback_cb' => '', 
							'depth' => 1)
						);
						?>
					</nav>
				<?php endif; ?>
            <div class="container main" id="top">
                <header id="masthead" class="site-header" role="banner">                 
                    <hgroup>

Il ne nous reste plus qu’à appliquer notre style sur notre nouveau menu: voici un exemple de code, à mettre dans style.css.


#topnav{
    margin: 0;
    width: 100%;
    background-color:#555;
    padding: 0;
    position: static;
    float: right;
    display: inline;
    font-size: 1.0em;
    border: none;
    box-shadow: none;

    top: 0;
    left: 0;
}

#topnav-menu {
    float: right;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
}
#topnav-menu li{
    float: left;
    position: relative;
}
#topnav-menu a {
    display: block;
    padding: 0.7em 1em;
    text-transform: uppercase;
    font-size: 1em;
}
#topnav-menu a:link, #topnav-menu a:visited{
    color: #ccc;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
#topnav-menu a:hover {
    text-decoration: none;
    color:#ffffff;
}
#topnav-menu li.current_page_item a, #topnav-menu li.current-menu-item a {
    text-decoration: none;
}
.navbar-fixed-top + .content-container {
    margin-top: 70px;
}

Et voici pour finir un exemple de rendu tout simple: sur l’image on voit bien le menu fixé en haut, puis plus bas le menu principal du site:

22/01/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress

2 commentaires sur “Ajouter un deuxième menu à son site wordpress”

Kart 11/06/2016 a 20:53

Bonsoir

Merci pour ce tuto car c’est exactement ce que je cherchais, mais après avoir suivi à la lettre ce tuto, ca doit tout en l’air à partir du moment où je le rend responsive. Si vous avez la solution pour le rendre responsive sans tout rendre en bordel, vous me serais d’une grande aide.

Bien cordialement.
yuyazz 12/06/2016 a 14:28

En principe le code bootstrap est responsive, il n’y a donc rien à rajouter pour que le menu burger apparaisse aux breakpoints classique, après bien sur il faut jouer avec le css, faire en sorte qu’il n’y ait pas trop d’onglets car forcément en cas de trop grand nombre certains passeront à la ligne avant le breakpoint, etc…normalement tout est dans le css, après, tout dépend de ce que vous entendez par « rendre en bordel »!!

Laisser un commentaire Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.