Créer une table des matières (TOC) personnalisée sur WordPress sans plugin

/**
* 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([2-3])(.*?)>(.*?)<\/h\1>/i';

if ( preg_match_all( $pattern, $content, $matches, PREG_SET_ORDER ) ) {

if ( count( $matches ) < 2 ) {
return $content;
}

$toc = '<ul class="pnet-toc-list">';
$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 .= '<li class="pnet-toc-item-' . $level . '">
<a href="#' . $slug . '">' . esc_html( $text ) . '</a>
</li>';

$replacement = '<h' . $level . $attrs . ' id="' . $slug . '">' . $match[3] . '</h' . $level . '>';

$pos = strpos( $content, $match[0] );
if ( $pos !== false ) {
$content = substr_replace( $content, $replacement, $pos, strlen( $match[0] ) );
}
}

$toc .= '</ul>';
$pnet_toc_html = $toc;
}

return $content;
}
add_filter( 'the_content', 'pnet_auto_toc_filter' );

<?php global $pnet_toc_html; ?>
<?php if ( ! empty( $pnet_toc_html ) ) : ?>
<aside class="col-lg-4 col-md-4">
<div class="pnet-toc-wrapper">
<button class="pnet-toc-toggle" aria-expanded="true">
Table des matières
<span class="pnet-toc-arrow"><i class="fa fa-arrow-down"></i></span>
</button>
<nav class="pnet-toc">
<?php echo $pnet_toc_html; ?>
</nav>
</div>
</aside>
<?php endif; ?>

<code class="language-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;
}</code>

.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;
}
}

<script>
document.addEventListener('DOMContentLoaded', function () {

/* TOGGLE */
const wrapper = document.querySelector('.pnet-toc-wrapper');
const toggle = document.querySelector('.pnet-toc-toggle');

if (toggle && wrapper) {
toggle.addEventListener('click', () => {
wrapper.classList.toggle('collapsed');
toggle.setAttribute(
'aria-expanded',
!wrapper.classList.contains('collapsed')
);
});
}

/* SCROLL SPY */
const tocLinks = document.querySelectorAll('.pnet-toc a');
const headings = document.querySelectorAll('.post-content h2, .post-content h3');

if (!tocLinks.length || !headings.length) return;

/* Assure des IDs uniques */
headings.forEach((h, i) => {
if (!h.id) {
h.id = 'toc-section-' + i;
}
});

const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;

tocLinks.forEach(link => link.classList.remove('active'));

const activeLink = document.querySelector(
'.pnet-toc a[href="#' + entry.target.id + '"]'
);

if (activeLink) activeLink.classList.add('active');
});
},
{
root: null,
rootMargin: '-150px 0px -60% 0px',
threshold: 0
}
);

headings.forEach(h => observer.observe(h));

});
</script>