Au sommaire de ce tuto, la réalisation d’un menu accordéon pour votre blog WP. Nous utilisons souvent WordPress comme un CMS, et à ce titre, nous avons souvent besoin d’un menu qui liste toute l’arborescence du site (les pages et sous-pages), dans la sidebar par exemple. Comme nous n’avons pas le temps de développer un superbe plugin, il va falloir vous « salir les mains » dans le code des fichiers de WP 😉
Pour obtenir ce menu accordéon que les clients aiment beaucoup, nous allons modifier plusieurs fichiers de votre répertoire contenant le thème actif
- header.php (code jQuery)
- sidebar.php (appel de fonction de listage des pages)
- style.css (pour styler notre menu)
jQuery
Le code jQuery sera à placer dans le head de votre page, après l’appel de la fonction wp_head().
<script type='text/javascript'>
$j = jQuery.noConflict(); // en mode safe
$j(document).ready(function(){
$j('ul.side_navigation li ul').hide();
$j('ul.side_navigation li.current_page_item>ul').show();
$j('ul.side_navigation li.current_page_parent>ul').show();
$j('ul.side_navigation li.current_page_ancestor>ul').show();
$j('ul.side_navigation li').click(function () {
$heading = $j(this);
$heading.siblings().find('ul:visible').slideUp(500);
$heading.children('ul').slideDown('fast');
if($heading.has('ul').children().size() > 0) {
return false;
} else {
location.href = $heading.children('a').attr('href');
}
});
});
</script>
L’appel de fonction dans la sidebar
Ajoutez le code suivant dans le fichier sidebar.php là où vous souhaitez voir apparaître votre menu en accordéon
<div id="menu_sidebar">
<ul>
<?php wp_list_pages("title_li="); ?>
</ul>
</div>
Un peu de style css pour habiller tout ça
Pour cette partie, je ne vous indiquerai que les éléments à styliser, je vous laisse le soin de réaliser en fonction de votre design graphique. J’ai simplifié les classes pour clarifier la hiérarchie.
<div id="menu_sidebar">
<ul>
<li class="page_item"><a href="#">Page 1</a></li>
<li class="current_page_ancestor"><a href="#">Page 2</a>
<ul class="children">
<li class="current_page_ancestor"><a href="#">Page 2-1</a></li>
<li><a href="#">Page 2-2</a></li>
<li class="current_page_ancestor"><a href="#">Page 2-3</a>
<ul class="children">
<li class="current_page_parent"><a href="#">Page 2-3-1</a>
<ul class="children">
<li class="current_page_item"><a href="#">Page 2-3-1-1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Page 2-4</a></li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
Et voilà !
2 Responses
Bonjour et merci pour votre partage de connaissances !
J’ai apprécié votre tutoriel, mais je suis dubitatif sur la fin de l’article « Un peu de style css pour habiller tout ça ».
Dans quel fichier WordPress (et à quel endroit) doit-on inclure ces lignes de code ?
Par avance, merci pour votre collaboration.
Bonjour,
Moi j’ai mis ce code dans le fichier sidebar.php de mon thème.
Cordialement