Comment créer un menu de navigation WordPress personnalisé avec le code?

Tout d'abord,vouspouvez utiliser lafonction demenu dunouveau WordPress.

Vous voulez d'abord activer lefait que vous souhaitez utiliser cettefonctionnalité via votrefichierfunctions.php.

 // This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' ),  
'secondary' => __('Secondary Navigation', 'your_theme_name')  
) ); 
 

Le code ci-dessus définit si vous avezplus d'unmenu. Si vous voulez un seulmenu,supprimez le secondaire. Si vousfaites cela,cela ressemblerait à quelque chose comme ceci dans votrefichierfunctions.php:

 // This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' )
) );
 

Cela vous donneramaintenant lapossibilité d'ajouter des éléments depage via l'option demenu sous Apparence dans leback-end.

Ensuite dans votrethème,vous voudrez l'ajouter à l'endroit où vous voulez que lemenu apparaisse:

 <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' =>   'primary' ) ); ?>
 

Leterme "menu-header" sera la classe de labalise div dans laquelle lemenuestinséré. Vouspouvez changer celapour la classe dans laquelle vous voulez que labalise div soit dans votrethème.

Ensuite,tout le reste sefaitentièrement via CSS.

 /*****************************************
Style declarations for Top Menu
*****************************************/
.menu-header {
margin-right: auto;
margin-left: auto;
z-index: 10;
}

.menu-header li {
display: inline;
list-style: url(none) none;
float: left;
}

.menu-header ul {
line-height: 31px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.menu-header a, .menu-header a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}

.menu-header a, .menu-header a:visited {
color:#990000;
display:block;
padding:0 20px;
}

.menu-header a:hover, .menu-header a:active, .current_page_item a, #home .on, .menu-footer a:hover {
text-decoration:underline;
}

.menu-header li ul {
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}

.menu-header li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:220px;
}

.menu-header li li a, .menu-header li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}

.menu-header li li a:hover, .menu-header li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
text-decoration: none;
}

.menu-header li:hover ul, .menu-header li li:hover ul, .menu-header li li li:hover ul,   .menu-header li.sfhover ul, .menu-header li li.sfhover ul, .menu-header li li li.sfhover ul     {
left:auto;
}
 

Apportez simplement lesmodifications dont vous avezbesoinpour qu'il ressemble à l'exemple que vous avezpublié.

Well first of all you can use the menu feature in the newer WordPress.

First you want to activate the fact that you want to use this feature via your functions.php file.

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' ),  
'secondary' => __('Secondary Navigation', 'your_theme_name')  
) ); 

The above code defines if you have more than one menu. If you want just one menu delete the secondary. If you do this it would look something like this in your functions.php file:

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' )
) );

This will now give you the option to add page items via the menu option under Appearance in the back-end.

Next in your theme you will want to add this to where you want the menu to appear:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' =>   'primary' ) ); ?>

The term "menu-header" will be the class of the div tag that the menu gets put in to. You can change this to whatever class you want the div tag to be in your theme.

Next everything else is done entirely via CSS.

/*****************************************
Style declarations for Top Menu
*****************************************/
.menu-header {
margin-right: auto;
margin-left: auto;
z-index: 10;
}

.menu-header li {
display: inline;
list-style: url(none) none;
float: left;
}

.menu-header ul {
line-height: 31px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.menu-header a, .menu-header a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}

.menu-header a, .menu-header a:visited {
color:#990000;
display:block;
padding:0 20px;
}

.menu-header a:hover, .menu-header a:active, .current_page_item a, #home .on, .menu-footer a:hover {
text-decoration:underline;
}

.menu-header li ul {
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}

.menu-header li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:220px;
}

.menu-header li li a, .menu-header li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}

.menu-header li li a:hover, .menu-header li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
text-decoration: none;
}

.menu-header li:hover ul, .menu-header li li:hover ul, .menu-header li li li:hover ul,   .menu-header li.sfhover ul, .menu-header li li.sfhover ul, .menu-header li li li.sfhover ul     {
left:auto;
}

Just make what changes you need to, to make it look like the example you have posted.

WordPress a des menus denavigationpersonnalisés intégrés.

Enregistrez simplement un theme_locationpour chaquemenu dans functions.php,puis accédez à Dashboard -> Appearance -> Menus pour créer le (s)menu (s)personnalisé (s)et appliquer le (s)menu (s)personnalisé (s) auxemplacements dethème appropriés.

Le resteest une question de CSS (oujQuery,si vous voulez vraiment suivre cette voie).

WordPress has Custom Navigation Menus built-in.

Simply register a theme_location for each menu in functions.php, then go to Dashboard -> Appearance -> Menus to create the custom menu(s), and apply the custom menu(s) to the appropriate Theme Location(s).

The rest is a matter of CSS (or jQuery, if you really want to go that route).