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

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.

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.
Ce plugin crée automatiquement une table des matières (TOC)

Le plugin de ce développeur est fonctionnel

L’utilité d’un sommaire, c’est comme un livre, vous indiquez les chapitres principaux notamment les dépendances de ceux-ci. Cet index placé en entête de page web 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) sauter directement aux paragraphes essentiels devient une évidence ; 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 certaine structure de vos articles (mise en page).

Expérience utilisateur, moteur de recherche et structure html

Une table des matières responsive statique ou dynamique dédié à la navigation dans l’article apporte une aide au référencement naturel ainsi qu’une expérience unique et facilité par un index explicite de votre page pour le lecteur

• Un clic sur le titre un élément cliquable de la table des matières qui vous effectue une redirection à l’emplacement du chapitre que vous désirez lire
• C’est aussi un menu qui peut défiler en même temps que le scroll de votre lecture
• Une table cumulative de repère permet de vous situer hiérarchiquement dans le corps de l’article
• Trouver l’information clé qui intéresse les internautes
• Vous sollicitez les internautes pour lire partiellement ou complètement l’article

Finalement il devient un outil de référence et incontournable lors de la création de sites internet

Influencer un minimum le référencement naturel des pages de votre site grâce à l’insertion de mots-clé dans les titres pour faciliter la compréhension

• Les moteurs de recherche peuvent mieux cibler votre explication pour la suggérer aux internautes lors de leur recherche sur un navigateur
• Il a la possibilité de présenter un lien hypertexte et texte indicatif vers votre site internet en fonction de la pertinence de votre sujet

Pourquoi utiliser et inclure ces balises supplémentaires dans le contenu des pages en respectant les standards du Web : définir l’accessibilité

• Balisage sémantique et hiérarchique indiquer la nature du contenu
• Obtenir un document accesssible et compréhensible par tous les navigateurs utilisés
• En HTML, il y a des balises spécifiques pour les titres et sous-titres : h1, h2, h3, h4
• Les navigateurs classiques les aiment bien sûr, mais aussi les robots d’indexation des moteurs de recherche, les lecteurs à synthèse vocale pour les mal-voyants, les plages brailles
• Le menu ne doit pas dépasser la ligne de flottaison dans la mesure du possible
• Concision des titres selon votre sujet abordé

Structurer vos articles, insérer des balises web à vos titres, sous-tires

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 gràce à une mise en page réussie. Les visiteurs peuvent ainsi naviguer de chapitre à chapitre, revenir plus facilement sur un point précis d’un paragraphe.

Optimisez les titres avec vos mots-clés, sans pour autant faire des liens de titres indigestes
On privilégie un titre explicite court, soit moyen et mais surtout 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 des balises html conventionnelles sans ladite fonction avec beaucoup moins d’ergonomie pour passer d’un repère de paragraphe à une autre section.

Balise html
De h1 à h6 Un titre qui reflète la hiérarchie et la mise en valeur du contenu du document
p Tout paragraphe de texte narratif et standard qui n’est pas un titre

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

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 dans votre page html

[TOC]

La balise pose une ancre repérée par un dièze #etape-2-utiliser-

https://www.creactivit.com/informatique/comment-remplacer-le-plugin-table-of-contents-plus-toc-par-une-fonction-table-des-matieres-8248/#etape-2-utiliser-la-fonction-table-des-matieres-suivante-adaptee

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

Le contenu doit être varié et attractif afin d’apportez de l’information utile de façon agréable pour atteindre votre objectif

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

Le script ci-dessous proposé utilise le shortcode

[sommaire]

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

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 sur les pages du site il n’est pas utilisé

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

Le script à 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 en mode Texte

1. Insérer le Shortcode dans le code source au début de votre article

   [sommaire]

   dans votre article en dessous des balises et avant votre contenu

   <h1> votre titre principal </h1>

Avec la fonction ci-dessus vous installez votre shortcode là où vous souhaitez un sommaire dans votre code html

Le décorum de ce sommaire s’applique directement dans une feuille de style

Prévoir un espacement entre les titres et les items avec un margin pour définir la taille des marges sur les quatre côtés de l’élément ; entre chaque balise li pour parfaire le tout, inspirer vous de celui sur le site web actuel

Incidence des tables des matières pour les moteurs de recherche

L’ajout d’un sommaire peut améliorer l’optimisation des moteurs de recherche. Un taux de rebond peut être réduit de votre site Web, les utilisateurs accédant aisément aux sections qui répondent à leur intention de recherche.

Les tables des matières aident à rendre vos pages Web plus pertinentes sur les pages de résultats des moteurs de recherche.

Dans le référencement SEO, la proposition de mettre en valeur une table des matières aide Google à générer automatiquement des liens vers différents paragraphes de votre article ou page dans ses résultats de recherche

Le code complet original de la fonction sommaire pour WordPress

• Création d’une table des matières pour votre CMS préféré avec une fonction à intégrer à votre thème WordPress