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?

Navigeringsmenyer ger din webbplats struktur och hjälper besökare att hitta det de letar efter.

Som standard kommer din WordPress-webbplats att visa samma navigeringsmeny för alla användare och på alla inlägg och sidor.

Det kan dock finnas tillfällen då du vill visa olika menyer för olika användare eller på olika sidor på din webbplats.

Med villkorlig logik kan du gå ett steg längre genom att skapa anpassade menyer för inloggade användare. Här är några exempel på användningsfall för 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 inlärningsplattform – Visa olika kurskategorier eller lektioner beroende på en elevs framsteg.

Du kan se det som WordPress menyåtkomstkontroll. 💡

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 kommer vi att visa dig hur du lägger till villkorliga menyer i WordPress för både klassiska och blockredigerare.

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. Du kan till exempel 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 titta på vår nybörjarguide om hur man 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.

När du är inne kan du klicka på fliken ‘Navigation’ för att expandera den. Om du undrar, använder vi temat Twenty-Twenty Three för den här guiden.

Klicka sedan på ‘Redigera’ bredvid etiketten ‘Navigation’.

Detta öppnar redigeraren för hela webbplatsen på din skärm.

Härifrån är allt som återstår att göra att klicka på ikonen '+' för att lägga till ett navigeringsmenyobjekt. Du kommer då att se en prompt 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 man 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. 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'.

Härifrån ser du listan över tillgängliga menyplatser och de menyer som för närvarande visas. Dessa varierar beroende på det WordPress-tema du använder.

Till exempel, på vår demokwebbplats visas det att vår 'Primära meny'-plats visar en navigationsmeny med titeln 'Huvudmeny'.

Vi kan tala om för pluginet att visa en annan meny när ett visst villkor är uppfyllt genom att klicka på länken ‘+ Villkorsstyrd meny’ och välja 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 man 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. Om du behöver hjälp, kan du se vår guide om hur man installerar ett WordPress-plugin.

När du har aktiverat det kan du öppna FSE-funktionen genom att navigera till Utseende » Redigerare. Klicka sedan på 'Mönster' och sedan 'Alla malldelar'.

Du bör nu se alla dina malldelar, vilket kan inkludera en sidfot, en sidhuvud och kommentarer. Låt oss klicka på de tre prickarna i sektionen 'Header' och sedan välja 'Redigera'.

Detta kommer att omdirigera dig till blockredigeraren.

Nu behöver du klicka på blocket för navigeringsmenyn för att lägga till villkor.

Byt sedan helt enkelt 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å 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

Precis som i föregående avsnitt behöver du installera och aktivera pluginet Conditional Menus .

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. Om du behöver hjälp med att installera och aktivera det, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du navigera till Utseende » Redigerare » Mönster » Alla mall-delar. Klicka sedan helt enkelt på de tre prickarna i avsnittet 'Rubrik' och välj sedan 'Redigera'.

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

Till exempel kommer vi att göra vår 'Blogg'-sida exklusiv för endast våra prenumeranter. Så vi klickar på 'Blogg' för att öppna dess anpassningsalternativ.

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.

Till exempel kan du 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 installera och aktivera pluginet Conditional Menus. Sedan vill du navigera till Utseende » Menyer » 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 placera en bock 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

Användare av blockteman kan använda pluginet Block Visibility. Om du behöver hjälp med installationen, se vår guide om hur man installerar ett WordPress-plugin.

När det är aktiverat, låt oss navigera till Utseende » Redigerare » Mönster » Alla malldelar. Och efter att ha öppnat Headers redigerare kan du gå till sektionen 'Synlighet'.

Härifrån kan du öppna rullgardinsmenyn och välja '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 din integritetspolicy-sides URL-sökväg är, kan du gå till Sidor » Alla sidor. Sedan vill du hitta sidan Integritetspolicy och hovra ö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 och kopiera och klistra in delen efter domännamnet.

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 man ökar konverteringen på din landningssida 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. Den här gången väljer du 'Inaktivera meny' från rullgardinsmenyn när du väljer den villkorliga menyn.

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

Nu, för användare av blockteman, kan du använda pluginet Block Visibility, men den här gången anger du URL-sökvägen i fältet ‘URL Path (Does Not Contain)’.

Så, låt oss installera och aktivera pluginet. Om du behöver hjälp, se gärna vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till Utseende » Redigerare » Mönster » Alla mall-delar. Väl inne i sidhuvudsredigeraren, låt oss hitta 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'.

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 hitta 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 menyplugins 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änkar.

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 anpassade navigeringsmenyer i WordPress-teman
• 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
• Hur man visar navigeringslänkar för brödsmulor i WordPress

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