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:
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:
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:
En anden stil er menu overlay, som brugere kan åbne og lukke efter ønske:
Alternativt kan du overveje at bruge en sidebar-menu:
Eller du kan integrere en rullemenu, også kaldet en “nested” menu:
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:
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:
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:
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.
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Marker derefter afkrydsningsfeltet for CSS-klasser:
Dette tilføjer et CSS-klasser-felt til hver side i din menu:
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.
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:
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:
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:
Når du placerer dine menuer, kan det være nyttigt at se, hvordan de ser ud på fronten.
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:
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:
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”:
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:
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:
- Fejlskrevet kode: Kontroller, at enhver tilpasset CSS, du har tilføjet, er korrekt, og at du bruger CSS-klasser som beskrevet i trin 4.
- Inkompatibilitet med plugin: Prøv at deaktivere alle menu-relaterede plugins, du har installeret, for at se, om det løser problemet.
- Forældet jQuery: Opgrader til den nyeste version af jQuery, og prøv at åbne rullemenuen igen.
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.
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.
