La création de menus sous WordPress 3

12 avr

La création de menus sous WordPress 3

26 Commentaires tutoriels. 12,295 lectures

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:

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

26 Commentaires pour “La création de menus sous WordPress 3”

Flux commentaires de ce billet Adresse du trackback

1

Merci cette explication d’utilisation des menus dans wp 3

guizm0w , le 12 avr 2010 à 11:45
2

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 !

Michel , le 13 avr 2010 à 11:30
3

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 TAFFOREAU , le 16 avr 2010 à 1:06
4

Nicolas > J’ai juste oublié la balise “more” ! merci pour l’info…

Francis , le 16 avr 2010 à 10:04
5

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 ^^

Hebergement web , le 25 avr 2010 à 23:29
6

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.

MisterLova , le 28 avr 2010 à 0:02
7

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

Nathan , le 10 mai 2010 à 19:02
8

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 ?

billboc , le 14 mai 2010 à 8:57
9

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…)

Mr Trafic , le 4 juin 2010 à 10:38
10

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

Daniel, de SeoMix , le 18 juin 2010 à 15:06
11

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

Mikael , le 30 juin 2010 à 11:43
12

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

incas , le 2 juil 2010 à 23:42
13

Bonjour,

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

Anstett Patricia , le 3 juil 2010 à 15:37
14

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.

Nicolas , le 11 juil 2010 à 15:13
15

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

Nekko , le 22 juil 2010 à 17:14
16

@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

@faurethomas , le 25 juil 2010 à 10:34
17

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

@faurethomas , le 25 juil 2010 à 10:36
18

ok je laisse tomber

@faurethomas , le 25 juil 2010 à 10:37
19

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

Rogerlelapin , le 4 août 2010 à 20:12
20

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 , le 20 août 2010 à 14:45
21

@ 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é”.

Olivier C , le 30 août 2010 à 12:51
22

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 , le 30 août 2010 à 13:47
23

@ 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 !

Olivier C , le 30 août 2010 à 15:14
24

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

billboc , le 30 août 2010 à 16:06