Menuer og navigation

Modul 4: Lav indhold · Læsetid: 7 minutter

Læringsmål: Efter denne lektion kan du lave et klart menu, både i et bloktema og i et klassisk tema, og du ved hvad der kendetegner et godt menu.

Nøglebegreber: navigationsblok, Webstedseditor, Udseende > Menuer, menuplacering, undermenu, tilpasset link, mobilmenu, bundtekstmenu, linktekst, tilgængelighed

To måder, afhængigt af dit tema

Hvor du laver menuet, afhænger af dit tema (lektion 5.1):

• Bloktema: menuet er en navigationsblok i webstedets header. Du redigerer den i Webstedseditoren (Udseende > Editor > Navigation, eller i skabelondelen Header).
• Klassisk tema: du laver menuet under Udseende > Menuer og vælger der en menuplacering som temaet tilbyder, som "Hovedmenu" eller "Bundtekst".

Ser du ikke Menuer under Udseende, kun Editor? Så bruger du et bloktema. Det er en almindelig forvirring efter et temaskifte: "mit menu er væk". Det gamle menu findes stadig (det ligger i databasen som en liste af menupunkter), men det nye tema kigger et andet sted. I Webstedseditoren kan du importere et eksisterende klassisk menu i navigationsblokken.

Hvad kan indgå i menuet

Et menupunkt kan være:

• en side eller et indlæg fra dit websted;
• en kategori (så linker det til arkivet for den kategori);
• et tilpasset link: enhver adresse, også til et andet websted, eller et anker inde i en side (/diensten/#prijzen);
• i et bloktema også andre blokke i navigationen, som et søgefelt, ikoner for sociale medier eller en knap "Book en tid".

Menupunkter kan du placere under hinanden som undermenu: i et klassisk tema ved at trække dem lidt mod højre, i navigationsblokken med "Tilføj undermenu" eller ved at trække et punkt oven på et andet.

Et menupunkt linker til en side, men har sit eget label. Ændrer du senere sidens titel, ændrer labelet i menuet sig ikke automatisk med (i et klassisk menu ikke, i navigationsblokken afhængigt af hvordan du har tilføjet punktet). Tjek derfor menuet efter en titelændring.

Et godt menu

Et menu er ikke en indholdsfortegnelse over hele dit websted. Det er en vejviser til de få steder hvor de fleste besøgende gerne vil hen. Nogle retningslinjer:

• Få hovedpunkter: fem til syv stykker. Mere passer alligevel ikke på en telefon, og besøgende læser det ikke.
• Højst ét lag undermenu. Et undermenu inde i et undermenu er svært at betjene på en telefon og forvirrende for skærmlæsere.
• En undermenu-overskrift er også et link. I mange temaer åbner et klik på "Tjenesteydelser" undermenuet, men "Tjenesteydelser" er også selv en side. Sørg for at den side findes og viser noget fornuftigt, eller at punktet tydeligt kun er en overskrift.
• Almindelige ord som besøgende selv ville bruge: "Priser", ikke "Vores investeringsmuligheder".
• Kontakt og den vigtigste handling (book en tid, bestil) skal altid være tilgængelig, ofte til højre i menuet eller som en knap.
• Juridiske links (privatlivspolitik, handelsbetingelser, cookieindstillinger) hører hjemme i et bundtekstmenu, ikke i hovedmenuet. Men de skal altid kunne findes, på hver side (lektion 9.3).

Mobil og tilgængelig

På en telefon klappes menuet som regel sammen til en knap med tre streger (det "hamburgermenu"). Ved navigationsblokken indstiller du hvornår det skal ske (altid, eller kun på små skærme). Test det altid på en rigtig telefon:

• Kan du ramme hvert punkt med tommelfingeren, uden ved et uheld at ramme punktet ved siden af?
• Åbner undermenuer med et tryk, og lukker de igen?
• Lukker menuet når du vælger et punkt?

For tilgængelighed (besøgende med en skærmlæser eller som kun bruger tastaturet) skal du være opmærksom på:

• Tydelige linktekster. "Læs mere" eller "Klik her" siger ingenting når en skærmlæser læser alle links op efter hinanden. "Læs mere om vores åbningstider" derimod gør.
• Betjening med tastaturet: med Tab gennem menuet, med Enter åbne et punkt. De fleste temaer og navigationsblokken gør det godt; selvlavede menuer med scripts ofte ikke.
• Et link til et andet websted bør helst åbne i samme vindue. Skal det åbne i et nyt vindue, så sig det tydeligt.

Anden navigation

Ud over hovedmenuet hjælper disse elementer besøgende med at finde vej:

• et søgefelt (søgeblokken), især ved et websted med mange indlæg;
• brødkrummer ("Forside > Tjenesteydelser > Webdesign"), ofte leveret af et SEO-plugin eller temaet;
• interne links i dine tekster til andre sider (også godt for synlighed i søgemaskiner, lektion 9.2);
• en 404-side der hjælper: med et søgefelt og links til de vigtigste sider i stedet for bare "ikke fundet". I et bloktema redigerer du den som skabelonen "404" i Webstedseditoren.

I praksis: sådan ser det ud i et panel

I WordPress-administrationen:

• Bloktema: Udseende > Editor > Navigation. Vælg menuet, tilføj punkter med plustegnet, træk dem i den rigtige rækkefølge, og vælg i navigationsblokkens indstillinger hvornår mobilmenuet skal vises.
• Klassisk tema: Udseende > Menuer. Lav et menu, afkryds sider til venstre og klik på Tilføj til menu, træk rækkefølgen, og afkryds menuplaceringen nederst. Gem.

Opsummering

• I et bloktema laver du menuet med navigationsblokken i Webstedseditoren; i et klassisk tema under Udseende > Menuer med en menuplacering.
• Et menu viser vejen til nogle få vigtige steder: få punkter, højst ét lag undermenu.
• Juridiske links hører til i et bundtekstmenu, altid synlige.
• Test mobilmenuet på en rigtig telefon, og brug linktekster der siger noget i sig selv.
• Et søgefelt, interne links og en hjælpsom 404-side supplerer menuet.

Quiz

Opgave

Opgave D4.3: Et menu der virker. Lav (eller forbedr) dit websteds hovedmenu med højst syv hovedpunkter, ét undermenu og ét tilpasset link, samt et bundtekstmenu med din privatlivspolitik. Test mobilmenuet på din telefon og med kun tastaturet (Tab og Enter). Kryds af hvad der virker, og noter: hvilken type tema har du (blok eller klassisk), hvor har du lavet menuet, og hvilken linktekst har du forbedret og hvordan?

Læs mere

For arbejdet i selve WordPress har vi endnu ikke egne artikler; den officielle dokumentation fra WordPress er omfattende.

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