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