function csstricks_toc($post=false) {
global $post;
$blocks = parse_blocks( $post->post_content );
$headings = array();
foreach( $blocks as $block ) {
if( 'core/heading' === $block['blockName'] ) {
if( false !== strpos( $block['innerHTML'], 'id=' ) ) {
$element = 'h' . $block['attrs']['level'];
$title = wp_strip_all_tags( $block['innerHTML'] );
} else {
$title = wp_strip_all_tags( $block['innerHTML'] );
}
$headings[] = $title;
}
}
if( !empty( $headings ) ) {
echo '<ol class="toc">';
foreach( $headings as $heading )
echo '<li class="toc-link"><a href="#aa-' . sanitize_title_with_dashes($heading) . '">' . $heading . '</a></li>';
echo '</ol>';
}
}Der Kern davon stammt von The SEO Guidebox. Der ursprüngliche Snippet parst alle Blöcke im Post-Inhalt, sucht nach einer Überschriftenebene, entfernt das HTML und gibt dann den Überschriftentext in einer geordneten Liste aus.
Ich wollte wirklich, dass der ausgegebene Text an die Überschriften des Posts verankert ist. Wir verwenden hier auf CSS-Tricks bereits ein Plugin, das dynamisch IDs in Überschriften einfügt, daher benötigte ich diesen Teil nicht und habe ihn entfernt. Dann habe ich ein Anker-Element zu den Listenelementen hinzugefügt, das die Funktion sanitize_title_with_dashes() verwendet, um die $heading in einen Kleinbuchstaben-String mit Bindestrichen zu konvertieren.
Das Einzige ist, dass das von uns verwendete Plugin, das IDs einfügt, jeder generierten ID aa- voranstellt. Also habe ich das in die Schleife eingefügt und jetzt haben wir eine Inhaltsübersichtskomponente auf dieser Website. Wir haben es noch weiter getrieben, indem wir ein ACF-Feld verwendet haben, das es uns ermöglicht, die Inhaltsübersicht bedingt einzufügen.
