Ajouter un menu à votre thème WordPress

Ajouter un menu à votre thème WordPress

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!

Cliquez ici pour afficher la transcription de la vidéo :
« 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://lesdoigtsdanslenet.com

Fin de la 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' => '<span>',		/* élément HTML avant le lien */
    		'link_after' => '</span>'		/* é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

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





faire un deuxième menu wordpress, faire un menu wordpress, modifier menu wordpress, modifier son thème wordpress, tutoriel

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

60 commentaires

  1. Bonjour Marie-Eve,

    J’ai essaye de mettre en place ce fameux 2ème menu… mais hélàs je n’ai pas de « wp_nav_menu » dans mon fichier header.php

    Quand je réalise l’astuce que tu as donné avec Firefox, pour l’en-tête, il me donne :
    Du coup en place le bout de code que tu as donné… ça ne fonctionne pas… :-(

    Comment puis-je faire ?

    Merci d’avance.

    PS : es-tu revenu de vacances ?

    Répondre
    • Bonjour Séverine,
      Oui je suis bien rentrée de vacances :) sous le soleil Marseillais, la reprise n’est pas trop dure.

      Dommage, ton commentaire a été coupé…on ne peut pas mettre de code dans les commentaires.

      1/ As-tu réalisé l’étape 1 de la première phase : à savoir, as-tu un deuxième emplacement dans ton back-office ?

      2/ Où souhaites-tu placer ton deuxième menu sur ton site ?

      A de suite :)

      Répondre
  2. Bonjour Marie-Eve,

    Je viens de suivre avec attention ta vidéo : un super boulot pédagogique qui ouvrent de nombreuses perspectives à tous ceux qui souhaitent modifier leur thème de base mais qui ne connaissent pas grand chose au code.
    Je vais donc réfléchir pour voir si je peux mettre en pratique ta vidéo sur mon blog, mais avant ça, il faut que je détermine un emplacement judicieux et que j’ai une idée de ce que je veux raconter dans ce menu !

    Encore une fois merci pour ce partage de tes compétences !

    Répondre
    • Merci Nath’ pour ton retour! :)
      C’est toujours un peu l’angoisse quand je publie une vidéo tutoriel…j’ai peur qu’on ne comprenne pas.

      C’est le désavantage de la vidéo, je ne peux pas voir la réaction de l’apprenant. J’ai plus l’habitude des cours particuliers… 😉

      Contente que ça t’ait plu!

      Répondre
  3. Salut Marie-Eve :)

    Il me semble qu’il y a plus simple pour créer un menu. Je me rappele que dans le thème WordPress que j’ai créé, je n’avais pas spécialement fait d’emplacement pour les menus. J’ai créé un menu du côté de l’admin wordpress, puis j’ai mis ça dans le thème :

    wp_nav_menu( array( ‘menu’ => ‘nom_du_menu’));

    Bon ok c’est peut-être un tout petit peu moins propre parce qu’on ne gère pas d’emplacement, mais je pense que c’est suffisant, non ?

    Bonne continuation :)

    Répondre
    • Salut Julien :)

      Ah ben tiens, je ne savais pas qu’on pouvait se passer de l’emplacement! En même temps, c’est logique (techniquement)…

      Par contre, le menu DOIT avoir le même nom que celui que le paramètre ‘nom_du_menu’ dans : wp_nav_menu( array( ‘menu’ => ‘nom_du_menu’)); Du coup, on ne fait pas comme ça quand on crée un site pour un client.

      Car si effaces ton menu dans 6 mois et tu en créé un autre en changeant le nom (parce que tu auras oublié que tu as mis le nom direct dans le template), tu auras un bug sans savoir d’où il vient (on appelle ça une erreur silencieuse car il n’y a pas de message d’erreur).

      Bref, j’imagine que ça ne te concerne pas car tu m’as l’air de savoir ce que tu fais. 😉

      Merci de ton passage :)

      Répondre
  4. Bonjour Marie-Eve,
    Merci pour ce beau tuto, je vais enfin me lancer dans l’amélioration de mon thème de base, à savoir Mystic. En effet, j’ai l’expérience de création de sites en html, css, mais sous WP, j’avais peur d’aller triturer les codes. Avec cette démo, je commence à percevoir l’architecture et je vais étudier celà de plus près.
    N’ai pas peur de faire des vidéos, c’est super de partager ces connaissances techniques, je t’encourage à persévérer. Je sais que ça prend du temps, la qualité est là. Un grand merci!

    Répondre
    • Bonjour Hélène,
      Il me semble que mystique est un theme-framework et que tu as une page de configuration spéciale pour créer de nouveaux menus (je suis pas trop sûre…on m’avait parlé de quelque chose comme ça).

      Quoi qu’il en soit, tu peux toujours appliquer la procédure que je donne ici, ça fonctionnera aussi 😉

      Merci pour ton retour sur les vidéos! En effet, ça prend beaucoup de temps…alors ça fait plaisir d’avoir l’avis de mes lecteurs (ou spectateurs plutôt :p )

      A très bientôt

      Répondre
  5. Merci pour l’astuce, c’est simple claire, il ne me reste que le teste. J’en aurai besoins bientôt sur mon site perso de recette marocaine. je ne suis un bon développeur mais je me débrouille pas mal.

    Répondre
  6. Bonjour Marie-Eve,
    J’ai déjà réussi les deux premières étapes, mais je suis bloqué à la troisième. Il y a un bug quand j’associe le nouvel emplacement au nouveau menu. Quelle astuce pouvez-vous me donner? Merci pour la vidéo ! Bonne journée ! :)

    Répondre
    • Bonjour Simone,
      Je pourrais vous aider si vous m’en dites un peu plus sur le bug: donnez moi le message d’erreur s’il y en a (il peut y en avoir à deux endroits : écrit sur la page directement ou dans la console de firebug) ou au pire, décrivez moi le comportement inadéquat.
      A de suite :)

      Répondre
  7. Ha ! c’est pas mal ça d’autant que j’essaye en ce moment d’essayer de me faire une petite sidebar noir sur mon blog 😀

    Répondre
    • Je viens d’aller voir ton site et je trouve ça sympa la sidebar à gauche. J’espère que tu as bien pensé ça en terme de conversion, sinon tu te tires une balle dans le pied.

      Amicalement,

      Répondre
  8. C’est aussi simple que ça ?… Cool !

    Une question : comment pérenniser ce changement ?

    Je m’explique …

    J’utilise le thème toto, j’ai ajouté mon second menu perso et je suis bien content !
    Un mise à jour de mon thème toto, importante, est publiée. Résultat : le fichier header.php est modifié et mes ajouts sont perdus.

    Peut-on éviter ça ?…

    Répondre
    • Bonjour Grégory,

      Question très pertinente 😉 et je te rassure, il y a une façon assez simple d’éviter cela.

      il faut passer par un « thème enfant ». La procédure n’est pas très compliquée (regarde sur le codex) pour créer le thème enfant. Ensuite il faut l’activer comme n’importe quel thème et importer le css du parent.

      Ensuite, voilà comment ça fonctionne : tous les fichiers de l’enfant sont utilisés à la place de ceux du parent. Donc si tu créé « header.php » dans le thème enfant, c’est lui qui sera utilisé à la place de celui du parent. Exception à la règle : les deux « functions.php » sont fusionnés.

      Tu mets tes changements dans le thème enfant et tu pourras mettre à jour ton thème parent sans risquer d’écraser tes changements.

      Je ferais une suite vidéo sur cette manipulation assez longue, que je réserverais sans doute aux membres du blog (un espace membre gratuit est en cours de création). Si tu veux, tu peux t’abonner pour être tenu au courant.

      A+

      Répondre
  9. Merci MarieEve pour cette belle presentation.

    Répondre
  10. Est-ce que tu peux nous dire comment inserer une icone comme les tiennes?

    Répondre
    • Bonjour Elmokhtar,
      Ok je prévois une petite procédure pour vous montrer ça :)
      J’en ai d’autres dans la todo-list mais celle-ci est beaucoup plus courte à faire, elle prendre peut-être la priorité….à suivre 😉

      Si tu as envie de chercher par toi-même, voici un début: j’ai utilisé un background-image + un padding sur les li.

      Si c’est du chinois, pas de stress…je te montre tout ça en vidéo très bientôt :)

      A++

      Répondre
  11. Non pas du tout chinois, c’est plutot japonais :-).Je suis nul en technique.

    J’attend alors ton tuto.

    Merci MarieEve

    Répondre
  12. bonjour,
    ton tuto m’a beaucoup aidé ! merci ! J’ai mis le nez dans WordPress en créant moi-même mon template/thème. Je buggais sur les menus mais grâce à toi, je sais maintenant les créer. Par contre, ton code ne fonctionnait pas : il manquait une parenthèse à la fin : tu avais écris :
    wp_nav_menu(array(‘theme_location’ => ‘secondary’);
    alors que c’est
    wp_nav_menu(array(‘theme_location’ => ‘secondary’));
    avec fermeture de la parenthèse à la fin !

    voilà, merci et bonne continuation !

    Élodie

    Répondre
    • Bonjour Elodie,
      Merci d’avoir pris le temps de m’indiquer cet oubli. C’est quand même ballot de donner un code avec une erreur :/

      J’ai édité ton lien, il manquait un « w », maintenant on est quitte 😀

      Si je peux me permettre une remarque sur ton site: tu devrais mettre une photo de toi. Etant donné que tu vends tes services, je pense que ça pourrait t’aider à créer un climat de confiance. Sinon, le site est frais, dynamique et original. Je suppose que c’est une création maison ?

      Encore un mot sur tes ancres: tu peux les faire pointer sur un div avec un « id » plutôt qu’un lien avec un « name ».
      Exemple: Contact pointe sur

      Ca t’évitera de créer des liens vides dans ton code, juste pour faire des ancres. Ton code sera ainsi plus propre.

      A très bientôt!

      Répondre
  13. Bonjour Marie-Éve,
    merci pour ces conseils, je m’en occuperai quand j’en aurai le temps !
    Vu que tu as l’air super calée, je voulais te demander un conseil sur WordPress qui n’a rien a voir avec cet article. Je dois faire un site pour une association de sport. Je vais utiliser WordPress pour le faire, mais je ne connais pas très bien cet outil. Le site devra disposer d’une partie publique, mais aussi d’une partie membre ou le formulaire pour se connecter serait dans la sidebar. Une fois connectés, les membres pourraient accéder à des pages, notamment à des calendriers, où chacun pourrait renseigner sur sa présence au matchs. Conaitrais-tu des plugins ou quelque chose pour créer cela ? Un pour une partie membre et un pour gérer des calendrier ?

    Élodie

    PS: je trouve très bien que les femmes mettent le nez dans le camboui du code d’un site !

    Répondre
    • Salut Elodie,
      En natif, WordPress dispose d’un espace membre mais il est un peu limité. Il existe des plugins gratuits pour pousser un peu les limites (comme WP-PRIVATE) mais ceux que je connais ne sont plus à jour (tu t’exposes donc à des failles, et si c’est pour un client, ça ne fait pas très sérieux). Il doit en exister d’autres.

      Moi, j’utilise MemberShip Manager (plugin payant) mais c’est surtout parce que je voulais que les nouveaux abonnés soient inscrits sur ma liste de diffusion SG. Si tu n’as pas besoin de cette fonctionnalité, tu devrais trouver ton bonheur parmi les gratuits…mais désolée, je ne les connais pas de tête.

      Sur Autourdututo.fr, tu devrais trouver des pistes…

      Pour les calendriers, je connais pas, mais ça doit exister!

      Bon courage!

      Répondre
  14. Bonjour,

    Merci pour cette vidéo très didactique. Pour ma part, les deux premières étapes me servent beaucoup. Par contre, je voulais mon second un menu en vertical sur le côté gauche ou droit de ma page (à la place des widget en gros..).

    Où dois je réaliser la manip de l’emplacement?

    Merci encore. Ce site est très bien!

    Répondre
    • Bonjour Chloé,

      Il faut aller dans Apparence > Widget puis choisir le widget « menu personnalisé ». Glisse le dans la sidebar et choisit ton menu ! C’est tout simple :)

      Répondre
  15. Bonjour Marie Eve

    Simplement pour dire un tout grand merci pour le partage , une vidéo explicite, 5 min pour créer ce nouveau menu.

    je continue ma visite, encore tellement de chose à apprendre. Bien que les touches du clavier se rapproche violemment :) au vu de l’heure , mais je reviendrai

    Excellente nuit

    Répondre
    • Bonjour,
      Ravie que mon tuto ait pu t’aider :) Bonne continuation, et n’hésite pas à revenir par ici.

      Répondre
  16. Bonjour MarieEve et merci pour ce tuto. Tout fonctionne mais comme tu le dis toi même dans la video, c’est toujours mieux de savoir ce que le code contient plutôt que de le recopier simplement.

    Sans être un pro du PHP, j’ai quand même quelques notions et j’aimerais savoir à quoi correspond ‘vertulab’ dans le array du code du fichier function.php. Je ne trouve rien à ce propos…

    Merci et encore bravo.

    Répondre
    • Bonjour Robin,

      Vertulab, c’est simplement le nom de mon thème. Tu le vois parce que les fonctions de traductions font références au thème dans lequel se trouvent les fichiers de langues. Je vois que tu as le soucis du détail, tant mieux, le détail compte beaucoup en programmation.

      Répondre
      • Merci!

        Et pour le array dans functions.php, tu dis qu’il n’est pas nécessaire de copier les 4 dernières lignes. J’imagine qu’elles servent à faciliter la mise en place du style. Est-ce que tu recommandes tout de même fortement de l’utiliser?

        Autant faire bien dès le début… 😉

      • Bonjour Robin25,

        Si tu ne les mets pas, elles sont quand même là car ce sont les valeurs par défaut. Donc en fait, je te conseillerais de les mettre que si tu souhaites les modifier.

      • OK c’est parfait! Enfin des explications claires nettes et précises. C’est pas le cas partout ailleurs. J’ai failli abandonner WP et continuer à faire mes sites à l’ancienne.

        Allez, je me lance dans mon premier thème!!!

        Merci.

      • Enfin des explications claires nettes et précises.

        Merci :)

  17. Bonsoir et un grand merci pour ces superbes explications, je cherchais cela depuis des mois :)
    J’ai tout bien fait, MAIS… je bugue pour réaliser un menu spécial sur la partie « blog » de mon site.
    Je ne veux pas deux menus mais un pour deux parties.
    On m’a conseillé de créer un « modèle de page » et jusque là, tout est ok.
    Le modèle de page (template_blog) est bien créé, le second menu aussi mais pour l’instant, seulement dans fonctions.php (register_nav_menus) car sinon, si je l’ajoute dans le header.php, je me retrouve avec deux menus :) donc en effet, je cherche à ne mettre que le second pour la page template_blog.
    J’avoue qu’après je sèche et je ne voudrais pas vous ennuyer avec ça…

    Répondre
    • Bonjour M-E,

      Comment créer un second menu juste à assigner au blog, par exemple ?
      La communauté WP se penche sur la question :)

      étape 1, création d’un modèle de page spécifique = ok
      étape 2, functions.php pour l’emplacement du menu B = ok
      étape 3, script et déclaration dans le leader.php pour aller chercher ce menu seulement pour le modèle de page. Et là, on coince…

      Car c’est intéressant de pouvoir avoir plusieurs menus pour des pages spécifiques (ex, boutique etc…).

      Merci !!

      Répondre
      • Merci beaucoup !!
        Oui, c’était bien clair, ton tuto m’a vraiment aidée.
        Super, super :o)
        J’ai juste maintenant un autre soucis, mon menu secondaire « blog » existe bien mais dès que j’ouvre un article (la catégorie est bien présente dans ce menu secondaire) je repasse systématiquement au menu général et principal…
        C’est bizarre…
        Je creuse, je creuse et vous dis, si je trouve pourquoi…

        Bonne journée !

  18. Bonjour Marie-Eve et merci beaucoup pour ce super tuto bien didactique.

    De mon côté, j’ai un petit souci de disposition de mon sous-menu (regarde par ici: http://www.new.acdesign.ch). Comment faire pour que mes sous menus s’affichent en dessous de la page parent? Faut-il aller dans le css ou autre?

    Merci de tes lumières et bonne soirée.

    Farah

    Répondre
  19. Bonjour Marie Eve,

    Merci pour ce tuto qui m’a permis d’ajouter un deuxième menu …
    Cela dit,
    Je ne sais pas comment faire pour customiser et donner forme à ce menu.
    Pour le moment c’est des mots, un sur l’autre, alors que je les veux aligner au milieu avec un design particulier.

    http://www.mejdaben.com voilà mon site, et j’ai situé le deuxième menu juste sous la galerie flash de la page d’accueil

    Je veux que ça soit comme sur le modèle de mon template:

    http://luiszuno.com/blog/downloads/folder-wordpress-theme/

    Est-ce que tu as un tuto pour régler ce problème …?

    Et comment faire pour ne pas retrouver ce même menu lorsqu’on navigue dans les pages du 1er menu (Top) ?

    Répondre
    • Bonjour Mejdaben,

      Pour modifier le design, il faut mettre les mains dans le CSS. Côté méthodo, j’explique tout dans cet article : http://lesdoigtsdanslenet.com/modifier-css-5-minutes/

      Par contre, si tu ne connais pas du tout css, je te conseille cette initiation de mon cru : http://lesdoigtsdanslenet.com/initiation-html-css/presentation-de-la-formation/

      Enfin pour ton dernier problème, tu peux isoler ton code sur ton template par une condition afin qu’il ne soit exécuté que sur la « Front Page » (qui est en fait la page d’accueil)
      <?php if (is_front_page()) { ?>LA TON CODE POUR AFFICHER<?php } ?>

      Petite remarque : sur ton modèle de template, ce sont des mots-clefs ou des catégories qui s’affichent là automatiquement pour trier les éléments du portfolio ou de ton blog. Mais tu peux reproduire ce principe avec un menu + un peu de css en effet.

      Bon courage !

      Répondre
  20. salut merci pour votre tuto
    je trouve pas le wp_nav_menu(array(‘theme_location’ => ‘secondary’));
    dans le fichier header.php de mon theme je veut appliquer l’emplacement du menu mais je sais pas comment faire ce que je trouve c ça:

    <li ><a href=" »>

    Répondre
    • Bonjour,

      Vous devez écrire vous-même le code wp_nav_menu(array(‘theme_location’ => ‘secondary’)); dans le fichier de votre choix, là où doit apparaître le menu. Est-ce bien dans header que vous voulez le mettre ?

      Répondre
  21. Bonsoir, Merci pour ce tuto. Je dois vraiment être nulle
    dans la mesure où je n’ai pas réussi à avoir le résultat escompter.
    J’utilise le thème football-2. actuellement nous avons un site qui
    a été crée il y a deux an par un membre du club de foot. Le site
    est tel que je suis en charge de le refaire complètement. Du coup
    j’ai acheté le thème, et je suis actuellement en local sur mon mac
    afin de le terminer avant de le publier. J’ai tellement de sous
    menus que je voulais créer un deuxième menu sur une seule page avec
    une barre de navigation secondaire sur le côté gauche ou droit, peu
    importe. J’ai donc crée un nouveau modèle de page via un tuto:
    get_the_title())); ?> La création
    du menu secondaire, pas de problème, enfin quelquechose que j’ai
    réussi. Puis j’ai collé votre code car je veux le menus secondaire
    uniquement sur ce modèle de page /* 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 */ ) );
    J’ai du me tromper quelque part dans la mesure où j’ai une barre
    latérale à droite de ma page (barre qui définissait la frontière
    entre le contenu de ma page et le widget de droite article
    archives) mais pas de menu secondaire sur cette page. Dans la
    navigation Primaire j’ai un onglet Match avec en sous lien: Agenda
    de la semaine, scores et classements. Dans la mesure où je dois
    rentrer ces 3 infos pour l’équipe séniors, les vétérans, les U 19,
    les U 17 (2 équipes),….., les U11 (6 équipes), un menu secondaire
    de chaque équipe aurait été parfait: Par exemple pour le menu
    secondaire que l’on pourrait mettre à droite de la page match: U11
    avec ses 6 sous éléments U13 avec ses 7 sous éléments…. Auriez
    vous une solution à m’apporter? Cordialement,

    Répondre
    • Bonjour
      Avez-vous essayé en écrivant le code au lieu du copier coller ? Je reviens vers vous quand j’ai plus de temps.

      Répondre
  22. Bonjour. je souahiterais rajouter un menu dans le footer. j’utilise un theme enfant. j’ai donc creer un fichier functions.php dans le theme enfant sans dupliquer le fichier. et je rajoute dans le dossier functions.php du theme enfant le code pour avoir le deuxieme menu>> et je me rend compte que ce code existe deja dans le fichier parent…hum hum hum comment faire?

    voici le code dans le fichier parent:

    This theme uses wp_nav_menu() in one location.
    */
    register_nav_menu( ‘menu’, __( ‘Header Navigation Menu’ , ‘scrappy’ ) );

    comment placer le code « Secondary »

    MERCI BIEN ))

    Répondre
    • Voici le code à mettre : register_nav_menu( ‘secondary’, __( ‘Le deuxieme Menu’ , ‘scrappy’ ) );

      Si vous faites un copié/collé, réécrivez au moins les apostrophes ou ça ne marchera pas.

      Répondre
  23. Bonjour,

    Je voulais ajouter un menu comme vous le montrez ici, donc j’ai suivi vos instructions, mais dès la première étape finie, et après avoir enregistré les modifications, je suis arrivé sur une page vierge … Le blog existe toujours, mais quand je me connecte en tant qu’admin, j’arrive sur cette page vierge (une page blanche où on ne peut vraiment rien faire). Je ne sais vraiment pas quoi faire, aidez-moi au plus vite s’il vous plait !

    Répondre
    • Bonjour Arnaud,

      Le plus simple : remplacez la page modifiée par votre sauvegarde.

      Si vous n’avez pas de sauvegarde, pas de panique, il faut juste réouvrir le fichier modifié et bien observé les changements : il y a sûrement un espace blanc qui s’est glissé après la fermeture du dernier ?> (ou avant l’ouverture du premier <php). Vous pouvez lire la fin de cet article pour mieux comprendre (ce n’est pas la même erreur, mais c’est la même cause) : http://lesdoigtsdanslenet.com/cannot-modify-header-information/

      Le syndrome de la page blanche vient souvent de là, mais le mieux serait de voir l’erreur qui est donnée par votre serveur. Pour cela, il faut activer les messsages d’erreurs dans le fichier wp-config.php

      Répondre
  24. Super, un grand merci pour ce beau tuto clair et précis !

    J’ai toutefois une question.

    Mes menus sont associés à des « gallery categories » et fonctionnent en accordéon. Quand on clique sur le titre du menu, les noms des galeries reliées à la catégorie en question apparaissent.

    Ça marche bien pour le menu principal déjà en place dans le thème.
    Mais pour les menus créés : quand on clique sur les titres des menus, on peut naviguer dans les différentes galeries de la catégorie en question, mais les titres des galeries n’apparaissent pas.
    Le lien est fait mais les sous-menus n’apparaissent donc pas : le menu accordéon ne se déroule pas.

    Quand j’intervertis le menu principal et le deuxième par exemple, les sous-menus du principal s’affichent bien. J’imagine alors que c’est quelque chose à rajouter dans le code et non pas dans les liens des galeries et leurs catégories respectives (ce que j’ai vérifié plusieurs fois).

    Est-ce une explication assez précise pour que vous puissiez m’orienter vers une solution ?

    Merci encore pour le tuto et merci d’avance pour la réponse à cette question.

    Bonne continuation,
    Sandra

    Répondre
    • Bonjour,

      Je ne suis pas sûre de comprendre ; je reformule :

      – le menu 1 (principal) s’affiche bien avec des sous-menus
      – le menu 2 (créé après) n’affiche pas les sous-menus (rien ne déroule)
      – quand on intervertit le menu 1 et 2, le menu 1 affiché à l’endroit du menu 2 affiche bien les sous menus

      C’est bien ça ?

      Si oui, c’est qu’il y a un problème au niveau du menu 2. Je conseillerais de comparer le code du menu 1 au 2 afin de trouver les différences (mais c’est bizarre comme bug).

      Répondre
  25. Bonjour,

    Je ne sais pas si c’est vraiment correct de travailler comme cela, mais en laissant la class du primary, ça fonctionne !

    Merci pour vos tuto et votre réactivité !
    Bonne continuation,
    Sandra

    Répondre
  26. Bonjour,

    Tout d’abord, votre site est très agréable ainsi ce que vous présentez.
    Je suis donc entrain d’essayer d’ajouter un menu mais je n’y arrive pas malgré les explications très claires et précises !
    Je ne suis pas experte, je débute mais j’ai des compétences informatique.

    J’utilise le thème WooCommerce MyStile et lorsque j’ajoute du code (que ce soit le copier/coller du code existant ou le votre) soit :
    – le menu ne s’affiche nullepart donc ça ne doit pas être au bon endroit
    – ou alors cela m’affiche une page toute blanche (donc je doit retirer les lignes pour faire réanimer mon site)
    – ou bien le code en dur s’affiche sur la page… mais pas de menu.

    Je n’ai pas de compétence en php…

    Auriez-vous une petite idée ou une aide à m’apporter.
    Dans l’attente, je vous remercie par avance.

    Répondre
    • Bonjour,

      IL y a deux étapes :
      – un code pour pouvoir afficher l’emplacement du menu dans le back-office (le code se met dans functions.php) : ça c’est ok ?
      – et un code pour afficher le menu dans le front-office (le code se met dans le template php) : il me semble que vous parlez de celui-là.

      « le menu ne s’affiche nullepart donc ça ne doit pas être au bon endroit »
      >> y a-t-il un menu configuré en back-office ? qu’est-ce qui apparaît dans le code source ?

      « ou alors cela m’affiche une page toute blanche (donc je doit retirer les lignes pour faire réanimer mon site) »
      >> problème d’encodage du fichier (on doit être en UTF-8), ou espace blanc en dehors des balises PHP (dans functions.php)

      « ou bien le code en dur s’affiche sur la page… mais pas de menu. »
      >> alors là…je vois pas. Vous avez mis le code dans l’éditeur wysiwyg ? Il faut le mettre dans le fichier php directement, avec un logiciel FTP ou via l’éditeur de code de WordPress.

      Bon courage

      Répondre
  27. Bonjour,

    Tout d’abord merci pour vos explications ! et au final j’ai réussi à m’en sortir !!
    ouf !

    merci et à bientôt.

    Répondre
  28. Bonjour et tout d’abord un grand grand merci pour ce tuto !
    J’ai réussi ce que vous nous apprenez à faire, et j’ai même réussi une mise en page en css (je suis novice donc super fière aheum).
    Par contre, ile me reste un dernier soucis, vous voudriez bien m’aider svp ?
    Je n’arrive pas à aligner les catégorie de mon menu, elles restent les une sous les autres avec une puce. Si j’utilise firebug, il me dit que c’est hérité, mais je trouve pas ou faire cette modif, sauriez-vous m’aider svp ?
    Merci bcp !

    Répondre
    • Bonjour,

      Bravo pour la création :)
      Il faut aligner les « li » ou les « a » avec un « float : left ». Avec firebug, si vous descendez dans la fenêtre de CSS, vous finirez par tomber sur les propriétés qui sont héritées.

      Répondre
      • Merci =)
        Le float left ne suffisait pas, alors j’ai crée une ligne .menu-secondaire avec mise en page et une .menu-secondaire li; pour annulé le format « lu » hérité (ou inverse j’ai un doute si c’est le lu ou li avec les puces ^^’) En tout cas merci bcp d’avoir pris le temps de me répondre !

  29. Bonjour, je suis tombé sur ce tuto en cherchant un moyen pour créer des barres titres dans mon sidebar. Aurais-tu déjà écrit un article à ce sujet ? En te remerciant.

    Répondre
    • Bonjour,

      Normalement il y a déjà des titres dans la sidebar, je ne vois pas ce que tu veux dire.

      Répondre

Trackbacks/Pingbacks

  1. Ajouter un menu à votre thème Wordpres - Les Doigts dans le Net | Votre site avec Wordpress | Scoop.it - [...] Découvrez la procédure détaillée pour ajouter un autre menu sur un thème wordpress.  [...]
  2. Les statistiques du blog en Juillet 2012 - Les Doigts dans le Net - [...] Ajouter un menu à votre thème WordPress (17/07) [...]
  3. wordpress | Pearltrees - [...] Ajouter un menu à votre thème Wordpres [...]
  4. Attribuer un second menu à une partie de votre site, dans Wordpress - […] Source : Marie-Ève, les doigts dans le Net […]
  5. Mon blog chez Susan, quoi de neuf ? • Chez Susan - […] si vous débutez.  Si vous avez un peu expérience, j’ai trouvé sur le net un blog Les doigts dans…
  6. Tutoriels WordPress | Pearltrees - […] Snapshot. Une sorte de TimeMachine pour votre blog WordPress. Comment éditer rapidement un article de blog WordPress. WordPress Channel…

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint