Remplacer le plugin TOC par une fonction affichant le sommaire d'un article

Comment résoudre le problème d’affichage de votre TOC sous WordPress5.01
Depuis la dernière mise à jour de WordPress5.01, TOC+ cesse l’affichage selon la page ou le post, à savoir qu’il fonctionne et s’affiche pour vos anciens posts.

Remplacer le plugin table of contents
Ce plugin n’ayant plus sa réputation à faire, avec de nombreuses installations et utilisation sous WordPress via son développeur Michael Tran.
Par contre cette extension n’étant plus mise à jour, nous vous proposons une alternative via une fonction à implémenter dans votre fichier functions.php de votre thème.

Pourquoi utiliser une table des matières ou un sommaire
L’utilité d’un sommaire, c’est comme un livre, vous indiquez les chapitres principaux notamment les dépendances de ceux-ci. Cet index permet de diriger vers une partie de texte qui intéresse directement vos internautes. Vous l’avez compris cela participe à l’expérience utilisateur (par exemple sur de moyens ou très long sujet de rédaction) ; cette table des matières permet de signaler et susciter l’intérêt de votre article ou page auprès de vos visiteurs. Cela implique une structure de vos articles.

Structurer vos articles
Vous allez vous imposer un fil de type chemin de fer pour une meilleure compréhension de votre sujet d’article et impliquer une meilleure rédaction pour vous même. Les visiteurs peuvent ainsi naviguer de chapitre à chapitre, revenir plus facilement sur un point précis.

Ceci dit vous pouvez très bien ne pas utiliser la méthode de la table des matières mais respecter le niveau de balisage conventionnel html sans ladite fonction.

Hiérarchie du balisage d’un article Titre et sous-titres

  1. <h1> balise de titre article
  2. <h2> balise de chapitre
  3. <h3> balise de sous-chapitre
  4. <h4> balise annexe

Créer des ancres pour indexer la table des matières
Petit rappel de son principe d’action de cette table des matières

Dès l’activation de l’extension, et l’insertion d’un shortcode

[TOC]

Remarque
Pour le plugin et la fonction il y a création automatique des ancres en fonction de vos différentes balises où est inséré votre contenu et constitue un index avec des liens vers les ancres.

NOTA
Cette fonction est beaucoup plus légère et rapide que l’utilisation du plugin.

La fonction ci-dessous proposée utilise le shortcode

[sommaire]

Créer une fonction pour indiquer le sommaire de votre contenu

Remarque
A savoir que nous n’avons pas développé cette fonction mais juste adapté cette solution pour les besoins de l’article en utilisant le css, l’animation du thème.

Etape 1 : Insérer la fonction pour une utilisation sélective

  1. Récupérer la fonction sommaire sur le site original wabeo
  2. Sélectionner la fonction adaptée dans cet article
  3. Choix de certaines fonctionnalités pour notre besoin
  4. Désactiver la numérotation de l’index
  5. Activer la solution du shortcode
  6. Désactiver l’animation du scroll de cette fonction car pas utilisé dans cette configuration
  7. Conserver le CSS du plugin TOC

Etape 2 : Utiliser la fonction table des matières suivante adaptée

à insérer dans votre fichier functions.php de votre thème WordPress

/** Table des matières avec ancres pour articles et pages avec ajout d"un short code */
function replace_ca($matches){
  return '<h'.$matches[1].$matches[2].' id="'.sanitize_title($matches[3]).'">'.$matches[3].'</h'.$matches[4].'>';
}

//Ajout d'un filtre sur le contenu  
add_filter('the_content', 'add_anchor_to_title', 12);
function add_anchor_to_title($content){   
  if(is_singular('post')){ // s'il s'agit d'un article
    global $post;
    $pattern = "/<h([2-4])(.*?)>(.*?)<\/h([2-4])>/i";
    
    $content = preg_replace_callback($pattern, 'replace_ca', $content);
    return $content;
  }else{
    return $content;
  }
}

/**
Function automenu( $echo = false )
*/
function automenu(){
  global $post;
  $obj = '<div id="toc_container" class="toc_wrap_right no_bullets"><p class="toc_title">Sommaire <span class="toc_toggle"></span></p><ul class="toc_list">';
  $original_content = $post->post_content;

  $patt = "/<h([2-4])(.*?)>(.*?)<\/h([2-4])>/i";
  preg_match_all($patt, $original_content, $results);

  $lvl1 = 0;
  $lvl2 = 0;
  $lvl3 = 0;

  foreach ($results[3] as $k=> $r) {
    $obj .= '<li><a href="#'.sanitize_title($r).'">'.$niveau.$r.'</a></li>';
}

  $obj .= '</div>';
  if ( $echo )
    echo $obj;
  else
    return $obj;
}
add_shortcode('sommaire','automenu');

Etape 3 : Ecrire un article et insérer le shortcode

  1. Insérer le Shortcode
    [sommaire]

    dans votre article en dessous des balises et avant votre contenu

    <h1> votre titre principal </h1>

Le code complet original de la fonction sommaire pour WordPress