{"id":36509,"date":"2020-03-30T06:09:43","date_gmt":"2020-03-30T05:09:43","guid":{"rendered":"https:\/\/kinsta.com\/?post_type=knowledgebase&p=66027"},"modified":"2025-10-01T20:05:33","modified_gmt":"2025-10-01T19:05:33","slug":"wordpress-dropdown-menu","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/wordpress-dropdown-menu\/","title":{"rendered":"S\u00e5dan opretter du en dropdown-menu i WordPress (i 5 trin)"},"content":{"rendered":"

Websteds-navigation er n\u00f8glen til at hj\u00e6lpe dine brugere med at lande der hvor de vil hen. Med en godt designet menu kan man n\u00e5 langt med at forbedre brugeroplevelsen (UX) og endda reducere din bounce rate<\/a>. Imidlertid kan en d\u00e5rligt udformet \u00e9n g\u00f8re det modsatte.<\/p>\n

Heldigvis giver WordPress dig mulighed for at oprette custom menuer<\/a>, der passer til dit websteds behov. Du kan endda bruge oprindelige funktioner til at tilf\u00f8je en kompakt WordPress-dropdown-menu, der sparer plads, mens du stadig giver klar retning for dine bes\u00f8gende.<\/p>\n

I dette indl\u00e6g diskuterer vi, hvorfor websteds-navigation er vigtig, og hvordan dropdown-menuer kan v\u00e6re s\u00e6rligt nyttige. S\u00e5 leder vi dig igennem, hvordan man opretter dem i WordPress og deler nogle plugins, der kan hj\u00e6lpe dig med dette.<\/p>\n

Lad os dykke ned!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

En introduktion til WordPress navigations- og dropdown menuer<\/h2>\n

Selvom de m\u00e5ske er beskedne, er navigationsmenuer et vigtigt element p\u00e5 ethvert websted. De hj\u00e6lper brugerne med hurtigt at finde de mest relevante sider til at n\u00e5 deres m\u00e5l, samtidig med at de giver f\u00f8rste gang bes\u00f8gende en id\u00e9 om, hvad du har at tilbyde:<\/p>\n

\"Kinsta-webstedets
Kinsta-webstedets prim\u00e6re navigationsmenu<\/figcaption><\/figure>\n

At have en godt designet navigationsmenu er n\u00f8glen til at \u00f8ge konverteringer og reducere din bounce rate. N\u00e5r brugere let kan finde de sider, hvor dit produkt, e-mail tilmeldingsformular<\/a> eller andet konverterende indhold er placeret, har du en enklere tid til at f\u00e5 dem til at foretage et k\u00f8b eller tilmelde sig.<\/p>\n

Plus, hvis brugere med tillid kan finde vej gennem dit websted, er de ikke n\u00f8dt til at afvise dine sider, fordi de endte p\u00e5 det forkerte sted. At hj\u00e6lpe dem med at f\u00e5 det rigtigt f\u00f8rste gang kan b\u00e5de forbedre UX og minimere frustrationen.<\/p>\n

I WordPress er menuer en iboende funktion. Ethvert websted oprettet med platformen kan vise en eller flere af dem. WordPress-temaer<\/a> spiller imidlertid ogs\u00e5 en vigtig rolle, n\u00e5r det kommer til styling og placering af din menu eller menuer.<\/p>\n

Af denne grund kan din WordPress-menu antage mange forskellige former. Den mest kendte er standard header menuen:<\/p>\n

\"Et
Et eksempel p\u00e5 en typisk header menu<\/figcaption><\/figure>\n

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

\"Et
Et eksempel p\u00e5 en footer menu<\/figcaption><\/figure>\n

En anden stil er menu overlay, som brugere kan \u00e5bne og lukke efter \u00f8nske:<\/p>\n

\"Et
Et eksempel p\u00e5 en overlay-menu<\/figcaption><\/figure>\n

Alternativt kan du overveje at bruge en sidebar-menu:<\/p>\n

\"Et
Et eksempel p\u00e5 en sidebar-menu<\/figcaption><\/figure>\n

Eller du kan integrere en rullemenu, ogs\u00e5 kaldet en “nested” menu:<\/p>\n

\"Et
Et eksempel p\u00e5 en rullemenu<\/figcaption><\/figure>\n

Denne type navigation er ideel til mange typer websteder. Det skjuler ikke dit indhold som en overlay-menu, men er ikke s\u00e5 p\u00e5tr\u00e6ngende som en stor header bar eller en sidebar-menu.<\/p>\n

Ved at skjule noget indhold, indtil det er n\u00f8dvendigt, sparer du sk\u00e6rmplads, mens du stadig giver brugerne en nem m\u00e5de at komme omkring sitet p\u00e5.<\/p>\n

S\u00e5dan opretter du en dropdown-menu i WordPress (i 5 trin)<\/h2>\n

Hvis du har besluttet, at en dropdown-menu kan v\u00e6re en god pasform til dit WordPress-sted, er ops\u00e6tning af en ganske enkel. Ved at bruge de indbyggede menufunktioner, der er tilg\u00e6ngelige i WordPress, kan du oprette et brugerdefineret navigationssystem, der passer til dine behov p\u00e5 kun fem trin.<\/p>\n

Trin 1: Opret dine menupunkter<\/h3>\n

Det f\u00f8rste trin mod oprettelse af en menu er at beslutte, hvad der skal inkluderes i den. Start med at navigere til Udseende> Menuer<\/strong> i dit WordPress-dashboard:<\/p>\n

\"\u00c5bning
\u00c5bning af menueditoren i WordPress dashboardet<\/figcaption><\/figure>\n

Hvad du ser i menueditoren, varierer lidt afh\u00e6ngigt af dit tema.<\/p>\n

Det, der er vigtigt at bem\u00e6rke for nu, er den f\u00f8rste mulighed under fanen Rediger menuer<\/strong>. Du skal se en mulighed, hvor du kan v\u00e6lge en af dine eksisterende menuer, du vil redigere, samt en mulighed for at oprette en ny menu:<\/strong><\/p>\n

\"Opret
Opret et nyt menu-link \u00f8verst i WordPress-menueditoren<\/figcaption><\/figure>\n

I dette eksempel vil vi v\u00e6lge den sidstn\u00e6vnte mulighed og oprette en ny menu. Dette indeb\u00e6rer at tilf\u00f8je en titel og derefter klikke p\u00e5 knappen Opret menu:<\/strong><\/p>\n

\"Navngiv
Navngiv og opret den nye menu<\/figcaption><\/figure>\n

Nu er du klar til at begynde at tilf\u00f8je elementer til din WordPress-menu. I de fleste tilf\u00e6lde er det bedst at holde din menu s\u00e5 enkel som muligt, mens du stadig giver brugerne nok information til at komme, hvor de vil hen.<\/p>\n

At indarbejde for mange sider kan overv\u00e6lde bes\u00f8gende og g\u00f8re navigationen sv\u00e6rere i stedet for lettere.<\/p>\n

Der er et par forskellige m\u00e5der at g\u00e5 p\u00e5 ved tilf\u00f8jelse af dine menupunkter. De to f\u00f8rste er sider<\/strong> og indl\u00e6g<\/strong>, og de fungerer meget ens.<\/p>\n

\"Tilf\u00f8jelse
Tilf\u00f8jelse af sider til menuen<\/figcaption><\/figure>\n

I sidebar til menueditoren skal du blot markere afkrydsningsfelterne for hver side eller indl\u00e6g, du vil inkludere, og klikke p\u00e5 knappen Tilf\u00f8j til menu<\/strong>:<\/p>\n

Din n\u00e6ste mulighed er at inkorporere custom links<\/strong>. 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\u00e5 Tilf\u00f8j til menu<\/strong> igen:<\/p>\n

\"Tilf\u00f8jelse
Tilf\u00f8jelse af et custom link til menuen<\/figcaption><\/figure>\n

Endelig kan du ogs\u00e5 tilf\u00f8je Side- og indl\u00e6gskategorier<\/strong> til din navigationsmenu. Dette f\u00f8rer brugerne til en arkivside, hvor de kan se alt indhold om et bestemt emne.<\/p>\n

Blogs og andre indholdstunge sider vil finde denne funktion er s\u00e6rlig nyttig:<\/p>\n

\"F\u00f8jning
F\u00f8jning af kategorier til menuen<\/figcaption><\/figure>\n

Som med indstillingerne for Sider og indl\u00e6g, skal du blot markere afkrydsningsfelterne for de kategorier<\/strong>, du vil medtage, og v\u00e6lg Tilf\u00f8j til menu.<\/strong><\/p>\n

WordPress<\/h3>\n

N\u00e5r du har tilf\u00f8jet alle dine menupunkter, skal du se dem anf\u00f8rt i individuelle fliser under Menu Structure<\/strong> i editoren:<\/p>\n

\"Sektionen
Sektionen Menustruktur i menueditoren<\/figcaption><\/figure>\n

Oprindeligt vises menupunkter i den r\u00e6kkef\u00f8lge, du tilf\u00f8jede dem. Du kan dog let \u00e6ndre deres organisation ved at drag n drop dem p\u00e5 plads. Dette giver dig mulighed for at oprette en enkel menu uden dropdown-funktionalitet.<\/p>\n

Der er et par m\u00e5der at g\u00e5 hen til tilf\u00f8je dropdowns til din WordPress-menu.<\/p>\n

Det enkleste er at forts\u00e6tte med at tr\u00e6kke og droppe, men begynde at neste bestemte menupunkter under andre:<\/p>\n

\"Indlejringskategorier
Indlejringskategorier under Blog-siden<\/figcaption><\/figure>\n

For eksempel har vi p\u00e5 billedet ovenfor flyttet de tre indl\u00e6gskategorier, vi f\u00f8jede til menuen under Blog, hvilket gjorde dem til “underelementer”. P\u00e5 frontend opretter dette en rullemenu, der ser s\u00e5dan ud:<\/p>\n

\"Eksempel
Eksempel p\u00e5 en dropdown menu i WordPress<\/figcaption><\/figure>\n

Hvis du gerne vil tilf\u00f8je en rullemenu, der inkluderer alle kategorierne p\u00e5 dit websted, kan du g\u00f8re det ved at tilf\u00f8je et custom link<\/strong> til din menu. Brug \u201c#\u201d som URL og \u201cKategorier\u201d eller noget lignende til etiketten:<\/p>\n

\"Oprettelse
Oprettelse af en kategori label til menuen<\/figcaption><\/figure>\n

Du kan derefter tilf\u00f8je alle dine kategorier til menuen og neste dem under denne etiket. Hver kategori kan klikkes, men etiketten vil ikke v\u00e6re:<\/p>\n

\"Dropdown
Dropdown menuen Kategorier<\/figcaption><\/figure>\n

Ved hj\u00e6lp af en lignende teknik kan du ogs\u00e5 skjule alle dine menupunkter i en enkelt dropdown-menu.<\/p>\n

Tilf\u00f8j et andet brugerdefineret link ved hj\u00e6lp af “#” som URL og “Menu” som etiket. Herefter skal du neste alle dine andre menupunkter under den ene:<\/p>\n

\"Indlejring
Indlejring af alle navigationslink under en enkelt menuetiket<\/figcaption><\/figure>\n

Resultatet p\u00e5 frontend vil v\u00e6re en rullemenu, der inkluderer dit websteds n\u00f8glesider.<\/p>\n

Som du kan se i kategorier<\/strong>-elementet nedenfor, vises ethvert indhold, der er nested under et underelement, i en undermenu:<\/p>\n

\"En
En \u00e6gte WordPress dropdown-navigationsmenu<\/figcaption><\/figure>\n

Ved at bruge drag-and-drop-menueditoren p\u00e5 denne m\u00e5de kan du oprette en hvilken som helst stil og kombination af WordPress-dropdown-menuer. Husk dog, at for mange menupunkter kan v\u00e6re forvirrende for brugerne.<\/p>\n

Det er ogs\u00e5 bedst at begr\u00e6nse antallet af undermenuer, du inkorporerer, for at undg\u00e5 for meget rod p\u00e5 din navigation.<\/p>\n

Trin 3: Inkorpor\u00e9r billeder i din WordPress-menu<\/h3>\n

Hvis din dropdown-menu i slutningen af \u200b\u200btrin 2 ser n\u00f8jagtigt ud, som du havde forestillet dig det, kan du springe til trin 5 for at offentligg\u00f8re den. Der er dog yderligere trin, du muligvis vil tage, hvis du gerne vil forbedre din menu med tilpasninger.<\/p>\n

En taktik der er v\u00e6rd at overveje, er at inkorporere visuelle elementer i dine menuer for at give yderligere vejledning for bes\u00f8gende. Selvom beskrivende etiketter er vigtige, kan et billede eller et ikon nogle gange hj\u00e6lpe brugerne hurtigere med at bestemme, hvor et bestemt navigationslink f\u00f8rer.<\/p>\n

Det er muligt at tilf\u00f8je billeder ved hj\u00e6lp af brugerdefineret CSS, som vi snart vil diskutere. Vi anbefaler dog, at du henter et plugin s\u00e5som Menu Image, Icons Made Easy<\/a>:<\/p>\n

\"WordPress
WordPress dropdown-menu med billeder<\/figcaption><\/figure>\n

P\u00e5 denne m\u00e5de beh\u00f8ver du ikke at bekymre dig om at forstyrre nogen kode for at tilf\u00f8je visuel interesse til din dropdown-menu.<\/p>\n

Du skal blot installere plugin og derefter vende tilbage til Udseende> Menuer:<\/strong><\/p>\n

\"Sektionen
Sektionen Menubillede i menueditoren<\/figcaption><\/figure>\n

Du vil se, at der nu er billedindstillinger for hver side, du har inkluderet i din menu. Du kan v\u00e6lge hver sides foto, st\u00f8rrelse og placering. Husk at gemme dine \u00e6ndringer, n\u00e5r du er f\u00e6rdig.<\/p>\n

Trin 4: F\u00f8j brugerdefineret CSS til din dropdown-menu<\/h3>\n

Selvom det ikke anbefales for begyndere, kan mellemliggende og avancerede brugere muligvis integrere deres egen styling i deres WordPress-dropdown-menuer. F\u00f8r du hopper lige ind i din CSS<\/a>, skal du dog tilf\u00f8je en klasse til din menu.<\/p>\n

Hvis du springer over dette trin, kan din custom CSS<\/a> for\u00e5rsage problemer for andre menuer p\u00e5 dit websted. For eksempel kan du uforvarende anvende styling til din sidebar menu, som du kun \u00f8nskede til din hovedmenu.<\/p>\n

I menueditoren skal du klikke p\u00e5 sk\u00e6rmindstillinger<\/strong> i \u00f8verste h\u00f8jre hj\u00f8rne:<\/p>\n

\"Fanen
Fanen Sk\u00e6rmindstillinger i menueditoren<\/figcaption><\/figure>\n

Marker derefter afkrydsningsfeltet for CSS-klasser<\/strong>:<\/p>\n

\"Afkrydsningsfeltet
Afkrydsningsfeltet CSS-klasser under fanen Sk\u00e6rmindstillinger<\/figcaption><\/figure>\n

Dette tilf\u00f8jer et CSS-klasser-felt<\/strong> til hver side i din menu:<\/p>\n

\"Feltet
Feltet CSS-klasser i menueditoren<\/figcaption><\/figure>\n

N\u00e5r du har tilf\u00f8jet en eller flere CSS-klasser til dine menupunkter, vil enhver custom kode, du inkluderer p\u00e5 dit typografiark, kun g\u00e6lde for elementerne i din menu med den klasse, du angiver.<\/p>\n

Du kan nu g\u00e5 over til dit stilark eller Customizer og komme i gang med din custom styling<\/a>.<\/p>\n

Trin 5: Publicer din menu i prime locations<\/h3>\n

N\u00e5r din WordPress dropdown-menu er struktureret til at im\u00f8dekomme dine behov, og du har inkorporeret de tilpasninger, du \u00f8nsker, er du klar til at offentligg\u00f8re den p\u00e5 dit websted.<\/p>\n

Denne proces varierer lidt afh\u00e6ngigt af dit tema<\/a> og hvilke menuplaceringer den underst\u00f8tter. I dette eksempel bruger vi Twenty Twenty-temae<\/a>t.<\/p>\n

Rul ned i menueditoren til afsnittet Menuindstillinger<\/strong>:<\/p>\n

\"Afsnittet
Afsnittet Menuindstillinger i editoren<\/figcaption><\/figure>\n

Du kan v\u00e6lge det f\u00f8rste afkrydsningsfelt, hvis du \u00f8nsker, at nye sider automatisk tilf\u00f8jes til din menu. Hvis du lige er kommet i gang med dit websted og ikke har tilf\u00f8jet alle dine n\u00f8glesider endnu, kan dette v\u00e6re nyttigt. V\u00e6r dog forsigtig, s\u00e5 du ikke ved et uheld f\u00f8jer for mange elementer til din menu.<\/p>\n

Under denne mulighed kan du se en liste med afkrydsningsfelter, der bem\u00e6rker de forskellige omr\u00e5der p\u00e5 dit websted, hvor du kan vise din menu.<\/p>\n

Twenty Twenty-temaet indeholder forskellige menuomr\u00e5der: Desktop Horisontal Menu, Desktop Expanded Menu, Mobile Menu, Footer Menu, Social Menu.<\/strong><\/p>\n

I dette tilf\u00e6lde passer den menu, vi har oprettet, bedst til placeringen af Desktop Horisontal Menu<\/strong>, der er i websteds header:<\/p>\n

\"Desktop
Desktop Horisontal Menu til temaet Twenty Twenty<\/figcaption><\/figure>\n

Du kan ogs\u00e5 overveje at navigere til fanen Administrer placeringer<\/strong> i menuerne<\/strong> p\u00e5 dit dashboard. Her kan du se alle menuplaceringer, der underst\u00f8ttes af dit tema, samt hvilken menu du har tildelt hver enkelt:<\/p>\n

\"Fanen
Fanen Administrer placeringer<\/figcaption><\/figure>\n

N\u00e5r du placerer dine menuer, kan det v\u00e6re nyttigt at se, hvordan de ser ud p\u00e5 fronten.<\/p>\n

\"Indstillingen
Indstillingen Administrer med Live preview<\/figcaption><\/figure>\n

Klik p\u00e5 knappen Administrer med Live preview<\/strong> for at se, hvordan din menu vises p\u00e5 det sted, du har valgt til det, ved hj\u00e6lp af WordPress Customizer:<\/p>\n

\"En
En live preview til WordPress-menuen i Customizer<\/figcaption><\/figure>\n

Du kan derefter offentligg\u00f8re din menu eller menuer direkte fra Customizer. Hvis du nogensinde har brug for at tilf\u00f8je eller fjerne elementer fra din dropdown-menu, kan du ganske enkelt vende tilbage til menueditoren og foretage de n\u00f8dvendige justeringer.<\/p>\n

WordPress-plugins til forbedring af dine dropdown-menuer<\/h2>\n

Selvom du kan oprette fuldt fungerende WordPress-navigationsmenuer uden ekstra v\u00e6rkt\u00f8jer, kan det undertiden v\u00e6re nyttigt at udvide din menus funktionalitet. Hvis det er tilf\u00e6ldet med dit websted, kan du unders\u00f8ge nogle popul\u00e6re WordPress-menu plugins<\/a>.<\/p>\n

Nested Pages<\/a> er en effektiv m\u00e5de for indholdstunge blogs<\/a> at oprette dropdown-menuer. Selvom det prim\u00e6rt bruges til at organisere indl\u00e6g og sider, genererer dette plugin ogs\u00e5 automatisk en menu, der spejler dit indholdsstruktur:<\/p>\n

\"Nested
Nested pages WordPress-plugin<\/figcaption><\/figure>\n

Selvom det ikke n\u00f8dvendigvis tilr\u00e5des at inkorporere et stort antal varer i dine menuer, er det undertiden uundg\u00e5eligt.<\/p>\n

Hvis det er tilf\u00e6ldet med dit websted, kan Max Mega Menu<\/a> hj\u00e6lpe dig med at kombinere dine eksisterende WordPress-menuer til at danne en “mega-menu”:<\/p>\n

\"max
Max Mega Menu WordPress plugin<\/figcaption><\/figure>\n

N\u00e5r mobilen surfer stigende, er det vigtigt at sikre, at dine menuer stadig kan l\u00e6ses p\u00e5 mobile enheder.<\/p>\n

WP Mobile Menu<\/a> parrer med ethvert responsivt tema, der hj\u00e6lper dig med at oprette et navigationssystem til dit websteds brugere, der er p\u00e5 farten:<\/p>\n

\"WP
WP Mobile Menus WordPress plugin<\/figcaption><\/figure>\n

Endelig, som vi allerede har diskuteret, kan der v\u00e6re situationer, hvor beskrivende menupunkter ikke er nok. I disse situationer kan det v\u00e6re en god id\u00e9 at unders\u00f8ge ved hj\u00e6lp af menubillede, Icons Made Easy som beskrevet i trin 3 ovenfor.<\/p>\n

Du kan bruge ethvert af disse plugins til at forbedre dit nuv\u00e6rende navigationssystem og g\u00f8re din WordPress dropdown-menu mere effektiv. Bare husk, at nogle gange, n\u00e5r det kommer til navigation, er enklere bedre<\/strong>. Tilf\u00f8j kun ekstra funktioner, hvis det forbedrer din UX og undg\u00e5r rod p\u00e5 dit websted.<\/p>\n

Fejlfinding p\u00e5 din DropPress-dropdown-menu<\/h2>\n

Hvis du har konfigureret din menu som beskrevet ovenfor, men dropdown-funktionen fungerer ikke, er der flere mulige \u00e5rsager.<\/p>\n

Selvom vi ikke kan d\u00e6kke dem alle her, kan vi hj\u00e6lpe dig med at indsn\u00e6vre \u00e5rsagen til dit problem, s\u00e5 du kan finde den rigtige l\u00f8sning.<\/p>\n

Ofte er en funktionsfejl i menuen resultatet af en modstridende kode mellem din brugerdefinerede menu og dit tema. Den f\u00f8rste ting, du skal g\u00f8re, 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\u00f8sning.<\/p>\n

Et par andre mulige \u00e5rsager inkluderer:<\/p>\n