Slik tilpasser du navigasjonen i WordPress

Lær å bygge og tilpasse navigasjonsmenyene i WordPress. Legg til sider, lenker og undermenyer. Gratis video.

Videoforhåndsvisning

Opprett konto for å se video

Det er helt gratis og tar under 30 sekunder

Opprett gratis kontoHar du konto? Logg inn

Besøkende klikker på "Tjenester" i menyen din og forventer å se en undermeny med de ulike tjenestene du tilbyr. Men i stedet skjer ingenting, eller de havner rett på en overordnet side uten mulighet til å navigere videre. Navigasjonen i WordPress er noe mange sliter med, men når du først forstår hvordan menysystemet fungerer, er det enkelt å sette opp akkurat den strukturen du trenger.

Åpne navigasjonsredigeringen i WordPress

Gå til Utseende i kontrollpanelet og klikk på Redigeringsverktøy. I venstrepanelet klikker du på Navigasjon. Her ser du alle menyene som finnes på nettsiden din. Klikk på menyen du vil redigere, og den åpnes i blokkredigereren.

Alternativt kan du åpne en mal (for eksempel via Maler i venstrepanelet) og klikke direkte på navigasjonsblokken i toppteksten. Begge veiene fører til samme redigeringsmuligheter, men navigasjonsseksjonen i venstrepanelet gir deg en bedre oversikt over alle menyene dine samlet.

Legge til og fjerne menypunkter

Inne i navigasjonsredigeringen ser du de eksisterende menypunktene som en liste. For å legge til et nytt punkt, klikk på plussikonet. WordPress lar deg søke etter eksisterende sider, innlegg, kategorier eller egendefinerte lenker. Velg en side, og den dukker opp som et nytt menypunkt.

For å fjerne et menypunkt, klikk på det og velg Fjern fra blokkverktøylinjen (de tre prikkene). Menypunktet forsvinner fra menyen, men selve siden det pekte på, er fortsatt intakt. Du sletter bare lenken, ikke innholdet.

Bygge undermenyer med underpunkter

Undermenyer er det som gjør navigasjonen i WordPress virkelig nyttig. Si at du har en "Tjenester"-side og tre undersider: "Webdesign", "SEO" og "Annonsering". Du vil at disse tre skal dukke opp som en undermeny når noen holder musepekeren over "Tjenester".

For å lage dette, klikk på menypunktet "Tjenester" og velg Legg til undermeny fra blokkverktøylinjen. Da opprettes et nytt underpunkt under "Tjenester". Søk opp og velg "Webdesign". Gjenta for "SEO" og "Annonsering". Nå har du en undermeny med tre punkter som vises under "Tjenester" i menyen.

Du kan neste undermenyer flere nivåer dypt, men vær forsiktig. Menyer med mer enn to nivåer blir vanskelige å bruke, spesielt på mobil. Hold strukturen flat og intuitiv.

Bruk dokumentoversikten for enklere redigering

Når menyen har mange punkter og underpunkter, blir det raskt uoversiktlig å klikke rundt i selve menyen. Åpne dokumentoversikten ved å klikke på listeikonet i verktøylinjen. Her ser du hele menystrukturen som en treliste med innrykk som viser hierarkiet.

Dokumentoversikten gjør det enkelt å dra og slippe menypunkter til nye posisjoner. Vil du flytte "SEO" over "Webdesign"? Dra den oppover i listen. Vil du gjøre et underpunkt til et hovedpunkt? Dra det ut til venstre slik at det ikke lenger er nestet. Denne visningen er mye mer presis enn å prøve å dra elementer i den visuelle menyen.

Stilarv: hvordan utseendet overføres til underpunkter

Noe som forvirrer mange, er at stilinnstillinger i navigasjonsmenyen arves nedover i hierarkiet. Hvis du setter skriftvekten til medium på et hovedmenypunkt, får alle underpunktene under det samme skriftvekt automatisk.

Du kan overstyre dette ved å klikke på et spesifikt underpunkt og endre stilene der. Men det skaper vedlikeholdsarbeid. Hvis du vil at hele menyen skal ha en konsistent stil, sett innstillingene på selve navigasjonsblokken (det øverste nivået) i stedet for på individuelle punkter. Da arver alle punktene samme utseende.

Denne arvemekanismen gjelder for skriftstørrelse, farge, vekt og avstand. Forstår du den, slipper du å lure på hvorfor et underpunkt plutselig ser annerledes ut enn du forventet.

Revisjoner: angre feil i navigasjonen

Har du ved et uhell slettet et menypunkt eller rotet til rekkefølgen? WordPress lagrer revisjoner av navigasjonsmenyer. Klikk på de tre prikkene i verktøylinjen og velg Revisjoner. Her ser du en historikk over alle endringene som er gjort, og du kan gå tilbake til en tidligere versjon med ett klikk.

Revisjoner er spesielt nyttige når flere personer jobber med nettsiden. Hvis noen endrer menyen uten å si fra, kan du raskt identifisere hva som ble endret og eventuelt rulle tilbake.

Opprette flere navigasjonsmenyer

De fleste nettsider trenger mer enn en meny. Du har gjerne en hovedmeny i toppteksten og en annen meny i bunnteksten. Kanskje du også vil ha en egen meny i en sidefelt-widget.

For å opprette en ny meny, gå til Navigasjon i redigeringsverktøyet og klikk på Legg til ny. Gi menyen et beskrivende navn, for eksempel "Bunnmeny" eller "Toppmeny bedrift". Navnet er bare synlig for deg i kontrollpanelet, ikke for besøkende.

Etter at menyen er opprettet, kan du legge til menypunkter på samme måte som før. For å bruke menyen på nettsiden, går du til malen der du vil plassere den (for eksempel bunnteksten), legger til en navigasjonsblokk, og velger den riktige menyen fra blokkens innstillinger.

Navngivning er undervurdert. Når du har tre eller fire menyer, er det lett å miste oversikten hvis alle heter "Navigasjon". Bruk klare navn fra starten av, så slipper du forvirring senere.

Navigasjon på mobil

WordPress håndterer mobilvisning av navigasjonen automatisk. Hovedmenyen kollapses vanligvis til et hamburgerikon (tre horisontale streker) på små skjermer. Undermenyer vises som utfellbare lister. Du trenger sjelden å gjøre noe ekstra for at dette skal fungere, men sjekk alltid mobilvisningen etter at du har gjort endringer.

I navigasjonsblokken sine innstillinger kan du justere når menyen slår over til mobilvisning, og du kan velge mellom ulike ikonstiler. Stiler og farger påvirker også hvordan mobilmenyen ser ut, så sjekk begge deler.

Neste steg

Med navigasjonen på plass har nettsiden din en klar struktur som besøkende kan følge. Neste steg er å gi den et visuelt uttrykk som matcher merkevaren din. Slik endrer du stiler og farger i WordPress tar deg gjennom fargepaletter, typografi og globale designinnstillinger.

Denne videoen er hentet fra kurset WordPress - komplett guide på Utdannet.no. I det fulle kurset lærer du å bygge navigasjon i WordPress med undermenyer og flere menytyper, style menyene med temainnstillinger, og sette opp en profesjonell menystruktur med navigasjonsblokken.