Vil du have en indholdsfortegnelse i WordPress uden at røre kode? Det er let. Brug det gratis Superb Addons-plugin, så er den der på et øjeblik. Eller gå den tekniske vej og læg en lille smule kode i dit tema.
Begge løsninger laver ankerlinks til dine H2- og H3-overskrifter. Læsere hopper hurtigt til det afsnit, de vil se. Det gør oplevelsen bedre, og det hjælper SEO og Core Web Vitals, fordi folk bliver længere på siden.
Google viser ofte jump-to links i søgeresultater. Det er ekstra nyttigt i lange artikler, især på mobil, hvor navigation ellers er besværlig.
Her får du en trin-for-trin guide til ankerlinks og indholdsfortegnelse i WordPress med begge metoder. Vælg den vej, der passer dig bedst.
Trin for trin til indholdsfortegnelse med Superb Addons eller egen kode
En indholdsfortegnelse i WordPress laves enten med det gratis Superb Addons-plugin eller ved at kode den direkte i temaet. Begge løsninger laver ankerlinks til overskrifter, men de passer til forskellige behov og niveauer.
Installer Superb Addons ved at gå til Plugins, Tilføj nyt, søg på “Superb Addons”, installer og aktiver. Åbn et indlæg i Gutenberg, indsæt blokken “Table of Contents (Superb Addons)” dér, hvor du vil have din indholdsfortegnelse. Vælg hvilke overskriftsniveauer, typisk H2 til H4, som skal med. Plugin’et genererer id’er til overskrifterne automatisk, så du slipper for manuelt arbejde.
Indstillingerne er fleksible. Gør indholdsfortegnelsen foldbar, lad den følge med ved scroll (sticky), vælg nummerformat som 1.1 eller 2.3, og sæt den til automatisk at dukke op før den første H2 i alle indlæg i plugin-indstillingerne. Udeluk nemt bestemte overskrifter i blokpanelet.
Ydelsen er let og hurtig, CSS’en er lille, og der er ingen tunge JavaScript-rammer. Tilpas designet til temaet med ekstra CSS under Tema, Customizer, Ekstra CSS.
Vil du kode din egen løsning i temaet, kræver det teknisk snilde, men giver fuld kontrol over udseende og funktion. Start med at hente hele indholdet (the_content), byg et DOM-træ, find alle H2 – H4 og tjek id’er. Mangler de, så tildel unikke id’er ud fra teksten (slug).
Byg derefter en ul/li-liste med links til id’erne, sat op hierarkisk efter overskriftsniveau. Injicer listen før brødteksten via et filter på the_content i functions.php eller med en Gutenberg Template Part.
En enkel PHP-opsætning bruger add_filter(‘the_content’, ‘mytheme_inject_toc’, 20). mytheme_inject_toc håndterer DOMDocument-parsing, id’er via sanitize_title(), opbygning af listen og sikring mod dubletter, for eksempel ved at kigge efter specielle kommentarer i markup.
Tilgængelighed betyder noget. Giv containeren role=”navigation” og aria-label=”Indholdsfortegnelse”. Scrollspy, der markerer aktiv sektion med aria-current=”true”, hjælper brugere med overblik. Sørg for tydelig fokus-styling og kontrastfarver i tråd med WCAG AA.
Sikkerhed kræver grundig rensning af output. Rens id’er med sanitize_title og alt andet HTML-output med esc_html/esc_attr. Hold dig til H2 – H4 for at undgå uønskede elementer, og test mod shortcodes og embeds, da DOMDocument kan ændre markup utilsigtet.
Kort sagt passer Superb Addons, når du vil have noget op at køre hurtigt uden besvær, godt for redaktører uden kodebehov. Egen kode giver maksimal frihed over udseende og funktion samt færre afhængigheder, hvilket giver strammere kontrol over performance.