Un menu accordéon pour WordPress avec jQuery

2 janvier 2012 | Tutoriels, WordPress | aucun commentaire

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à !

<< Retour