Menyer og navigasjon

Modul 4: Lage innhold · Lesetid: 7 minutter

Læringsmål: Etter denne leksjonen kan du lage en tydelig meny, både i et blokktema og i et klassisk tema, og du vet hva som kjennetegner en god meny.

Nøkkelbegreper: navigasjonsblokk, Nettstedsredigerer, Utseende > Menyer, menyplassering, undermeny, tilpasset lenke, mobilmeny, bunntekstmeny, lenketekst, tilgjengelighet

To måter, avhengig av temaet ditt

Hvor du lager menyen, avhenger av temaet ditt (leksjon 5.1):

• Blokktema: menyen er en navigasjonsblokk i toppen av nettstedet. Du redigerer den i Nettstedsredigereren (Utseende > Redigeringsverktøy > Navigasjon, eller i malelementet Sidetopp).
• Klassisk tema: du lager menyen under Utseende > Menyer og velger der en menyplassering som temaet tilbyr, som «Hovedmeny» eller «Bunntekst».

Ser du ikke Menyer under Utseende, bare Redigeringsverktøy? Da bruker du et blokktema. Dette er en vanlig forvirring etter et temabytte: «menyen min er borte». Den gamle menyen finnes fortsatt (den ligger i databasen som en liste med menyelementer), men det nye temaet ser etter på et annet sted. I Nettstedsredigereren kan du importere en eksisterende klassisk meny i navigasjonsblokken.

Hva som kan inngå

Et menyelement kan være:

• en side eller et innlegg fra nettstedet ditt;
• en kategori (da lenker den til arkivet for den kategorien);
• en tilpasset lenke: hvilken som helst adresse, også til et annet nettsted, eller et anker inne i en side (/diensten/#prijzen);
• i et blokktema også andre blokker i navigasjonen, som et søkefelt, ikoner for sosiale medier eller en knapp «Bestill time».

Menyelementer kan du skyve under hverandre som undermeny: i et klassisk tema ved å dra dem litt mot høyre, i navigasjonsblokken med «Legg til undermeny» eller ved å dra ett element oppå et annet.

Et menyelement lenker til en side, men har en egen etikett. Endrer du senere tittelen på siden, endres ikke etiketten i menyen automatisk (i en klassisk meny skjer det aldri, i navigasjonsblokken avhenger det av hvordan du la til elementet). Sjekk derfor menyen etter en tittelendring.

En god meny

En meny er ikke en innholdsfortegnelse for hele nettstedet. Det er en veiviser til de få stedene de fleste besøkende vil til. Noen retningslinjer:

• Få hovedelementer: fem til sju omtrent. Mer får ikke plass på en mobil likevel, og besøkende leser det ikke.
• Maksimalt ett lag med undermeny. En undermeny i en undermeny er vanskelig å betjene på mobil og forvirrende for skjermlesere.
• En undermenyoverskrift er også en lenke. I mange temaer åpner et klikk på «Tjenester» undermenyen, men «Tjenester» er også en side i seg selv. Sørg for at den siden finnes og viser noe fornuftig, eller at elementet tydelig bare er en overskrift.
• Vanlige ord som besøkende selv ville brukt: «Priser», ikke «Våre investeringsmuligheter».
• Kontakt og den viktigste handlingen (bestill time, bestill) alltid tilgjengelig, ofte til høyre i menyen eller som en knapp.
• Juridiske lenker (personvernerklæring, vilkår, innstillinger for informasjonskapsler) hører hjemme i en bunntekstmeny, ikke i hovedmenyen. Men alltid gjenfinnbare, på hver side (leksjon 9.3).

Mobil og tilgjengelig

På en mobil klapper menyen vanligvis sammen til en knapp med tre streker («hamburgermenyen»). I navigasjonsblokken stiller du inn når dette skjer (alltid, eller bare på små skjermer). Test den alltid på en ekte mobil:

• Kan du treffe hvert element med tommelen, uten å treffe elementet ved siden av ved et uhell?
• Åpner undermenyer seg med et trykk, og lukker de seg igjen?
• Lukker menyen seg når du velger et element?

For tilgjengelighet (besøkende med skjermleser eller som bare bruker tastaturet) må du tenke på:

• Tydelige lenketekster. «Les mer» eller «Klikk her» sier ingenting hvis en skjermleser leser opp alle lenkene etter hverandre. «Les mer om åpningstidene våre» gjør det.
• Betjening med tastaturet: med Tab gjennom menyen, med Enter åpne et element. De fleste temaer og navigasjonsblokken gjør dette bra; selvlagde menyer med skript gjør det ofte ikke.
• En lenke til et annet nettsted åpnes helst i samme vindu. Må det åpnes i et nytt vindu, si gjerne fra om det.

Annen navigasjon

I tillegg til hovedmenyen hjelper disse elementene besøkende med å finne frem:

• et søkefelt (søkeblokken), spesielt på et nettsted med mange innlegg;
• brødsmuler («Hjem > Tjenester > Webdesign»), ofte levert av en SEO-utvidelse eller temaet;
• interne lenker i tekstene dine til andre sider (også bra for synlighet i søkemotorer, leksjon 9.2);
• en 404-side som hjelper: med et søkefelt og lenker til de viktigste sidene i stedet for bare «ikke funnet». I et blokktema redigerer du denne som malen «404» i Nettstedsredigereren.

I praksis: slik ser det ut i et panel

I kontrollpanelet til WordPress:

• Blokktema: Utseende > Redigeringsverktøy > Navigasjon. Velg menyen, legg til elementer med plusstegnet, dra dem i riktig rekkefølge, og velg i innstillingene for navigasjonsblokken når mobilmenyen skal vises.
• Klassisk tema: Utseende > Menyer. Lag en meny, kryss av for sider til venstre og klikk på Legg til i meny, dra rekkefølgen, og kryss av menyplasseringen nederst. Lagre.

Oppsummering

• I et blokktema lager du menyen med navigasjonsblokken i Nettstedsredigereren; i et klassisk tema under Utseende > Menyer med en menyplassering.
• En meny viser veien til noen få viktige steder: få elementer, maksimalt ett lag med undermeny.
• Juridiske lenker hører hjemme i en bunntekstmeny, alltid gjenfinnbare.
• Test mobilmenyen på en ekte mobil og bruk lenketekster som sier noe i seg selv.
• Et søkefelt, interne lenker og en hjelpsom 404-side utfyller menyen.

Quiz

Oppgave

Oppgave D4.3: En meny som fungerer. Lag (eller forbedre) hovedmenyen på nettstedet ditt med maksimalt sju hovedelementer, én undermeny og én tilpasset lenke, og en bunntekstmeny med personvernerklæringen din. Test mobilmenyen på mobilen din og med bare tastaturet (Tab og Enter). Kryss av det som fungerer, og noter: hvilken type tema har du (blokk eller klassisk), hvor laget du menyen, og hvilken lenketekst forbedret du, og hvordan?

Les mer

For arbeidet i selve WordPress har vi ennå ingen egne artikler; den offisielle dokumentasjonen til WordPress er omfattende.

• Navigasjonsblokk (wordpress.org, engelsk): https://wordpress.org/documentation/article/navigation-block/
• Menyer i klassiske temaer (wordpress.org, engelsk): https://wordpress.org/documentation/article/appearance-menus-screen/
• Nettstedsredigerer (wordpress.org, engelsk): https://wordpress.org/documentation/article/site-editor/