Cet article a été mis à jour il y a plus de 19 mois. Le contenu qu'il propose n'est peut-être plus à jour.

Plusieurs personnes m’ont récemment demander comment créer un sommaire dans une page WordPress, notamment comme je le fais actuellement sur SeoMix.

Voilà le tutoriel pour en installer un.

Pourquoi créer un sommaire dans une page ?

Avant de parler des méthodes pour créer une table des matières, faut-il encore savoir à quoi cela sert.

Pour l’utilisateur, le sommaire permet deux choses :

  • D’une part cela lui permet de comprendre en un seul coup d’oeil ce qu’il va trouver dans la page. Plus votre article sera long, plus ce sommaire sera utile.
  • D’autres part il lui permet de naviguer facilement dans un contenu. Si vous y ajouter un bouton haut de page, vous lui permettez donc d’aller systématiquement à l’essentiel.
Page sans sommaire sur WordPress
Sans sommaire, l’utilisateur n’a pas de vue d’ensemble du contenu

Pour le référencement, il facilite la création automatique d’ancres dans une page. Le référenceur peut ainsi faire plusieurs liens à la fois (qui seront tous pris en compte) vers son contenu depuis une page X.

Chaque lien pourra d’ailleurs ciblé une partie de son contenu et donc différentes expressions clés à la fois. Pour mieux comprendre ce concept, je vous invite à lire un autre de mes articles sur les ancres multiples et le SEO.

Dans les deux cas, le sommaire va reprendre les titres contenues dans vos articles : Titre 1, Titre 2, Titre 3, … (donc les balises H1 à H6).

Exemple de plan de page
Le sommaire DOIT se baser sur le plan de vos pages

A chaque fois qu’il trouvera un titre, le sommaire va créer une ancre correspondante puis l’ajouter au sommaire, le tout de manière automatique.

Ajouter un sommaire dans WordPress

Un plugin de sommaire

La première solution est d’utiliser un plugin. Une simple installation et roulez jeunesse !

Au départ, SeoMix utilisait le plugin Table of Contents Generator WordPress Plugin créé par Scott Yang.

Deux solutions permettent alors de faire apparaître un sommaire.

  • Dans le contenu même des articles en ajoutant le texte
<!--TOC-->
  • Dans votre thème WordPress en ajoutant
<?php echo $post->post_toc; ?>

C’est simple, efficace et rapide, mais il existe plein d’autres plugins plus ou moins bons pour faire cela, avec par exemple :

Un hack pour la table des matières

Cependant, les solutions proposées juste avant ont plusieurs défauts :

  • Elles surchargent légèrement l’administration de votre blog WordPress
  • Elles affichent tous les niveaux de titres (Du H1 au H6)
  • Elles ne donnent pas systématiquement le choix de l’emplacement du sommaire.

Quand j’ai refais la nouvelle version de SeoMix, j’ai repris la solution de Scott Yang pour l’adapter. Voici les optimisations que j’y ai apporté :

  • L’ajouter du texte « Au sommaire » au début.
  • Les niveau H5 et H6 ont disparu.
  • J’y ai ajouté des classes pour pouvoir styler différemment chaque niveau de contenu.

Pour ajouter une table des matières ou un sommaire à votre WordPress, ajoutez le code suivant au fichier functions.php de votre thème :

/** Fonction de table des matières - Modifié par Daniel Roch - Original par Scott Yang*/
  // Classe pour la table des matières
  class YLSY_TableOfContents {
    function add_toc($level, $tocid, $text) {
      $this->toc[] = array($this->pagenum, $level, $tocid, $text);
      $this->minlevel = min($this->minlevel, $level);}
    function get_tocid($text) {
      $search = explode(",","ç,æ,œ,á,é,í,ó,ú,à,è,ì,ò,ù,ä,ë,ï,ö,ü,ÿ,â,ê,î,ô,û,å,e,i,ø,u");
      $replace = explode(",","c,ae,oe,a,e,i,o,u,a,e,i,o,u,a,e,i,o,u,y,a,e,i,o,u,a,e,i,o,u");
      $chaine = str_replace($search, $replace, $text);
      $tocid = sanitize_title_with_dashes($chaine);$count = 0;
      while (isset($this->tocmap[$tocid]))$tocid = $text.strval(++ $count);
      $this->tocmap[$tocid] = true;return "$tocid";}
    function get_toc() {
      global $wp_rewrite;
      if (isset($this->toccache))return $this->toccache;if (!isset($this->toc))return '';
      $permalink = get_permalink($this->postid);
      for ($i = 0; $i < sizeof($this->toc); $i ++) {
        list($pagenum, $level, $tocid, $text) = $this->toc[$i];
        $link = $permalink;
        if ($pagenum > 1) {
          if ($wp_rewrite->using_permalinks()) $link = trailingslashit($link)."$pagenum/";
          else $link .= "&page=$pagenum";}
        $link = "<a class='toclink' href=\"$link#$tocid\">$text</a>";
        if ($i == 0) {
          $level = min($level, $this->minlevel);
          $stack = array($level);
          $html .= "<div id='dat3'>Au sommaire</div><ol id='toclist'><li class='toc$level'>$link";
        } else {
          $prev = $stack[sizeof($stack)-1];
           if ( $level < 4){
           if ($level == $prev) {
            $html .= "</li>\n<li class='toc$level'>$link";
          } elseif ($level < $prev) {
            while (sizeof($stack) > 1) {
              array_pop($stack);
              $html .= "</li>";
              $prev = $stack[sizeof($stack)-1];
              if ($level >= $prev)break;}
            $html .= "</li>\n<li class='toc$level'>$link";
          } else {
            $stack[] = $level;
            $html .= "\n<li class='toc$level'>$link";
          }
        }}
      }
      while (sizeof($stack) > 0) {
        array_pop($stack);$html .= "</li>";
      }
      $html .= "</ol>";
      return $html;}
    function replace_heading($match) {
      if ($match[0] == '<!--nextpage-->') {error_log('next');$this->pagenum ++;return $match[0];}
      $tocid = $this->get_tocid($match[3]);
      $this->add_toc(intval($match[1]), $tocid, $match[3]);
      return "<h$match[1] id=\"$tocid\"$match[2]>$match[3]</h$match[1]>";}
    function the_content($content) {
      $this->toc = array();$this->tocmap = array();$this->toccache = null;$this->minlevel = 6;$this->pagenum = 1;
      $regex = '#<h([1-6])(.*?)>(.*?)</h\1>|<!--nextpage-->#';
      $content = preg_replace_callback($regex,
      array(&$this, 'replace_heading'), $content);
      return preg_replace('|(<p>)?<!--TOC-->(</p>)?|', $this->get_toc(),
      $content);}
    function the_posts($posts) {
      for ($i = 0; $i < sizeof($posts); $i ++) {
        $post = &$posts[$i];$this->postid = $post->ID;
        $post->post_content = $this->the_content($post->post_content);
        $post->post_toc = $this->get_toc();}
      return $posts;}};
  add_filter('the_posts', array(new YLSY_TableOfContents, 'the_posts'));

Ensuite, ouvrez le fichier single.php pour rajouter le code ci-dessous à l’endroit où vous voulez faire apparaître votre sommaire. S’il ne trouve pas de balises H2, H3 ou H4, il n’affichera rien.

<?php if(!empty($post->post_toc)) {?><?php echo $post->post_toc; ?><?php } ?>

Vous devriez donc obtenir le résultat suivant :

Affichez un sommaire au début de vos articles WordPress
Exemple de sommaire au début de vos articles WordPress

Maintenant que cette étape est mise en place, il ne reste plus qu’à ajouter un peu de graphismes au tout. Je laisse libre cours à vos envie et à votre imagination à ce niveau là.

Par exemple, vous pourriez ajouter ce code au fichier style.css de votre thème WordPress :

#toclist {list-style:circle outside none}
.toc2 {font-weight:700}
.toc3 {margin-left:1.5em}

Le résultat serait le suivant :

Un exemple de sommaire mis en page sur WordPress
Un exemple de sommaire mis en page sur WordPress

Si vous avez des questions, n’hésitez pas. ;)