Articles

Hvordan Lage En Rullegardinmeny I WordPress (I 5 Trinn)

nettstednavigasjon er nøkkelen til å hjelpe brukerne dine til å komme dit de vil gå. En godt designet meny kan gå langt i retning av å forbedre Brukeropplevelsen( UX), og til og med redusere bounce rate. En dårlig utformet kan imidlertid gjøre det motsatte.Heldigvis Lar WordPress deg lage egendefinerte menyer for å passe behovene til nettstedet ditt. Du kan til og med bruke innfødte funksjoner for å legge til en kompakt wordpress-rullegardinmeny som sparer plass, samtidig som du gir klar retning for de besøkende.

i dette innlegget vil vi diskutere hvorfor navigasjon på nettstedet er viktig og hvordan rullegardinmenyer kan være spesielt nyttige. Deretter går vi gjennom hvordan du lager Dem I WordPress, og deler noen plugins som kan hjelpe.

La oss dykke inn!

En Introduksjon Til WordPress Navigasjon og Rullegardinmenyer

selv om de kan være upretensiøse, er navigasjonsmenyer et viktig element i et hvilket som helst nettsted. De hjelper brukerne raskt å finne de mest relevante sidene for å oppnå sine mål, samtidig som de gir førstegangsbesøkende en ide om hva du har å tilby:

menyeksempel

kinstas nettsted primærnavigasjonsmeny

å Ha en godt designet navigasjonsmeny er nøkkelen til å øke konverteringene og redusere fluktfrekvensen. Når brukere enkelt kan finne sidene der produktet ditt, e-postoppmeldingsskjemaet eller annet konverteringsinnhold er plassert, har du en enklere tid å få dem til å kjøpe eller registrere seg.

Pluss, hvis brukerne trygt kan finne veien gjennom nettstedet ditt, trenger de ikke å sprette av sidene dine fordi de endte opp på feil sted. Å hjelpe dem med å få det riktig første gang kan både forbedre UX og minimere frustrasjon.

i WordPress er menyer en iboende funksjon. Ethvert nettsted opprettet med plattformen kan vise en eller flere av dem. WordPress-temaer spiller imidlertid også en viktig rolle når det gjelder styling og plassering av menyen eller menyene.

Av denne grunn Kan WordPress-menyen ta på seg mange forskjellige former. Den mest kjente er standard header-menyen:

header meny eksempel

et eksempel på en typisk header meny

du kan ofte også inkludere en ekstra bunntekstmeny nederst på sidene dine. Det kan vise det samme innholdet som hovedmenyen, eller tilby litt forskjellige alternativer:

footer meny eksempel

et eksempel på en bunntekstmeny

En annen stil er menyoverlegget, som brukerne kan åpne og lukke etter ønske:

eksempel på overleggsmeny

Alternativt kan du vurdere å bruke en sidebarmeny:

sidebar meny eksempel

et eksempel på en sidebar meny

eller du kan innlemme en rullegardinmeny, også noen ganger kalt en «nestet» meny:

rullegardinmeny eksempel

et eksempel på en rullegardinmeny

denne typen navigasjon er ideell for mange typer nettsteder. Det vil ikke skjule innholdet ditt som en overleggsmeny, men er ikke så påtrengende som en stor topptekstlinje eller en sidebarmeny.

ved å skjule noe innhold til det trengs, sparer du skjermplass samtidig som du gir brukerne en enkel måte å komme seg rundt.

Hvordan Lage En Rullegardinmeny I WordPress (I 5 Trinn)

Hvis du har bestemt deg for at en rullegardinmeny kan være en god passform for Ditt WordPress-nettsted, er det ganske enkelt å sette opp en. Ved å bruke de innfødte menyfunksjonene som er tilgjengelige I WordPress, kan Du opprette et tilpasset navigasjonssystem som passer dine behov i bare fem trinn.

Trinn 1: Lag Menyelementene

det første skrittet mot å lage en meny er å bestemme hva som skal inkluderes i den. Start med å navigere til Utseende > Menyer i WordPress dashbordet:

WordPress-menyen

Tilgang til menyredigereren i WordPress dashbordet

Det du ser i menyredigereren vil variere noe avhengig av temaet ditt.

men det som er viktig å merke seg for nå, er det første alternativet I Rediger Menyer-fanen. Du bør se et alternativ der du kan velge en av dine eksisterende menyer for å redigere, samt et alternativ for å opprette en ny meny:

opprett en ny menylink øverst I WordPress-menyredigereren

opprett en ny menylink øverst I WordPress-menyredigereren

For dette eksemplet velger vi sistnevnte alternativ og opprette en ny meny. Dette innebærer å legge til en tittel og deretter klikke På Opprett Menyknappen:

Navngi og opprette den nye menyen

Navngi Og opprette den nye menyen

nå er du klar til å begynne å legge til elementer I WordPress-menyen. I de fleste tilfeller er det best å holde menyen så enkel som mulig, samtidig som brukerne får nok informasjon til å komme seg dit de vil.Inkorporering av for mange sider kan overvelde besøkende og gjøre navigasjonen vanskeligere i stedet for enklere.

det er noen forskjellige måter å gå om å legge til menyelementene. De to første Er Sider Og Innlegg, og de fungerer veldig likt.

Legge til sider i menyen

Legge til sider i menyen

i sidepanelet i menyredigereren merker du av for hver side eller innlegg du vil inkludere, og klikker På Legg Til I Menyknappen:

Ditt neste alternativ er Å innlemme Tilpassede Lenker. DETTE innebærer å gi NETTADRESSEN til siden du vil lede brukere til, og deretter lage en kort, men beskrivende etikett for den. Etter det kan du klikke På Legg Til I Menyen igjen:

Legge til en egendefinert lenke til menyen

Legge Til En egendefinert lenke til menyen

Til slutt kan Du også legge Til Side-Og Postkategorier i navigasjonsmenyen. Dette vil ta brukere til en arkivside der de kan se alt innholdet på et bestemt emne.

Blogger og annet innhold-tunge nettsteder kan finne denne funksjonen spesielt nyttig:

Legge til kategorier i menyen

Legge til kategorier i menyen

Som Med Sider og Innlegg alternativer, bare velg avmerkingsboksene for kategoriene du ønsker å inkludere og velg Legg Til I Menyen.

Trinn 2: Organiser WordPress-Menyen

når du har lagt til alle menyelementene dine, bør du se dem oppført i individuelle fliser under Menystruktur i editoren:

Menystruktur-delen av menyredigereren

Menystruktur-delen av menyredigereren

I Utgangspunktet vil menyelementer vises i den rekkefølgen du la dem til. Du kan imidlertid enkelt endre organisasjonen ved å dra og slippe dem på plass. Dette vil gjøre deg i stand til å lage en enkel meny uten dropdown funksjonalitet.

Det er et par måter å gå om å legge dropdowns Til WordPress-menyen.

det enkleste er å fortsette å dra og slippe, men begynn å hekke visse menyelementer under andre:

Opprette En wordpress-rullegardinmeny

Nesting kategorier under Bloggsiden

For eksempel i bildet ovenfor har vi flyttet de tre postkategoriene vi la til i Menyen under Blogg, noe som gjør dem til «underelementer». På frontend, dette vil skape en rullegardinmeny som ser slik ut:

WordPress rullegardinmeny

Eksempel på en rullegardinmeny I WordPress

hvis du vil legge til en rullegardinmeny som inneholder alle kategoriene på nettstedet ditt, kan du gjøre det ved å legge til En Tilpasset Lenke til menyen. Bruk » # «SOM URL og «Kategorier» eller noe lignende for etiketten:

Opprette En Kategorietikett for menyen

Du kan deretter legge til alle kategoriene dine i menyen og neste dem under denne etiketten. Hver kategori vil være klikkbar, men etiketten vil ikke være:

rullegardinmenyen Kategorier

rullegardinmenyen Kategorier

Ved hjelp av en lignende teknikk kan du også skjule alle menyelementene dine i en enkelt rullegardinmeny.

Legg til En Annen Tilpasset Lenke, bruk » # «SOM URL og «Meny» som etikett. Deretter nest alle dine andre menyelementer under den ene:

Nesting alle navigasjonslenkene under En Enkelt menyetikett

Resultatet på frontend vil være en rullegardinmeny som inneholder nettstedets nøkkelsider.

som du kan se I kategorielementet nedenfor, vil alt innhold som er nestet under et underelement, vises i en undermeny:

en Ekte WordPress dropdown navigasjonsmeny

En ekte WordPress dropdown navigasjonsmeny

ved å bruke dra-og-slipp-menyen editor på denne måten kan du lage en stil og kombinasjon Av WordPress dropdown menyer. Husk imidlertid at for mange menyelementer kan være forvirrende for brukerne.

Registrer Deg For Nyhetsbrevet

vi vokste vår trafikk 1,187% Med WordPress. Vi viser deg hvordan.

Bli med 20,000 + andre som får vårt ukentlige nyhetsbrev med insider WordPress tips!

Abonner nå

det er også best å begrense antall undermenyer du innlemme, for å unngå over-rot navigasjon.

Trinn 3: Inkorporere Bilder i WordPress-Menyen

Hvis du ved slutten Av Trinn 2 ser nedtrekksmenyen ut akkurat som du trodde det, kan du hoppe til Trinn 5 for å publisere Det. Det er imidlertid flere trinn du kanskje vil ta hvis du vil forbedre menyen med tilpasninger.En taktikk å vurdere er å inkorporere visuelle elementer i menyene dine for å gi ytterligere veiledning for besøkende. Mens beskrivende etiketter er avgjørende, kan noen ganger et bilde eller et ikon hjelpe brukerne raskere å finne ut hvor en bestemt navigasjonskobling fører.

det er mulig å legge til bilder ved hjelp av tilpasset CSS, som vi vil diskutere snart. Vi anbefaler imidlertid å plukke opp et plugin som Menybilde, Ikoner Gjort Enkelt:

WordPress rullegardinmeny med bilder ved siden av navigasjonslenkene

WordPress rullegardinmeny med bilder

På denne måten trenger du ikke å bekymre deg for å plage med noen kode for å legge til visuell interesse for rullegardinmenyen.

bare installere plugin og deretter gå Tilbake Til Utseende > Menyer:

Menybildeseksjonen i menyredigereren

Menybildeseksjonen i menyredigereren

du vil se at det nå er bildealternativer for hver side du har tatt med i menyen. Du kan velge bilde, størrelse og posisjon for hver side. Husk å lagre endringene når du er ferdig.

Trinn 4: Legg Til Tilpasset CSS I Rullegardinmenyen

selv Om det ikke anbefales for nybegynnere, kan mellomliggende og avanserte brukere kanskje inkludere sin egen styling i WordPress-rullegardinmenyene. Før du hopper rett inn I CSS, må du imidlertid legge til en klasse på menyen.

hvis du hopper over dette trinnet, kan DIN EGENDEFINERTE CSS forårsake problemer for andre menyer på nettstedet ditt. For eksempel kan du utilsiktet bruke styling til bunntekstmenyen som du mente bare for din viktigste rullegardinmenyen.

i menyredigeringsprogrammet klikker Du På Skjermalternativer øverst til høyre:

kategorien Skjermalternativer i menyredigeringsprogrammet

kategorien Skjermalternativer i menyredigeringsprogrammet

merk deretter av FOR CSS-Klasser:

CSS-Klasser avkrysningsruten I Kategorien Skjermalternativer

DETTE vil legge TIL ET CSS-Klassefelt på hver side i menyen din:

css-klasser-feltet i menyredigereren

css-klasser-feltet i menyredigereren

når Du har lagt til En eller Flere css-klasser I Menyelementene dine, vil enhver tilpasset kode Du Inkluderer i stilarket bare gjelde for elementene I menyen Din Med den klassen DU ANGIR.

Lei av en treg vert For Ditt WordPress-nettsted? Vi tilbyr lynraske servere og 24/7 verdensklasse støtte Fra WordPress eksperter. Sjekk ut våre planer

Du kan nå gå over til stilarket eller Tilpasseren, og få til å jobbe med din tilpassede styling.

Trinn 5: Publiser Menyen På Prime Steder

Når WordPress-rullegardinmenyen er strukturert for å møte dine behov, og du har tatt med eventuelle tilpasninger du vil, vil du være klar til å publisere den på nettstedet ditt.

denne prosessen vil variere noe avhengig av tema og hvilke menysteder den støtter. For dette eksemplet skal vi bruke Twenty Twenty-temaet.

i menyredigeringsprogrammet ruller du ned Til Menyinnstillinger-delen:

Menyinnstillinger-delen i redigeringsprogrammet

Du kan velge den første avkrysningsruten hvis du ønsker at nye sider automatisk skal legges til i menyen din. Hvis du nettopp har begynt med nettstedet ditt og ikke har lagt til alle nøkkelsidene dine ennå, kan dette være nyttig. Vær imidlertid forsiktig så du ikke ved et uhell legger til for mange elementer i menyen.

Under dette alternativet ser du en liste over avmerkingsbokser som viser de forskjellige områdene på nettstedet ditt der du kan vise menyen.Desktop Horisontal Meny, Desktop Utvidet Meny, Mobil Meny, Bunntekst Meny, Sosial Meny.

i dette tilfellet er menyen vi har opprettet best egnet Til Skrivebordet Horisontal Menyplassering, som er i nettstedets overskrift:

Desktop Horisontal Meny for Tjue Tjue tema

Desktop Horisontal Meny for Tjue Tjue tema

menyer område av dashbordet. Her kan du se alle menylokasjonene som støttes av temaet ditt, samt hvilken meny du har tildelt hver enkelt:

Administrer Steder-fanen

Administrer Steder-fanen

når du plasserer menyene dine, kan det være nyttig å se hvordan de vil se ut på frontenden.

Administrer Med Live Preview-alternativet

Administrer Med Live Preview-alternativet

Klikk På Administrer Med Live Preview-knappen for Å se hvordan menyen din vil vises på stedet du har valgt for Den, ved Hjelp Av WordPress Customizer:

en live forhåndsvisning For WordPress-menyen i Tilpasseren

du kan deretter publisere menyen eller menyene direkte fra Tilpasseren. Hvis du trenger å legge til eller fjerne elementer fra rullegardinmenyen, kan du ganske enkelt gå tilbake til menyredigereren og foreta de nødvendige justeringene.

WordPress Plugins for Å Forbedre Rullegardinmenyene

Selv om Du kan lage Fullt fungerende WordPress navigasjonsmenyer uten ekstra verktøy, kan det noen ganger være nyttig å utvide menyens funksjonalitet. Hvis det er tilfelle med nettstedet ditt, vil du kanskje se på noen populære WordPress-menyplugger.Nestede Sider Er en effektiv måte for innholdstunge blogger å lage rullegardinmenyer på. Mens det er primært brukt for å organisere innlegg og sider, vil denne plugin også automatisk generere en meny som speiler innholdets struktur:

nestede sider

Nestede Sider WordPress plugin

selv om det ikke nødvendigvis er tilrådelig å innlemme et stort antall elementer i menyene dine, er det noen ganger uunngåelig.

Hvis Det er tilfelle med nettstedet ditt, Kan Max Mega Menu hjelpe deg med å kombinere dine eksisterende WordPress-menyer for å danne en «mega-meny»:

max mega meny

Max Mega Meny WordPress plugin

med mobil surfing på vei oppover, sikre at menyene er fortsatt lesbar på mobile enheter er nøkkelen.

wp Mobile Meny parene med noen responsive tema for å hjelpe deg å lage et navigasjonssystem for nettstedets brukere som er på farten:

wp mobile meny

Wp Mobile Menyer WordPress plugin

Endelig, som vi allerede har diskutert, kan det være situasjoner der beskrivende menyelementer det er ikke nok. I disse situasjonene vil du kanskje se på Å bruke Menybilde, Ikoner Gjort Enkelt som vi beskrev I Trinn 3 ovenfor.

Du kan bruke noen av disse pluginene til å forbedre ditt nåværende navigasjonssystem og gjøre WordPress-rullegardinmenyen mer effektiv. Bare husk at noen ganger, når det gjelder navigasjon, er enklere bedre. Bare legg til ekstra funksjoner hvis DET vil forbedre UX og unngå å rote nettstedet ditt.

Feilsøking Av WordPress-Rullegardinmenyen

hvis du har konfigurert menyen som beskrevet ovenfor, men rullegardinfunksjonaliteten ikke fungerer, er det flere mulige årsaker.

selv om vi ikke kan dekke dem alle her, kan vi hjelpe deg med å begrense årsaken til problemet ditt, slik at du kan finne den riktige løsningen.

ofte er en meny med feil et resultat av motstridende kode mellom den egendefinerte menyen og temaet ditt. Det første du bør gjøre hvis menyen ikke fungerer, er å bytte til et standardtema som Tjue Tjue. Hvis menyen begynner å fungere igjen, vet du at problemet er relatert til temaet ditt. Du kan deretter kontakte temaets utvikler for å søke en løsning.

noen andre mulige årsaker inkluderer:

  • Feil Skrevet kode: Dobbeltsjekk at alle egendefinerte CSS du har lagt til er riktige, og at DU bruker CSS-klasser som beskrevet I Trinn 4.
  • Plugin inkompatibilitet: prøv å deaktivere noen meny-relaterte plugins du har installert, for å se om det løser problemet.
  • Utdatert jQuery: Oppgrader til den nyeste versjonen av jQuery og prøv å åpne rullegardinmenyen igjen.

Men som vi nevnte tidligere, er de potensielle årsakene bak din defekte meny mange. Hvis ingen av de ovennevnte løsningene ser ut til å fungere, anbefaler vi at du besøker WordPress Support Forums, når ut til vår ekspert Kinsta WordPress Support Team, eller leie En WordPress utvikler for å fikse det for deg.

Navigasjonsmenyer er nøkkelen til nettstedets UX. Men hva om du har mange menyelementer du trenger å funksjonen? Dropdown menyen er navnet på spillet her! Sjekk ut hvor enkelt det er å lage en med denne guiden 📑 🗃 ️ klikk For Å Tweet

sammendrag

selv Om det kan virke som en liten sak, kan wordpress-nettstedets navigasjon gjøre eller ødelegge suksessen. Bruk av rullegardinmenyer kan spare plass på brukernes skjermer, samtidig som de enkelt kan komme seg rundt på nettstedet ditt og forbedre konverteringene dine.

hvis du likte denne opplæringen, vil du elske vår støtte. Alle Kinstas hostingplaner inkluderer 24/7-støtte fra våre Veteran WordPress-utviklere og ingeniører. Chat med det samme teamet som støtter Våre Fortune 500-klienter. Sjekk ut våre planer