WordPress : ajouter un sommaire sans plugin

Je vous propose de voir dans cet article comment ajouter un sommaire sur les articles/pages WordPress sans plugin.

Il existe des plugins WordPress qui font cela très bien mais je préfère me passer autant que possible de plugins pour des questions de sécurité et de temps de chargement.

Un sommaire comme ci-dessus a de nombreux avantages.

Il permet aux lecteurs de sauter directement à la partie du contenu qui les intéresse, particulièrement pratique sur les longs contenus.

Cela permet aussi d'améliorer le référencement de l'article ou de la page puisque les moteurs comme Google vont utiliser le sommaire dans les résultats qu'ils proposent.

Il est possible de créer un sommaire "manuellement" dans vos articles WordPress mais c'est plutôt long et fastidieux, surtout si vous changer parfois vos titres. Nous allons donc voir comment ajouter un sommaire qui va se créer automatiquement en fonction des titres de votre article ou de votre page.

Le fonctionnement est relativement simple, vous contribuez votre article ou votre page comme habituellement dans WordPress, en utilisant les titres à votre convenance. Lorsque l'on souhaite avoir un sommaire, parce que notre contenu est long avec plusieurs titres et sous-titres, on ajoute simplement un bloc "HTML personnalisé" avec le code <!-- sommaire --> et celui-ci fera apparaître un sommaire qui reprend tous les titres de la page ou de l'article une fois publié.

Il suffit d'ajouter le code ci-dessous dans le fichier functions.php du thème. Cette fonction sera alors chargée et appliquée dès qu'un contenu est demandé par WordPress.

function wp_sommaire($t) {
	$c = "<!-- sommaire -->";
	if( !strpos($t, $c) ) { return $t; }
	preg_match_all('~(<h([2-6]))(.*?>(.*)<\/h[2-6]>)~', $t, $h);
	if(count($h[0]) < 2) { return $t; }
	$n = '';
	for ($i = 0; $i < count($h[0]); ++ $i) {
		$a = sanitize_title($h[4][$i]);
		$t = str_replace($h[0][$i], '<h'.$h[2][$i].' class="sommaire-ancre"><span id="'.$a.'"></span>'.$h[4][$i].'</h'.$h[2][$i].'>', $t);
	    $n .= '<li class="titre-h'.$h[2][$i].'"><a href="#'.$a.'">'.$h[4][$i].'</a></li>';
	}    
	$s = '<nav class="wp-sommaire"><ul>'.$n.'</ul></nav>';
	return str_replace($c, $s, $t);
} 
add_filter('the_content', 'wp_sommaire');

1. On ouvre une fonction wp_sommaire dans laquelle on récupère le contenu de WordPress avec la variable t.
2. On initialise une variable c pour indiquer le texte dans le contenu qui appelle le sommaire.
3. Si le texte d'appel n'est pas présent, on ne va pas plus loin, pas de sommaire.
4. On récupère dans un tableau h tous titres du contenu grâce à une expression régulière.
5. On ajoute une condition, s'il y a moins de 2 titres présents dans la page (donc un seul), on ne va pas plus loin, pas de sommaire.
6. On initialise une variable n qui va recueillir le code HTML pour les titres du sommaire.
7. On ouvre une boucle for afin d'effectuer une action pour chaque titre présent dans le tableau h.
8. On initialise une variable a en utilisant une fonction wordpress (sanitize_title) pour transformer le titre en portion d'url.
9. On injecte dans le code HTML du titre un span qui fera office d'ancre.
10. On ajoute sur notre variable n le code HTML du titre actuel.
11. On ferme la boucle.
12. On initialise une variable s qui va recueillir le code HTML du sommaire.
13. On retourne le contenu avec le sommaire et les ancres sur les titres.
14. On ferme la fonction.
15. On ajoute le filtre sur les contenus de WordPress

Voici une proposition pour styliser le sommaire, le code suivant est à ajouter dans le fichier style.css du thème. Ce code CSS propose de mettre en avant le sommaire avec une bordure à gauche et de diminuer la taille de la police selon le type de titre. Il permet également d'avoir un système d'ancre qui s'arrête un peu au dessus du titre et pas directement sur le titre.

.wp-sommaire {
	border-left: 5px solid #D9D9D9;
	hyphens: auto;
}
.wp-sommaire ul {
	list-style: none;
	padding-left: 0;
}
.wp-sommaire ul li {
	padding-left: 0;
}
.wp-sommaire ul li.titre-h3,
.wp-sommaire ul li.titre-h4,
.wp-sommaire ul li.titre-h5,
.wp-sommaire ul li.titre-h6 {
	padding-left: 20px;
	font-size: .9em;
}
.sommaire-ancre {
    position: relative;
}
.sommaire-ancre span {
    position: absolute;
    top: -100px;
}

Vous êtes évidemment libre de styliser le sommaire comme bon vous semble. Par ailleurs il faudra probablement ajuster dans .sommaire-ancre span le top selon le design de votre site web, notamment quand il y a un "sticky header", à voir à l'usage.

Maintenant que tout est installé dans le thème, vous pouvez facilement ajouter un sommaire sur vos pages ou articles. Il suffit de créer un bloc "HTML personnalisé" avec le code HTML <!-- sommaire --> à l'endroit exact où vous souhaitez voir le sommaire, rien de plus.

J'ai choisi d'appeler manuellement le sommaire, mais il est possible de modifier cette fonction pour que le sommaire se crée automatiquement sans appel dans les contenus. Il est également possible de choisir les niveaux de titre à afficher ou non dans le sommaire.