Basé sur le célèbre visuel Diary, très adapté ici au contexte « universitaire », avec quelques retouches.

Développement du site jeromehemain.com. Ce site est un catalogue de l’artiste peintre présentant ses différents travaux.

Le moteur de ce site est basé sur WordPress, que nous avons entièrement modifié afin de répondre aux besoins du client.

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

Syntax Highlighter and Code Prettifier Plugin for WordPress

pas réussi à le faire fonctionner, pas de doc…
Pas persuadé que ça soit vraiment un plugin pour wp…
Site du plugin

CodeColorer + CodeColorer TinyMCE Button

Coloration syntaxique correcte mais pas possible d’indenter le code (tab_size ?).
Pratique : ajoute un bouton d’insertion dans la barre de boutons TinyMCE
Nous utilisions ce plugin avant car nous aimions bien la coloration syntaxique mais l’impossibilité d’indenter le code nous a poussé à chercher ailleurs.
Site du plugin

W-Code

Pas trouvé comment le faire fonctionner…
Site du plugin

WP-Syntax + WP-Syntax Editor Integration Plugin

Fonctionne mais pas très pratique à mettre en œuvre… Il faut passer en mode HTML dans l’éditeur.
Site du plugin

WP Code Highlight

Pas moyen d’échapper les caractères < et >
Une page de réglages depuis l’admin
Site du plugin (Support en japonais)

WP Code Prettify

Pas très User-Friendly, obligation de passer en mode édition HTML et de mettre le code entre les balises <pre></pre> à l’ancienne ;-)
Ajoute une page de réglages depuis l’admin
Respecte l’indentation, donc c’est le plugin que nous avons choisi.
Site du plugin
Notes sur les langages supportés

Conclusion

Nous n’avons pas vraiment trouvé le bon plugin (nous utilisons WP Code Prettify), alors si vous avez des suggestions, n’hésitez pas à nous conseiller ;-)

Taxi à Chalon-sur-Saône

Création graphique et développement d’un site vitrine basé sur le CMS WordPress.