Sur WordPress, la tentation est grande d’installer un plugin pour chaque fonctionnalité : SEO, cache, sécurité, table des matières… Résultat : un site plus lourd, plus lent et parfois difficile à maintenir.Créer une table des matières WordPress sans plugin présente de nombreux avantages :
Meilleures performances (moins de scripts et de requêtes)
Moins de dépendances tierces
Contrôle total du rendu et du comportement
Adaptation parfaite à votre thème
Dans cet article, nous allons voir comment créer une table des matières custom, sticky, pliable et avec scroll-spy, en utilisant uniquement du PHP, du CSS et un peu de JavaScript.Le code présenté ci-dessous est prêt à l’emploi et peut être intégré sur n’importe quel site WordPress bien structuré.
À quoi sert une table des matières sur un site WordPress ?
Une table des matières (TOC – Table of Contents) permet de :
améliorer la lisibilité des articles longs (800 à 3000 mots)
offrir une meilleure expérience utilisateur
faciliter la navigation entre les sections
renforcer le SEO (structure claire, liens internes, temps passé sur la page)
Google apprécie particulièrement les contenus bien hiérarchisés avec des balises H2 / H3 correctement exploitées.
Principe de fonctionnement d’une TOC custom
Notre table des matières personnalisée repose sur trois piliers :
Analyse du contenu pour détecter les balises H2 et H3
Injection automatique d’ancres dans les titres
Génération dynamique de la table des matières affichée dans une colonne latérale
Le tout sans aucun plugin.
1. Génération automatique de la table des matières (PHP)
Le code suivant doit être ajouté dans le fichier functions.php de votre thème (ou thème enfant).
functions.php
/**
* PNET: Generate TOC and inject anchors
*/
global $pnet_toc_html;
$pnet_toc_html = '';
function pnet_auto_toc_filter( $content ) {
if ( ! is_single() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
global $pnet_toc_html;
$pattern = '/(.*?)<\/h\1>/i';
if ( preg_match_all( $pattern, $content, $matches, PREG_SET_ORDER ) ) {
if ( count( $matches ) < 2 ) {
return $content;
}
$toc = '';
$used = [];
foreach ( $matches as $index => $match ) {
$level = $match[1];
$attrs = $match[2];
$text = strip_tags( $match[3] );
$slug = sanitize_title( $text );
if ( isset( $used[$slug] ) ) {
$slug .= '-' . $index;
}
$used[$slug] = true;
$toc .= '
' . esc_html( $text ) . '
';
$replacement = '' . $match[3] . '';
$pos = strpos( $content, $match[0] );
if ( $pos !== false ) {
$content = substr_replace( $content, $replacement, $pos, strlen( $match[0] ) );
}
}
$toc .= '';
$pnet_toc_html = $toc;
}
return $content;
}
add_filter( 'the_content', 'pnet_auto_toc_filter' );Ce script :
détecte automatiquement les balises H2 et H3
crée des ancres SEO-friendly
stocke la table des matières dans une variable globale
2. Affichage de la table des matières dans le template
Dans le template single.php (ou équivalent), insérez le code suivant à l’endroit souhaité (souvent dans une colonne latérale).
single.php
Table des matières
3. Style CSS : sticky, pliable et responsive
style.css
.pnet-toc-wrapper {
position: sticky;
top: 190px;
align-self: flex-start;
background-color: #fff;
box-shadow: 0 2px 12px 1px hsla(0,0%,67%,.21);
border-radius: 20px;
padding: 20px;
}
.pnet-toc-toggle {
width: 100%;
background: none;
border: none;
font-weight: 600;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.pnet-toc-wrapper.collapsed .pnet-toc {
display: none;
}
.pnet-toc a.active {
color: #7051f4;
font-weight: 600;
background: #f7f6ff;
border-left: 5px solid;
padding: 3px;
}
@media (max-width: 991px) {
.pnet-toc-wrapper {
display: none;
}
}4. Scroll-spy et interaction (JavaScript)
Le scroll-spy permet de mettre en évidence la section active pendant le défilement.
Bonnes pratiques SEO pour une table des matières WordPress
Utiliser des titres clairs et explicites
Éviter les titres trop longs
Limiter la TOC aux H2 / H3
Vérifier que les ancres sont uniques
Conclusion : faut-il vraiment un plugin pour une table des matières ?
Dans la majorité des cas : non.Une table des matières WordPress sans plugin est :
plus légère
plus performante
plus maintenable
totalement personnalisable
Elle s’intègre parfaitement dans une stratégie SEO long terme.
Besoin d’un accompagnement WordPress sur mesure ?
Vous souhaitez :
optimiser les performances de votre site WordPress
supprimer les plugins inutiles
mettre en place une structure SEO solide
👉 Faites appel à une agence WordPress spécialisée.Nous concevons des sites WordPress rapides, propres et évolutifs, pensés pour la performance et la visibilité.
Partager cet article
