Så här add to custom navigation menus i WordPress Themes

Vill du add to custom navigation menus i ditt WordPress theme?

Alla themes har bestämda locations där du kan visa en navigation menu. Ibland kan du dock behöva add to en menu till andra areas på your website.

I den här artikeln visar vi dig hur du addar en custom navigation menu till valfritt area i ditt WordPress theme.

Varför lägga till Custom Navigation Menus i WordPress Themes?

En navigation menu är en lista med länkar som pekar på viktiga areas på din website. De gör det enkelt för besökarna att hitta intressant content, vilket kan öka antalet sidvisningar och minska studsfrekvensen i WordPress.

Den exakta positionen för din menu varierar beroende på ditt WordPress theme. De flesta teman har flera alternativ, så att you kan skapa olika menyer och visa dem på olika locations.

För att se var du kan visa menyer i din nuvarande WordPress Theme, bara heada till Appearance ” Menus och sedan ta en titt på ”Display location” section.

I följande image visas de locations som stöds av temat Astra WordPress.

Ibland kanske du vill visa en menu i ett area som inte är listat som en ”Display location” i your theme.

Med detta i åtanke, låt oss ta en titt på hur du addar en custom navigation menu till valfritt area i ditt WordPress theme. Använd bara snabblänkarna under för att hoppa till den metod du föredrar:

Metod 1: Använda hela Site Editor (endast block-baserade teman)

Om du använder ett blocktema som ThemeIsle Hestia Pro kan du add to en custom navigationsmeny med hjälp av Full Site Editing (Redigering av hela webbplatsen) och block editor.

För mer detaljer, kan du se vår artikel om de bästa WordPress teman för full Site Editing.

Den här metoden fungerar inte med alla teman, och den låter dig inte customize alla delar av menyn. Om du vill add to en helt custom menu till ett WordPress-tema rekommenderar vi att du använder ett page builder plugin istället.

Om du använder ett blockbaserat theme, headar du till Appearance ” Editor.

Som standard visar hela Site Editor ditt temas hemmamall, men du kan add a navigation menu to any area.

För att se alla tillgängliga alternativ, välj bara antingen ”Templates”, ”Patterns” eller ”Pages”.

Du kan nu clicka på den template, template part eller page där du vill add to en custom navigation menu.

WordPress kommer nu att visa en preview av designen. För att gå vidare och editera denna template, click på den lilla penn-iconen.

Nästa steg är att lägga till ett Navigation-block i det area där you vill visa din menu.

Klicka på den blå knappen ”+” högst upp i vänstra hörnet.

Gå nu vidare och skriv ”Navigation” i sökfältet.

När blocket ”Navigation” appear, simply drag and drop it onto your layout.

Klicka sedan på för att selecta blocket Navigation.

Om du redan har skapat den meny som du vill visa klickar du på för att selecta blocket Navigation. I menyn till höger klickar du på den treprickiga ikonen bredvid ”Menu”.

Du kan sedan välja en menu från dropdown.

Ett annat alternativ är att bygga en meny i Site Editor genom att lägga till pages, posts, custom links med mera. För att lägga till objekt i den nya menyn klickar du bara på ikonen ”+”.

Detta öppnar en popup där du kan add to en post eller page och bestämma om dessa links ska öppnas i en new tab.

Du kan också lägga till ett search-fält i WordPress-menyn, lägga till icons för social media och mycket mer. I popupen skriver du bara in det block som du vill add to menyn och väljer rätt alternativ när det visas.

Du kan sedan konfigurera blocket med hjälp av Settings i miniverktygfältet och i menyn till höger. Upprepa bara dessa steg för att add to fler items till menyn.

När du är nöjd med hur menyn ser ut klickar du bara på knappen ”Save”.

Din site kommer nu att använda den nya templates och visitors kan interagera med din custom navigation menu.

Metod 2: Använda ett Page Builder-tillägg (fungerar med alla teman)

Den fullständiga Site Editor tillåter dig att add menyer till blockbaserade themes. Om du vill add to en avancerad, helt anpassningsbar menu till ett WordPress theme behöver du dock ett page builder plugin.

SeedProd är den bästa WordPress page builder plugin på marknaden och tillåter dig att customize varje del av din navigation menu.

SeedProd kommer med över 300+ professionellt designade templates som du kan använda som din utgångspunkt. När du har valt en template kan du add to en custom navigation menu till din site med hjälp av SeedProd’s färdiga Nav Menu block.

Först måste du installera och aktivera SeedProd plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Obs/observera: Det finns också en gratis version av SeedProd som allow you att skapa custom navigation menus utan att skriva kod. I den här guiden kommer vi dock att använda SeedProd Pro eftersom det har Nav Menu-blocket, plus extra templates och avancerade funktioner.

Efter att ha aktiverat pluginet kommer SeedProd att be om din license key.

You can find this information in your account on the SeedProd website. När du har enter nyckeln klickar du på knappen ”Verify Key”.

När du har gjort det, gå till SeedProd ” Landing Pages och klicka på knappen ’Add New Landing Page’.

Du kan nu välja en template för din custom page.

För att hjälpa dig att hitta rätt design är alla SeedProds templates organiserade i olika kampanjtyper, till exempel coming soon och lead squeeze-kampanjer. Du kan även använda SeedProds templates för att förbättra din 404 page.

Om du vill titta närmare på en design håller du bara muspekaren över templaten och klickar sedan på ikonen med förstoringsglaset.

När du hittar en design som du vill använda klickar du på ”Choose This Template”.

Vi använder mallen ”Black Friday Sales Page” i alla våra images, men du kan använda vilken template du vill.

Efter att du har valt en template, skriv in ett namn för den customize page. SeedProd kommer automatiskt att skapa en URL baserat på sidans rubrik, men du kan ändra denna URL till vad du vill.

Du kan t.ex. add to relevanta keywords för att hjälpa search engines att förstå vad sidan handlar om. Detta kan förbättra din sökmotorsoptimering för WordPress och hjälpa search engine att visa sidan för personer som letar efter content som gillar your.

När du har enter denna information klickar du på knappen ”Save and Start Editing the Page”.

De flesta templates innehåller redan några block, som är core komponenterna i all SeedProd page layouts.

För att customize ett block klickar du bara för att selecta det i page editor.

I den vänstra toolbaren visas nu alla Settings för det blocket. I bilden under ändrar vi till exempel texten i ett block med rubriken ”Headline”.

Du kan formatera texten, ändra justering, add to links med mera med hjälp av inställningarna i menyn till vänster.

Om du väljer tabben ”Advanced” får du tillgång till ännu fler Settings. Du kan till exempel göra så att blocket verkligen sticker ut genom att lägga till boxskuggor och CSS-animationer.

Om du vill add new block till din design hittar du ett block i menyn till vänster och drar det sedan till sidan. Om du vill ta bort ett block klickar du på det för att selecta blocket och använder sedan ikonen för papperskorgen.

Eftersom vi vill skapa en custom navigation menu, dra ett ”Nav Menu” block på sidan.

Detta skapar en navigation menu med ett enda standard ”About” objekt.

Du kan nu antingen skapa en new menu i SeedProd Editor eller välja en menu som du redan har skapat i WordPress dashpanelen.

Om du vill visa en meny som du har skapat tidigare klickar du på knappen ”WordPress Menu”. Du kan nu öppna dropdown-menyn ”Menus” och välja valfritt alternativ från listan.

Därefter kan du ändra storlek på font, textjustering med mera med hjälp av inställningarna i menyn till vänster.

Om du vill bygga en new menu i SeedProd istället, välj då knappen ”Simple”.

Klicka sedan för att förstora objektet ”Om” som SeedProd skapar som standard.

Detta öppnar några kontroller där du kan ändra texten och add to URL:en som menu-item kommer att länka till.

Som standard kommer länken att vara ”dofollow” och öppnas i samma fönster i webbläsaren. Du kan ändra dessa Settings med hjälp av checkboxarna i ”URL Link” section.

I följande image skapar vi en ”nofollow”-länk som öppnas i ett nytt fönster. Mer information om detta ämne finns vänligen i vår guide för nybörjare om nofollow-länkar.

För att add to fler objekt till menyn, clickar du bara på knappen ”Add New Item”.

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

I menyn till vänster finns också Settings för att ändra storlek på font och justering av text.

Du kan även skapa en avdelare, som kommer att visas mellan varje objekt i menyn.

Därefter går du vidare och byter till tabben ”Avancerat”. Här kan du ändra menyns färger, avstånd, typografi och andra avancerade alternativ.

När du gör ändringar uppdateras live preview automatiskt, så att du kan prova olika settings 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 vyer jämfört med stationära datorer.

Med det i åtanke kanske du vill skapa en separat meny som ska visas på mobila enheter. Du kan till exempel använda en vertikal layout så att mobila användare inte behöver rulla i sidled. Du kanske också vill visa färre links på smartphones och surfplattor.

För att skapa en mobilanpassad meny designar du bara menyn genom att följa samma process som beskrivs ovan. Välj sedan tabben ”Advanced” och click för att förstora sectionen ”Device Visibility”.

Du kan nu clicka på slidern ”Hide on Desktop” så att den blir orange.

Nu kommer SeedProd endast att visa denna meny för mobila användare.

När you är nöjd med hur din customize menu ser ut är det dags att publicera den.

Klicka bara på dropdown-pilen bredvid ”Save” och välj sedan ”Publicera”.

Nu, om du besöker din WordPress blogg, kommer du att se den custom navigation menu i action.

Metod 3: Skapa en customize navigation menu i WordPress med hjälp av kod (avancerad)

Om du inte vill konfigurera ett page builder plugin, kan du lägga till en custom navigation menu med hjälp av kod. Du hittar ofta guider med instruktioner för att add to anpassade code snippets till ditt temas functions.php-fil.

Vi rekommenderar dock inte denna metod eftersom även ett litet misstag i din kod kan orsaka ett antal vanliga WordPress error eller till och med förstöra din site helt. Du kommer också att förlora din custom code när du uppdaterar ditt WordPress theme.

Det är därför vi rekommenderar att du använder WPCode. Det är det enklaste och säkraste sättet att add to custom code i WordPress utan att behöva edit några core WordPress-filer.

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

Efter aktivering, gå till Code Snippets ” Add Snippet i din WordPress dashpanel.

Here, you’ll see all the ready-made snippets that you can add to your site. These include a snippet that allow you to completely disable comments, upload file types that WordPress does not usually support, disable attachment pages, and much more.

För att skapa ditt eget snippet, hovera musen över ”Add Your Custom Code” och klicka sedan på ”Use snippet”.

Börja med att enter en titel för det custom code snippet. Detta kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.

Därefter öppnar du dropdown ’Code Type’ och väljer ’PHP Snippet’.

När du har gjort det klistrar du bara in följande snippet i code snippets editor:

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

Detta kommer att add a new menu location to your theme anroped ’My Custom Menu’. För att använda ett annat namn, tweakar du bara code snippet.

Om du vill lägga till mer än en custom navigation menu till ditt theme, lägg då bara till en extra rad i code snippet.

Här lägger vi till exempel till två new menu locations i vårt theme, anropade My Custom Menu och Extra Menu:

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' );

Efter det rullar du till alternativen för infogning. Om den inte redan är vald väljer du metoden ”Auto Insert” så att WPCode lägger till snippet på hela din webbplats.

Därefter öppnar du dropdown ’Location’ och klickar på ’Run Everywhere’.

Sedan är du redo att rulla högst upp på vyn och klicka på ”Inaktiverad” toggle så att den ändras till ”Aktiv”.

Slutligen, gå vidare och klicka på ”Save” för att göra detta snippet live.

Därefter går du till Appearance ” Menus och tittar på området ”Display location”.

Du bör nu se ett nytt alternativ ”My Custom Menu”.

Du kan nu gå vidare och lägga till några menu items på den nya location. För mer information, vänligen se vår Step-by-Step guide om hur man lägger till navigation menyer för nybörjare.

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

Lägga till en custom navigation menu i ditt WordPress theme

På de flesta websites visas navigation menu direkt under header section. Det innebär att menyn är en av de första sakerna som besökarna ser, tillsammans med site logon eller rubriken.

Du kan add to den anpassade navigation menu till vilken location som helst genom att lägga till lite kod till ditt temas template-fil.

I din WordPress dashboard, gå till Appearance ” Theme File Editor.

I menyn till höger väljer du den templates där du vill add to menyn. Om du till exempel vill visa den customize navigation menu i din websites header, väljer du vanligtvis header.php-filen.

För hjälp med att hitta rätt template-fil, vänligen se vår guide om hur du hittar vilka filer som ska editeras i ditt WordPress theme.

När du har valt filen måste du add to en wp_nav_menu-funktion och ange namnet på din customizer menu.

I följande code snippet lägger vi till exempel till My Custom Menu i temats header:

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

När du har lagt till koden klickar du på knappen ”Update File” för att save your changes.

Nu, om du besöker din site, så kommer du att se den customize menyn i action.

Som standard kommer din menu att visas som en vanlig punktlista.

Du kan utforma den anpassade navigation menyn för att bättre matcha ditt WordPress tema eller företagets varumärke genom att lägga till custom CSS-kod på din site.

För att göra detta, gå till Appearance ” Customize.

I WordPress theme customize, klicka på ”Additional CSS”.

Detta öppnar en liten code type editor där du kan skriva in lite CSS.

Du kan nu utforma din meny med hjälp av CSS-klassen som du addade till din template för temat. I vårt exempel är detta .custom_menu_class.

I Följer lägger vi till marginaler och padding, ställer in textfärgen till svart och ordnar menu-items 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 customizer uppdateras automatiskt för att visa hur menyn kommer att se ut med den nya stilen.

Om du är nöjd med hur menyn ser ut klickar du på ”Publicera” för att göra dina ändringar.

För mer information, vänligen se vår guide om hur du stylar WordPress navigations menyer.

Gör mer med menyer för navigation i WordPress

Med WordPress kan du skapa all slags användbara och engagerande menyer. Med detta i åtanke, här är hur du får ut ännu mer av dina navigations menyer:

• Så här addar du image icons med navigation menus i WordPress
• Så här addar du villkorlig logik till menyer i WordPress
• Så här lägger du till beskrivningar av menyer i ditt WordPress theme
• Så här add to en fullskärms responsiv menu i WordPress
• Så här addar du en mega menu till din site i WordPress

Vi hoppas att den här ultimata guiden hjälpte dig att lära dig hur du lägger till en custom navigation menu i WordPress. Du kanske också vill se de bästa sätten att öka trafiken på din blogg och hur du trackar besökare på din website i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.