Maintenant que nous savons comment créer un thème WordPress de base à partir de zéro, regardons comment créer un menu de navigation personnalisé à notre thème. Ce menu devrait avoir la capacité d’être contrôlé à partir du tableau de bord de WordPress. En d’autres termes, vous devriez être en mesure d’aller dans le tableau de bord et d’ajouter ou de supprimer des liens vers les pages, les articles ou les catégories que vous souhaitez. À la fin de ce tutoriel, c’est exactement ce que nous aurons. Creusons et voyons comment accomplir cet objectif.
Ouvrir header.php
Allez-y et ouvrez le fichier header.php du thème sur lequel nous avons travaillé. Notre objectif sera d’ajouter un menu qui vit au-dessus du contenu principal du site mais en dessous du nom du site et de la zone d’accroche. Pour ce faire, nous pouvons ajouter le code suivant :
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Notez que nous faisons usage d’une fonction spéciale qui nous est fournie par WordPress de wp_nav_menu(). Cette fonction prend en charge tout le travail de jambe pour vous dans la construction d’un menu personnalisé. Vous n’avez pas à taper manuellement tout le html vous-même, ce qui est très utile. Maintenant, nous n’avons pas encore beaucoup de pages, mais si nous visitons notre site de test, la fonction sort déjà un lien vers la page d’exemple qui existe sur notre installation.
Passer des arguments à la fonction wp_nav_menu()
Comme la plupart des fonctions dans WordPress, vous pouvez passer des arguments optionnels à la fonction wp_nav_menu(). Ici, nous allons mettre en place un tableau et configurer une seule option. Nous utilisons un tableau au cas où nous voudrions passer plusieurs options à l’avenir. Voici comment nous pourrions ajouter ce bout de code.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Cette option nous donne un moyen de nommer certains menus dans notre thème. Nous pourrions vouloir avoir plus d’un menu, et c’est la méthode par laquelle vous pouvez différencier plusieurs menus.
Enregistrer l’emplacement du menu dans functions.php
Pour pouvoir utiliser le menu que nous venons de créer dans notre fichier header.php, depuis le tableau de bord d’administration de WordPress, nous devons enregistrer l’emplacement du menu dans le fichier functions.php du thème. Comment enregistrer notre nouveau menu auprès de WordPress ? Nous pouvons le faire avec la fonction register_nav_menus() intégrée à WordPress. Enregistrons notre menu comme suit.
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Configurer notre menu personnalisé dans WordPress Dashboard
Notre nouveau menu devrait maintenant être enregistré avec le noyau de WordPress. WordPress est maintenant conscient de notre menu, et de son emplacement dans le thème. Nous pouvons maintenant aller dans le tableau de bord, créer un nouveau menu, et gérer l’emplacement de celui-ci. Plus précisément, nous voulons qu’il apparaisse là où nous avons utilisé la fonction wp_nav_menu(). Nous allons visiter Apparence->Menus et ensuite cliquer sur ‘créer un nouveau menu’.
Nous pouvons nommer ce menu comme bon nous semble. Nous allons juste choisir Menu principal pour rester simple, et ensuite cliquer sur ‘créer un menu’.
Dans cette prochaine étape, nous allons créer des liens vers toutes nos catégories. Nous pouvons donc choisir Catégories, Sélectionner tout, mettre à jour l’emplacement d’affichage à ‘Menu principal’, puis cliquer sur ‘Enregistrer le menu’. Essayons-le.
La visite de notre site nous montre que nous obtenons maintenant un lien vers chaque catégorie dans le nouveau menu que nous avons créé. Ce n’est qu’une liste non ordonnée pour le moment, et ce n’est pas le plus joli pour le moment – mais cela fonctionne !
Quel est l’avantage d’enregistrer votre menu personnalisé ?
Je sais, je sais. Vous pensez que cela n’a même pas de sens de passer par tout ce battage juste pour obtenir quelques hyperliens vers certaines catégories à afficher sur votre site. D’une certaine manière, vous avez raison. Pourquoi ne pas simplement construire manuellement certaines de ces choses vous-même. Bien sûr, cela peut être fait, mais lorsque nous construisons notre menu comme nous l’avons fait ici, nous avons maintenant la puissance du tableau de bord de WordPress pour contrôler le code que nous avons inclus dans notre thème. Nous pouvons maintenant facilement glisser et déposer l’ordre des liens, entre autres choses, directement depuis le tableau de bord. Changeons l’ordre de WordPress, PHP, JavaScript en JavaScript, WordPress, puis PHP. Très facile !
Maintenant, lorsque vous visitez le site, l’ordre des liens dans le menu est mis à jour. Aucune manipulation du code sous-jacent n’est nécessaire avec cette approche.
Style ce menu personnalisé
Cette liste non ordonnée ne va tout simplement pas le couper ! Nous devons rendre les choses un peu plus astucieuses que cela. Passons un peu de temps à appliquer un CSS personnalisé pour nettoyer un peu ce menu. Tout d’abord, nous voulons transformer la liste non ordonnée orientée verticalement en un menu orienté horizontalement. Nous souhaitons également supprimer les puces de chaque élément de la liste, ajouter du rembourrage et de la marge, ainsi que supprimer le soulignement des liens. Voici un coup de couteau pour créer cet effet dans notre fichier style.css.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Il se passe un peu beaucoup de choses dans le CSS listé ci-dessus. Passons en revue. Dans le premier sélecteur .navigation-menu ul, nous supprimons tout le padding et la marge de la liste non ordonnée. Ensuite, nous nous assurons que la liste non ordonnée efface les flottants des enfants de la liste. Dans le sélecteur .navigation-menu ul li, nous supprimons les puces de la liste, nous faisons flotter les éléments de la liste sur la gauche et nous ajoutons une petite marge sur la droite. À la fin, nous ciblons les liens. Nous les transformons d’abord en éléments de niveau bloc avec un padding de 12px vertical et 17px horizontal. Nous ajoutons un bel effet de bordure et supprimons le soulignement sur les liens. Regardons maintenant dans le navigateur. 
Nice ! Ce menu a l’air beaucoup mieux qu’il ne l’était initialement.
Comment ajouter une couleur personnalisée au survol du menu
Les ins de style de base en place. Il pourrait être agréable d’avoir un peu d’effet de survol quand on déplace la souris sur chaque lien. Ceci est très facile à configurer en utilisant le snippet suivant:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Cela a l’air plutôt bien!
Comment cibler l’état actif d’un élément de menu
Une autre chose que nous pourrions aimer ajouter est la possibilité de personnaliser la couleur d’un lien actif. Ceci est différent du simple effet de survol. Dans ce cas, lorsque nous visitons un lien particulier du menu, nous voulons que WordPress soit conscient qu’il s’agit maintenant de la page active consultée et qu’il mette à jour la représentation visuelle pour refléter le lien actif. Pour ce faire, nous pouvons utiliser une classe spéciale qui est intégrée à WordPress pour répondre à ce besoin. Il s’agit de la classe current-menu-item. Voici comment nous pouvons l’incorporer dans notre menu personnalisé.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Si nous visitons notre site maintenant et testons la visite des différents liens dans le menu personnalisé, nous pouvons voir que cela a l’air très bien. Nous avons maintenant un aspect particulier pour l’état de survol, et un aspect différent pour l’état actif des liens dans notre menu. C’est une excellente façon de s’assurer que les visiteurs de votre site savent où ils sont actuellement en gardant le menu actif allumé pour ainsi dire.
Comment créer un menu personnalisé dans WordPress Résumé
Dans ce tutoriel, nous avons bien regardé comment ajouter un menu personnalisé à notre thème personnalisé dans WordPress. Nous avons utilisé quelques fonctions de WordPress pour nous aider. La première que nous avons utilisée est wp_nav_menu(). Cette fonction peut automatiquement construire une liste non ordonnée et des éléments enfants pour créer la structure d’un joli menu auquel vous pouvez appliquer du style. Il existe de nombreux arguments que vous pouvez passer à cette fonction, mais nous nous sommes concentrés sur les éléments de base ici. La fonction suivante que nous avons utilisée est la fonction register_nav_menus(). Cette fonction nous permet d’informer WordPress de notre nouveau menu et de l’intégrer dans le tableau de bord de WordPress. Une fois que notre nouveau menu a été enregistré auprès de WordPress, nous avons constaté qu’il était facile d’ajouter ou de supprimer tout ce que nous voulions dans ce menu, directement depuis le tableau de bord de WordPress et sans avoir à modifier le code des fichiers de notre thème. Enfin, nous avons pris le temps d’améliorer l’apparence de notre menu en utilisant un style CSS personnalisé.