Menyer och navigation

Modul 4: Skapa innehåll · Lästid: 7 minuter

Lärandemål: Efter den här lektionen kan du skapa en tydlig meny, både i ett blocktema och i ett klassiskt tema, och du vet vad som gör en meny bra.

Nyckelbegrepp: navigationsblock, Webbplatsredigerare, Utseende > Menyer, menyplats, undermeny, anpassad länk, mobilmeny, sidfotsmeny, länktext, tillgänglighet

Två sätt, beroende på ditt tema

Var du skapar menyn beror på ditt tema (lektion 5.1):

• Blocktema: menyn är ett navigationsblock i webbplatsens sidhuvud. Du redigerar det i Webbplatsredigeraren (Utseende > Redigerare > Navigation, eller i malldelen Sidhuvud).
• Klassiskt tema: du skapar menyn under Utseende > Menyer och väljer där en menyplats som temat erbjuder, till exempel "Huvudmeny" eller "Sidfot".

Ser du inte Menyer under Utseende, bara Redigerare? Då använder du ett blocktema. Det är en vanlig förvirring efter ett temabyte: "min meny är borta". Den gamla menyn finns fortfarande kvar (den ligger i databasen som en lista med menyobjekt), men det nya temat letar på ett annat ställe. I Webbplatsredigeraren kan du importera en befintlig klassisk meny till navigationsblocket.

Vad kan ingå

Ett menyobjekt kan vara:

• en sida eller ett inlägg på din webbplats;
• en kategori (då länkar det till arkivet för den kategorin);
• en anpassad länk: vilken adress som helst, även till en annan webbplats, eller ett ankare inom en sida (/diensten/#prijzen);
• i ett blocktema även andra block i navigationen, till exempel ett sökfält, ikoner för sociala medier eller en knapp "Boka tid".

Menyobjekt kan du flytta under varandra som undermeny: i ett klassiskt tema genom att dra dem lite åt höger, i navigationsblocket med "Lägg till undermeny" eller genom att dra ett objekt ovanpå ett annat.

Ett menyobjekt länkar till en sida, men har en egen etikett. Ändrar du senare titeln på sidan ändras inte etiketten i menyn automatiskt (i en klassisk meny inte alls, i navigationsblocket beroende på hur du lade till objektet). Kontrollera därför menyn efter en titeländring.

En bra meny

En meny är inte en innehållsförteckning över hela din webbplats. Det är en vägvisare till de få platser dit de flesta besökare vill. Några riktlinjer:

• Få huvudobjekt: ungefär fem till sju. Fler får ändå inte plats på en telefon och besökare läser dem inte.
• Högst ett lager undermeny. En undermeny i en undermeny är svår att använda på en telefon och förvirrande för skärmläsare.
• En undermenyrubrik är också en länk. I många teman öppnar ett klick på "Tjänster" undermenyn, men "Tjänster" är också en egen sida. Se till att den sidan finns och visar något relevant, eller att det tydligt framgår att objektet bara är en rubrik.
• Vanliga ord som besökare skulle använda: "Priser", inte "Våra investeringsmöjligheter".
• Kontakt och den viktigaste åtgärden (boka tid, beställa) alltid tillgänglig, ofta till höger i menyn eller som en knapp.
• Juridiska länkar (integritetspolicy, allmänna villkor, cookie-inställningar) hör hemma i en sidfotsmeny, inte i huvudmenyn. Men de ska alltid gå att hitta, på varje sida (lektion 9.3).

Mobil och tillgänglig

På en telefon fälls menyn oftast ihop till en knapp med tre streck (en "hamburgermeny"). I navigationsblocket ställer du in när det ska ske (alltid, eller bara på små skärmar). Testa alltid på en riktig telefon:

• Kan du träffa varje objekt med tummen, utan att råka träffa objektet bredvid?
• Öppnas undermenyer med ett tryck, och stängs de igen?
• Stängs menyn när du väljer ett objekt?

För tillgänglighet (besökare med skärmläsare eller som bara använder tangentbordet) tänk på:

• Tydliga länktexter. "Läs mer" eller "Klicka här" säger ingenting om en skärmläsare läser upp alla länkar i rad. "Läs mer om våra öppettider" gör det.
• Styrning med tangentbordet: med Tab genom menyn, med Mata in öppnas ett objekt. De flesta teman och navigationsblocket gör detta bra; egenbyggda menyer med skript gör det ofta inte.
• En länk till en annan webbplats öppnas helst i samma fönster. Måste det öppnas i ett nytt fönster, ange det tydligt.

Annan navigation

Utöver huvudmenyn hjälper dessa delar besökare att hitta rätt:

• ett sökfält (sökblocket), särskilt för en webbplats med många inlägg;
• brödsmulor ("Hem > Tjänster > Webbdesign"), ofta tillhandahållna av ett SEO-tillägg eller temat;
• interna länkar i dina texter till andra sidor (bra även för synlighet i sökmotorer, lektion 9.2);
• en 404-sida som hjälper: med ett sökfält och länkar till de viktigaste sidorna istället för bara "hittades inte". I ett blocktema redigerar du den som mallen "404" i Webbplatsredigeraren.

I praktiken: så här ser det ut i en panel

I WordPress Adminpanel:

• Blocktema: Utseende > Redigerare > Navigation. Välj menyn, lägg till objekt med plustecknet, dra dem i rätt ordning, och ange i inställningarna för navigationsblocket när mobilmenyn ska visas.
• Klassiskt tema: Utseende > Menyer. Skapa en meny, kryssa i sidor till vänster och klicka på Lägg till i meny, dra ordningen, och kryssa i menyplatsen längst ner. Spara.

Sammanfattning

• I ett blocktema skapar du menyn med navigationsblocket i Webbplatsredigeraren; i ett klassiskt tema under Utseende > Menyer med en menyplats.
• En meny visar vägen till några viktiga platser: få objekt, högst ett lager undermeny.
• Juridiska länkar hör hemma i en sidfotsmeny, som alltid går att hitta.
• Testa mobilmenyn på en riktig telefon och använd länktexter som säger något i sig själva.
• Ett sökfält, interna länkar och en hjälpsam 404-sida kompletterar menyn.

Quiz

Uppgift

Uppgift D4.3: En meny som fungerar. Skapa (eller förbättra) din webbplats huvudmeny med högst sju huvudobjekt, en undermeny och en anpassad länk, samt en sidfotsmeny med din integritetspolicy. Testa mobilmenyn på din telefon och med enbart tangentbordet (Tab och Mata in). Bocka av vad som fungerar och anteckna: vilken typ av tema har du (block eller klassiskt), var skapade du menyn, och vilken länktext förbättrade du och hur?

Läs mer

För arbete i själva WordPress har vi ännu inga egna artiklar; WordPress officiella dokumentation är omfattande.

• Navigationsblock (wordpress.org, engelska): https://wordpress.org/documentation/article/navigation-block/
• Menyer i klassiska teman (wordpress.org, engelska): https://wordpress.org/documentation/article/appearance-menus-screen/
• Webbplatsredigeraren (wordpress.org, engelska): https://wordpress.org/documentation/article/site-editor/