Francis Chouquet Graphiste Lettering

La création de menus sous WordPress 3

0

La version béta 1 de WordPress vient de sortir. Ce qui veut dire que vous pouvez commencer à vous amuser avec et commencer à explorer cette nouvelle version qui est pleine de nouveautés. Parmi toutes ces nouveautés, il y a la gestion des menus qui vient directement d’un outil qu’à créé Woothemes et qui permet de créer un menu très facilement. Vous pouvez voir quelques vidéos de cette nouvelle fonction sur cet article.

Le souci, c’est que quand on veut créer un thème, vu qu’il n’y a pas encore de documentation, c’est pas toujours évident de trouver les bonnes informations pour créer un menu de navigation avec cette fonction. Dans cet article, je vais donc vous montrer le plus simplement possible, comment créer un menu, voire même plusieurs. Ensuite, à vous de vous amuser avec l’outil pour en tirer toutes les possibilités. Une chose est sûre, c’est qu’il y encore quelques semaines, on se posait la question de savoir s’il fallait coder en dur ces menus, et bien, force est de constater qu’avec cette nouvelle fonction, vous allez pouvoir créer tout type de menu, avec des liens, qu’ils soient internes au blog, ou bien externes.

Alors, que faut-il pour utiliser la nouvelle gestion des menus de WordPress ?

Si vous arrivez avec un thème que vous avez créé vous-même ou que vous avez acheté il y a encore quelques mois, il y a de grandes chances pour que vous ne puissiez pas utiliser cette nouvelle fonction. Pourquoi ? Tout simplement parce qu’il faut qu’elle soit « générée » ou « autorisée » dans le fichier functions.php. Ca fonctionne un peu comme la widgétisation ou l’utilisation des vignettes depuis WordPress 2.9. D’ailleurs, j’écrirai un tutoriel sur cette fonction dont on entends finalement peu parler.

Pour vérifier tout ça, allez sur l’onglet « Menus » du menu « Apparence ». Si vous ne pouvez pas créer de menu, c’est que votre thème ne le permet pas. Sinon, vous n’avez pas besoin de lire plus loin ce billet ! 😉

Donc, pour « mettre en marche » la gestion des menus, il va falloir insérer une ligne de PHP dans ce fichier functions.php. Cette ligne est:

add_theme_support( 'menus' );

Retournez ensuite dans l’onglet « Menus » et vous verrez que vous pourrez alors créer un ou plusieurs menus de navigation.

« Comment faire fonctionner ce menu sur mon thème maintenant ?? »

C’est bien joli d’avoir intégré du code dans le fichier functions.php mais il a de grandes chances pour que le ou les menus que vous avez créé ne s’affiche pas sur votre blog. Pour les afficher, j’ai retenu deux possibilités qui me semblent intéressantes.

La première est d’insérer la fonction qui va vous permettre d’afficher votre menu:

 <?php wp_nav_menu(); ?>

La deuxième solution, que je trouve tout aussi intéressante, sinon voire plus intéressante, c’est d’utiliser les widgets. En effet, vous avez la possibilités d’utiliser le widget « Navigation Menu » pour insérer votre menu de navigation dans votre thème.

Pour cela, rien de plus simple. Il faut bien entendu que votre thème soit widgétisé. Si ce n’est pas le cas, vous pouvez toujours passer par ce tutoriel. Cela dit, depuis que cette fonction existe, votre thème a de grandes chances d’être widgétisé.

Donc, imaginons que nous voulons créer deux menus, un pour les pages du blog et un autre pour les catégories du blog. Vous allez donc créer ces deux menus et vous allez aller dans le fichier functions.php et créer 2 zones widgétisables pour ces deux menus. Un exemple de code à utiliser va être le suivant:

  if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'Menu_Pages', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '' )); register_sidebar(array( 'name' => 'Menu_Categories', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '' ));

Maintenant, il reste quand même à positionner ces deux zones dans votre thèmes. Vous allez procéder comme n’importe quelle zone widgétisable en insérant le code suivant, là où vous souhaitez voir apparaître vos deux menus:

et

Ensuite, en allant dans l’onglet « widgets » de l’administration de votre blog, vous allez trouver ces deux nouvelles zones widgétisables. Vous n’avez, alors, plus qu’à leur ajouter le widget « Navigation Menu » et y choisir l’un des deux menus que vous avez créé préalablement dans l’onglet « Menus »:

Gestion menus wordpress 3

Allez maintenant sur votre thème et vos deux menus y apparaissent.

J’ai pris ici l’exemple avec deux menus, mais vous pouvez, bien entendu, en utiliser qu’un !! 😉 Et dans la plupart des cas, la fonction wp_nav_menu() sera suffisante. Mais la grande force de cette nouvelle gestion des menus, au delà de pouvoir y insérer ce que l’on veut, permet aussi facilement de créer plusieurs menus et de les placer comme on veut, où l’on veut ! 😉

Prochainement, je vous ferai un petit tuto sur la gestion des vignettes, apparues avec la version 2.9. J’essayerai aussi d’en faire un aussi sur la création de X blogs avec la fonction « network » qui débarque avec la 3.0 😉

48 Commentaires

  • guizm0w

    Merci cette explication d’utilisation des menus dans wp 3

  • Excellent !
    Merci Francis pour ce tuto qui va me permettre enfin de mettre autre chose que des pages dans les menus de navigations d’anciens thèmes.
    Cette ancienne limitation difficile à comprendre pour les clients va disparaitre, quel soulagement !

  • Article intéressant comme toujours avec toi Francis, cependant une chose me choc. Pourquoi as tu laissé la totalité de celui-ci sur ta « home-page » ? Un test est cours ? Ce n’est pas dans tes habitudes de publication.

    Nicolas.

  • Nicolas > J’ai juste oublié la balise « more » ! 😉 merci pour l’info…

  • Parfait cet article. Avec tout ca, wordpress va sans doute bientôt suplanter joomla tout en étant plus facile à utiliser. En plus les thèmes wordpress sont beaucoup plus simple à créer grâce à tous les outils disponibles en ligne et souvent plus beaux 🙂

    Que du bonheur ce wp3 ^^

  • Je vais je pense l’installer finalement. Mais c’est pas encore une version finale alors j’ai peur des bugs.
    Sinon est-ce que quelqu’un sait si wordpress MU peut créer les blogs supplémentaires dans des sous répertoires genre monblog.com/blog1/ au lieu de les créer dans des sous domaines genre blog1.monsuperblog.com ?

    Vive les blogueurs.

  • La version 1 de la 3.0 Beta est-elle disponible en français ?

  • salut,

    je voulais à l’aide de ton pas à pas (génial) mettre les mains dans le camboui et me lancer dans la création d’un thème, mais là je suis refroidi ? tu dis que cette fonction de menu ne sera alors pas gérée !

    faut-il attendre ?

  • Vivement la version stable!
    Quelqun a une version live tournant sous WP3? J’aimerai bien voir ce qu’il a dans le ventre, mais j’ai un peu la flemme de me coltiner l’install (oui je sais cca prend 5 minutes mais bon…)

  • Merci pour le tuto, ca va en dépanner plus d’un.

    L’autre avantage de cette nouvelle fonctionnalité WordPress, c’est de pouvoir mixer ce que l’on veut dans un menu : catégories, pages, tags et des taxonomies

  • Merci beaucoup, cela m’embêtait que le, pourtant si efficace, theme wordpress Thematic n’ait pas cette avancée.

  • Je souhaiterais pouvoir faire un menu sur deux colonnes, chaque colonne du menu permet l’accès à plusieurs pages principales avec pour chacune d’elles des accès à des pages de rang inférieur, En fait le site que je suis en train d’essayer de faire sous wordpress est similaire à celui accessible à http://www.agrippa.fr.
    Pouvez vous me dire quelles sont les marqueurs de modèle qui me permettent de faire ça, merci par avance pour votre réponse (que j’espère rapide).
    Incas

  • Bonjour,

    Pouvez-vous m’indiquer à quel endroit du fichier functions.php insérer la ligne de code, svp?

  • Bonjour,

    Peux t’on facilement étendre les modules venant alimenter les menus. Il y a par défaut les liens, les pages et les catégories.
    J’aimerais pouvoir ajouter automatiquement par exemple les x derniers articles d’une catégorie.

    Nicolas.

  • Salut,

    Tout d’abord : merci pour tes tutos géniaux et clairs… enfin sauf là, bah oui j’ai une petite question.. J’ai pas très bien compris comment faire pour choisir l’emplacement du menu… et je pense que si je ne comprends pas c’est car il manque quelques choses sur ton article… ou qui du moins n’apparaît pas chez moi…

    « Maintenant, il reste quand même à positionner ces deux zones dans votre thèmes. Vous allez procéder comme n’importe quelle zone widgétisable en insérant le code suivant, là où vous souhaitez voir apparaître vos deux menus:
    —— là je ne vois rien
    et
    —– là non plus
    Ensuite, en allant dans l’onglet “widgets” de l’administration de votre blog, vous allez trouver ces deux nouvelles zones widgétisables. »

    C’est juste moi ou?
    Merci d’avance et félicitations pour tes tutos :p

  • @Nicolas : il faut ajouter la syntaxe suivante :

    ou

    selon le menu que tu souhaites insérer…

    Tu peux aussi regarder la référence sur http://codex.wordpress.org/Fun.....p_nav_menu

  • euh oups y a un problème dans l’affichage ! On dirait que le site interprète les commandes php !!! Dangereux….

    donc je disais :

    et

  • ok je laisse tomber 🙁

  • Rogerlelapin

    Bonjour,
    Sympa ce tuto 😀
    Mais j’ai une petite question, est-ce qu’on peut mettre des balises hn sur certaines nom de catégories par exemple sur la catégorie « Jeux-vidéos » d’un blog pour améliorer le référencement avec le mot, « jeux-vidéo » 😀

    Voici le code qu’il y a pour afficher le menu:
    wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘menu_class’ => ‘sf-menu menu clearfix’)

    Merci d’avance à ceux qui répondront 😀

  • billboc

    bonjour
    j’ai bien installé

    add_theme_support( ‘menus’ );

    et

    je peux donc accéder à « menus » dans apparence de ma console d’admin

    Cependant, voila le message qui apparait dans emplacement du theme:

    « Votre thème peut utiliser 0 menu. Sélectionnez le menu que vous voudriez utiliser. »

    J’ai pourtant créer un menu…

    une idée ?

  • @ billboc :

    Pour avoir une utilisation supérieur à « 0 menu » il faut insérer la fonction « wp_nav_menu » de la manière indiquée dans le tuto, sinon il reste la possibilité d’utiliser le widget « menu personnalisé ».

  • billboc

    j’utilise bien la fonction wp_nav_menu mais finallement je crois que le CSS de mon theme ne correspond pas à l’affichage du menu intégré wordpress, là je suis un peu bloqué si quelqu’un a une idée pour me dépanner je suis open à donf !!!

    merci en tous cas 😉

  • @ billboc,

    Je te comprends, j’ai la même problématique que toi : il me faut moi aussi adapter mon CSS pour le menu.

    Pour ce faire il faut s’inspirer des feuilles de style de thèmes 3.0 préexistants comme celui par défaut (Twenty Ten), mais il faut tout adapter, c’est du boulot.

    Personnellement je ne l’ai pas encore fait pour l’instant : j’ai la flemme !

  • ouep c’est du boulot… vivement les longues soirées d’hiver au coin du feu avec son portable sur les genoux… 😉

  • Bidossessy

    Bonjour à tous,

    Alors pour le problème votre thème peut afficher 0 menu, je ne pense pas que ce soit lié au CSS, essayer comme ça pour moi ça a réglé le problème:

    Dans function.php, a la place de « add_theme_support( ‘menus’ ) » mettre ceci :

    function register_my_menus() {
    register_nav_menus(array(‘header-menu’ => __( ‘Header Menu’ )));
    }
    add_action( ‘init’, ‘register_my_menus’ );

    Puis à l’endroit où vous voulez placer le menu dans le header à la place de  »  » mettre ceci :

    ‘header-menu’ )); ?>

    Voila normalement dans l’interface menu wordpress 3 vous devriez avoir « votre thème peut utiliser 1 menu.

    Plus d’infos sur le pourquoi du comment ici: http://codex.wordpress.org/Navigation_Menus

  • Bidossessy

    Peti souci dsl

    Puis à l’endroit où vous voulez placer le menu dans le header à la place de ”” mettre ceci :

     » ‘header-menu’ )); ?> »

  • Pour ceux que ça intéresse, un site réalisé avec WordPress 3.01 avec menu flottant en 3 colonnes exploitant les nouvelles fonctionnalités de WP
    A votre disposition pour des conseils.
    Incas

  • billboc

    un ENORME merci à tous les 2 je pense que je vais avoir besoin de vos conseils bientôt… 😉

  • Bidossessy

    à la place de: php wp_nav_menu();

    mettre: php wp_nav_menu( array( ‘theme_location’ => ‘header-menu’ ));

  • billboc

    Salut Bidossessy

    je viens de placer les codes que tu proposes, et voici l’erreur reçue :

    Parse error: syntax error, unexpected T_STRING in /home/themes/blueprint/functions.php on line 13

    une idée ?

  • Merci encore pour ce nouveau tutorial.
    Par contre, il doit y avoir quelque chose que je n’ai pas compris… Je n’arrive pas à trouver le widget « navigation menu » en téléchargement ???

  • billboc

    le widget est dans la liste des widgets par defaut dans WP 3.0
    en tous cas chez moi…

  • Effectivement… Merci billboc !!!

  • Bidossessy

    Bonjour Bilboc,

    Tous d’abord je suis pas un expert du sujet, mais peut être as tu un erreur de syntaxe dans ton fichier function.php.

    J’ai rencontré quelques problèmes lors de l’insertion du code dans mes commentaires précédant, ce qui fait que ce n’est pas trés claire. Je n’ai pas pu insérer les balises d’ouvertures et de fermetures php sur la ligne « php wp_nav menu…… ». A rajouter avant: .

    Le mieux c’est de reprendre l’explication du codex wordpress http://codex.wordpress.org/Navigation_Menus.

    Bon courage

  • billboc

    Merci… si ca se trouve je ne vais pas mettre de menu finalement…

  • Bidossessy

    le code du fichier function .php à placer quelque part entre les balises php:

    function register_my_menus() {
    register_nav_menus(
    array(
    ‘header-menu’ => __( ‘Header Menu’ )
    )
    );
    }
    add_action( ‘init’, ‘register_my_menus’ );

    Le code à mettre dans le header dernière tentative:

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>

    Tchao

  • Clair, net, et précis! Merci

  • gtvincef2

    Je voulais savoir si le javascript lié a un sous menu est automatique?

  • Merci Francis pour ce super tuto! Il me sera d’une grande utilité 😀

  • Coco

    Bonjour,

    Merci pour le tuto. Cependant, j’ai dû intégré la ligne « add_theme_support( ‘menus’ ); » au mauvais endroit dans functions.php du coup ça bogue.

    Voici le message d’erreur:

    Parse error: syntax error, unexpected T_STRING, expecting ‘)’ in /homez.302/bloglagr/www/wp-content/themes/lagrandsav/functions.php on line 9Parse error: syntax error, unexpected T_STRING, expecting ‘)’ in /homez.302/bloglagr/www/wp-content/themes/lagrandsav/functions.php on line 9

    Avez-vous une solution pour me sortir de là? Merci.

  • Michel

    Bonjour,

    Merci pour toutes ces explications.

    Dans un thème en test, j’ai créé deux menus :
    l’un menu_fr qui appelle des pages en français,
    l’autre menu_en qui appelle des pages en anglais.

    Je cherche comment basculer de l’un à l’autre à partir d’un simple bouton sur le site (drapeau français/drapeau anglais).
    Je tourne en rond depuis un bon moment alors si quelqu’un a une idée, je suis preneur.

    Meilleurs vœux de santé et bonheur à tous.

  • Ali

    @Coco
    L’erreur « syntax error, unexpected T_STRING » vient du fait que ton copier/coller insère les apostrophes avec le mauvais encodage. Essaie de réécrire à la main les apostrophes qui entourent les mots des bouts de code cités dans les posts.

  • sym

    Pour pouvoir afficher les menus, il faut d’abord insérer dans functions.php le code :

    register_nav_menu( ‘header’, ‘En-tête’ ); où la première variable est le « Menu location identifier, like a slug. » et la deuxième une petite description.

    si vous voulez plusieurs menus, il existe la fonction register_nav_menus

  • Merci beaucoup pour ce tuto, très utile voir magique! 🙂

  • Nadege

    Bonjour,

    J’ai un petit soucis avec mon menu : Tout fonctionne bien, hors devant chaque lien s’affiche un point blanc… Impossible de trouver d’où ça vient…

    Est-ce que par grand hasard quelqu’un aurait une idée ?

    J’ai bien mis add_theme_support( ‘menus’ ); dans mon function.php
    et dans mon header.php

    Merci et bravo à tous pour votre investissement dans ce tuto !

  • recense mais

    , avoir plus de visiteurs et de new balance lecteurs a son importance dans le sens que j’ai l’impression de faire quelque chose que je peux partager

Success, your comment is awaiting moderation.