Innehållsförteckning på WordPressidor

Långa sidor behöver en innehållsförteckning. Det kan ordnas både med ett tillägg och manuellt. Vad är bästa lösningen för dig?

Publicerad 9 juli 2021

Om du har mycket text på en sida kan det bli svårt för besökaren att hitta det hen letar efter. Man kan trycka Ctr + F och leta efter ett ord, men alla besökaretänker inte på det. Andra föredrar att ha en innehållsförteckning. Den berättar också om för besökaren om man kan erbjuda rätt information.

Det finns två metoder för att ordna en innehållsförteckning. En går snabbt för dig, men långsamt för besökarna. Den andra tar tid för dig, men är snabb för besökare. Vi börjar med den som är snabb för besökarna.

Gör en innehållsförteckning manuellt

Att göra en innehållsförteckning manuellt kan ta tid och det är risk det blir fel när du senare ändrar i på dina sidor.

Skriv texten för innehållsförteckningen i den vanliga ordbehandlaren i WordPress och formatera texten som du önskar. Använd listor, eventuellt numrerade, andra färger eller annan storlek på texten. Om du har många innehållsförteckningar, och eventuellt vill byta design senare, är det bättre att bestämma designen med CSS.

När du skrivit texten som ska vara i innehållsförteckningen är det dags att koda. Det är inte alltför svårt.

Högt upp i ordbehandlaren hittar du några flikar. På en står det «Text», tryck på den. Du kan nu ändra i HTML-koden.
Innan texten du ska använda som en länk skriver du:

<a href="#exempel">

Byt ut ”exempel” mot något som beskriver vad stycket handlar om. Detta ord ska vara unikt, du får inte ha två länkar med samma text.

Där länken ska sluta skriver du:

</a>

Gör samma sak med alla punkter i innehållsförteckningen.

Nu har du berättat för nätläsaren att om man klickar på texten ska man skickas vidare till en annan plats på sidan, men inte definnerat var.

Du ska därför lägga till följande i en tag där du vill att folk ska hamna:

id="#exempel"

Byt ut ”exempel” mot det du ändrade till tidigare i menyn. Gör detta för alla punkter i menyn.

Du kan lägga in koden i överskiftens tag så det blir så här:

<h2 id="#exempel">

Jag anser det är bättre att lägga in den lite högre upp. Den plats du anger hamnar så högt upp i skärmen som möjligt. Det innebär att det kan bli svårt att se överskriften, läsaren tittar mer i mitten och texten kamoufleras vid kanten. Dessutom har en del sidor en meny som följer med ned när man skrollar ned, då kommer menyn dölja överskriften.

Genom att lägga in koden i stycket över löser du detta.

Tänk på att om du raderar texten där koden ligger kommer länken sluta fungera. Testa därför dina interna länkar när du uppdaterar dina texter.

Innehållsförteckning med tillägg

En lösning som är snabbare för dig är att installera en plugin som sköter detta åt dig. Det finns många att välja på. En del är enkla och ger få val. Andra är mer avancerade och har en mängd funktioner som är svårare att få till genom att skriva koden själv. Du kan till exempel få innehållsförteckningen som en liten symbol. När man trycker på den kommer texten fram.

Innehållsförteckningar kan upprättas automatiskt på alla sidor med minst ett bestämt antal överskrifter. Det är ofta lätt att bestämma hur texten ska formateras.

Nackdelen är, som vanligt, att tillägg gör sidan långsammare. Mer avancerade tillägg med många funktioner du kanske inte använder har störst påverkan.

Jag har bland annat testat Easy Table of Contents som har det mesta du borde behöva och lätt att använda. Problemet är att den gjorde hemsidan 25 % långsammare. Det är dåligt för sökmotoroptimalisering och användarvänlighet för dina besökare som har långsamt internet.