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

Vill du lägga till anpassade navigationsmenyer i ditt WordPress-tema? Navigationsmenyer är den horisontella listan över länkar som visas ovanpå de flesta webbplatser.


Som standard kommer WordPress-teman med fördefinierade menyplatser och layouter, men vad händer om du vill lägga till dina egna anpassade navigationsmenyer?

I den här artikeln visar vi dig hur du enkelt kan skapa och lägga till anpassade navigationsmenyer i WordPress, så att du kan visa dem var som helst i ditt tema.

Lägga till anpassade navigationsmenyer i WordPress-teman

När behöver du den här WordPress-navigationsmenyn?

De flesta WordPress-teman har minst en plats där du kan visa webbplatsens navigationslänkar i en meny.

Du kan hantera menyalternativ från ett användarvänligt gränssnitt i ditt WordPress admin-område.

Om du bara vill lägga till navigationsmenyer på din webbplats följer du bara vår nybörjarguide om hur du lägger till en navigationsmeny i WordPress.

Målet med denna självstudie är att hjälpa DIY / mellananvändare lägga till anpassade navigationsmenyer i sina WordPress-teman.

Vi behandlar följande ämnen i den här artikeln:

    Med det sagt, låt oss ta en titt på hur du lägger till anpassade WordPress-navigationsmenyer i ditt tema.

    Skapa anpassade navigationsmenyer i WordPress-teman

    Navigationsmenyer är en funktion i WordPress-teman. Varje tema kan definiera sina egna menyplatser och menysupport.

    För att lägga till en anpassad navigationsmeny är det första du behöver göra att registrera din nya navigationsmeny genom att lägga till den här koden till ditt temas funktioner.php-fil.

    funktion wpb_custom_new_menu () {
    register_nav_menu (‘my-custom-menu’, __ (‘My Custom Menu’));
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Du kan nu gå till Utseende »Menyer i din WordPress-administratör och försök skapa eller redigera en ny meny. Du ser “Min anpassad meny” som alternativ för temaläge.

    Anpassad navigationsmeny läggs till i temat

    Om du vill lägga till mer än en ny plats för navigationsmenyn, måste du använda en kod som denna:

    funktion wpb_custom_new_menu () {
    register_nav_menus (
    array (
    ‘my-custom-menu’ => __ (“Min anpassade meny”),
    ‘extra-menu’ => __ (‘Extra meny’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    När du har lagt till menyplatsen, gå vidare och lägg till några menyalternativ i WordPress-administratören genom att följa vår handledning om hur du lägger till navigationsmenyer för nybörjare.

    Detta gör att vi kan gå vidare till nästa steg som visar menyn i ditt tema.

    Visa anpassade navigationsmenyer i WordPress-teman

    Därefter måste vi visa den nya navigationsmenyn i ditt WordPress-tema. Den vanligaste platsen där navigationsmenyer vanligtvis placeras är i rubrikavsnittet på en webbplats strax efter webbplatsens titel eller logotyp.

    Du kan dock lägga till din navigationsmeny var du vill.

    Du måste lägga till den här koden i tematets mallfil där du vill visa din meny.

    <?php
    wp_nav_menu (matris (
    ‘theme_location’ => ‘My-custom-menyn’,
    ‘container_class’ => ‘anpassad menyklass’));
    ?>

    Temaläget är namnet som vi valde i föregående steg.

    Containerklassen är CSS-klassen som läggs till i din navigationsmeny. Din meny visas som en vanlig punktlista på din webbplats.

    Anpassad visas som vanlig lista

    Du kan använda CSS-klassen. Custom_menu_class för att utforma dina menyer. Här är ett exempel på CSS som hjälper dig komma igång:

    div.custom-menyklass ul {
    marginal: 20px 0px 20px 0px;
    list-stil-typ: ingen;
    liststil: ingen;
    lista-stil-bild: ingen;
    text-align: right;
    }
    div.custom-menu-class li {
    stoppning: 0px 20px 0px 0px;
    display: inline;
    }
    div.custom-menyklass a {
    färg: #FFFFFF;
    }

    Anpassad meny utformad

    För att lära dig mer om utformning av en navigationsmeny, se vår detaljerade handledning om hur du utformar navigationsmenyer för WordPress

    Lägga till en anpassad navigationsmeny i WordPress med hjälp av sidbyggare

    Om du skapar en anpassad målsida eller hemsideslayout skulle det att göra en sak mycket lättare att använda ett WordPress-sidbyggare-plugin.

    Vi rekommenderar att du använder Beaver Builder, som är den bästa WordPress-sidbyggaren på marknaden. Det låter dig skapa alla typer av sidlayout med enkla dra och släppverktyg (ingen kodning krävs).

    Detta inkluderar också att lägga till en anpassad navigationsmeny till din sidlayout.

    Först måste du installera och aktivera Beaver Builder-insticksprogrammet. Mer information finns i vår steg för steg-guide för hur du installerar ett WordPress-plugin.

    Vid aktivering måste du skapa en ny sida eller redigera en befintlig sida där du vill lägga till navigationsmenyn. Klicka på knappen “Starta Beaver Builder” på postredigeringsskärmen.

    Starta Beaver Builder

    Om det är en ny sida kan du använda en av de färdiga mallarna som medföljer Beaver Builder. Du kan också redigera din avslutande sida direkt.

    Välj en mall

    Därefter måste du lägga till Meny-modulen och dra och släppa den på din sida till platsen där du vill visa menyn.

    Lägg till menymodul till din sida

    Detta kommer att öppna menyalternativets inställningar i en popup. Först måste du välja den navigationsmeny du vill använda. Du kan alltid skapa nya menyer eller redigera en befintlig meny genom att besöka Utseende »Menyer sida i WordPress adminområde.

    Inställningar för menymodulen

    Du kan också granska andra inställningar. Beaver Builder låter dig välja egna färger, bakgrund och andra stilegenskaper för din meny.

    När du är klar kan du klicka på Spara-knappen och förhandsgranska din meny.

    Förhandsvisning av en anpassad navigeringsmeny tillagd med Beaver Builder

    Skapa mobilvänliga responsiva menyer i WordPress

    Med den ökade användningen av mobila enheter kanske du vill göra dina menyer mobilvänliga genom att lägga till en av de många populära effekterna.

    Responsivt menyexempel

    Du kan lägga till en utskjutningseffekt (ovan), dropdown-effekt och till och med en växlingseffekt för mobila menyer.

    Vi har en detaljerad steg-för-steg-guide för hur du gör mobila klara responsiva WordPress-menyer.

    Gör mer med WordPress-navigationsmenyer

    Navigationsmenyer är ett kraftfullt webbdesignverktyg. De låter dig peka användare till de viktigaste avsnitten på din webbplats.

    Med WordPress kan du göra mycket mer än att bara visa länkar i menyn. Prova dessa användbara handledning för att utöka funktionaliteten för navigationsmenyer på din WordPress-webbplats.

    • Hur man lägger till bildikoner med navigationsmenyer i WordPress
    • Hur du lägger till villkorad logik till menyer i WordPress
    • Hur du lägger till menybeskrivningar i ditt WordPress-tema
    • Hur du lägger till en responsfull meny i fullskärm i WordPress
    • Så lägger du till en mega-meny till din WordPress-webbplats

    Det är allt, vi hoppas att den här ultimata guiden hjälpte dig att lära dig hur du lägger till en navigationsmeny i WordPress. Du kanske också vill se vår lista med 25 mest användbara WordPress-widgetar, och vår lista över de måste ha WordPress-plugins.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map