Hur man lägger till villkorlig logik till menyer i WordPress (steg för steg)

Har du någonsin önskat att din WordPress-meny kunde vara smartare? Kanske vill du visa olika navigeringsalternativ för inloggade medlemmar, eller visa specifika menyalternativ endast på vissa sidor.

Som standard visar WordPress samma statiska meny för alla, vilket kan göra att din webbplats känns generisk och otillräcklig. Vi har arbetat med många olika webbplatsägare som stött på exakt denna utmaning.

Lyckligtvis kan villkorliga menyer helt förändra din användarupplevelse.

När din WordPress-navigering anpassar sig till olika besökare och sammanhang hittar folk det de behöver snabbare. Och du kan guida dem mot de åtgärder som är viktigast för din verksamhet.

I den här guiden delar vi hur du lägger till villkorslogik i dina WordPress-menyer. Du kommer att lära dig hur du skapar dynamisk navigering som ändras baserat på användarroller, specifika sidor eller andra kriterier du väljer.

Varför lägga till villkorsstyrd logik i menyer i WordPress?

Villkorlig logik i WordPress-menyer gör att du automatiskt kan ändra din webbplats navigering baserat på specifika kriterier.

Till skillnad från standardbeteendet för WordPress-webbplatser, som visar samma statiska meny för alla, tillåter villkorliga menyer att du visar olika länkar baserat på användaren eller sidan.

Detta gör att du kan guida besökare mer effektivt genom att bara visa dem länkar som är relevanta för deras nuvarande kontext.

Till exempel kan du använda regler för att skapa anpassade menyer för inloggade användare. Här är några exempel på användningsfall på olika typer av webbplatser:

• 🛍️ Webbutik – Framhäv produkter eller specialerbjudanden baserat på en kunds surf- eller köphistorik.
• 🪪 WordPress medlemskapswebbplats – Visa exklusiva sidor och resurser endast för inloggade medlemmar.
• 🧑‍🏫 Online-lärplattform – Visa olika kurskategorier eller lektioner beroende på en students framsteg.

Du kan se det som åtkomstkontroll för WordPress-menyer.

Med det i åtanke kommer vi att visa dig hur du lägger till villkorlig logik i WordPress-menyer. Här är de ämnen vi kommer att täcka i den här handledningen:

Redo? Låt oss börja.

Skapa nya navigeringsmenyer i WordPress

Det första steget är att skapa de ytterligare navigeringsmenyer du vill visa i WordPress. Därefter kan du använda villkorslogik för att bestämma när varje meny ska visas.

Härifrån och framåt visar vi dig hur du lägger till villkorliga menyer i WordPress för både klassiska teman och blockteman.

Skapa nya navigeringsmenyer i WordPress med den klassiska redigeraren

Den här metoden fungerar för användare av klassiska teman.

För att skapa nya navigeringsmenyer, gå helt enkelt till sidan Utseende » Menyer i WordPress-instrumentpanelen.

Om du redan har en navigeringsmeny som du använder på din webbplats för alla användare, kan detta vara din standardmeny.

Därefter behöver du klicka på länken 'skapa en ny meny' för att skapa ett nytt menyalternativ.

Till exempel kan du skapa en meny som visas för inloggade användare och en annan som visas på en viss WordPress-sida eller kategori.

På vänster sida av skärmen kan du se en lista över dina webbplatsens sidor. Markera helt enkelt rutan bredvid den sida du vill lägga till i din meny och klicka på knappen 'Add to Menu'.

Du kan också dra och släppa menyalternativen på höger sida av skärmen för att ordna om dem.

Längre ner på sidan kan du välja en plats att visa din meny. Men du behöver inte tilldela en plats till den här menyn nu. Det gör vi i nästa steg.

Glöm inte att klicka på knappen 'Spara meny' för att spara dina ändringar.

För mer information om att skapa menyer kan du ta en titt på vår nybörjarguide om hur du lägger till en navigeringsmeny i WordPress.

Skapa nya navigeringsmenyer i WordPress med FSE

För att skapa nya navigeringsmenyer i ett blocktema med Full Site Editing (FSE) måste du först navigera till Utseende » Redigerare från din WordPress-instrumentpanel.

Detta öppnar webbplatsredigeraren. Beroende på ditt tema kan du se en lista med menyalternativ till vänster. Klicka helt enkelt på 'Navigation'.

Om du undrar, vi använder temat Twenty-Twenty Three för den här guiden.

Här kan du se alla dina befintliga menyer.

För att lägga till en ny, klicka bara på ikonen + (plus) eller knappen 'Redigera' för att hantera dina menyer visuellt. Du kommer då att se en ruta som visar en rullgardinsmeny där du kan välja ett alternativ.

För mer detaljerade instruktioner kan du se vår guide om hur du lägger till en navigeringsmeny i WordPress.

Visa en annan meny för inloggade användare i WordPress

Det är ofta användbart att visa olika navigeringsmenyer för användare beroende på om de har loggat in på din webbplats eller inte.

Till exempel kan du inkludera inloggnings- och registreringslänkar för utloggade användare och lägga till en utloggningslänk i din meny för inloggade användare.

Om du driver en WooCommerce-butik kan du inkludera artiklar för dina kunder som är dolda för allmänheten.

Visa en annan meny för inloggade användare med den klassiska redigeraren

För att komma igång måste du installera och aktivera pluginet Conditional Menus.

Gå till Plugins » Lägg till nytt från din WordPress-administratörspanel.

På nästa sida använder du sökfältet för att hitta pluginet.

När det visas i resultaten, klicka på 'Installera nu' och sedan på 'Aktivera' efter att installationen är klar.

För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering vill du navigera till Utseende » Menyer och växla till fliken 'Hantera platser'.

Fliken Hantera platser är där du talar om för ditt tema vilken meny som ska visas i specifika områden på din webbplats. Här ser du en lista över tillgängliga menyplatser tillsammans med de menyer som för närvarande är tilldelade dem.

Dessa platser kan variera beroende på vilket WordPress-tema du använder. Till exempel, på vår demokwebbplats visar platsen 'Primär meny' för närvarande en navigeringsmeny som heter 'Huvudmeny'.

Tänk på en 'Menyplats' som en fotoram på din vägg, och 'Menyn' som fotot inuti den. Pluginet Conditional Menus låter dig automatiskt byta foto beroende på vem som tittar på det.

För att visa en annan meny när vissa villkor är uppfyllda, klicka på länken '+ Villkorlig meny' och välj en annan meny från rullgardinsmenyn. För den här handledningen väljer vi 'Inloggad meny'.

Därefter måste du klicka på länken '+ Villkor'.

Detta kommer att öppna ett popup-fönster där du ser en mängd villkor att välja mellan.

Markera helt enkelt rutan bredvid alternativet 'Användare inloggad' och klicka sedan på knappen 'Spara'.

Du kan nu besöka din webbplats för att se menyn för inloggade användare i praktiken. Du kan logga ut från din webbplats för att se navigationsmenyn som visas för alla andra användare.

För mer detaljerade instruktioner och för att lära dig hur du gör detta med kod, ta en titt på vår guide om hur du visar olika menyer för inloggade användare i WordPress.

Visa en annan meny för inloggade användare med FSE

Om du använder ett blocktema behöver du pluginet Conditional Blocks.

Så, låt oss installera och aktivera pluginet först – du kan gå till Plugins » Lägg till nytt för att börja.

Använd sedan sökfältet för att leta efter pluginet.

När det visas i resultaten, klicka på ‘Installera nu’, och se till att klicka på ‘Aktivera’ när installationen är klar.

Om du behöver extra hjälp kan du se vår guide om hur du installerar ett WordPress-plugin.

När du har aktiverat det, navigera till Utseende » Redigerare för att öppna webbplatsredigeraren.

Sedan vill du klicka på ‘Mönster’ och sedan ‘Alla malldelar’.

Du bör nu se alla dina malldelar, som kan inkludera en sidfot, sidhuvud och kommentarer – beroende på ditt aktiva tema.

Låt oss lokalisera malldelen ‘Sidhuvud’. Klicka helt enkelt på ikonen med tre punkter och välj sedan ‘Redigera’.

Detta kommer att omdirigera dig till blockredigeraren.

Klicka på blocket för navigeringsmenyn för att lägga till villkor. Byt sedan till fliken ‘Block’ i panelen till höger för att börja anpassa.

Om du skrollar ner i fliken 'Block' ser du sektionen 'Villkorliga block'. Klicka helt enkelt på den för att öppna anpassningsalternativen.

Klicka sedan på knappen 'Redigera synlighet'.

Ett popup-fönster där du kan ställa in villkor för din valda navigeringsmeny kommer att visas.

Här kan du öppna rullgardinsmenyn 'VILLKOR' och välja alternativet 'Användare inloggad'.

Stäng helt enkelt fönstret genom att klicka på ‘X’-knappen i det övre högra hörnet.

Du bör sedan se ett villkor tillagt i sektionen 'Villkorliga block'. Klicka på 'Spara' för att uppdatera dina navigationsmenyer.

Nu, om du besöker din webbplats, här är hur det kan se ut för utloggade och inloggade användare:

Visa en annan WordPress-meny beroende på användarroll

När en användare har loggat in kan du också visa en annan navigeringsmeny beroende på vilken användarroll du har tilldelat dem.

Till exempel kan du inkludera extra menyalternativ för en administratör och mer begränsade alternativ för en bidragsgivare. På en medlemskapswebbplats kan du ge olika åtkomstnivåer till olika medlemskapsnivåer.

Visa en annan WordPress-meny beroende på användarroll med hjälp av den klassiska redigeraren

Som i föregående avsnitt behöver du pluginet Conditional Menus. För detaljerade instruktioner, se vår guide om hur du installerar ett WordPress-plugin.

Gå sedan till sidan Utseende » Menyer och byt till fliken ‘Hantera platser’.

Du bör lägga till den lämpliga villkorliga menyn för din valda användarroll. För den här handledningen väljer vi menyn 'Nav Menu Administrator'.

Därefter kan du klicka på länken ‘+ Villkor’ för att välja användarroll.

Du måste klicka på fliken 'Användarroller' för att se kryssrutor för varje användarroll på din webbplats. Klicka helt enkelt på de användarroller som ska se den här menyn och klicka sedan på knappen 'Spara' för att spara dina ändringar.

Visa en annan WordPress-meny beroende på användarroll med FSE

För att visa en annan meny beroende på användarroller i FSE kommer du att använda pluginet Content Control.

För att göra detta, gå till Plugins » Lägg till nytt från din WordPress-instrumentpanel.

Använd sedan sökfältet för att snabbt hitta pluginet.

När den visas i resultaten, klicka på ‘Installera nu’ och glöm inte att klicka på ‘Aktivera’ efter att installationen är klar.

Om du vill ha mer vägledning kan du hänvisa till vår guide om hur du installerar ett WordPress-plugin.

När pluginet är aktiverat, gå till Utseende » Redigerare från din WordPress-instrumentpanel.

Välj sedan ‘Mönster’ och klicka sedan på ‘Alla malldelar’.

Detta bör visa dig en lista över tillgängliga malldelar, som sidhuvud, sidfot och kommentarer, beroende på ditt aktiva blocktema.

Du kan hitta din ‘Sidhuvud’-mall, klicka sedan på menyn med tre punkter och välj ‘Redigera’.

I redigeraren kan du välja en navigeringsmeny att lägga till villkor till.

Till exempel kommer vi att dölja länken till sidan 'Blogg' så att endast prenumeranter ser den i menyn.

Härifrån, låt oss gå över till panelen till höger och växla omkopplaren 'Aktivera kontroller' i sektionen 'Blockkontroller'.

Sedan vill du skrolla ner till avsnittet ‘Användarregler’ för att ställa in villkoren.

Öppna först helt enkelt rullgardinsmenyn ‘VEM KAN SE DETTA INNEHÅLL’ och välj ‘Inloggad användare.’

Välj sedan för rullgardinsmenyn 'ANVÄNDARROLL' 'Matchande'. Och i 'VALDA ROLLER', låt oss välja 'prenumerant'.

När du är klar kan du fortsätta och klicka på knappen ‘Spara’.

Visa en annan meny för olika sidor i WordPress

Du kan visa en annan meny för olika sidor i WordPress.

Du kan till exempel visa extra menyalternativ på din integritetspolicy-sida, som en länk till ditt cookie-meddelande.

Visa en annan meny för olika sidor i WordPress med den klassiska redigeraren

För att göra detta behöver du pluginet Conditional Menus. Om du behöver hjälp med att installera pluginet, se stegen i vårt föregående avsnitt eller vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering vill du navigera till Utseende » Menyer och sedan välja ‘Hantera platser’.

Efter att ha valt lämplig navigeringsmeny kan du klicka på länken ‘+ Villkor’.

Den här gången bör du klicka på fliken ‘Sidor’. Du kommer att se en lista över varje sida på din webbplats.

Du behöver sedan sätta ett kryss bredvid varje sida där du vill visa navigeringsmenyn. När du är klar, klicka på knappen ‘Spara’.

Visa en annan meny för olika sidor i WordPress med FSE

Om du använder ett blocktema, rekommenderar vi att du använder det kostnadsfria pluginet Block Visibility. Det ger dig exakt kontroll över vem som ser dina menyer.

För att komma igång, installera och aktivera pluginet genom att gå till Plugins » Lägg till nytt i din WordPress-instrumentpanel.

Använd sedan sökfältet för att leta efter pluginet.

När det visas i resultaten, klicka på ‘Installera nu’, och se till att klicka på ‘Aktivera’ när installationen är klar.

Om du behöver hjälp med installationen, se vår guide om hur man installerar ett WordPress-plugin.

Efter att ha aktiverat pluginet, öppna Utseende » Redigerare i din WordPress-instrumentpanel.

Klicka sedan på ‘Mönster’ följt av ‘Alla malldelar’.

Detta visar alla tillgängliga mall-delar, inklusive sidhuvudet, sidfoten och kommentarer, beroende på ditt aktiva tema.

Härifrån klickar du på ditt sidhuvud eller området där din navigeringsmeny finns för att redigera det.

Väl inne i redigeraren, gå till sektionen ‘Synlighet’.

Leta sedan efter alternativen ‘Plats’ eller ‘URL-sökväg’.

Sedan kan du lägga till URL-sökvägen till sidan för integritetspolicy i området 'URL PATH (CONTAIN)'.

En URL-sökväg är den del av en webbadress som kommer efter webbplatsens huvudnamn och visar en specifik sida eller ett objekt.

Till exempel, i adressen https://example.com/about, är delen /about URL-sökvägen.

Om du inte vet vad URL-sökvägen till din integritetspolicy-sida är, kan du gå till Sidor » Alla sidor. Leta sedan upp sidan Integritetspolicy och för muspekaren över den.

Klicka helt enkelt på knappen 'Snabbreducera', och du kommer att se avsnittet 'Slug'. URL-sökvägen ska vara symbolen '/' följt av sidans slug.

Eller besök helt enkelt sidan, kopiera texten efter ditt domännamn och klistra in den här. Se till att inkludera snedstrecket i början.

Det var allt! Klicka bara på 'Spara' för att lagra ändringarna.

Dölja navigeringsmenyn på landningssidor i WordPress

Det kan finnas sidor på din webbplats där du inte vill visa en navigeringsmeny alls, till exempel dina landningssidor.

En landningssida är utformad för att öka försäljningen eller generera leads för ett företag. På dessa sidor vill du minimera distraktioner och ge användarna all information de behöver för att vidta en specifik åtgärd.

I vår guide om hur du ökar dina landningssidors konverteringar med 300 %, föreslår vi att du minimerar distraktioner genom att ta bort navigeringsmenyer och andra länkar från sidan.

Dölja navigeringsmenyn på landningssidor i WordPress med den klassiska redigeraren

Du kan göra det med hjälp av pluginet Conditional Menus som vi använde i föregående avsnitt.

Efter att ha aktiverat pluginet kan du navigera till Utseende » Menyer och välja ‘Inaktivera meny’ från rullgardinsmenyn.

Klicka sedan på länken '+ Villkor' för att välja när menyn ska visas.

Du bör klicka på fliken ‘Sidor’ och markera kryssrutan bredvid objektet ‘Min landningssida’.

Glöm inte att klicka på 'Spara'-knappen för att lagra och tillämpa dina inställningar.

Dölja navigeringsmenyn på landningssidor i WordPress med FSE

För blockteman kan du fortsätta använda pluginet Block Visibility som vi nämnde tidigare. Men den här gången anger du URL-sökvägen i fältet 'URL Path (Does Not Contain)'.

När plugin-programmet är aktivt, gå till Utseende » Redigerare i din adminpanel.

Välj där ‘Mönster’ och öppna sedan ‘Alla mall-delar’.

Du kommer att se en lista över mall-delar som rubrik, sidfot och kommentarer, beroende på ditt nuvarande aktiva tema. Du kan till exempel hitta ‘Rubrik’, öppna menyn med tre punkter och klicka på ‘Redigera’.

När du är inne i redigeraren, leta reda på sektionen ‘Synlighet’.

Härifrån kan du välja 'URL-sökväg' och ange sökvägen till din landningssida i fältet 'URL-sökväg (innehåller inte)'.

När du är klar, klicka helt enkelt på knappen 'Spara'.

Felsökning: Varför ändras inte min meny?

Om du har ställt in dina villkorsstyrda regler men menyn inte ändras när du testar den, är cachelagring oftast orsaken.

Många WordPress-cache-plugins lagrar en statisk version av dina menyer för att förbättra prestandan. När det händer visas inte ändringar omedelbart.

För att felsöka detta kan du prova att rensa din WordPress-cache och kontrollera igen.

Vanliga frågor om villkorliga menyer

Har du frågor om att ställa in eller anpassa villkorliga menyer i WordPress? Här är några snabba svar som hjälper dig att komma igång.

Vilket är det bästa villkorliga menypluginet för WordPress?

Om du använder ett klassiskt tema är pluginet Conditional Menus ett enkelt och pålitligt val. För blockteman ger verktyg som Conditional Blocks eller Block Visibility dig kraftfull kontroll direkt i redigeraren.

Kan jag lägga till villkorlig logik till menyer utan ett plugin?

Ja, men det innebär att lägga till anpassad kod i din temas filer, vilket bäst lämnas till avancerade användare eftersom ett litet misstag kan förstöra din webbplats.

För de flesta är ett plugin som WPCode ett mycket säkrare och enklare sätt att lägga till och hantera kodavsnitt. Du kan läsa allt om det i vår fullständiga WPCode-recension.

Kan jag tillämpa villkor på ett enskilt menyalternativ istället för hela menyn?

Absolut. Många moderna WordPress-teman och meny-plugins tillåter detta. I den klassiska menyredigeraren (Utseende » Menyer) kan du ofta ställa in synlighetsregler för enskilda objekt. I blockredigeraren kan du tillämpa villkor på specifika navigeringslänkblock.

Vidare läsning: Gör mer med WordPress-navigeringsmenyer

Navigeringsmenyer är kraftfulla verktyg för webbdesign. De låter dig dirigera användare till de viktigaste sektionerna på din WordPress-blogg eller webbplats.

Nu när du visar olika navigeringsmenyer på olika sidor och för olika användarroller, kanske du undrar hur du kan anpassa dem ytterligare.

För att förbättra funktionaliteten hos dina navigeringsmenyer, se till att kolla in dessa handledningar:

• Hur man lägger till anpassade objekt i specifika WordPress-menyer
• Hur man lägger till en fullskärms responsiv meny i WordPress
• Hur man skapar en vertikal navigeringsmeny i WordPress
• Hur man lägger till en Mega-meny till din WordPress-webbplats
• Hur man stylar WordPress navigeringsmenyer

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.