Ceci est le dernier chapitre de ce cours sur comment créer un thème wordpress.

Nous allons voir comment rendre un thème compatible avec les menus personnalisables introduits récemment dans la version 3.0 de Wordpress :

Exactement comme vu précédemment avec la sidebar, il est nécessaire de déclarer les menus dans le fichier functions.php de votre thème, grâce à la fonction register_nav_menus(). Quand on déclare un menu, il faut lui donner un identifiant qui nous permettra de l'appeler plus tard dans les templates de notre thème, appelons donc notre menu header puisqu'il va s'afficher... dans le header !

// Menus de navigation
register_nav_menus(array(
	'header' => 'Menu principal (header)'
));

"Menu principal (header)" est le libellé qui apparaitra dans la partie administration : Apparence > Menus > Emplacements du thème, qui permet de définir quel menu sera utilisé à l'emplacement header.

Déclarer le menu, ça n'est que la première partie du travail, il reste maintenant à afficher ce menu.

La fonction wp_nav_menu() permet justement d'afficher un menu dans votre thème Wordpress, en général on l'appelle dans le template header(fichier header.php) puisque le menu est généralement affiché en haut des pages, dans le header.

Cette fonction prend en paramètre l'identifiant de l'emplacement du menu, que nous avons défini il y a quelques instants dans functions.php : "header" :

<div id="menu" role="navigation">
	<?php wp_nav_menu(array('theme_location' => 'header')); ?>
</div>

Style CSS du menu

Les menus sont contenus dans un ensemble de listes non ordonnées (<ul>) imbriquées les unes dans les autres pour prendre en charge les sous-menus, voici par exemple un extrait du code HTML du menu que vous voyez sur le screenshot ci-dessus (j'ai supprimé le contenu des attributs class et href + quelques sous-menus pour rendre le code plus lisible) :

<div id="menu" role="navigation">
	<div class="menu-salut-container">
		<ul id="menu-salut" class="menu">
			<li>
				<a href="...">Home</a>
			</li>
			<li id="menu-item-38" class="...">
				<a title="Lien externe" href="...">Finalclap</a>
				<ul class="sub-menu">
					<li id="menu-item-41" class="...">
						<a href="...">Tutoriaux WordPress</a>
						<ul class="sub-menu">
							<li id="menu-item-43" class="...">
								<a href="...">Cours Wp Thème</a>
							</li>
						</ul>
					</li>
					<li id="menu-item-42" class="...">
						<a href="...">Tutoriaux Photoshop</a>
					</li>
				</ul>
			</li>
			<li id="menu-item-36" class="...">
				<a href="...">A propos</a>
			</li>
			<li id="menu-item-34" class="...">
				<a title="Catégorie" href="...">Non classé</a>
			</li>
		</ul>
	</div>
</div>

Le but du jeu va donc être de jongler avec les sélecteurs CSS pour arriver à différencier les liens de premier niveau (Home, A propos...), des sous-menus et sous-sous-menus.

Il faut avoir une bonne maitrise des sélecteurs et des différents opérateurs CSS, donc je vais vous fournir le CSS que j'utilise pour mettre en forme un menu assez générique, comme sur le screenshot ci-dessus :

/*
 *	===================
 *	Menus personnalisés
 *	===================
**/
#menu{
	margin:30px 10px 9px; height:30px;
}
#menu ul{
	list-style:none;
	margin:0; padding:0;
	font:bold 12pt Arial, Helvetica, sans-serif;
}
#menu li{
	position:relative;
	display:block;
	float:left;
	margin-right:1px;
}
#menu a{
	display:block;
	background:#0C85CA; color:#eee;
	text-decoration:none; padding:0 10px; line-height:31px;
}
/* Sous-menu 1 */
#menu ul ul{
	position:absolute; left:0; top:31px; z-index:99999;
	display:none; width:180px; float:left;
	font:lighter 10pt Arial, Helvetica, sans-serif;
	box-shadow:0px 3px 3px rgba(0,0,0,0.2);
}
#menu ul ul li{min-width:180px;}
/* Sous-menu 2 */
#menu ul ul ul{left:100%; top:0;}
#menu ul ul a{
	background:#777; line-height:1em; padding:10px;
	width:160px; height:auto;
}
#menu li:hover > a,
#menu ul ul :hover > a{
	background:#777;
	color:#fff;
}
#menu ul li:hover > ul{display:block;}
#menu ul li.current_page_item > a,
#menu ul li.current-menu-ancestor > a,
#menu ul li.current-menu-item > a,
#menu ul li.current-menu-parent > a{
	background-color:#555;
}

Ce cours de création de thème Wordpress est maintenant terminé, pensez à vous abonner au flux RSS, à la page Facebook ou encore sur Twitter pour rester informé des nouveaux tutoriels publiés sur Finalclap.com, et n'hésitez pas à laisser des commentaires !

Allez donc jeter un oeil sur cette page : appareil photo fondu.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.