Ajouter un menu à votre thème WordPress

Partagez si vous aimez ->

Suite à une demande d’une lectrice, j’ai créé cette vidéo pour vous montrer comment ajouter un deuxième menu à votre thème WordPress. Je vous montre pas-à-pas comment j’ai créé le menu « Technique/Pas Technique » qui est situé en haut à droite de ce blog.

Si vous êtes souvent perdu dans vos fichiers de template (sidebar.php, header.php…), regardez ma façon de faire avec Firebug!

[transcription nature= »de la vidéo » titre= »Comment créer un deuxième menu dans WordPress? »]

Bonjour à tous. Ici Marie-Eve du blog les Doigts dans le Net.

Alors à la suite d’une demande d’une lectrice, je vais vous expliquer comment j’ai créé cette partie dans l’entête de mon site. Alors, il s’agit de deux titres « Technique » et « Pas Technique », qui mènent respectivement vers deux pages : l’une qui liste des articles plutôt « Technique » et l’autre qui liste des articles plutôt « Pas Technique ». Donc c’est assez basique.

On pourrait croire que j’ai mis tout simplement deux liens dans l’entête de mon site « en dur », mais ce n’est pas le cas. En fait, j’ai créé un nouveau menu. Donc c’est pour ça que je vais vous expliquer aujourd’hui comment en faire de même sur votre site.

Alors tout d’abord, nous allons revenir à l’état initial, celui où il n’y avait pas de menu. Alors pour ça, je recharge mon site. J’ai supprimé tout le code qui crée ce menu, donc en rechargeant, on ne devrait plus le voir apparaître. Voilà qui est fait. Alors, avant de se lancer dans l’aventure, j’aimerais un petit peu vous expliquer comment fonctionnent les menus.

Comment fonctionnent les menus dans WordPress 01:06

C’est de toute façon essentiel si vous voulez comprendre comment en créer un.

Alors, la plupart d’entre vous, quand vous avez acheté votre thème, il est venu avec un seul menu. Comment est-ce que vous le savez, que vous n’avez qu’un seul menu?

Eh bien, tout simplement quand vous allez dans votre back-office, ici, dans le box « Emplacements du thème », vous n’avez qu’un seul endroit dans lequel vous pouvez configurer un menu. Alors chez moi il s’appelle « Primary menu », ça peut être un autre nom. Ce n’est pas obligatoirement « Primary menu ». Ça peut être en français « Premier menu », ça peut être « Menu principal », ça peut tout ce que vous voulez. Ça n’a vraiment pas d’importance. Ça dépend des thèmes.

Et ici, vous avez pu configurer un menu, le menu que vous avez créé dans la partie de droite. Ça, c’était votre menu principal. Le développeur de votre thème a pensé à un emplacement où faire « remonter » (afficher) ce menu. Chez moi, c’est ici à droite du titre et donc le menu s’affiche automatiquement quand vous le réglez en back-office. Vous n’avez presque rien à faire; c’est très facile.

Vous avez juste à le créer dans le back-office et ça remonte automatiquement. Maintenant le problème: vous êtes un peu bloqué si vous voulez faire un deuxième menu parce que vous n’avez pas la possibilité ici dans « Emplacements du thème » de remonter ce deuxième menu pour l’afficher.

Comment ajouter un deuxième menu dans votre blog WordPress ? 02:26

Mais tout simplement, il va falloir vous créer un emplacement. L’emplacement, donc c’est la zone qu’on a ici et dans laquelle sera affiché un menu. Cet emplacement, il y a deux sous-étapes pour le créer. Tout d’abord, il va falloir déclarer ce nouvel emplacement à WordPress.

Plan du tutoriel pour ajouter un deuxième menu

  • 1/ Phase 1 : créer un nouvel emplacement : (Et ensuite il va falloir dire à WordPress dans quel fichier il faudra afficher les menus qui sont configurés dans cet emplacement. Deux petites étapes pour la première phase.)
    • Étape 1 : déclarer l’emplacement
    • Étape 2 : afficher l’emplacement
  • 2/ Phase 2 : créer un nouveau menu
    (La deuxième phase du processus va être de créer un nouveau menu dans votre back-office.)
  • 3/ Phase 3 : associer le nouvel emplacement au nouveau menu
    Et enfin, la troisième et dernière phase du processus va être de configurer votre nouveau menu sur le nouvel emplacement qui apparaîtra ici. Pour l’instant, ce n’est pas le cas parce que nous n’avons encore rien fait.

1/ Phase 1 : créer un nouvel emplacement de menu 03:24

Alors, passons tout de suite à la première phase du processus, à savoir : créer un nouvel emplacement de menu.

Étape 1 : déclarer l’emplacement du menu

Alors pour cela, nous allons aller dans « Éditeur », votre éditeur ici. Donc moi j’ai déjà ouvert l’onglet, mais vous, vous pouvez aller dans « Apparence », « Éditeur », et pour déclarer un nouveau menu, le code doit se mettre dans le fichier « functions.php » qui est appelé bien souvent « fonctions du thème ». Donc encore une fois, ce titre-là en français peut être différent selon votre thème. Ce qui est important, c’est que le fichier s’appelle bien « functions.php » avec un « s ».

Alors je clique sur ce fichier. Voilà. Il s’ouvre ici sur la partie du milieu et donc en tout début de fichier, je vais tout simplement copier-coller un code qui sert à déclarer un emplacement de menu. Voilà donc : vous-même vous pouvez recopier ce code. Je vais me mettre les codes en dessous de la vidéo. Vous pouvez le recopier et le mettre sur votre site.

Alors qu’est-ce qui est important à comprendre ce code? Tout d’abord, le nom de la fonction qui est utilisée :

register_nav_menus()

. Si vous ne savez pas comment elle fonctionne, vous pouvez toujours aller voir sous le codex de WordPress (http://codex.wordpress.org) qui est en fait une espèce de bibliothèque de toutes les fonctions qui existent sur WordPress et qui vous explique comment les utiliser.

Donc c’est une documentation qui est plutôt à destination des développeurs. Si vous n’êtes pas développeur et que vous ne comprenez rien aux codes, vous pouvez aussi juste recopier le code que je vous propose ici sans trop savoir à quoi il sert. Mais évidemment, moins on sait à quoi il sert, plus il y a de risques de faire des erreurs. Ça, c’est inéluctable.

Alors le mot qui est ici « secondary », c’est l’identifiant qui va être utilisé par WordPress pour repérer ce nouvel emplacement. Et le mot qui est ici, « secondary menu », c’est le label qui va être montré dans le back-office. Alors si vous ne comprenez pas, pas grave. Je vais vous expliquer.

Je vais vous montrer tout de suite ce que ça fait. Pour cela, j’ai besoin d’abord de sauvegarder le fichier. Donc je le sauvegarde. Voilà. Et vous allez voir ce code, ce qu’il a produit dans le back-office ici.

Donc je recharge le back-office du menu et nous voyons que dans le box « Emplacements du thème », il y a nouvel élément qui est apparu, « secondary menu », avec une liste déroulante et donc, je vais pouvoir ici choisir un menu et l’associer du coup à cet emplacement. Bon, ça, ça va être dans la deuxième phase. Pour l’instant, je n’ai pas terminé la première phase du processus.

Étape 2 : afficher l’emplacement du menu sur le site internet

Donc j’ai bien déclaré mon nouvel emplacement, mais je n’ai pas encore dit à WordPress où est-ce qu’il devait afficher cet emplacement dans le thème.

Alors nous, nous le savons, n’est-ce pas ? Nous voulons afficher l’emplacement ici à droite. Donc nous sommes dans l’entête du site. L’entête du site dans WordPress est toujours représentée par le fichier header.php.

Donc je retourne dans mon éditeur ici et cette fois-ci je vais aller dans l’entête (header.php). Vous voyez, c’est le fichier header.php. Je l’ouvre. Voilà. Donc je sais que c’est quelque part dans ce fichier que je vais devoir le faire afficher. Malheureusement pour moi, ce fichier il est assez compliqué, assez long, vous voyez. Il y a beaucoup de codes. On ne sait pas trop à quoi ça correspond.

Alors je vais vous donner une petite astuce pour vous y retrouver plus facilement.

Pour cela, nous allons retourner sur le front. Donc nous savons que notre menu, nous voulons le mettre à droite. Donc je vous propose de faire un clic droit, « Inspect Element with Firebug ». Donc ça va nous ouvrir la petite console ici en bas de Firebug.

Alors, regardez : quand je passe sur un élément dans le DOM ici — cette fenêtre-là on peut appeler ça le DOM — quand je passe ma souris sur un élément, l’élément s’affiche en bleu dans la partie supérieure de mon écran. Donc vraiment sur le front. Donc ce div-là, il correspond à tout le grand div de mon entête. Donc je sais déjà que je suis au bon endroit, mais je veux savoir à quel endroit dans ce div. Alors pour ça, vous avez vu, j’ai cliqué sur la petite croix pour ouvrir le div. Je vais pouvoir me balader ainsi. Vous voyez, par exemple quand j’essaie le div, il y a donc le slogan de mon site qui se met en surbrillance. Donc ça me permet de savoir où j’en suis.

Ah, voilà. Ici quand je l’ouvre sur le nav, je suis sur mon menu principal et ensuite le div qui est juste après donc, c’est le div conteneur. Donc je sais que je vais devoir placer mon nouveau menu juste après le premier menu et juste avant que le conteneur parent ne se ferme. Donc pour ça, je vais retourner maintenant sur mon éditeur, je vais fermer Firebug qui nous empêche un peu d’y voir.

Donc je fais Ctrl + F pour afficher la petite barre de recherche en bas, je vais chercher nav puisqu’on sait qu’on recherche une navigation. Donc je recherche nav. Je fais F3, ou vous pouvez cliquer sur « Suivant » pour mettre en surbrillance le prochain nav qu’il va trouver et donc ici, j’ai bien

wp_nav_menu(array (theme location', 'primary'));

. Donc je sais que ce code-là, c’est le code qui remonte mon premier menu.

Vous voyez, ce n’est pas tout à fait la même chose que le code qu’on avait ici. Ici, on a vraiment une balise nav avec à l’intérieur une balise « ul » et une balise « li ». On n’a pas du tout ce code HTML qui se retrouve dans header.php. Il ne faut pas être surpris de ça ; c’est parce qu’on utilise ici une fonction, une fonction propre à WordPress, qui va aller chercher le menu qui correspond au « theme location primary ».

Donc si on regarde dans l’interface d’administration des menus, on avait bien ici donc un « Theme location primary » dans lequel j’ai mis une navigation principale et donc c’est normal qu’ici remonte ma navigation principale.

Donc nous, ce qu’on nous voulons qu’il fasse, c’est exactement la même chose, mais pour notre deuxième menu. Donc je vais copier-coller ce code un peu en dessous et je vais changer le « Theme location ». Ça ne va plus être « primary », ça va être « secondary ».

Si ça vous embrouille, sachez que vous pouvez aussi afficher votre menu en affichant simplement la première partie. Donc ici, il faut fermer, mettre le point-virgule. Voilà. Si déjà vous copiez collez ce code-là à l’emplacement que vous voulez dans votre thème, ça devrait déjà suffire à faire remonter le menu en question. Je mets à jour le fichier.

2/ Phase 2 : créer un nouveau menu dans le back-office de WordPress 10:32

Et maintenant donc, je vais pouvoir passer à la deuxième phase de mon processus, à savoir créer véritablement mon menu. Donc je clique ici sur la petite croix pour créer un nouveau menu. Voilà. Je vais l’appeler « Liste d’articles » et je crée le menu.

Voilà. Mon menu, c’est tout simplement deux liens vers deux pages de mon site. Donc je vais ici dans mon petit box page et je vais aller chercher donc mes deux pages en question. Voilà, et je les ajoute au menu. Voilà, elles ont été amenées ici.

Maintenant, je vais changer les intitulés parce que « Création de sites Web, le côté pas technique », c’est un peu long. Donc je vais juste l’appeler « Pas Technique » et l’autre, je vais juste l’appeler « Technique ». Voilà. J’enregistre le menu. Voilà, mon menu est enregistré.

3/ Phase 3 : associer le nouvel emplacement au nouveau menu 11:34

Et donc il me reste la troisième phase du processus, à savoir lier mon emplacement à mon menu. Et ça, c’est fait avec le petit box ici, « Emplacements du thème ». Donc dans ce « secondary menu », je vais pouvoir lui dire : mon emplacement « secondary menu » correspond à mon menu « Liste d’articles » et j’enregistre.

Donc maintenant, si j’ai bien tout fait, je devrais pouvoir recharger en « front-end » et avoir ici donc mon menu qui apparaît dans mon nouvel emplacement. Je vais tout de suite vérifier.

Et en effet, j’ai donc bien mon menu qui apparaît ici « Pas Technique » et « Technique ». Le seul petit problème, c’est que moi je voulais « Technique » d’abord et « Pas Technique » ensuite. Bon ça, je peux vous montrer : c’est assez facile.

Quand on est dans le back-office, dans le menu, on peut tout simplement glisser-déposer des intitulés comme ça, voilà. Hop! Et donc, je mets « Technique » en premier et « Pas Technique » en deuxième. Voilà. J’enregistre le menu. Et maintenant, tout devrait être bon. Et c’est bien le cas en effet.

Alors si vous avez des problèmes au niveau de l’affichage ici de votre menu, bien vous devez vous tourner vers votre fichier CSS que pour organiser les liens, mettre des images, voilà, mettre des couleurs au survol. Tout ça, ça se fait en CSS. Ici, je ne vous le montre pas parce que je voulais qu’on reste bien concentrés sur la création de menus. C’est déjà assez compliqué comme ça.

Récapitulatif des étapes pour ajouter un deuxième menu dans WordPress

Alors je récapitule bien les trois étapes ou plutôt les trois phases.

Phase 1 : créer un nouvel emplacement

  • Étape 1 : déclarer l’emplacement >> functions.php
  • Étape 2 : afficher l’emplacement >> header.php (ou un autre template)

Première phase : déclaration du menu qui est en deux sous-étapes. D’abord, déclarez le nouvel emplacement dans le fichier « functions.php » et deuxième sous-étape, gérer l’affichage de cet emplacement dans votre thème. Donc dans mon cas, c’est dans le fichier « header.php ».

Vous pouvez également le remonter dans n’importe quel fichier de votre thème qui s’affiche ici en front. Ça peut être par exemple « sidebar.php » (pour la colonne de droite) ou d’autres fichiers.

Phase 2 : créer un nouveau menu

>> Back-Office de WordPress

Ensuite, deuxième phase : créer le menu en back-office ici, sur votre partie de droite.

Phase 3 : associer le nouvel emplacement au nouveau menu 13:51

>> Back-Office de WordPress

Et enfin, troisième et dernière phase : associer votre nouveau menu à l’emplacement d’un menu que vous venez juste de déclarer. Vous enregistrez le tout, vous rechargez votre front et ça devrait être bon.

Bien, je vous souhaite beaucoup de plaisir à personnaliser votre site Web. Si vous avez un problème, n’hésitez pas à me poser des questions. Merci beaucoup! Au revoir.

http://lddln.mypointcom.net
[/transcription]

Comment ajouter votre deuxième menu WordPress

Phase 1: créer un nouvel emplacement

  • Etape 1: déclarer l’emplacement
    Copier ce code dans le fichier functions.php

    register_nav_menus(array(
    'secondary' => __('Secondary Menu', 'vertulab'),
    ));
    
  • Etape 2: afficher l’emplacement
    Copier ce code dans le fichier header.php (ou un autre template en fonction de l’endroit où vous voulez l’afficher)

    /* wp_nav_menu génère le code HTML pour afficher le menu */
    wp_nav_menu(
    array(
    'theme_location' => 'secondary', /* identifiant du menu pour WP */
    'menu_class' => 'menu-secondaire', /* classe css */
    'container' => 'div', /* élément HTML conteneur */
    'link_before' => '', /* élément HTML avant le lien */
    'link_after' => '' /* élément HTML après le lien */
    )
    );
    

Phase 2: créer un nouveau menu

>> Back-Office de WordPress

Phase 3: associer le nouvel emplacement au nouveau menu

>> Back-Office de WordPress

[ctamodifthemewp]

Vous avez un site WordPress ? Vous voulez le modifier mais…

  • Vous ne savez pas par où commencer ?
  • Vous avez peur de casser votre site et d’être bloqué ?
  • Vous ne trouvez jamais le bon fichier ?
  • Vous perdez un temps fou à chaque modification ?
  • Le code vous impressionne ?
  • Vous n’avez pas de méthode de travail ?

Vous n’êtes pas seul ! De nombreux lecteurs de Les Doigts dans le Net sont dans votre situation.

J’ai préparé spécialement pour vous une formation pour vous aider. Inscrivez-vous avec le formulaire ci-dessous pour enfin modifier votre site WordPress comme vous voulez (gratuit et sans engagement) :

Modifier un thème WordPress : la méthode pas-à-pas

Bientôt disponible – Inscrivez-vous gratuitement pour ne pas rater la sortie





Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons