La création de menus personnalisés est désormais possible avec la sortie de WordPress 3.0. Via un système de glisser / déposer, réalisez vos propres menus en combinant des liens externes, des catégories ou encore des pages en quelques clics.


Update : comme me l’a fait remarqué Marie, il est nécessaire de rajouter la ligne de code add_theme_support( ‘menus’ ); dans votre fichier functions.php si vous n’utilisez pas le thème par défaut ou que le thème ne supporte pas les menus de WordPress 3.0.

Pré-requis

Pour disposer de cette nouvelle fonctionnalité, vous devez avoir effectué la mise à niveau vers WordPress 3.0.

Je vous y encourage vivement tant les nouveautés sont impressionnantes… et du fait qu’il s’agit d’une mise à jour de branche.

La gestion des menus s’opère directement depuis le menu Apparence de votre administration WordPress. Avec le nouveau TwentyTen, vous pouvez d’ores et déjà vous entraînez à concevoir vos barres de navigations sur-mesure.

Le problème majeur est que la plupart des thèmes n’intègrent pas de ce genre de menus par défaut.

C’est pourquoi, nous allons voir ensemble comment disposer de cette nouvelle fonctionnalité de WordPress 3.0 via ce tutoriel pas à pas.

Étape n°1 – Modification du fichier header.php

Commencez par ouvrir le fichier header.php de votre thème, soit en passant par le module Éditeur de WordPress, soit en utilisant un éditeur de texte depuis Windows ou MacOS X – par exemple, Coda.

Il nous faut à présent localiser un emplacement pour positionner notre menu. C’est ici la première difficulté du tutoriel. Vous devez savoir à quoi correspondent les différents éléments du code source.

En vous aidant de l’extension Firebug pour Mozilla Firefox et en suivant ce podcast vidéo, vous devriez être capable d’identifier entre quelles balises vous aimeriez positionner votre menu personnalisé.

Insérez ensuite le bout de code suivant :

 <?php wp_nav_menu($args); ?>

Comme vous pouvez le constater, il est possible de définir des arguments entre les parenthèses en lieu et place du $args.

Voici donc la liste des paramètres autorisés extraite du codex de WordPress :

  • $id : ID du menu ;
  • $slug : le permalien du menu ;
  • $menu : le nom du menu, utile si vous en créez plusieurs ;
  • $container : l’élément parent du menu, par défaut une balise div est appliquée ;
  • $container_class : la classe de l’élément parent ;
  • $container_id : ID de l’élément parent ;
  • $menu_class : la classe du menu ;
  • $format : format du menu, je conseille une liste débutant par ul
  • $fallback_cb : si le menu n’est pas créé dans WordPress, vous pouvez ajouter une commande WordPress pour pallier ce manque. Par défaut, les pages sont listées ;
  • $link_before : texte à afficher avant le menu ;
  • $link_after : texte à afficher après le menu ;
  • $before : afficher du texte avant le lien ;
  • $after : afficher du texte après le lien ;
  • $echo : par défaut, la valeur est True ;

L’ensemble de ces paramètres sont optionnels. Vous pouvez donc vous limiter au bout de code par défaut que nous entourons ici d’une balise div pour faciliter la gestion des styles :

<div>
<?php wp_nav_menu(); ?>
</div>

Une fois que votre menu est positionné là où vous le souhaitez, enregistrez le fichier.

Les initiés noteront que les nombreux arguments disponibles permettent une personnalisation très fine en termes de styles CSS… même si l’on pourrait aller encore plus loin.

Étape n°2 – Gestion du menu personnalisé sous WordPress

Sous l’administration WordPress, déroulez le module Apparence puis cliquez sur Menus.

Indiquez dans un premier temps le nom du menu. Il est en effet possible d’en créer plusieurs et, si tel est le cas, vous devrez l’indiquer via l’argument menu.

Cliquez ensuite sur le bouton Créer menu.

Dans la partie gauche, vous noterez la présence de 3 modules :

  • Liens externes : très pratique pour insérer des liens vers d’autres sites Web ;
  • Pages : pour ajouter des pages WordPress dans votre menu ;
  • Catégories : pour insérer des catégories WordPress dans votre barre de navigation ;

Il vous suffit donc de cocher les éléments de votre choix – module après module, puis de cliquez sur Ajouter au menu.

Pour réarranger l’ordre du menu, glissez / déposez les différents éléments tout en sachant qu’il est possible de créer des sous-menus. Pour ce faire, décalez l’élément vers la droite pour créer une imbrication.

N’oubliez pas de cliquez sur Sauvegarder le menu pour enregistrer vos modifications.

Pour constater le résultat, ouvrez votre site dans un nouvel onglet. Ajustez en conséquence votre menu selon vos besoins.

Vous pouvez ajouter un second menu en cliquant sur le bouton en forme de plus, situé juste à côté du menu nouvellement créé sous l’administration WordPress.

Étape facultative – Créer un emplacement de menu pour WordPress

Il est possible de déterminer des emplacements de menus prédéfinis pour qu’ils apparaissent sous forme de liste dans Apparence puis Menus de WordPress.

Pour en savoir plus, consultez le tutoriel dédié à la création d’emplacements de menus sous WordPress.

La gestion personnalisée des menus sous WordPress 3.0 affiche clairement les ambitions à venir : faire de WordPress le meilleur CMS !

Crédits photo : Al_HikesAZ

137 commentaires

  1. Petite question :
    Pour le code PHP, si on a créé plusieurs menus est ce qu’on doit le modifier ou bien on laisse comme tel et ça sera pris en compte ? (Le thème de WP3.0 n’autorise qu’un seul menu par exemple)

    Merci et bravo pour le tuto bien expliqué

    1. On peut créer plusieurs menus, à conditions d’indiquer l’argument menu dans la commande PHP pour indiquer à WordPress de quel menu il s’agit – dans l’interface, il faut indiquer le bon nom.

      Et merci du compliment !

  2. Donc a priori on ne peut pas mettre d’articles dans les menus ?
    « Juste » des pages, catégories ou liens externes c’est bien ça ?

    Merci

  3. Bah je me dis peut-être dans le cas où tu as quelques articles clés. Ou un menu partiellement dynamique qui au lieu d’indiquer juste le nom de la catégorie et son lien, listerait les X derniers articles de cette catégorie…

    1. OK, mais il existe déjà des widgets pour lister des articles et de nombreuses commandes PHP permettent d’arriver au résultat que l’on veut : articles populaires, les plus commentés, etc.

  4. On peut créer plusieurs menus, à conditions d’indiquer l’argument menu dans la commande PHP pour indiquer à WordPress de quel menu il s’agit – dans l’interface, il faut indiquer le bon nom.

    Bonjour,
    Merci pour vos tutoriel super bien fait, en 20 minutes j’ai appris déjà beaucoup de choses
    Mais pour cet argument ($menu), il va où précisément dans cette phrase :
    'menu-header', 'theme_location' => 'primary' ) ); ?> ?

    A bientôt.

        1. Je viens d’essayer a plusieurs endroits,

          ici :
          ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>

          ça me renvoie cette erreur :
          Parse error: syntax error, unexpected T_ARRAY in /homez.53/hoteldeb/www/affiliation-systeme.com/www/wp-content/themes/twentyten/header.php on line 75

          Dans les parenthèse de array ça me donne une autre erreur…

  5. Bonjour,

    J’aimerais bien connaitre également une solution pour insérer automatiquement les x derniers articles d’une catégorie directement dans un menu. L’idéal serait d’ajouter un module en complément des 3 présents (liens/pages/catégories).

    Nicolas.

    1. Ce n’est actuellement pas possible… mais un plugin devrait te permettre de faire une telle chose.

      Toutefois, avec une commande WordPress que tu trouveras sur le codex, tu peux afficher les X articles les plus récents d’une catégorie.

      Avec un peu de CSS, tu pourras facilement créer un menu… certes ce n’est pas super simple mais c’est la seule solution qui me vient à l’idée.

  6. Bonjour,

    un grand merci pour ce tuto video très bien expliqué. J’ai pu créer un menu personalisé juste en dessous de celui d’origine en rajoutant le code php dans le header.php

    Seulement voila, j’aimerai utiliser la classe CSS de mon menu d’origine pour le menu ‘personalisé’.

    Dans ‘header.php’, j’ai bien ajouter : ‘menu_class’ => ‘ CLASSE CSS’ , mais je ne vois où et qu’est ce qu’il faut écrire pour que le menu perso prenne en compte mon style d’origine ?

    D’habitude, on appelle la feuille de style : …

    Comment donc exploiter cette option ?

    Voici mon code d’origine pour le menu :

    Merci

    1. Arf, le code n’est pas passé… il ne faut pas mettre de balise code en fait.

      As-tu un lien vers ton site pour que je puisses t’aider ?

      Et merci du compliment !

        1. Désolé mais décidemment le code ne veut pas passer..
          je l’écris sans les « crochets » :

          div class= »art-nav »

          div class= »art-nav-center »

          ul class= »art-menu »

          ?php art_menu_items(); ?

          /ul
          /div
          /div

          1. Pas besoin des balises code… c’est vrai que c’est chiant l’insertion de code dans les commentaires.

            Je te répondrais d’ici quelques jours car là, overbooking total !

  7. Voici ma réponse !

    Il faut que tu indiques la classe CSS qui doit s’appliquer pour ton menu.

    Aides-toi ensuite de Firebug pour voir si elle s’applique correctement et au bon endroit. Tu peux aussi effectuer le changement en temps réel avoir un aperçu.

    1. Comment indiquer la Classe CSS ? Tel est la question
      Justement, le menu d’origine possède plusieurs classes CSS imbriquées, il y art-nav pour la première div , ‘art-nav-center’ pour la deuxième div ( qui centre le menu) et ensuite ‘art-menu’ pour ul class.
      Avec firebug lorsque je remplace ‘CLASSE CSS’ par ‘art-menu’ , le menu s’aligne, mais la mise en page complète n’est pas effective…
      J’ai voulu insérer les 3 classes séparées d’un espace à la place de Classe CSS , mais le menu ne s’affiche que partiellement( pas de police, pas de changement de couleur quand on passe la souris dessus..)

      Je ne sais pas si c’est possible, mais je vais essayer de créer une class unique qui reprend les caractéristiques des 3.

      Encore merci pour le soutien

  8. Bonjour

    Très instructif cette vidéo. Comment gérer cette application si on fait une site web exclusivement avec des pages. On va avoir un menu long comme un jour sans pain. Est ce qu’il y a une solution pour collapser ?
    Je cherche un menu compatible Artisteer et Pagemesh ou équivalent.
    Merci

    1. Merci pour le compliment !

      Pour répondre à ta question, gérer plusieurs dizaines (centaines ?) de pages dans un menu tient de l’impossible car l’utilisateur ne parviendra pas à se repérer.

      Il y a toujours moyen d’arranger le tout en agençant les menus avec des sous-menus mais cela reste limite comme méthode…

      Les menus ne sont pas « compatibles » avec tel ou tel produit – je ne connais pas Artisteer et PageMesh, car il faut y insérer des lignes de code pour les activer ou utiliser les widgets.

      1. C’est sur que si tous les menus sont développés ça le fait pas. Si tu vas sur iles.ch tu vas comprendre et le problème est que je n’arrive pas à mettre les pages dans l’ordre que je veux.

  9. bonjour super Tutorial,

    j’ai choisi de mettre dans ma barre de menu mes catégories, mais je souhaiterais que chaque onglet est une couleur différente :
    exemple : catégorie « Environnement » l’onglet soit de couleur verte et l’onglet de « la vie pratique » marron…. etc..
    comment procéder ?

    1. Bonjour,

      Y’a t-il moyen d’ajouter un parent non cliquable avec des pages enfants (un liste imbriquée dans une liste) ? Je n’ai pas trouvé

      1. Oui, tu peux faire en sorte que le parent d’un menu serve juste d’intitulé pour le menu.

        Il suffit de créer un lien en mettant un # à la fin.

        Toutefois, d’un point de vue SEO, il faut faire attention à ce qu’une page de catégorie ne soit pas indexée dans ce cas vu que tu n’autoriseras plus l’accès à cette page.

        Je ne sais pas si j’ai répondu à ta question pour autant…

  10. Des cours sur WP comme je les cherchais depuis longtemps;
    Je souhaiterais supprimer le menu, et faire en sorte que le nom de domaine pointe directement sur une page en full width. Actuellement, il pointe sur le blog par défaut.
    Faut il passer par le menu ? pour après le supprimer.
    Merci d’avance

    1. Merci de ton commentaire !

      Pour supprimer le menu, je ne pense pas que le simple fait de cliquer sur Supprimer dans l’administration fonctionnera complètement… à essayer donc !

      Pour avoir une page en full width, il te faut d’une part le template et d’autre part il faut définir une page d’accueil à partir des Réglages de WordPress.

      1. Bien lu
        Merci de m’avoir aiguillé sur le réglage WP. Effectivement, dans les options en mode lecture, c’est là où l’on peut définir la page d’accueil. C’est tellement simple quand on sait.
        Au plaisir de te lire (et de t’entendre)

  11. Bonjour,

    Merci pour cet article. Est-il possible d’ajouter la page d’accueil originale (les derniers articles toutes catégories) dans le menu personnalisé ?
    Merci d’avance,

  12. Bonjour,

    Quelle est l’astuce pour créer un menu avec des sous-menus comme les votres (Blog, Ressources, Tutoriels) ?
    Les menus parents ne dirigent pas vers la page parent mais vers # uniquement !!!
    Je tourne en rond …
    Merci pour votre aide

    Super site

    1. Sujet annulé,
      ai trouvé la solution qui était dans ma question
      il suffit de créer manuellement un « lien personnalisé » qui sera « parent » avec comme adresse web « #  » uniquement.
      Et d’y accrocher les liens enfants
      C’est tout, trop facile mais quand çà veut pas …

      Bonne continuation

      1. Oui c’est la méthode la plus simple !

        N’oublions pas toutefois que ces pages restent accessibles pour ceux qui en connaitraient l’URL ainsi que les moteurs de recherche.

  13. Bonjour,
    je me demandais comment pouvait-on faire apparaître un menu vertical (par exemple) mais uniquement pour les utilisateurs connectés ?
    merci si vous avez un petit tuyau …

  14. Pour info, j’ai installé le plugin « wpNamedUsers » qui permet de désactiver/activer des pages que pour certains utilisateurs … mais les pages ont beau être bloquées… le menu est toujours là…

    1. Il faut utiliser du PHP pour restreindre certaines zones aux seuls utilisateurs enregistrés par exemple (on peut régler cela en fonction du niveau de rôle).

      Cela dit, il faut ensuite penser à restreindre la page en elle-même !

      De même, il ne faut pas qu’elle soit indexée par Google…

  15. Ha ! Super ! Moi, mon menu s’affiche… Mais le lien menu ne s’affiche pas dans mon interface ?! Oui, oui j’ai wp3

  16. Bonjour, merci pour ce petit tuto bien util.
    Petit question que je pose et dont je ne trouve pas la réponse :
    Vous aurez sans doute tous remarqué sur la page « menu » de l’admin, dans le bloc « emplacement du thème » si vous utilisé pour votre blog le thème wordpress par défaut (« Twenty Ten 1.2″ à cette heure) qu’il est écritVotre thème peut utiliser 1 menu. Sélectionnez le menu que vous voudriez utiliser
    Ceci suppose donc que l’on peut créer un thème avec plusieur zone de menu et pour chacune d’elle y attribuer un menu via l’admin comme c’est le cas pour les widget (le faire en dure dans le code du thème pas de soucis on l’a bien compris avec le paramètre $menu).
    Je ne parviens pas à trouver d’explication à ce sujet et à la manière pour le faire.
    Quelqu’un aurait une piste ?

    1. Effectivement, il est possible de définir des emplacements de menus dans le thème. Cela suppose donc que le thème prenne en charge cet aspect. Sinon, les menus créés peuvent être insérés via un widget dans une zone widgetisée (sidebar ou footer).

      Je le note dans ma longue liste de tutos à faire.

    2. Dans ton fichier functions.php

      __( 'Header Navigation', '' ),
      'secondary' => __( 'Secondary Navigation', '' ),
      ) );?>

      Et dans le fichier ou tu souhaites placer ton 2ième menu :

      '',
      'container_class' => 'header-nav',
      'menu_class' => 'sf-menu',
      'theme_location' => 'secondary'
      ) )?>

      1. Oups !

        Dans functions.php

        __( ‘Header Navigation’,  » ),
        ‘secondary’ => __( ‘Secondary Navigation’,  » ),
        ) );?>

        et là ou tu veux placer ton deuxième menu:

         »,
        ‘container_class’ => ‘header-nav’,
        ‘menu_class’ => ‘sf-menu’,
        ‘theme_location’ => ‘secondary’
        ) )?>

        1. Bon ! Aurélien, j’arrive pas à mettre en forme mon commentaire, je dois me sauver à toi de jouer !

          1. Dans ton fichier functions.php

            __( ‘Header Navigation’,  » ),
            ‘secondary’ => __( ‘Secondary Navigation’,  » ),
            ) );?>

            et là ou tu souhaites ton deuxième menu:

             »,
            ‘container_class’ => ‘header-nav’,
            ‘menu_class’ => ‘sf-menu’,
            ‘theme_location’ => ‘primary’
            ) )?>

          2. super merci Marie ! c’est bien ce que j’avais trouver dans le codex mais que je n’avais pas bien saisi, et pour cause je fesais el modif dans un fichier fonction.php qui n’était pas celui du thème en place … bouletitute quand tu nous tiens

            (pour infos la page du codex abordant le sujet : http://codex.wordpress.org/Function_Reference/register_nav_menus)

            sinon petite question concernant les arguments dans ton exxemple « Header Navigation » ou « secondary navigation » sont les noms des zones qui vont être utilisé pour l’admin, mais el 2ème que tu as laissé vide , c’est quoi ?

          3. Ha ! Par défaut la valeur est: div. Donc si nous voulons envelopper notre UL par un div.

            ensuite on pourrait mettre un id à ce div avec

            ‘container_id’ => ,

            On peut très bien mettre false si on ne le souhaite pas. désolée d’avoir oublié de le préciser.

  17. Pour Marie, ce n’est pas grave pour les différents commentaires !

    Il n’est jamais facile d’afficher du code sans l’avoir converti au préalable correctement.

    Il n’y aucun soucis de mon côté d’autant plus que ta solution a permis à Julien de comprendre son erreur.

  18. Bonjour.
    Excellentes explications en général ! Mais j’ai un énorme problème: j’ai beaucoup de Menus et Sous-Menus dans ma navigation WP 3, et tout d’un coup, il ne veut plus modifier l’ordre ou l’ajout d’un Menu, il m’indique une « erreur fatale » -> temps d’exécutions de 30 sec. dépassés.
    J’ai essayé de regarder le php.ini, mais j’en ai aucune idée, est-ce que quelqu’un a déjà eu ce problème ?

    Salutations à tous.
    Mathieu

  19. Bonsoir,
    P’tite question j’ai un menu avec des categories et des sous catégorie mais je souhaites afficher :
    Categories > sidebar
    Sous categorie > dans mon header

    Action : quand je clic sur une catégorie dans sidebar il affiche les bonnes sous categories dans mon header !!!
    Est ce possible ?
    Merci

  20. Bonjour,

    Je me permet de poster ici car je n’obtient pas de réponses.
    Je souhaiterai savoir comment vous avez fait pour obtenir que vos sous-rubrique de votre menu arrivent « en douceur ». Je cherche depuis plusieurs jours sur les forums mais impossible de trouver réponse à ma question. J’espère que vous comprenez ce dont je parle.

    Merci d’avance.

    Charlotte

      1. Je sait qu’il s’agit d’un script en Java car j’ai déjà le code pour réaliser ca sur mon menu. Le seul problème est que je ne sait absolument pas ou insérer ce code pour le mettre en place. Pouvez vous me dire dans quel fichier mettre ce code?

        Merci d’avance

        1. C’est bien trop compliqué de t’indiquer cela sans avoir un accès FTP à ton site – il te faudrait trouver conseils auprès d’une personne qui s’y connait pour t’aider.

  21. Bonjour à tous,

    J’ai un problème bien précis et malheureusement, je ne trouve pas la solution à mon problème (mais il faut bien avouer que je ne suis pas très doué avec tous ces codes !!!)

    Bref, je vous explique :
    J’ai créé un site wordpress pour mon activité professionnelle avec uniquement 4 pages. C’est donc très basique.

    J’ai cependant créé une 5ème page mais qui est « caché ». En gros, je ne veux pas qu’on puisse y accéder par le menu mais seulement lorsque je donne l’url précise à mon client. Jusqu’à la, c’est bon.

    Mon souci, c’est que j’aimerais que sur cette 5ème page, il n’y ai pas de menu (ou qu’il soit vide), de façon à ne pas pouvoir retourner sur les autres pages du site. j’ai donc créé un nouveau menu via l’admin de wordpress, il est prêt, avec juste un lien « contact » dedans, mais impossible de l’appeler sur cette page. Je ne sais même pas ou aller.

    Donc voila, j’espère que c’est assez clair.
    Merci d’avance pour votre aide.

    1. Généralement, le menu est appelé par le fichier header.php de ton thème. En utilisant un conditionnal tags, tu devrais pouvoir le masquer de ta 5e page.

      Par contre, il faut des connaissances en PHP ou demander de l’aide sur le forum de WordPress francophone.

      1. Merci de ta réponse Aurélien.
        Je ne suis pas vraiment un pro du PHP, mais j’ai quelques notions… Je vais voir ça.
        Dans tous les cas, merci beaucoup pour l’info.

      2. Encore moi.

        J’ai essayé ce petit bout de code (je ne sais guère faire plus que ça)

        Curieusement, on pourrais dire que ça marche, j’ai bien le menu sur toutes les pages, qui disparait dans la page 5 (cv).

        Cependant, je ne sais pas pourquoi, il affiche à la place le nom des catégories des articles. Et là, franchement, j’avoue que je ne comprends pas pourquoi !! Une idée ?

        1. <?php
          if ( is_page(‘cv’) ) {
          mystique_navigation(true);
          }
          else {
          mystique_navigation(false);
          }
          ?>

          Désole, en espérant que cette fois ça marche…

      3. Bonsoir,
        je voulais juste vous dire que j’ai trouvé la réponse à mon problème, à force de tâtonnement comme toujours dans ces cas là.
        Je poste le résultat pour ceux qui passerait par là en quête de la même chose.

        Je vous informe que j’utilise le thème Mystique, et que par conséquent, si vous utilisez un autre thème, il faudra un peu adapter.

        Et de plus, par rapport à ma demande initiale, j’ai rajouter aussi la possibilité d’avoir ce second menu également sur tout le contenu d’une catégorie, ce qui peux aussi être utile, grâce à la commande in-category.

        <?php
        if (is_page(array(15, 18, ))) {
        wp_nav_menu( array( ‘menu’ => ‘menu_perso’ , ‘menu_class’ => ‘navigation’) );
        }
        elseif (in_category(array(‘7′))) {
        wp_nav_menu( array( ‘menu’ => ‘menu_perso’ , ‘menu_class’ => ‘navigation’) );
        }
        else {
        mystique_navigation();
        }
        ?>

  22. J’ai donc résolu un problème, mais il m’en reste un dernier. Je pensais pouvoir le résoudre de la même façon, mais en fait, c’est plus complexe que ça.

    Alors voila, sur mon thème Mystique, j’aimerais, lorsque je suis sur une page précise (encore la page CV), faire en sorte que le lien sur le titre du site [logo] soit inactif.

    De plus, j’aimerais aussi que le texte de description, affiché à coté [headline], soit un autre texte (genre « MON SUPER CV »).

    Dans le header.php, j’ai ce code :

    <?php mystique_logo(); ?>
    <?php if(get_bloginfo(‘description’)): ?><p class= »headline »><?php bloginfo(‘description’); ?></p><?php endif; ?>

    J’aimerais lui dire que : si tu es sur la page CV, tu n’actives pas le lien de « mystique_logo » pour retourner en page d’accueil, mais tu laisses afficher le texte. Et que si tu es sur cette page, tu remplaces la description habituelle « headline », par un texte de mon choix.

    Des idées ? J’avoue que là, je sèche totalement.

    1. C’est faisable également avec des conditions en PHP mais je n’ai pas le temps de le faire ici. Il faut utiliser la condition « si je suis sur la page X » alors « affiche moi ça » sinon (else) « affiche ceci ».

      Par contre, question ergonomie et expérience utilisateur, je doute que cela soit cohérent…

  23. Bonjour,

    Déjà super tuto ! Il m’a bien aidé.
    Maintenant je peux mettre un menu sur mon thème qui ne supportait pas cette nouvelle fonctionnalité de WordPress. Cependant, j’ai un problème, j’ai créé mon menu, mais les sous-menu ne s’affiche pas lorsque je passe la souris dessus… Je m’arrache les cheveux à essayer de tout comprendre… Si jamais vous avez une idée, je suis preneuse.

    Merci d’avance

    1. En fait c’est bon… J’ai trouvé ma réponse en envoyant le message ! Désolée pour le dérangement.

  24. merci pour cette vidéo,juste dommage dans la vidéo de ne pas nous avoir montrer comment était le code avant la modification et de ne pas avoir mis le code en entier comme on peut le voir dans la vidéo car ils aurait pu servir à plusieurs personnes mais si plus variante existe.

  25. Super tutoriel pour créer un menu perso.
    J’en avait besoin et maintenant c’est sur mon thème…
    Wouhou…Merci!!!

  26. Bonjour Aurélien,
    J’ai bien regardé les commentaires des abonnés de ton blog. Certains faisaient allusion aux sous-menus qui ne s’affichent pas. Or, ils ont la chance de trouver la solution en te posant la question et j’ai bien peur que ce ne soit pas mon cas.

    J’attends un peu … non rien … toujours rien …

    J’avais installé Custom Post Type. J’avais la possibilité de mettre les articles (enfants des catégories) en sous-menu. Ce que je trouvais plus logique dans mon cas puisque le menu de premier niveau ce sont les catégories (5 catégories donc 5 pages) et les sous-menus ce sont donc les articles correspondants au catégories. J’ai viré Custom Post Type étant trop lourd à géré pour un novice (comme moi) et sans intérêts pour les petits sites. Les sous-menus s’affichaient dans « Apparence » de l’administration et dans le front-office.

    Aurais-tu un moyen d’afficher en sous-menu mes articles ?

    Bravo pour le tuto clair

    1. A mon avis, tu confonds la gestion des menus avec les custom post types qui permettent de créer des types de contenu personnalisé avec une taxonomie propre (de la même manière que les articles ou les pages, tu peux avoir avoir « portfolio », « partenaires », etc.).

      Si tu veux afficher tes catégories en tant qu’éléments parents puis des articles en sous-menu en tant qu’éléments enfants, il suffit d’ajouter les catégories correspondantes dans ton menu puis les articles en ayant au préalable coché Articles dans les Options de l’écran située en haut à droite.

  27. Oui, je confond Aurélien. J’oublie Custom Post type qui ne concerne pas le site que je suis en train de faire. Je vais creuser ce que tu me dis puisque je pouvais auparavant insérer mes articles dans les menus personnalisés. J’ai tellement manipuler mes pages.php que j’ai dû perdre des fonctions. Je reviens en arrière et ça devrait marcher. Tu me rassures car la fonction que j’attendais (articles dans le menu) est native. Merci d’avoir répondu rapidement. Peut-être à bientôt !

  28. Bonjour et bonne année 2012.
    J’utilise un thème Primepress qui me pemet parfaitement de gérer mes menus depuis WP 3.0. Mais si je crée un menu déroulant, celui-ci passe en-dessous de mon bloc image (Cimy-header-image-rotator). C’est certainement tout bête, mais je ne sais pas ce que je dois modifier pour ce faire. Si je mets en place un menu déroulant « Tutoriels » contenant les entrées « GPSNavX », « MacENC » », etc. le code se présente comme suit :

    CODE SUPPRIME PAR ADMIN

    Faut-il un argument CSS pour « sub-menu » et si oui lequel ? ou bien est-ce encore plus simple ?
    Merci de prendre le temps de jeter un oeil averti, avec mon amicale reconnaissance.
    Francis

  29. Bonjour, une propriété z-index:9999 sur le submenu devrait faire l’affaire.

    J’ai volontairement supprimé les bouts de code car il y a trop de liens… donnes-un lien c’est préférable.

  30. Bonjour !
    Je me demandais s’il était possible de placer dans le menu des « catégories de produits » ? Je l’ai vu sur différents sites-boutique wp, mais je ne trouve pas comment faire…
    Un grand merci !

      1. J’ai trouvé !
        Pour les débutants comme moi : en haut à droite il y a « options écrans » qui permet d’ajouter des rubriques supplémentaires …

  31. Bonjour
    J’ai un problème, je n’arrive pas a faire le glisser déposer. En effet, les différentes pages que j’ajoute dans le nouveau menu, ne sont pas ‘attrapables’ (j’ai pourtant bien le curseur en forme de main). Je suis sous mac et j’ai testé sous différents navigateurs (safari 5.1, firefox 11, chrome 18) mais aucun ne me permet de déplacer les pages ou de les mettre en enfant d’une autre page.
    avez vous déjà rencontré ce problème ? une solution ?

    Je suis sous mac os X Lion, WP 3.3.1

    Merci

    1. Je pense que c’est un plugin qui cause ce bug. Peut-être essayer en désactivant les plugins un à la fois pour identifier le « coupable »

          1. Bonjour,

            Tout d’abord supers tutos sur les menus, merci beaucoup !

            J’ai le même souci que breizh69, j’ai donc essayé de voir si ça venait d’un widget, mais en ayant tout désactivé je constate que non, j’ai bien la main pour glisser déposer les menu, mais impossible de les les déplacer comme dans le tuto… Du coup je ne parviens pas à créer de sous-menu (ou plutôt menu déroulant)…

            J’ai mis ceci dans header.php :
            wp_nav_menu( array( ‘theme_location’=>’primary’, ‘menu’ => ‘Navigation’, ‘container_class’ => ‘header-nav’, ‘menu_class’ => ‘sf-menu’ ) );

            et ceci tout en haut de la page functions.php :
            add_action( ‘init’, ‘register_my_menus’ );
            function register_my_menus() {
            register_nav_menus(
            array( ‘top-navigation’ => __( ‘Top’ ), ‘footer-menu’ => __( ‘Footer’ ))
            );
            }

            J’ai le thème « Human with thimthumb »

            Aurais-je oublié ou mal fait quelquechose ?

            Cordialement

  32. Bonjour et merci pour ce tutoriel qui m’a permis de faire « presque » tout ce que je voulais. Cela a résolu un souci technique même si je n’ai pas pu donner l’apparence espérée à mon projet. Encore merci j’ai appris beaucoup de choses. Pierre

  33. Bonjour

    Toutes mes félicitations pour ce site, c’est d’une grande générosité de ta part.
    C’est suite à un message laissé sur wordpress.fr qu’un membre m »a référé à ton site.
    Je sais que tu es fort occupé… mais j’aimerais tout d emême te faire part de mon problème.

    J’ai installé un thème, ‘pictree’ et quand il est activité la barre ddes menus n’apparait pas nul part.
    Pourtant elle apparait quand j’active le thème de base de wordpress ‘ twentyeleven.
    Bref! es-ce compliqué de régler ce trouble.

    Merci de ton aide!
    Mes salutations,
    Claude

    1. Tu fais référence à la barre d’outils présente aussi bien dans le back office qu’en front-end ? Si oui, sans doute une option dans le thème qui la désactive.

      1. Aurélien
        Merci de ta réponse rapide…
        En réalité c’est la barre des menus sur la page d’accueil de mon site voir ce lien:
        http://www.claudegagnon.com/demo/exemple.png

        Ce que tu vois est le haut de l page du site.

        Quand j’active le thème ‘pictree, cette même barre n’apparait nul part.

        Merci encore!
        Claude

        1. Ah ok c’est normal, il s’agit du menu de navigation que l’on gère sous le module Apparence du back office de WordPress. Chaque thème dispose ou non d’un ou plusieurs emplacements prédéfinis. Il te faut donc le configurer à nouveau.

  34. Bonjour,

    Merci pour ce tuto !
    Mon menu se présente sur 2 lignes car il y avait une barre de recherche sur la droite que j’ai réussi à supprimer (dans Searchform.php).
    Malgré la disparition de la barre de recherche, mon menu reste toujours sur 2 lignes.
    Que modifier et dans quel fichier pour que le menu se présente en 1 ligne ?

    J’utilise le thème TwentyEleven : http://www.feel-inside.com

    Merci d’avance

    1. 2-3 modifications à faire dans le CSS pour récupérer la place prise par la barre de recherche. Si tu connais Firebug tu devrais vite t’en sortir, sinon je peux le faire pour pas grand chose.

      1. Merci pour la rapidité de ta réponse !
        Oula, je suis novice, 2 jours d’utilisation… Je ne connais pas Firebug.

        J’ai trouvé une autre solution qui règle le problème et qui me permet en plus de garder la barre de recherche : j’ai agrandi la largeur de la colonne centrale.

        Encore merci pour tes articles.

  35. Salut Aurélien.

    D’abord bravo pour ton site et tous tes conseils.

    Ce que je souhaite faire, c’est ajouter dans mon menu wp les taxonomies que j’ai créé, tout comme on voit les catégories.
    J’ai créé des taxonomies pour des custom post type que j’ai aussi créé, et je voudrais pouvoir simplement ajouter ces taxonomies dans mon menu wp.

    Ca fait longtemps que je voudrais faire ça et à chaque fois je me tape la création d’un menu à la main sans utiliser la fonctionnalité des menus de wp parce que je ne trouve pas comment faire mais je trouverai ça plus propre et j’aimerais bien trouver la solution une fois pour toute.

    C’est une demande qui m’a l’air toute simple mais n’a pas l’air d’être gérée nativement par wp.

    Est ce que cela te dit quelque chose ? Tu l’as déjà fait ?

    Merci pour ta réponse.

  36. Un autre petit message parce que j’avais pas cliqué sur « recevoir par e-mails les novueaux commentaires », mais cette fois je le fais.

  37. Rebonjour,
    J’écris un message en réponse à ton aide sur la création des sous-menus.
    Je suis en WordPress 3.4
    Effectivement, j’ai pu glisser des catégories en décalage sous par ex le menu Familles, mais lorsque j’enregistre le menu, il revient aligné avec le menu et il apparait cote à cote comme tu peux le voir sur mon site :
    http://famille.bres.se/
    Mes catégories n’apparaissent sous la forme : category/familles/bresse comme sur ton blog.
    Merci d’avance

  38. Bonjour et merci pour la vidéo, j’y ai découvert qu’on pouvait faire les sous-menus en les décalant sur le côté !!!
    Mais voilà cela n’arrange pas mon problème !
    Je souhaiterais que les catégories ne soient pas cliquables
    exemple
    CATEGORIE (non cliquable)
    — SOUS-CAT1 (non cliquable)
    —-PAGE1 (lien)
    —-PAGE2 (lien)
    — SOUS-CAT2 (non cliquable)
    —-PAGE3 (lien)

    J’avais fais un thème sous Artisteer qui me proposait une option quand j’écrivais une page « show in separator in menu » mais impossible de faire ça sous la plupart des thèmes en ligne (pour info je suis sous twentyeleven)

    Merci d’avance pour le coup de main (et je pense que ça servira à d’autres !)

  39. Bonjour,

    J’utilise un template personnalisé developpé par une autre personne. J’utilise WordPress 3.4.1. je ne suis pas developpeur, juste je bidouille a partir des tutoriels.

    Jj’ai trouvé ce tutoriel (et d’autres) pour la mise en place des menus personnalisés. En effet je souhaite mettre en place un sous menu au menu principal.

    – En utilisant le drag and drop dans Appearance / Menu, le titre de mon sous menu apparait en premier niveau.
    – Pourtant dans le fichier Header, la fonction
    est bien deja enregistré.
    – Voici comment mon menu principal est ecrit dans header.php

    Nasama Resort Home
    ‘menu_order’, ‘container_class’ => ‘top_nav’, ‘menu’ => ‘Upper Menu’ ) ); ?>
    ‘menu_order’, ‘container_class’ => ‘main_nav’, ‘menu’ => ‘Nasama Main Menu’) ); ?>

    Qu’est ce qui pourrait bloquer la mise en place de ce sous menu ? que dois-je chercher ?

  40. oui c’est exactement ca.
    Pour l’instant quand je rajoute un sous menu au menu principal avec le drag and drop (decallé sur la droite), l’entrée se met au premier niveau.
    Je sais que je dois rater quelque chose. Peut etre le Css ? (auquel je n’ai pas acces car l’ancien administrateur est injoignable donc je n’ai pas acces a notre serveur seulement a l’admin de wordpress)

    1. Oui les décalages ne sont qu’une question de CSS. Pas de 2e menu à créer. Vous devriez avoir accès au CSS depuis Apparence > Editeur.

      Si votre ancien administrateur vous bloque les accès, récupérez les données rapidement.

  41. J’ai enfin recuperer les codes de notre serveur donc j’ai acces a tous les fichers css (depuis l’Editeur de l’admin, je n’ai aucun fichier Juste ce code:
    *
    Theme Name: Nasama Website Theme
    Theme URI: http://www.nasamaresort.com
    Description: Theme for the Nasama Website
    Author: Adam Nurk
    Author URI: http://www.destination-specific.com.au/
    Version: 1.0
    */
    @import url(« css/reset.css »);
    @import url(« css/nasama.css »);)

    Sur le serveur, j’ai trouver le css associe au theme, et voici le code pour la navigation principale. Le truc c’est que je ne connais pas le css, donc je ne sais pas trop quoi ajouter……

    /* main nav */

    div.main_nav {
    padding-top: 30px;
    float: right;
    }

    div.main_nav ul {
    float: right;

    }

    div.main_nav ul li {
    display: inline;

    }

    div.main_nav ul li a {
    font-size: 15px;
    color: #555555;
    text-decoration: none;
    font-style: italic;
    padding: 0px 7px 0px 4px;
    border-right: 1px solid #e0e0df;
    }

    div.main_nav ul li.last a {
    padding: 0px 0px 0px 6px;
    border-right: none;
    color: #ae0000;
    }

  42. slt à tous j’ai un souci avec nextGEN Gallery, il y a un message d’erreur qui affiche au téléchargement. le voici: Fatal error: Maximum execution time of 30 seconds exceeded in C:\wamp\www\testwordpress\wp-includes\class-http.php on line 949.
    quelq’un peut il m’aider ?

  43. Comment dois je faire pour remplacer Copyright © 2011 – Avenue. All rights reserved. par le Copyright du nom de mon site web

  44. Bonjour et merci en retard pour votre dernière réponse sur un autre article…
    Je me posais la question de savoir si on pouvait retirer le menu de juste une de mes pages en l’occurrence la page d’acceuil…Merci pour ce site hors pair…mieux que le forum wp …et bonne journée

  45. Bonjour,

    Nous avons créé un plugin pour facilement intégrer un sous-menu de pages n’importe où dans votre WordPress. Etant donné que WordPress est de plus en plus utilisé comme CMS, avec des sites avec plus de pages que d’articles, ca peut aider certains. Par exemple pour créer un menu de sous-pages (child pages) sur une page parent.

    Plus d’info : http://inject.netcod.es/a-submenu/ (plugin en anglais)

    Cordialement,

    Quentin

  46. Bonjour, je voulais savoir si il était possible de laisser apparaître les trois derniers articles d’une catégorie dans un menu ? Si oui comment dois-je m’y prendre ? J’arrive seulement à intégrer ma catégorie dans le menu. Merci d’avance

  47. Bonjour,
    j’ai un thème qui me permet de mettre 4 menu. Je n’en utilise que deux, mais il n’y en a qu’un qui s’affiche. Il porte deux nom différent, et dans emplacement du thème j’ai bien attribuer un menu au main et l’autre au top. Je ne trouve pas, la ligne de code dont vous parler . J’aimerais que celui qui s’affiche reste ou il est mais l’autre je l’aimerais en dessous de ma slider. Comment je peut faire ?

  48. j’ajoute un commentaire à cette longue liste…
    J’ai un problème récurrent sur mes sites wordpress qui est de rendre disponible ce menu personnalisé aux (rôles) éditeurs.
    Je donne quasi systématiquement ce rôle à mes clients et il est normal qu’ils puissent gérer leur menu.
    Jusqu’ici je passe par des plugins de Rôle, mais j’aimerai le faire via le fichier functions.php.
    As-tu une astuce Aurélien ?
    Je sais que tu avais fais un article pour supprimer des onglets du back-office depuis ce fichier, mais pour en ajouter…

  49. Bonjour !
    J’ai créé mon propre theme et en l’activant sur WordPress, dans le menu « Apparence » de mon interface, je n’ai plus que « Theme » et « Editeur ». Comment faire apparaitre « Menu » pour ajouter un menu à mon theme ?

    Merciii

  50. Bonsoir et merci pour ce tuto très très bon !
    J’ai juste un pb avec l’étape 2.
    J’ai bien un second menu pour ma partie blog mais lorsque je consulte un article, il l’ouvre et remet systématiquement le menu général…
    Est-ce que j’ai oublié qlq chose ?
    Merci !

    frederiquegame.fr/blog
    (menu en question)

  51. bonjour
    merci pour le tuto
    est ce que c’est possible de créer un bouton qui renvoi vers une page de 2 catégories ? (affichier les articles de 2 ou 3 catégories sur une seule page)
    d’avance merci !

  52. bonjour
    je voudrais ajouter des liens personnalisés a mon menu, , mais ils comportent tous un id (#) car il renvoient sur un template wordpress one page, or , le soucis c’est que le # rend inactif le lien , avez vous un idée du code dans function php a ajouter pour désactiver cette option.

Les commentaires sont fermés.