Vous êtes ici :

Accueil
Développement

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

Publié par Aurélien Denis le 31 mai 2010 dans Développement | 4 799 vues | 28 commentaires |

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

Podcast: Download (108.9MB)

Tags : Podcasts