Hur man skapar en visuell sitemap i WordPress (det enkla sättet)

Har du någonsin besökt en stor, komplex webbplats och känt dig vilsen när du försökt hitta det du behöver? Vi har märkt detta problem på flera stora webbplatser som nyhetsutgivare eller nätbutiker, även om de redan har en praktisk navigeringsmeny 😅

Den goda nyheten är att vi har upptäckt en enkel lösning på detta problem: en visuell sidkarta. Detta är en användarvänlig guide som hjälper besökare att navigera genom en webbplats struktur.

I det här inlägget visar vi hur du skapar en visuell webbplatskarta i WordPress med ett lättanvänt plugin.

Behöver min webbplats verkligen en visuell sidkarta?

En webbplatskarta är som en vägkarta för din webbplats, som visar alla viktiga sidor och hur de är sammankopplade.

Om du är bekant med WordPress SEO-principer, då känner du förmodligen redan till termen XML-webbplatskartor. Dessa är utformade för sökmotorer och hjälper dem att hitta och förstå ditt innehåll.

Å andra sidan finns det också HTML-webbplatskartan.

I det här inlägget kommer vi att fokusera på visuella webbplatskartor, som är en typ av HTML-webbplatskarta som visar din webbplats struktur på ett mer visuellt tilltalande och lättförståeligt sätt än en XML-webbplatskarta.

Om du har en webbplats som riktar sig till olika typer av användare, kan en visuell webbplatskarta hjälpa till att guida varje besökare till sidan eller inlägg som är mest relaterat till deras intresse. Det är som att ha en vänlig guide som visar alla vart de ska gå.

Visuella sidkartor kan också vara utmärkta för utbildningswebbplatser eller onlinekurser. De kan visa inlärningsvägen och hjälpa elever att förstå hur olika ämnen är sammankopplade.

För webbutiker med många produktkategorier kan en visuell webbplatskarta hjälpa kunder att förstå ditt produktsortiment på ett ögonblick och hitta de kategorier de är intresserade av enklare. Här är ett bra exempel vi hittat på The Good Guys webbplats:

Med det i åtanke, låt oss titta på hur man skapar en visuell sidkarta i WordPress.

Hur man skapar en visuell sitemap i WordPress utan kod (nybörjarvänligt) 🗺️

Vi brukade rekommendera Slick Sitemap-pluginet för att skapa visuella webbplatskartor, men det har inte uppdaterats på länge. Och när vi testade det nyligen fann vi att det inte fungerar lika bra som det brukade.

Vi försökte också använda Gutenberg och lite anpassad CSS för att skapa en sidkarta. Detta fungerade till en början, men när vi lade till fler sidor på vår webbplats började sidkartan se konstig ut eftersom CSS:en inte kunde hålla jämna steg med ändringarna.

Vi gillar att hitta enkla lösningar som sparar tid och inte komplicerar saker här på WPBeginner. Och tack och lov hittade vi en bra plugin-ersättning som heter Simple Sitemap som gör jobbet bra.

För att komma igång måste du installera och aktivera WordPress-pluginet på din webbplats. När det är gjort kan du skapa ett nytt inlägg eller en ny sida för din webbplatskarta. Eller så kan du öppna en befintlig med Gutenberg blockredigerare.

I vårt fall bestämde vi oss för att skapa en ny sida som heter 'Sidkarta'.

Med blockredigeraren öppen, klicka på '+' -knappen var som helst på sidan och välj blocket 'Simple Sitemap'.

Som standard skapar pluginet en webbplatskarta över dina sidor och deras undersidor, men inte dina inlägg.

Om du vill lägga till inlägg i sidkartan kan du gå till 'Allmänna inställningar' i fliken 'Block'. Skriv här in 'Inlägg' i fältet 'Välj inläggstyper att visa'.

När du gör det hittar du alla dina inlägg listade under avsnittet sidor på webbplatskartan.

Låt oss sedan anpassa i vilken ordning sidor och inlägg listas. Du kan välja mellan titel, datum, ID, författare, namn, ändrad, menyordning, slumpmässig ordning eller antal kommentarer. Du kan också välja mellan 'Stigande' eller 'Fallande' ordning.

Genom att skrolla ner kan du välja att:

• Visa etiketten för inläggstyp för att tydligt skilja mellan sidor och inlägg i webbplatskartan.
• Visa utdragen av inläggen och sidorna. Vi bestämde oss för att inaktivera detta alternativ eftersom det kan göra webbplatskartan lång.
• Aktivera sidkartalänkar. Om du inaktiverar det här alternativet kan användare inte klicka på länkarna i sidkartan.
• Låt varje länk öppnas i en ny flik varje gång de klickas på, så att användarna inte lämnar sitemap-sidan.

Vilken inställning du än väljer beror på dina preferenser och webbplatsens behov, så tänk noga igenom dessa alternativ. Du kan också alltid aktivera eller inaktivera dessa inställningar om du någonsin ändrar dig.

Nedanför det avsnittet finns 'Etiketter för inläggstyper'. Här kan du ersätta standardetiketten för inläggstypen med annan text.

I vårt exempel har vi beslutat att ersätta etiketten 'Sidor' med 'Utforska våra sidor' som en uppmaning till handling.

Slutligen kan du öppna 'Flikinställningar'.

Här kan du aktivera flikar för att visa dina webbplatskartlänkar. Som standard kommer dina webbplatskartlänkar att delas upp baserat på deras inläggstyp. Detta kan vara ett bra alternativ om du inte vill att din webbplatskarta ska bli för lång.

När du är nöjd med hur sitemap-sidan ser ut kan du fortsätta att anpassa sidan efter eget tycke. Om du behöver hjälp finns här några guider för att komma igång:

• Hur man redigerar en WordPress-webbplats (ultimat guide)
• Hur man lägger till anpassade teckensnitt i WordPress
• Hur man lägger till anpassad rullningslist till vilket element som helst i WordPress (om sitemap-blocket är lite långt)

När du är redo, klicka bara på Spara, Uppdatera eller Publicera.

Se till att visa din nya sida på mobil, dator och surfplatta för att se om den ser bra ut på alla enheter eller inte.

Här är hur vår visuella webbplatskarta ser ut:

Bonustips för att förbättra din webbplatsnavigering

Vill du göra din webbplats ännu mer användarvänlig? Kolla in dessa guider nedan:

• Hur man lägger till en responsiv meny i helskärmsläge i WordPress – Lär dig skapa en meny som ser bra ut på alla enheter.
• Hur du visar brödsmule-navigeringslänkar i WordPress – Hjälp besökare att förstå var de befinner sig på din webbplats.
• Så här lägger du till tangentbordsnavigering med piltangenter i WordPress – Gör din webbplats mer tillgänglig för tangentbordsanvändare.
• Hur man skapar en personalförteckning i WordPress (med medarbetarprofiler) – Organisera din teaminformation effektivt.
• WordPress sidofältsknep för maximala resultat – Optimera ditt sidofält för bättre navigering och engagemang.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du skapar en visuell webbplatskarta i WordPress. Du kanske också vill kolla in våra experters val av de bästa dra-och-släpp-sidbyggarna för WordPress och vår ultimata guide om de mest effektiva designelementen för WordPress-webbplatser.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.