[Inhaltsverzeichnis für Posts per JS] #Inhaltsverzeichnis #wordpress #wp

functions.php

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_script('child-script', get_stylesheet_directory_uri() . '/js/custom.js');

    if (is_single()) {
        wp_enqueue_script('singlepost-script', get_stylesheet_directory_uri() . '/js/post.js');
    }
}

post.js

document.addEventListener("DOMContentLoaded", function (event) {
    let postContent = document.querySelector('.post_content');

    if (postContent) {
        let parentElement = postContent.parentElement;
        let firstParagraph = postContent.querySelector('p');

        let tocHeading = document.createElement('p');
        tocHeading.innerText = "In diesem Artikel findest du...";
        tocHeading.className = 'like-h3';

        let toc = document.createElement('ul');
        toc.className = 'toc';
        let lastH2Item;
        let idCounter = 1;
        Array.from(document.querySelectorAll('.post_content h2, .post_content h3')).forEach(function (heading) {
            // Eindeutige ID für jede Überschrift generieren
            heading.id = 'heading' + idCounter;
            idCounter++;

            let item = document.createElement('li');
            let link = document.createElement('a');
            link.href = '#' + heading.id;
            link.innerText = heading.innerText;
            item.appendChild(link);

            if (heading.tagName === 'H2') {
                toc.appendChild(item);
                lastH2Item = item;
            } else if (heading.tagName === 'H3' && lastH2Item) {
                let subList = lastH2Item.querySelector('ul');
                if (!subList) {
                    subList = document.createElement('ul');
                    subList.className = 'h3';
                    lastH2Item.appendChild(subList);
                }
                subList.appendChild(item);
            }
        });

        postContent.insertBefore(tocHeading, firstParagraph.nextSibling);
        postContent.insertBefore(toc, tocHeading.nextSibling);
    }
});