Créer un menu de navigation personnalisé dans WordPress sans utiliser de plugins

Quel que soit le thème WordPress que vous utilisez, il fournira presque certainement au moins un emplacement de menu où vous pourrez afficher votre menu (normalement dans l'en-tête de votre site Web). Les menus peuvent être facilement créés depuis l'intérieur de la zone d'administration et rapidement ajoutés à ces emplacements prédéfinis. Mais que faites-vous si vous avez besoin d'un autre menu à afficher ailleurs sur votre site ? Dans ce tutoriel, nous allons voir comment vous pouvez créer votre propre menu de navigation qui peut être affiché à l'endroit de votre choix sans avoir à utiliser de plugin.

Allons-y!

Enregistrez votre nouvel emplacement de menu personnalisé

La première chose que nous devons faire est d'enregistrer l'emplacement de votre nouveau menu personnalisé. Pour cela, ouvrez le fichier functions.php de votre thème actif avec l'éditeur de texte de votre choix (comme Sublime) et ajoutez le code suivant :

 function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' );

Dans ce morceau de code, nous avons utilisé le add_action() pour ajouter une fonction de rappel my_custom_menu() . Cela signifie que la fonction my_custom_menu() sera exécutée avec les fonctions principales par défaut qui sont exécutées chaque fois que l'action init est appelée. La chaîne "Mon menu personnalisé" est la version lisible que vous verrez dans la page d'administration.

À l'intérieur de la fonction, la fonction principale register_nav_menu est utilisée afin d'enregistrer un emplacement de menu de navigation pour notre thème. Si vous souhaitez enregistrer plusieurs menus, vous pouvez utiliser le register_nav_menus() et définir les emplacements des menus dans un tableau comme celui-ci :

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

Pour confirmer les résultats, rendez-vous dans votre zone d'administration sous Apparence > Menus. Vous remarquerez que l'emplacement de votre menu personnalisé est inclus dans les paramètres du menu.

Remarque : Si nous sélectionnons cet emplacement à ce stade, le menu n'affichera rien du tout sur le frontend.

Comment afficher notre menu personnalisé

Disons que nous voulons que le nouvel emplacement du menu soit utilisé pour un menu horizontal secondaire qui sera situé sous le "Menu horizontal du bureau" qui est déjà présent dans notre thème.

Pour ce faire, nous allons insérer du code dans le modèle du thème où nous voulons que le menu soit affiché. Dans cet exemple, nous utilisons le thème Twenty Twenty et éditons son fichier header.php pour afficher notre menu. Vous trouverez ce fichier sous le dossier du thème.

Ouvrez le fichier header.php avec votre éditeur et trouvez cet élément dans le code autour de la ligne 33.

 <header class="header-footer-group" role="banner">

Juste en dessous de cette section, nous mettrons notre code pour afficher notre nouvel emplacement de menu personnalisé : 'my-custom-menu'.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

La valeur theme_location doit être identique au nom que vous avez fourni pour votre menu dans le code functions.php que nous avons collé auparavant. Dans notre cas : 'mon-menu-personnalisé'.

Créons maintenant un menu de test pour voir si cela fonctionne. Pour ce faire, accédez à Apparence> Menus et commencez à créer un nouveau menu.

Donnez au menu le titre "Menu secondaire", sélectionnez "Mon menu personnalisé" pour un emplacement, puis appuyez sur le bouton "Créer un menu".

Enfin, ajoutez quelques éléments au menu (par exemple, élément de menu 1, élément de menu 2, élément de menu 3), puis enregistrez le menu.

Voyons ce que nous avons maintenant dans le frontend.

Nous avons réussi à montrer notre nouveau menu, mais c'est assez salissant, n'est-ce pas ?

Si nous visualisons notre code source, nous remarquerons que la fonction wp_nav_menu() a créé ce morceau de code HTML

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

Ainsi, nous pouvons utiliser les classes décrites dans le code pour embellir notre menu. Pour ce faire, nous allons utiliser du CSS. Recherchez style.css (il se trouve normalement au même emplacement que le fichier header.php) puis ouvrez-le avec votre éditeur pour ajouter ce code :

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

Le résultat sera beaucoup plus soigné maintenant et beaucoup plus en accord avec le style de notre site de démonstration.

Personnalisation supplémentaire du menu

La fonction wp_nav_menu() que WordPress fournit pour afficher les menus est livrée avec une gamme d'options qui vous permettent de la personnaliser davantage.

' theme_location '

Comme nous l'avons décrit plus haut, ce paramètre correspond aux clés passées à la fonction register_nav_menus() dans functions.php

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );

'classe_menu'

Il y a l'option ' menu_class ' qui vous permet de spécifier votre propre classe pour le menu.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) );

Comme vous l'avez peut-être déjà remarqué, la classe ne remplace aucune autre classe mais est ajoutée dans l'élément ul à la place.

'menu_id'

Contrairement à l'option class, l'option menu_id remplace l'identifiant de menu actuel. Le code HTML généré pour l'élément <ul> ressemblera à ceci.

 <ul class="menu">

Lorsque cette option n'est pas utilisée, l'identifiant sera le slug de menu, qui sera incrémenté lors de l'utilisation de plusieurs instances.

'récipient'

Ce paramètre définit le type d'élément qui entoure le menu. La valeur par défaut est 'div'. Si par exemple vous utilisez ce code :

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

vous obtiendrez ce résultat :

'classe_conteneur'

Il s'agit d'une classe appliquée à l'élément parent du menu :

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) );

Vous pouvez également insérer du contenu avant ou après chaque lien d'élément de menu en utilisant les paramètres "avant" et "après". Ceci est très utile si vous souhaitez ajouter un tiret ou une icône ou envelopper les éléments de menu dans une balise span. Vous pouvez essayer vous-même l'exemple ci-dessous pour voir cela en action :

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

Vous pouvez également ajouter des icônes aux éléments de menu. Essayez par exemple d'installer le plugin Font Awesome pour inclure leur bibliothèque d'icônes et utilisez l'option de menu "avant" pour appliquer une icône font-awesome aux éléments de menu.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

Vous pouvez trouver le code de chaque icône dans la liste des icônes du plugin.

Le paramètre Walker

Enfin, nous donnerons un exemple de la façon dont le paramètre walker aide à personnaliser les menus. Si vous ne savez pas ce qu'est la classe WordPress walker, ce qui suit n'aura probablement pas beaucoup de sens. Nous vous suggérons de lire d'abord "Se familiariser avec la classe WordPress Walker".

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

Pour démontrer la classe Walker, nous ajouterons un "Sous-élément" à notre menu.

Nous remplacerons la classe Walker par défaut fournie par WordPress. Il se trouve dans le fichier wp-includes/class-walker-nav-menu.php. Pour y parvenir, allez dans votre fichier function.php et insérez le code ci-dessous :

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

Maintenant, dans votre headers.php, remplacez votre code de menu par celui-ci (nous afficherons les deux versions de menu exprès juste pour comparer les résultats) :

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

En comparant ce code avec la classe Walker_Nav_Menu d'origine, vous remarquerez que $tree_type et $db_fields sont restés intacts mais que le reste a été modifié. Prenez votre temps et comparez les sorties code et HTML sur ces deux versions du même menu et essayez d'expérimenter vous-même en jouant avec la classe My_Nav_Menu_Walker.

Conclusion

Les menus sur les sites Web sont clairement assez importants ! Pouvoir avoir un contrôle total sur le placement et la sortie des menus étend vos capacités en tant que développeur de thèmes et ouvre une gamme de nouvelles possibilités passionnantes lors de la conception de sites Web sans avoir à s'appuyer sur des plugins, ce qui est toujours agréable à faire.