12. Juni 2024

Inhaltsverzeichnis für Posts in WordPress automatisch erstellen

Bei sehr langen Artikeln bietet es sich an, dem Leser ein Inhaltsverzeichnis zur Verfügung zu stellen. Wenn im Artikel Zwischenheadlines vorhanden sind (und das sollten sie!), kann man diese in WordPress dafür nutzen, automatische Textanker zu setzen und daraus das Inhaltsverzeichnis generieren.

Ergänze hierzu folgenden Code in der functions.php:

function add_anchors_to_h3($content) {
    $pattern = '/<h3(.*?)>(.*?)<\/h3>/i';
    $content = preg_replace_callback($pattern, 'replace_h3_with_links', $content);
    return $content;
}

function replace_h3_with_links($matches) {
    $heading_text = $matches[2];
    $anchor = sanitize_title($heading_text);
    $new_heading = "<h3{$matches[1]} id='$anchor'>$heading_text</h3>";
    return $new_heading;
}

add_filter('the_content', 'add_anchors_to_h3');

function generate_table_of_contents() {
    global $post;
    $content = $post->post_content;
    $pattern = '/<h3(.*?)>(.*?)<\/h3>/i';

    preg_match_all($pattern, $content, $matches);

    if (!empty($matches[0])) {
        echo '<p><strong>In diesem Artikel:</strong></p>';
	echo '<ul class="table-of-contents">';
        foreach ($matches[2] as $index => $heading_text) {
            $anchor = sanitize_title($heading_text);
            $cleaned_heading = strip_tags($heading_text);
            echo '<li><a href="#' . esc_attr($anchor) . '" class="scrollto">' . esc_html($cleaned_heading) . '</a></li>';
        }
        echo '</ul>';
    }
}
Code-Sprache: PHP (php)

Anschließend kannst du die Funktion „generate_table_of_contents()“ an beliebiger Stelle im Post-Template oder in einem LazyBlock ausführen.