Websteds-navigation er nøglen til at hjælpe dine brugere med at lande der hvor de vil hen. Med en godt designet menu kan man nå langt med at forbedre brugeroplevelsen (UX) og endda reducere din bounce rate. Imidlertid kan en dårligt udformet én gøre det modsatte.

Heldigvis giver WordPress dig mulighed for at oprette custom menuer, der passer til dit websteds behov. Du kan endda bruge oprindelige funktioner til at tilføje en kompakt WordPress-dropdown-menu, der sparer plads, mens du stadig giver klar retning for dine besøgende.

I dette indlæg diskuterer vi, hvorfor websteds-navigation er vigtig, og hvordan dropdown-menuer kan være særligt nyttige. Så leder vi dig igennem, hvordan man opretter dem i WordPress og deler nogle plugins, der kan hjælpe dig med dette.

Lad os dykke ned!

En introduktion til WordPress navigations- og dropdown menuer

Selvom de måske er beskedne, er navigationsmenuer et vigtigt element på ethvert websted. De hjælper brugerne med hurtigt at finde de mest relevante sider til at nå deres mål, samtidig med at de giver første gang besøgende en idé om, hvad du har at tilbyde:

Kinsta-webstedets primære navigationsmenu

Kinsta-webstedets primære navigationsmenu

At have en godt designet navigationsmenu er nøglen til at øge konverteringer og reducere din bounce rate. Når brugere let kan finde de sider, hvor dit produkt, e-mail tilmeldingsformular eller andet konverterende indhold er placeret, har du en enklere tid til at få dem til at foretage et køb eller tilmelde sig.

Plus, hvis brugere med tillid kan finde vej gennem dit websted, er de ikke nødt til at afvise dine sider, fordi de endte på det forkerte sted. At hjælpe dem med at få det rigtigt første gang kan både forbedre UX og minimere frustrationen.

I WordPress er menuer en iboende funktion. Ethvert websted oprettet med platformen kan vise en eller flere af dem. WordPress-temaer spiller imidlertid også en vigtig rolle, når det kommer til styling og placering af din menu eller menuer.

Af denne grund kan din WordPress-menu antage mange forskellige former. Den mest kendte er standard header menuen:

Et eksempel på en typisk header menu

Et eksempel på en typisk header menu

Du kan ofte også medtage en ekstra footer menu nederst på dine sider. Det kan vise det samme indhold som din hovedmenu eller tilbyde lidt forskellige indstillinger:

Et eksempel på en footer menu

Et eksempel på en footer menu

En anden stil er menu overlay, som brugere kan åbne og lukke efter ønske:

Et eksempel på en overlay-menu

Et eksempel på en overlay-menu

Alternativt kan du overveje at bruge en sidebar-menu:

Et eksempel på en sidebar-menu

Et eksempel på en sidebar-menu

Eller du kan integrere en rullemenu, også kaldet en “nested” menu:

Et eksempel på en rullemenu

Et eksempel på en rullemenu

Denne type navigation er ideel til mange typer websteder. Det skjuler ikke dit indhold som en overlay-menu, men er ikke så påtrængende som en stor header bar eller en sidebar-menu.

Ved at skjule noget indhold, indtil det er nødvendigt, sparer du skærmplads, mens du stadig giver brugerne en nem måde at komme omkring sitet på.

Sådan opretter du en dropdown-menu i WordPress (i 5 trin)

Hvis du har besluttet, at en dropdown-menu kan være en god pasform til dit WordPress-sted, er opsætning af en ganske enkel. Ved at bruge de indbyggede menufunktioner, der er tilgængelige i WordPress, kan du oprette et brugerdefineret navigationssystem, der passer til dine behov på kun fem trin.

Trin 1: Opret dine menupunkter

Det første trin mod oprettelse af en menu er at beslutte, hvad der skal inkluderes i den. Start med at navigere til Udseende> Menuer i dit WordPress-dashboard:

Åbning af menueditoren i WordPress dashboardet

Åbning af menueditoren i WordPress dashboardet

Hvad du ser i menueditoren, varierer lidt afhængigt af dit tema.

Det, der er vigtigt at bemærke for nu, er den første mulighed under fanen Rediger menuer. Du skal se en mulighed, hvor du kan vælge en af dine eksisterende menuer, du vil redigere, samt en mulighed for at oprette en ny menu:

Opret et nyt menu-link øverst i WordPress-menueditoren

Opret et nyt menu-link øverst i WordPress-menueditoren

I dette eksempel vil vi vælge den sidstnævnte mulighed og oprette en ny menu. Dette indebærer at tilføje en titel og derefter klikke på knappen Opret menu:

Navngiv og opret den nye menu

Navngiv og opret den nye menu

Nu er du klar til at begynde at tilføje elementer til din WordPress-menu. I de fleste tilfælde er det bedst at holde din menu så enkel som muligt, mens du stadig giver brugerne nok information til at komme, hvor de vil hen.

At indarbejde for mange sider kan overvælde besøgende og gøre navigationen sværere i stedet for lettere.

Der er et par forskellige måder at gå på ved tilføjelse af dine menupunkter. De to første er sider og indlæg, og de fungerer meget ens.

Tilføjelse af sider til menuen

Tilføjelse af sider til menuen

I sidebar til menueditoren skal du blot markere afkrydsningsfelterne for hver side eller indlæg, du vil inkludere, og klikke på knappen Tilføj til menu:

Din næste mulighed er at inkorporere custom links. Dette involverer angivelse af URL’en til den side, du vil henvise brugere til, og derefter oprette en kort, men beskrivende etiket til den. Derefter kan du klikke på Tilføj til menu igen:

Tilføjelse af et custom link til menuen

Tilføjelse af et custom link til menuen

Endelig kan du også tilføje Side- og indlægskategorier til din navigationsmenu. Dette fører brugerne til en arkivside, hvor de kan se alt indhold om et bestemt emne.

Blogs og andre indholdstunge sider vil finde denne funktion er særlig nyttig:

Føjning af kategorier til menuen

Føjning af kategorier til menuen

Som med indstillingerne for Sider og indlæg, skal du blot markere afkrydsningsfelterne for de kategorier, du vil medtage, og vælg Tilføj til menu.

WordPress

Når du har tilføjet alle dine menupunkter, skal du se dem anført i individuelle fliser under Menu Structure i editoren:

Sektionen Menustruktur i menueditoren

Sektionen Menustruktur i menueditoren

Oprindeligt vises menupunkter i den rækkefølge, du tilføjede dem. Du kan dog let ændre deres organisation ved at drag n drop dem på plads. Dette giver dig mulighed for at oprette en enkel menu uden dropdown-funktionalitet.

Der er et par måder at gå hen til tilføje dropdowns til din WordPress-menu.

Det enkleste er at fortsætte med at trække og droppe, men begynde at neste bestemte menupunkter under andre:

Indlejringskategorier under Blog-siden

Indlejringskategorier under Blog-siden

For eksempel har vi på billedet ovenfor flyttet de tre indlægskategorier, vi føjede til menuen under Blog, hvilket gjorde dem til “underelementer”. På frontend opretter dette en rullemenu, der ser sådan ud:

Eksempel på en dropdown menu i WordPress

Eksempel på en dropdown menu i WordPress

Hvis du gerne vil tilføje en rullemenu, der inkluderer alle kategorierne på dit websted, kan du gøre det ved at tilføje et custom link til din menu. Brug “#” som URL og “Kategorier” eller noget lignende til etiketten:

Oprettelse af en kategori label til menuen

Oprettelse af en kategori label til menuen

Du kan derefter tilføje alle dine kategorier til menuen og neste dem under denne etiket. Hver kategori kan klikkes, men etiketten vil ikke være:

Dropdown menuen Kategorier

Dropdown menuen Kategorier

Ved hjælp af en lignende teknik kan du også skjule alle dine menupunkter i en enkelt dropdown-menu.

Tilføj et andet brugerdefineret link ved hjælp af “#” som URL og “Menu” som etiket. Herefter skal du neste alle dine andre menupunkter under den ene:

Indlejring af alle navigationslink under en enkelt menuetiket

Indlejring af alle navigationslink under en enkelt menuetiket

Resultatet på frontend vil være en rullemenu, der inkluderer dit websteds nøglesider.

Som du kan se i kategorier-elementet nedenfor, vises ethvert indhold, der er nested under et underelement, i en undermenu:

En ægte WordPress dropdown-navigationsmenu

En ægte WordPress dropdown-navigationsmenu

Ved at bruge drag-and-drop-menueditoren på denne måde kan du oprette en hvilken som helst stil og kombination af WordPress-dropdown-menuer. Husk dog, at for mange menupunkter kan være forvirrende for brugerne.

Det er også bedst at begrænse antallet af undermenuer, du inkorporerer, for at undgå for meget rod på din navigation.

Trin 3: Inkorporér billeder i din WordPress-menu

Hvis din dropdown-menu i slutningen af ​​trin 2 ser nøjagtigt ud, som du havde forestillet dig det, kan du springe til trin 5 for at offentliggøre den. Der er dog yderligere trin, du muligvis vil tage, hvis du gerne vil forbedre din menu med tilpasninger.

En taktik der er værd at overveje, er at inkorporere visuelle elementer i dine menuer for at give yderligere vejledning for besøgende. Selvom beskrivende etiketter er vigtige, kan et billede eller et ikon nogle gange hjælpe brugerne hurtigere med at bestemme, hvor et bestemt navigationslink fører.

Det er muligt at tilføje billeder ved hjælp af brugerdefineret CSS, som vi snart vil diskutere. Vi anbefaler dog, at du henter et plugin såsom Menu Image, Icons Made Easy:

WordPress dropdown-menu med billeder

WordPress dropdown-menu med billeder

På denne måde behøver du ikke at bekymre dig om at forstyrre nogen kode for at tilføje visuel interesse til din dropdown-menu.

Du skal blot installere plugin og derefter vende tilbage til Udseende> Menuer:

Sektionen Menubillede i menueditoren

Sektionen Menubillede i menueditoren

Du vil se, at der nu er billedindstillinger for hver side, du har inkluderet i din menu. Du kan vælge hver sides foto, størrelse og placering. Husk at gemme dine ændringer, når du er færdig.

Trin 4: Føj brugerdefineret CSS til din dropdown-menu

Selvom det ikke anbefales for begyndere, kan mellemliggende og avancerede brugere muligvis integrere deres egen styling i deres WordPress-dropdown-menuer. Før du hopper lige ind i din CSS, skal du dog tilføje en klasse til din menu.

Hvis du springer over dette trin, kan din custom CSS forårsage problemer for andre menuer på dit websted. For eksempel kan du uforvarende anvende styling til din sidebar menu, som du kun ønskede til din hovedmenu.

I menueditoren skal du klikke på skærmindstillinger i øverste højre hjørne:

Fanen Skærmindstillinger i menueditoren

Fanen Skærmindstillinger i menueditoren

Marker derefter afkrydsningsfeltet for CSS-klasser:

Afkrydsningsfeltet CSS-klasser under fanen Skærmindstillinger

Afkrydsningsfeltet CSS-klasser under fanen Skærmindstillinger

Dette tilføjer et CSS-klasser-felt til hver side i din menu:

Feltet CSS-klasser i menueditoren

Feltet CSS-klasser i menueditoren

Når du har tilføjet en eller flere CSS-klasser til dine menupunkter, vil enhver custom kode, du inkluderer på dit typografiark, kun gælde for elementerne i din menu med den klasse, du angiver.

Træt af en langsom vært for dit WordPress-site? Vi leverer lynhurtige servere og 24/7 support i verdensklasse fra WordPress-eksperter. Tjek vores planer

Du kan nu gå over til dit stilark eller Customizer og komme i gang med din custom styling.

Trin 5: Publicer din menu i prime locations

Når din WordPress dropdown-menu er struktureret til at imødekomme dine behov, og du har inkorporeret de tilpasninger, du ønsker, er du klar til at offentliggøre den på dit websted.

Denne proces varierer lidt afhængigt af dit tema og hvilke menuplaceringer den understøtter. I dette eksempel bruger vi Twenty Twenty-temaet.

Rul ned i menueditoren til afsnittet Menuindstillinger:

Afsnittet Menuindstillinger i editoren

Afsnittet Menuindstillinger i editoren

Du kan vælge det første afkrydsningsfelt, hvis du ønsker, at nye sider automatisk tilføjes til din menu. Hvis du lige er kommet i gang med dit websted og ikke har tilføjet alle dine nøglesider endnu, kan dette være nyttigt. Vær dog forsigtig, så du ikke ved et uheld føjer for mange elementer til din menu.

Under denne mulighed kan du se en liste med afkrydsningsfelter, der bemærker de forskellige områder på dit websted, hvor du kan vise din menu.

Twenty Twenty-temaet indeholder forskellige menuområder: Desktop Horisontal Menu, Desktop Expanded Menu, Mobile Menu, Footer Menu, Social Menu.

I dette tilfælde passer den menu, vi har oprettet, bedst til placeringen af Desktop Horisontal Menu, der er i websteds header:

Desktop Horisontal Menu til temaet Twenty Twenty

Desktop Horisontal Menu til temaet Twenty Twenty

Du kan også overveje at navigere til fanen Administrer placeringer i menuerne på dit dashboard. Her kan du se alle menuplaceringer, der understøttes af dit tema, samt hvilken menu du har tildelt hver enkelt:

Fanen Administrer placeringer

Fanen Administrer placeringer

Når du placerer dine menuer, kan det være nyttigt at se, hvordan de ser ud på fronten.

Indstillingen Administrer med Live preview

Indstillingen Administrer med Live preview

Klik på knappen Administrer med Live preview for at se, hvordan din menu vises på det sted, du har valgt til det, ved hjælp af WordPress Customizer:

En live preview til WordPress-menuen i Customizer

En live preview til WordPress-menuen i Customizer

Du kan derefter offentliggøre din menu eller menuer direkte fra Customizer. Hvis du nogensinde har brug for at tilføje eller fjerne elementer fra din dropdown-menu, kan du ganske enkelt vende tilbage til menueditoren og foretage de nødvendige justeringer.

WordPress-plugins til forbedring af dine dropdown-menuer

Selvom du kan oprette fuldt fungerende WordPress-navigationsmenuer uden ekstra værktøjer, kan det undertiden være nyttigt at udvide din menus funktionalitet. Hvis det er tilfældet med dit websted, kan du undersøge nogle populære WordPress-menu plugins.

Nested Pages er en effektiv måde for indholdstunge blogs at oprette dropdown-menuer. Selvom det primært bruges til at organisere indlæg og sider, genererer dette plugin også automatisk en menu, der spejler dit indholdsstruktur:

Nested pages WordPress-plugin

Nested pages WordPress-plugin

Selvom det ikke nødvendigvis tilrådes at inkorporere et stort antal varer i dine menuer, er det undertiden uundgåeligt.

Hvis det er tilfældet med dit websted, kan Max Mega Menu hjælpe dig med at kombinere dine eksisterende WordPress-menuer til at danne en “mega-menu”:

max mega menu

Max Mega Menu WordPress plugin

Når mobilen surfer stigende, er det vigtigt at sikre, at dine menuer stadig kan læses på mobile enheder.

WP Mobile Menu parrer med ethvert responsivt tema, der hjælper dig med at oprette et navigationssystem til dit websteds brugere, der er på farten:

WP Mobile Menus WordPress plugin

WP Mobile Menus WordPress plugin

Endelig, som vi allerede har diskuteret, kan der være situationer, hvor beskrivende menupunkter ikke er nok. I disse situationer kan det være en god idé at undersøge ved hjælp af menubillede, Icons Made Easy som beskrevet i trin 3 ovenfor.

Du kan bruge ethvert af disse plugins til at forbedre dit nuværende navigationssystem og gøre din WordPress dropdown-menu mere effektiv. Bare husk, at nogle gange, når det kommer til navigation, er enklere bedre. Tilføj kun ekstra funktioner, hvis det forbedrer din UX og undgår rod på dit websted.

Fejlfinding på din DropPress-dropdown-menu

Hvis du har konfigureret din menu som beskrevet ovenfor, men dropdown-funktionen fungerer ikke, er der flere mulige årsager.

Selvom vi ikke kan dække dem alle her, kan vi hjælpe dig med at indsnævre årsagen til dit problem, så du kan finde den rigtige løsning.

Ofte er en funktionsfejl i menuen resultatet af en modstridende kode mellem din brugerdefinerede menu og dit tema. Den første ting, du skal gøre, hvis din menu ikke fungerer, er at skifte til et standardtema som f.eks. Twenty Twenty. Hvis din menu begynder at fungere igen, ved du, at problemet er relateret til dit tema. Du kan derefter kontakte dit temas udvikler for at finde en løsning.

Et par andre mulige årsager inkluderer:

Som vi tidligere har nævnt, er de potentielle årsager bag din defekte menu mange. Hvis ingen af ​​ovenstående løsninger ser ud til at fungere, anbefaler vi, at du besøger WordPress Support Forums, når du ud til vores ekspert Kinsta WordPress Support Team, eller ansætter en WordPress-udvikler for at ordne det for dig.

Navigationsmenuer er nøglen til dit websteds UX. Men hvad nu hvis du har masser af menupunkter, du har brug for? Dropdown-menuen er det som det handler om her! Tjek, hvor nemt det er at oprette en med denne vejledning 📑🗃️Click to Tweet

Resumé

Selvom det kan virke som en lille sag, kan dit WordPress-websteds navigation klare eller ødelægge dens succes. Brug af dropdown menuer kan spare plads på brugernes skærme, samtidig med at de let kan gøre deres vej rundt på dit websted og forbedre dine konverteringer.


Hvis du kunne lide denne vejledning, så vil du elske vores support. Alle Kinstas hostingplaner indeholder 24/7 support fra vores erfarne WordPress-udviklere og ingeniører. Chat med det samme team, der understøtter vores Fortune 500-kunder. Tjek vores planer