Vill du lägga till anpassade navigeringsmenyer i ditt WordPress-tema? Navigationsmenyer är den horisontella listan med länkar som visas överst på de flesta webbplatser.
Som standard kommer WordPress-teman med fördefinierade menyplatser och layouter, men vad händer om du vill lägga till egna anpassade navigeringsmenyer?
I den här artikeln visar vi hur du enkelt skapar och lägger till anpassade navigeringsmenyer i WordPress, så att du kan visa dem var som helst i ditt tema.
- När behöver du den här WordPress-navigationsmeny-tutorialen?
- Skapa anpassade navigeringsmenyer i WordPress-teman
- Avisering av anpassade navigeringsmenyer i WordPress-teman
- Lägga till en anpassad navigeringsmeny i WordPress med hjälp av Page Builder
- Skapa mobilvänliga responsiva menyer i WordPress
- Gör mer med WordPress-navigationsmenyer
De flesta WordPress-teman har minst en plats där du kan visa webbplatsens navigeringslänkar i en meny.
Du kan hantera menyalternativ från ett lättanvänt gränssnitt i ditt WordPress-administrationsområde.
Om du bara vill lägga till navigeringsmenyer på din webbplats följer du helt enkelt vår nybörjarguide om hur du lägger till en navigeringsmeny i WordPress.
Målet med den här handledningen är att hjälpa DIY / mellanliggande användare att lägga till anpassade navigeringsmenyer i sina WordPress-teman.
Vi kommer att täcka följande ämnen i den här artikeln:
- Skapa en anpassad navigeringsmeny i WordPress-teman
- Visa anpassad navigeringsmeny i WordPress-tema
- Lägga till en anpassad navigeringsmeny i WordPress med hjälp av page builder
- Skapa mobilvänliga responsiva menyer i WordPress
- Fler saker som du kan göra med WordPress-navigeringsmenyer
Har du sagt det? låt oss ta en titt på hur du lägger till anpassade WordPress-navigationsmenyer i ditt tema.
Navigationsmenyer är en funktion i WordPress-teman. Varje tema kan definiera sina egna menyplatser och menystöd.
För att lägga till en anpassad navigeringsmeny måste du först registrera din nya navigeringsmeny genom att lägga till den här koden i temats functions.php-fil.
function 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 sidan Utseende ” Menyer i din WordPress-administration och försöka skapa eller redigera en ny meny. Du kommer att se ”Min anpassade meny” som alternativ för temats placering.
Om du vill lägga till mer än en ny plats för navigationsmenyn behöver du använda en kod som denna:
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' );
När du har lagt till menyplatsen kan du gå vidare och lägga till några menyalternativ i WordPress-administratorn genom att följa vår handledning om hur man lägger till navigationsmenyer för nybörjare.
Detta gör att vi kan gå vidare till nästa steg som är att visa menyn i ditt tema.
Nästan måste vi visa den nya navigeringsmenyn i ditt WordPress-tema. Den vanligaste platsen där navigeringsmenyer vanligtvis placeras är i rubriksektionen på en webbplats strax efter webbplatsens titel eller logotyp.
Du kan dock lägga till din navigeringsmeny var du vill.
Du måste lägga till den här koden i temats mallfil där du vill visa din meny.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
The theme location är det namn som vi valde i föregående steg.
The container class är den CSS-klass som kommer att läggas till i din navigeringsmeny. Din meny kommer att visas som en vanlig punktlista på din webbplats.
Du kan använda CSS-klassen .custom_menu_class för att styla dina menyer. Här är ett exempel på CSS för att hjälpa dig att komma igång:
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
För att lära dig mer om hur du stylar en navigeringsmeny, se vår detaljerade handledning om hur du stylar WordPress navigeringsmenyer
Om du skapar en anpassad landningssida eller hemsidelayout, så skulle det vara mycket lättare om du använde ett WordPress-plugin för sidbyggare.
Vi rekommenderar att du använder Beaver Builder, som är den bästa WordPress-sidebyggaren på marknaden. Den låter dig skapa alla typer av sidlayouter med hjälp av enkla drag and drop-verktyg (ingen kodning krävs).
Detta inkluderar även att lägga till en anpassad navigeringsmeny till din sidlayout.
Först måste du installera och aktivera Beaver Builder-pluginet. För mer information, se vår steg för steg-guide om hur du installerar ett WordPress-plugin.
När du aktiverat måste du skapa en ny sida eller redigera en befintlig sida där du vill lägga till navigeringsmenyn. På skärmen för inläggsredigeraren klickar du på knappen ”Launch Beaver Builder” (Starta Beaver Builder).
Om det är en ny sida kan du använda en av de färdiga mallar som följer med Beaver Builder. Du kan också redigera din exit-sida direkt.
Nästan måste du lägga till Menus-modulen och dra och släppa den på din sida till den plats där du vill visa menyn.
Detta kommer att visa inställningarna för Meny-modulen i ett popup-fönster. Först måste du välja den navigeringsmeny som du vill använda. Du kan alltid skapa nya menyer eller redigera en befintlig meny genom att besöka sidan Utseende ” Menyer i WordPress adminområde.
Du kan också granska andra inställningar. Med Beaver Builder kan du välja anpassade färger, bakgrund och andra stilegenskaper för din meny.
När du är klar kan du klicka på knappen Spara och förhandsgranska din meny.
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.
Du kan lägga till en slide-out-effekt (ovan), en dropdown-effekt och till och med en toggle-effekt för mobila menyer.
Vi har en detaljerad steg-för-steg-guide om hur du gör mobilanpassade responsiva WordPress-menyer.
Navigationsmenyer är ett kraftfullt webbdesignverktyg. De låter dig peka användarna till de viktigaste avsnitten på din webbplats.
Med WordPress kan du göra mycket mer än att bara visa länkar i din meny. Prova de här användbara handledningarna för att utöka navigationsmenyernas funktionalitet på din WordPress-webbplats.
- Hur du lägger till bildikoner med navigeringsmenyer i WordPress
- Hur du lägger till villkorlig logik till menyer i WordPress
- Hur du lägger till menybeskrivningar i ditt WordPress-tema
- Hur du lägger till en responsiv meny för fullskärmsläge i WordPress
- Hur du lägger till en megameny på 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 navigeringsmeny i WordPress. Du kanske också vill se vår lista över 25 mest användbara WordPress-widgetar och vår lista över de nödvändiga WordPress-plugins som du måste ha.
Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videohandledning. Du kan också hitta oss på Twitter och Facebook.