embed embed share link link comment comment
Copier cette vidéo close
Partager cette vidéo close
bookmark bookmark bookmark bookmark bookmark bookmark bookmark
embed test
Noter cette vidéo embed
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 3,33 out of 5)
Loading ... Loading ...
Tags pour cette vidéo tags
rate rate tags tags related related lights lights
WP Greet Box icon
Bonjour à toi visiteur du Web ! Si tu aimes WordPress, abonnes-toi au flux RSS pour être tenu informé des mises à jour.

Créer des menus personnalisés avec WordPress 3.0

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.

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.

Et voici le podcast vidéo qui reprend point par point les étapes de ce tutoriel.

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

Tags :

28 réponses to “Créer des menus personnalisés avec WordPress 3.0”

  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é

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

    • 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.

  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.

    • 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

  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.

  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

    • 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.

      • 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 ?

Trackbacks/Pingbacks

  1. [...] reste dans les menus personnalisés de WordPress 3.0 décrits par Jane plus haut, mais cette fois on met les mains dans le cambouis et on s’y frotte [...]

  2. [...] Créer des menus personnalisés avec WordPress 3.0 | WordPress Channel  [...]

  3. [...] Créer des menus personnalisés avec WordPress 3.0 – WP Channel [...]

  4. [...] doute, le plus gros apport de cette version ! En suivant pas à pas, le tutoriel vidéo intitulé Créer des menus personnalisés avec WordPress 3.0, les barres de navigation n’auront plus de secrets pour vous [...]

Laisser un commentaire

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Logo WordPress Channel
Logo Neticpro