Hur man lägger till anpassade navigeringsmenyer i WordPress-teman

På WPBeginner har vi hjälpt otaliga läsare att anpassa sina WordPress-webbplatser för att förbättra användarupplevelsen, stärka varumärket och driva konverteringar. Och vi har sett att när det görs rätt kan en unik navigeringsmeny hjälpa till att öka engagemanget och hålla folk längre på din webbplats.

Problemet är att alla WordPress-teman har fasta platser där du kan visa en navigeringsmeny, så att ändra detta kan vara knepigt. Detta gäller särskilt om du är nybörjare eftersom modifiering av temafiler är en känslig process.

När du använder ett blocktema kan du göra detta med Full Site Editor. Men, enligt vår erfarenhet, finns det bättre alternativ som fungerar för alla typer av teman.

Till exempel, om du vill ha avancerade anpassningar kan du använda en kraftfull sidbyggare som SeedProd. Eller, om du letar efter ett enkelt sätt att använda anpassad kod, är WPCode det absolut bästa valet.

I den här artikeln visar vi hur du lägger till en anpassad navigeringsmeny i valfritt område av ditt WordPress-tema. Vi går igenom 3 olika alternativ så att du kan välja den handledning som passar dina behov.

Varför lägga till anpassade navigeringsmenyer i WordPress-teman?

En navigeringsmeny är en lista med länkar som pekar på viktiga områden på din webbplats. De gör det enkelt för besökare att hitta intressant innehåll, vilket kan öka sidvisningar och minska avvisningsfrekvensen i WordPress.

Den exakta placeringen av din meny varierar beroende på ditt WordPress-tema. De flesta teman har flera alternativ, så du kan skapa olika menyer och visa dem på olika platser.

För att se var du kan visa menyer i ditt nuvarande WordPress-tema, gå helt enkelt till Utseende » Menyer och titta sedan på avsnittet 'Visningsplats'.

Följande bild visar de platser som stöds av Astra WordPress-tema.

Ibland kanske du vill visa en meny i ett område som inte är listat som en 'Visningsplats' i ditt tema.

Med det i åtanke, låt oss titta på hur du lägger till en anpassad navigeringsmeny i valfritt område av ditt WordPress-tema. Använd helt enkelt snabblänkarna nedan för att hoppa till den metod du föredrar:

• Metod 1: Använda hela webbplatsredigeraren (endast blockbaserade teman)
• Metod 2: Använda ett sidbyggarplugin (fungerar med alla teman)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

Metod 1: Använda hela webbplatsredigeraren (endast blockbaserade teman)

Om du använder ett blocktema som ThemeIsle Hestia Pro, kan du lägga till en anpassad navigeringsmeny med Full Site Editing (FSE) och blockredigeraren.

För mer information kan du se vår artikel om de bästa WordPress-teman för fullständig webbplatsredigering.

Den här metoden fungerar inte med alla teman, och den låter dig inte anpassa alla delar av menyn. Om du vill lägga till en helt anpassad meny till vilket WordPress-tema som helst, rekommenderar vi att du istället använder ett sidbyggarplugin.

Om du använder ett blockbaserat tema, gå sedan till Utseende » Redigerare.

Som standard visar redigeraren för hela webbplatsen din temas startsidsmall, men du kan lägga till en navigeringsmeny i valfritt område.

För att se alla tillgängliga alternativ, välj antingen 'Mallar', 'Mönster' eller 'Sidor'.

Du kan nu klicka på mallen, malldelen eller sidan där du vill lägga till en anpassad navigeringsmeny.

WordPress kommer nu att visa en förhandsgranskning av designen. För att redigera den här mallen, klicka på den lilla pennikonen.

Nästa steg är att lägga till ett Navigationsblock i det område där du vill visa din meny.

Klicka på den blå knappen ‘+’ i det övre vänstra hörnet.

Skriv nu 'Navigation' i sökfältet.

När blocket 'Navigation' visas, dra och släpp det helt enkelt på din layout.

Klicka sedan för att välja Navigeringsblocket.

Om du redan har skapat menyn som du vill visa, klicka sedan för att välja blocket Navigation. I menyn till höger klickar du på ikonen med tre punkter bredvid 'Meny'.

Du kan sedan välja en meny från rullgardinsmenyn.

Ett annat alternativ är att bygga en meny inuti redigeraren för hela webbplatsen genom att lägga till sidor, inlägg, anpassade länkar och mer. För att lägga till objekt i den nya menyn, klicka bara på ikonen ‘+’.

Detta öppnar ett popup-fönster där du lägger till vilket inlägg eller sida som helst och bestämmer om dessa länkar ska öppnas i en ny flik.

Du kan också lägga till en sökfält i WordPress-menyn, lägga till ikoner för sociala medier, och mer. I popup-fönstret, skriv helt enkelt in blocket du vill lägga till i menyn och välj rätt alternativ när det visas.

Du kan sedan konfigurera detta block med hjälp av inställningarna i miniverktygsfältet och menyn till höger. Upprepa helt enkelt dessa steg för att lägga till fler objekt i menyn.

När du är nöjd med hur menyn ser ut, klicka helt enkelt på knappen ‘Spara’.

Din webbplats kommer nu att använda den nya mallen, och besökare kan interagera med din anpassade navigeringsmeny.

Metod 2: Använda ett sidbyggarplugin (fungerar med alla teman)

Hela webbplatsredigeraren låter dig lägga till menyer i blockbaserade teman. Men om du vill lägga till en avancerad, helt anpassningsbar meny till vilket WordPress-tema som helst, behöver du ett sidbyggarplugin.

SeedProd är det bästa WordPress sidbyggarpluginet på marknaden som låter dig anpassa varje del av din navigeringsmeny.

Vi har omfattande erfarenhet av att använda detta verktyg för att bygga anpassade navigeringsmenyer, landningssidor och mycket mer. För mer information, kolla in vår kompletta SeedProd-recension.

När det gäller sidor, kommer SeedProd med över 350 professionellt designade mallar som du kan använda som utgångspunkt. Efter att ha valt en mall kan du lägga till en anpassad navigeringsmeny på din webbplats med hjälp av SeedProds färdiga Nav Menu-block.

Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter att ha aktiverat pluginet kommer SeedProd att be om din licensnyckel.

Du hittar denna information i ditt konto på SeedProd-webbplatsen. Efter att ha angett nyckeln, klicka på knappen ‘Verifiera nyckel’.

När du har gjort det, gå till SeedProd » Landningssidor och klicka på knappen 'Lägg till ny landningssida'.

Du kan nu välja en mall för din anpassade sida.

För att hjälpa dig att hitta rätt design är alla SeedProds mallar organiserade i olika kampanxtyper, som kommande och lead squeeze-kampanjer. Du kan till och med använda SeedProds mallar för att förbättra din 404-sida.

För att titta närmare på en design, för helt enkelt muspekaren över mallen och klicka sedan på förstoringsglaset.

När du hittar en design du vill använda, klicka på 'Välj den här mallen'.

Vi använder mallen 'Black Friday Sales Page' i alla våra bilder, men du kan använda vilken mall du vill.

Efter att ha valt en mall, skriv in ett namn för den anpassade sidan. SeedProd kommer automatiskt att skapa en URL baserad på sidans titel, men du kan ändra denna URL till vad du vill.

Till exempel kan du lägga till relevanta sökord för att hjälpa sökmotorer att förstå vad sidan handlar om. Detta kan förbättra din WordPress SEO och hjälpa sökmotorn att visa sidan för personer som letar efter innehåll precis som ditt.

Efter att ha angett denna information, klicka på knappen ‘Spara och börja redigera sidan’.

De flesta mallar innehåller redan några block, som är kärnkomponenterna i alla SeedProd-sidlayouter.

För att anpassa ett block, klicka bara för att markera det i sidredigeraren.

Verktygsfältet till vänster visar nu alla inställningar för det blocket. Till exempel, i bilden nedan ändrar vi texten inuti ett 'Rubrik'-block.

Du kan formatera texten, ändra dess justering, lägga till länkar och mer med hjälp av inställningarna i menyn till vänster.

Om du väljer fliken 'Avancerat' får du tillgång till ännu fler inställningar. Du kan till exempel få blocket att verkligen sticka ut genom att lägga till skuggor och CSS-animationer.

För att lägga till nya block i din design, hitta helt enkelt ett block i menyn till vänster och dra det sedan till sidan. Om du vill ta bort ett block, klicka för att markera det blocket och använd sedan papperskorgsikonen.

Eftersom vi vill skapa en anpassad navigeringsmeny, dra ett 'Nav Menu'-block till sidan.

Detta skapar en navigeringsmeny med ett enda standardobjekt ‘Om’.

Du kan nu antingen skapa en ny meny i SeedProd-editorn eller välja en meny som du redan har skapat i WordPress-instrumentpanelen.

För att visa en meny du tidigare har skapat, klicka på knappen 'WordPress Menu'. Du kan nu öppna rullgardinsmenyn 'Menus' och välja ett alternativ från listan.

Därefter kan du ändra teckenstorlek, textjustering och mer med hjälp av inställningarna i den vänstra menyn.

Om du vill bygga en ny meny i SeedProd istället, välj sedan knappen ‘Simple’.

Klicka sedan för att expandera objektet ‘Om’ som SeedProd skapar som standard.

Detta öppnar några kontroller där du kan ändra texten och lägga till URL:en som menyalternativet ska länka till.

Som standard kommer länken att vara 'dofollow' och öppnas i samma webbläsarfönster. Du kan ändra dessa inställningar med hjälp av kryssrutorna i avsnittet 'URL-länk'.

I följande bild skapar vi en 'nofollow'-länk som öppnas i ett nytt fönster. För mer om detta ämne, se vår nybörjarguide till nofollow-länkar.

För att lägga till fler objekt i menyn, klicka helt enkelt på knappen 'Lägg till nytt objekt'.

Du kan sedan anpassa vart och ett av dessa objekt genom att följa samma process som beskrivs ovan.

Menyn till vänster har också inställningar som ändrar teckensnittsstorleken och textjusteringen.

Du kan till och med skapa en avdelare, som kommer att visas mellan varje objekt i menyn.

Efter det, fortsätt och byt till fliken ‘Avancerat’. Här kan du ändra menyns färger, avstånd, typografi och andra avancerade alternativ.

När du gör ändringar uppdateras förhandsgranskningen automatiskt, så att du kan prova olika inställningar för att se vad som ser bra ut i din design.

Som standard visar SeedProd samma meny på mobila och stationära enheter. Mobila enheter har dock vanligtvis mycket mindre skärmar jämfört med stationära datorer.

Med detta i åtanke kanske du vill skapa en separat meny att visa på mobila enheter. Till exempel kanske du använder en vertikal layout så att mobilanvändare inte behöver scrolla i sidled. Du kanske också vill visa färre länkar på smartphones och surfplattor.

För att skapa en mobilklar meny, designa bara menyn enligt samma process som beskrivs ovan. Välj sedan fliken 'Avancerat' och klicka för att expandera sektionen 'Enhetssynlighet'.

Du kan nu aktivera reglaget ‘Dölj på datorn’.

Nu kommer SeedProd bara att visa den här menyn för mobilanvändare.

När du är nöjd med hur din anpassade meny ser ut är det dags att publicera den.

Klicka helt enkelt på rullgardinsmenyn bredvid ‘Spara’ och välj sedan ‘Publicera’.

Nu, om du besöker din WordPress-blogg, kommer du att se den anpassade navigeringsmenyn i aktion.

Metod 3: Skapa en anpassad navigeringsmeny i WordPress med kod (avancerat)

Om du inte vill konfigurera ett sidbyggarplugin kan du lägga till en anpassad navigeringsmeny med kod. Du hittar ofta guider med instruktioner om hur du lägger till anpassade kodavsnitt i din temas functions.php-fil.

Vi rekommenderar dock inte den här metoden, eftersom även ett litet fel i din kod kan orsaka ett antal vanliga WordPress-fel eller till och med bryta din webbplats helt. Du kommer också att förlora din anpassade kod när du uppdaterar ditt WordPress-tema.

Därför rekommenderar vi att använda WPCode. Det är det enklaste och säkraste sättet att lägga till anpassad kod i WordPress utan att behöva redigera några kärnfiler i WordPress.

Det första du behöver göra är att installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Kodavsnitt » Lägg till kodavsnitt i din WordPress-instrumentpanel.

Här ser du alla färdiga kodavsnitt som du kan lägga till på din webbplats.  Dessa inkluderar ett kodavsnitt som låter dig helt inaktivera kommentarer, ladda upp filtyper som WordPress normalt inte stöder, inaktivera bilagesidor, och mycket mer.

För att skapa ditt eget kodavsnitt, för muspekaren över 'Lägg till din anpassade kod (nytt kodavsnitt)' och klicka sedan på knappen '+ Lägg till anpassat kodavsnitt'.

Därefter måste du välja en kodtyp från listan med alternativ som visas på skärmen. För den här handledningen, välj 'PHP-utdrag' som kodtyp.

Du kommer nu att dirigeras till sidan Skapa anpassat utdrag.

För att börja, ange en titel för kodsnutten. Detta kan vara vad som helst som hjälper dig att identifiera snutten i din WordPress-instrumentpanel.

När du har gjort det, klistra helt enkelt in följande kodavsnitt i kodredigeraren:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Detta lägger till en ny menyplats i ditt tema som kallas ‘Min anpassade meny.’ Om du vill använda ett annat namn, ändra bara kodavsnittet.

Om du vill lägga till mer än en anpassad navigeringsmeny i ditt tema, lägg helt enkelt till en extra rad i kodavsnittet.

Till exempel lägger vi här till två nya menyplatser i vårt tema, kallade 'Min anpassade meny' och 'Extra meny:'

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Scrolla sedan ner till alternativen för 'Infogning'. Om det inte redan är valt, välj metoden 'Auto Insert' så att WPCode lägger till kodavsnittet på hela din webbplats.

Öppna sedan rullgardinsmenyn ‘Plats’ och klicka på ‘Kör överallt’.

Nu är du redo att skrolla till toppen av skärmen och klicka på reglaget ‘Inaktiv’ så att det ändras till ‘Aktiv’.

Klicka slutligen på 'Spara' för att göra detta kodavsnitt live.

Gå sedan till Utseende » Menyer och titta på området ‘Visningsplats’.

Du bör nu se ett nytt alternativ 'Min anpassade meny'.

Du kan nu lägga till några menyalternativ till den nya platsen. För mer information, se vår steg-för-steg-guide om hur man lägger till navigeringsmenyer för nybörjare.

När du är nöjd med din meny är nästa steg att lägga till den i ditt WordPress-tema.

Lägga till den anpassade navigeringsmenyn i ditt WordPress-tema

De flesta webbplatser visar navigeringsmenyn direkt under sidhuvudet. Detta innebär att menyn är en av de första sakerna besökare ser, tillsammans med webbplatsens logotyp eller titel.

Du kan lägga till den anpassade navigeringsmenyn var som helst genom att lägga till lite kod i din temas mallfil.

I din WordPress-instrumentpanel, gå till Utseende » Temas filredigerare.

I menyn till höger, välj mallen där du vill lägga till menyn. Om du till exempel vill visa den anpassade navigeringsmenyn i din webbplatsens sidhuvud, väljer du vanligtvis filen header.php.

För hjälp med att hitta rätt mallfil, se vår guide om hur du hittar vilka filer som ska redigeras i ditt WordPress-tema.

Efter att ha valt filen måste du lägga till en wp_nav_menu-funktion och ange namnet på din anpassade meny.

Till exempel, i följande kodavsnitt lägger vi till 'Min anpassade meny' i sidans sidhuvud:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Efter att ha lagt till koden, klicka på knappen 'Uppdatera fil' för att spara dina ändringar.

Nu, om du besöker din webbplats, då kommer du att se den anpassade menyn i praktiken.

Som standard kommer din meny att visas som en enkel punktlista.

Du kan styla den anpassade navigeringsmenyn för att bättre matcha ditt WordPress-tema eller ditt företags varumärke genom att lägga till anpassad CSS-kod på din webbplats.

För att göra detta, gå till Utseende » Anpassa.

I WordPress temaanpassare, klicka på 'Ytterligare CSS'.

Detta öppnar en liten kodredigerare där du kan skriva in lite CSS.

Du kan nu styla din meny med hjälp av CSS-klassen som du lade till i din temamall. I vårt exempel är detta .custom_menu_class.

I följande kod lägger vi till marginaler och stoppning, ställer in textfärgen till svart och arrangerar menyalternativen i en horisontell layout:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

WordPress-anpassaren uppdateras automatiskt.

Nu kommer det att visas hur menyn kommer att se ut med den nya stilen.

Om du är nöjd med hur menyn ser ut, klicka på 'Publicera' för att göra dina ändringar live.

För mer information, se vår guide om hur man stylar WordPress navigeringsmenyer.

Expertguider: Gör mer med WordPress-navigeringsmenyer

Med WordPress kan du skapa alla typer av hjälpsamma och engagerande menyer. Med det i åtanke, här är några experthandledningar som hjälper dig att få ut ännu mer av dina navigeringsmenyer:

• Hur man lägger till bildikoner med navigeringsmenyer i WordPress
• Hur man lägger till villkorlig logik till menyer i WordPress (steg för steg)
• Hur man lägger till menybeskrivningar i dina WordPress-teman
• Hur man lägger till en fullskärms responsiv meny i WordPress
• Hur man lägger till en megameny på din WordPress-webbplats (steg för steg)

Vi hoppas att denna ultimata guide hjälpte dig att lära dig hur du lägger till en anpassad navigeringsmeny i WordPress. Du kanske också vill se våra guider om hur du lägger till en knapp i din WordPress-sidhuvudmeny eller hur du markerar ett menyalternativ 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.