Illustration de Astrid Yskout (zoeff)
Besoin d’adapter le menu de votre thème WordPress? Ajouter des catégories, un lien vers la page d’accueil, des sous-pages? Besoin d’un menu qui liste à la fois pages et catégories? Un menu adapté à un site web + blog? Concevant ici et là divers blogs et sites web dont les menus sont parfois spécifiques, voici en partage quelques codes de menus horizontaux et dynamiques que j’ai pu concocter.
Sachez tout d’abord que vous trouverez toute la documentation à ce sujet dans le Codex pour plus de détails:
- wp list categories (menu catégories)
- wp list pages (menu pages)
- wp page menu (menu pages incluant page home)
- wp dropdown pages (menu descendant)
- wp dropdown categories (menu descendant catégories)
- Dynamic Menu Highlighting (menu dynamique, les bases)
- Creating Horizontal Menus (menu horizontal)
- fonction wp nav menu (à partir de WP 3.0)
Le code du menu se trouve généralement dans le fichier header.php de votre thème. Le plus souvent il liste vos pages ou vos catégories (voir ci-dessous). Cherchez-le pour savoir comment le modifier.
Menu listant vos pages
<ul id="nav">
<li <?php if(is_home()) { ?> class="current_page_item" <?php
// ajoute lien vers page accueil partout sauf en page d'accueil
} ?>><a href="<?php echo get_option('Acceuil'); ?>/">Acceuil</a></li>
<?php wp_list_pages('depth=1sort_column=menu_order&title_li=' ); // menu pages ?>
</ul>
Menu listant vos sous-pages
<?php
if(!$post->post_parent){
// Affiche les sous-pages de cette page
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}else{
// Affiche seulement les sous-pages d'un niveau parent
//$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
if($post->ancestors)
{
// Maintenant vous pouvez récupérer le top ID de cette page
// WP fonctionne selon un ordre descendant des id de pages (DESC), c'est pourquoi le niveau ID supérieur est toujours le dernier
$ancestors = end($post->ancestors);
$children = wp_list_pages("title_li=&child_of=".$ancestors."&echo=0");
// Conclusion, où que vous soyez vous récupérez toujours la liste complète des sous-pages
}
}
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>
Insérer un lien externe ‘en dur’ à votre menu
Ajouter cette ligne avec l’URL de votre choix:
<li id="current"><a href="ADRESSE URL">TITRE DU LIEN</a></li>
Ajouter un lien vers la page d’accueil.
Ajoutez cette ligne avant ou après votre code de menu existant (catégories ou pages). Ce lien s’affiche partout sauf sur la page d’accueil.
<li <?php if(is_home()) { echo ' '; } ?>><a href="<?php bloginfo('url'); ?>">Acceuil</a></li>
Ajouter un lien vers votre flux RSS avec une image.
Préparez une image pour votre flux. Ajoutez-la dans le dossier ‘images’ de votre thème et renommez-la comme ci-dessous (adaptez le code ‘images/rss.png’ suivant nom de dossier). Puis collez le code suivant comme pour tout lien en dur, à la suite ou avant votre menu wp_list_pages ou wp_list_categories.
<li><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/rss.png" /> Flux RSS</a></li>
Menu listant vos catégories
Ajoutez cette ligne à votre menu pages (ou remplacez-le)
<?php wp_list_categories('depth=1&hide_empty=0&orderby=name&order=ASC&title_li=' ); ?>
Menu des sous-catégories d’une seule catégorie (menu catégorie enfant)
C’est la fonction child_of= qui la définit. Par exemple pour afficher la liste des sous-catégories de la catégorie ID=8 :
<ul>
<?php wp_list_categories('orderby=id&show_count=1
&use_desc_for_title=0&child_of=8'); ?>
</ul>
Pour exclure des catégories ou des pages de votre menu, il suffit d’ajouter les ID de celles-ci : &exclude=1,50,12. Ce qui donne pour la dernière ligne (dont on exclut les catégories ID 1, 50 et 12) :
<li><?php wp_list_categories('title_li=&depth=4sort_column=name&exclude=1,50,12'); ?>
A l’inverse, pour inclure seulement les pages de votre choix dans votre menu pages, c’est la fonction include= qui le permet:
<ul>
<?php wp_list_pages('include=7,13,26,35&title_li=' ); ?>
</ul>
Menu combinant pages et catégories.
if (get_option('rt_drop_down_menu')){
wp_list_pages('include_tree='.$nav_bar_pages.'"&title_li=&sort_column=menu_order&exclude_tree='.$nav_bar_ex_pages.'&depth=0' );
}else{
wp_list_pages('include_tree='.$nav_bar_pages.'"&title_li=&sort_column=menu_order&exclude_tree='.$nav_bar_ex_pages.'&depth=1' );
}
?>
et les catégories:
<div id="navbarleft">
<ul id="nav">
<li><a href="<?php echo get_settings('home'); ?>">Accueil</a></li>
<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
<li><?php wp_list_categories('title_li=&depth=4&sort_column=name'); ?></ul>
</li>
</div>
En pratique, quelques autres exemples. Voici un menu pour un site web + blog incluant catégories du blog et pages,
Menu adapté à un Site Web avec Blog distinct
<div id="menu">
<div id="nav">
<!-- affiche liste de pages en excluant celles qui sont affichées ailleurs (ici pages ID 3 et 500) -->
<?php wp_list_pages('exclude="3,500&title_li=0&children=0&depth=2'); ?>
<!-- affiche la page du blog et ses catégories, si par exemple votre blog est codé par une page template avec la page ID=45 -->
<li><a href="<?php bloginfo('home');?>/?page_id=45">Blog</a>
<ul class="children">
<?php wp_list_categories('orderby=name&show_count=0&title_li=');?>
</ul>
</li>
<!-- affiche une page template particulière nommée 'portfolio arts' qui liste des catégories précises. Par exemple les sous-catégories de la catégorie 'ART'. Ceci code un lien pour la page template avec sous-catégories de catégorie 'art' (page id=23 et catégorie ID=6) -->
<li><a href="<?php bloginfo('home');?>/?page_id=23">Portefolio arts</a>
<ul class="children">
<?php wp_list_categories('orderby=name&show_count=0&title_li=&use_desc_for_title=0&child_of=6'); // id=6 étant la catégorie Arts ?>
</ul></li>
<!-- en prime un lien dur pour par exemple la page à propos -->
<li><a href="<?php bloginfo('home');?>/a-propos/">A propos</a></li>
<!-- ou un lien dur vers un de vos autres blog externe -->
<li><a href="ADRESSE URL">Mon autre blog ailleurs</a></li>
</div><!-- fin nav -->
</div><!-- fin menu -->
Un menu pages et catégories pour site web et blog distinct
<div id="nav">
<ul class="clearfloat">
<li class="cat-title">Catégories:</li>
<li class="cat-item"><a href="<?php bloginfo('home');?>/?page_id=45">BLOG</a>
<ul class="children">
<?php wp_list_categories('orderby=name&title_li=&exclude=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>
<ul>
<?php wp_list_pages('orderby=id&title_li=&depth=3&children=0'); ?>
</ul>
</div> <!-- fin nav -->
</div> <!-- fin menu -->
Menu pages et sous-pages et Catégories
<div id="menu">
<div id="nav">
<?php wp_list_pages('exclude="700&title_li=0&children=2&depth=2'); // adapter si besoin exclure une page, ici la id=700
?>
</div>
<ul id="subnav">
<?php echo $children; ?>
<?php wp_list_categories('orderby=name&show_count=0&title_li=');?></ul>
<!-- Sous-menu pour sub-pages ou sub-categories -->
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
<?php wp_list_categories('orderby=name&show_count=0&title_li=');?>
</ul>
<?php } else { ?>
<?php } ?>
</div><!-- fin menu -->
Menu conditionnel selon endroit
Si vous désirez afficher un menu différent selon que le visiteur est sur une page, un article, une catégorie ou la page home, il vous suffit de faire un code par menu puis de les afficher avec les tags conditionnels. Principe de base:
<?php if ( is_home() ) { ?>
Ici coller votre MENU pour HOME ACCUEIL (soit une page home.php si vous en avez une en cas de site web, soit index.php, c'est à dire votre page accueil avec tous les articles)
<?php } elseif ( is_page() ) { ?>
Ici coller MENU si affichage PAGE
<?php } elseif ( is_category() ) { ?>
Ici coller MENU si affichage CATÉGORIE
<?php } else { ?>
Ici coller MENU si AUTRE (soit index.php soit autre ni page ni home, comme les tags, archives, articles, recherche, author...)
<?php } ?>
Exemple concret:
<?php if ( is_home() ) { // MENU pour HOME ACCUEIL, AFFICHE NOM, Slogan, RSS puis PAGES ET SOUS-PAGES
?>
<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>"><?php bloginfo('name');?></a></h1>
<h3><?php bloginfo('description'); ?></h3>
<li><a href="<?php bloginfo('rss2_url'); ?>">Souscrire aux articles</a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Souscrire aux commentaires</a></li>
<div id="nav">
<?php wp_list_pages('title_li=0&children=0&depth=2'); ?>
</div>
<ul id="subnav">
<?php echo $children = wp_list_pages("title_li=&child_of="); ?>
</ul>
<?php } elseif ( is_page() ) { // MENU si affichage PAGE : seulement le menu pages et sous-pages
?>
<div id="nav">
<?php wp_list_pages('title_li=0&children=0&depth=2'); ?>
</div>
<ul id="subnav">
<?php echo $children = wp_list_pages("title_li=&child_of="); ?>
</ul>
<?php } elseif ( is_category() ) { // MENU si affichage CATÉGORIE
?>
<div id="nav">
<?php wp_list_pages('exclude="716,692,1668,12,2161&title_li=0&children=2&depth=2'); ?>
</div>
<ul id="subnav">
<?php echo $children; ?>
<?php wp_list_categories('orderby=name&show_count=0&title_li=');?></ul>
<?php } else { // MENU complet si AUTRE
?>
<div id="menu">
<div id="nav">
<?php wp_list_pages('title_li=0&children=2&depth=2'); ?>
</div>
<ul id="subnav">
<?php echo $children; ?>
<?php wp_list_categories('orderby=name&show_count=0&title_li=');?></ul>
<!-- Sous-menu pour sub-pages ou sub-categories -->
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
<?php wp_list_categories('orderby=name&show_count=0&title_li=');?>
</ul>
<?php } else { ?>
<?php } ?>
</div><!-- fin menu -->
<?php } ?>
Afficher les catégories de votre blog dans le menu pour une page Template
Vous avez créé une page home.php afin que votre blog (index.php) soit distinct de la page d’accueil. Votre menu affiche les pages, donc votre blog est l’une de ces pages (ici ex. ID=65). Pour afficher les catégories sous cette page :
<div id="nav">
<ul class="clearfloat">
<li class="cat-title">Autres</li>
<li class="cat-item"><a href="<?php bloginfo('home');?>/?page_id=65">BLOG</a>
<ul class="children">
<?php wp_list_categories('orderby=name&title_li=&exclude=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>
<ul>
<?php wp_list_pages('orderby=id&title_li=&depth=3&children=0'); ?>
</ul>
</div> <!-- fin nav -->
Enfin, vous pouvez définir l’apparence de ce menu en ajoutant ces classes à votre style.css (mais alors aussi dans votre menu !)
Apparence menu pages:
.pagenav { … } /* l'onglet des pages */
.page-item-2 { … } /* l'onglet de la Page ID 2 */
.page_item { … } /* tout item (onglet) de Page */
.current_page_item { … } /* l'onglet de la Page courante */
.current_page_parent { … } /* définit l'onglet parent de la page courante */
.current_page_ancestor { … } /* tout ancêtre de cette page courante */
Apparence menu catégories:
li.categories { ... } /* l'onglet de la liste des objets catégories */
li.cat-item { ... } /* un onglet catégorie */
li.cat-item-7 { ... } /* onglet de la categorie ID #7, etc */
li.current-cat { ... } /* onglet de la catégorie courante */
li.current-cat-parent { ... } /* onglet de la catégorie parente */
ul.children { ... } /* onglet de la catégorie enfant */
That’s All Folks!
Mille mercis pour cet article !! Cela faisait 3 jours que je tournais en rond pour le menu horizontal !! Merci encore.
De rien. Mon tuto fonctionne toujours, mais normalement il est devenu non nécessaire depuis plus d’un an, en créant les menus dans Apparence. Évidemment, si votre thème est trop vieux, il n’y a pas ces menus. Et si le thèmes et trop vieux, généralement WP aussi. Donc, je vous encourage à… mettre à jour s’il y a lieu ;-).