Un menu accordéon pour WordPress avec jQuery

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

  1. header.php (code jQuery)
  2. sidebar.php (appel de fonction de listage des pages)
  3. 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 commentaires

  • Richard Anaya dit :

    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.

Laisser un commentaire