En välstrukturerad navigeringsmeny är viktig för att guida besökare genom din WordPress-webbplats och se till att de enkelt kan hitta den information de behöver.
Oavsett om du skapar din första webbplats eller försöker förbättra användarupplevelsen på en befintlig webbplats är det viktigt att lära sig hur man lägger till och anpassar en navigeringsmeny.
WordPress har ett menygränssnitt med dra-och-släpp-funktion som du kan använda för att enkelt skapa huvudmenyer, menyer med rullgardinsalternativ och mycket mer.
Genom åren har vi skapat en mängd olika menyer för våra olika varumärken, vilket har gett oss förstahandserfarenhet av att utforma menystilar. Vi har lärt oss vilka typer av menyer som fungerar bäst för olika företag, vilka länkar och sidor som ska inkluderas och hur man optimerar navigeringen för en bättre användarupplevelse.
I denna Step-by-Step guide visar vi dig hur du enkelt kan add to en navigation menu i WordPress.
Vad är en navigation menu?
En navigeringsmeny är en lista med länkar som pekar till viktiga områden på en webbplats. De presenteras vanligtvis som ett horisontellt fält med länkar högst upp på varje sida på en WordPress-webbplats.
Dessa menyer ger din site struktur och hjälper besökarna att hitta vad de letar efter. Så här ser navigation menu ut på WPBeginner:
WordPress gör det väldigt enkelt att add to menyer och undermenyer. Du kan add to länkar till dina viktigaste pages, categories eller topics, blogginlägg och till och med customize-länkar som till exempel din profil på sociala medier.
Den exakta positionen för din menu beror på ditt WordPress theme. De flesta teman har flera alternativ, så att you kan skapa olika menyer som kan displayed på olika ställen.
De flesta WordPress-teman har t.ex. en primär meny som visas högst upp. Vissa teman kan också innehålla en sekundär meny, en sidfotsmeny eller en mobil navigationsmeny.
Med detta sagt, låt oss se hur du kan skapa en customize navigation menu i WordPress.
- Creating Your First Custom Navigation Menu
- Creating Drop-Down Menus in WordPress
- Adding Categories to WordPress Menus
- Adding Custom Links to Your WordPress Navigation Menus
- Editing or Removing a Menu Item in WordPress Navigation Menus
- Adding Navigational Menus in Full Site Editor (FSE)
- Adding WordPress Menus in Sidebars and Footers
- Going Further with Navigation Menus
- Video Tutorial
- FAQs About WordPress Menus
Skapa din första customize navigation menu
För att skapa en navigation menu måste du besöka sidan Appearance ” Menus i WordPress adminpanel.
Note: Om du inte ser alternativet ’Appearance ” Menus’ på din site och bara ser ’Appearance ” Editor’, betyder det att ditt theme har aktiverat Full Site Editing (Redigering av hela webbplatsen). You can click here to skip ahead to the Redigering av hela webbplatsen section below.
När du är där, ange ett namn för din meny, gillar ”Top Navigation Menu”, och klicka sedan på knappen ”Create Menu”.
Då förstoras area för menyn och den kommer att se ut så här:
Därefter kan du välja vilka sidor du vill lägga till i menyn. Du kan antingen automatiskt lägga till alla nya sidor på toppnivå eller välja specifika sidor i den vänstra kolumnen.
Klicka först på fliken ”Visa alla” för att se alla sidor på din webbplats. Därefter klickar du i rutan bredvid varje sida som du vill lägga till i menyn och klickar sedan på knappen ”Lägg till i menyn”.
När dina pages har addats kan du flytta runt dem genom att drag and drop dem i sectionen ”Menu Structure”.
På så sätt kan du ändra ordningen på dem och ordna om dem.
Observera: Alla menyalternativ visas i en vertikal (uppifrån och ned) lista i menyredigeraren. När du lägger upp menyn live på din webbplats visas den antingen vertikalt eller horisontellt (från vänster till höger), beroende på vilken plats du väljer.
De flesta themes har flera olika locations där du kan placera menyer. I det här exemplet använder vi temat Astra, som har 5 olika locations.
När du har lagt till sidor i menyn väljer du den plats där du vill visa den och klickar på knappen ”Save Menu”.
Tips: Om du inte är säker på var varje location finns kan du försöka save menyn på olika ställen och sedan besöka din site för att se hur det ser ut. Du kommer förmodligen inte att vilja använda all locations, men du kanske vill använda mer än en.
Om du vill ha mer detaljer om detta kan du läsa vår tutorial om hur du skapar en vertikal navigation menu i WordPress.
Här är vår slutförda menu på sajten:
Skapa rullgardinsmenyer i WordPress
Rullgardinsmenyer, som ibland kallas nästlade menyer, är navigeringsmenyer med överordnade och underordnade menyalternativ.
När you run markören över ett parent item, visas all child items under det i en sub-menu.
Du skapar en undermeny genom att dra ett objekt under det överordnade objektet och sedan dra det något åt höger. Det har vi gjort med 3 underobjekt under ”Tjänster” i vår meny:
You can even add multiple layers of dropdowns so that your sub-menu can have a sub-menu. Det här kan se lite rörigt ut och många themes har ej stöd för rullgardinsmenyer i flera lager.
Mer detaljer finns i vår tutorial om hur du skapar en dropdown-meny i WordPress.
Här är undermenyn live på vår demo site:
Lägga till kategorier i WordPress-menyer
Om du använder WordPress för att run en blogg, kanske du vill add your blog categories som en rullgardinsmeny i din WordPress menu.
Vi gör detta på WPBeginner och har flera kategorier som gillar nyheter, teman, tutorials och mer.
Du kan enkelt add to kategorier till din meny genom att clicka på tabben Categories på vänster sida av vyn. Du kan också behöva klicka på tabben ”View All” för att se alla dina kategorier.
Välj bara de kategorier du vill add to menyn och klicka sedan på knappen ”Add to Menu”.
Kategorierna kommer att visas som vanliga menu items längst ner i din menu.
Därefter kan du drag and drop dem i position. Vi kommer till exempel att placera all dessa kategorier under menu-item Blog.
För ytterligare instruktioner, vänligen se vår guide för nybörjare om hur man lägger till ämnen i WordPress navigation menyer.
Så här ser olika kategorier ut i navigationsmenyn på vår demo site:
Lägga till Customize Links till dina navigationsmenyer i WordPress
Förutom kategorier och sidor gör WordPress det också superenkelt att lägga till anpassade länkar i din meny. Du kan använda dem för att länka till dina profiler på sociala medier, din webbutik och andra webbplatser som du äger.
För att göra detta måste du använda tabben ”Custom Links” på vyn Menu. Lägg till länken tillsammans med den text du vill använda i din meny och klicka på knappen ”Add to Menu”.
Du kan till och med vara kreativ och lägga till ikoner för sociala medier i din meny eller i dina uppmaningsknappar för att få fler konverteringar.
Edit eller remove av ett menu-item i WordPress navigationsmenyer
När du addar pages eller categories till din custom navigation menu använder WordPress sidans titel eller kategorins namn som länktext. Du kan ändra detta om du vill.
Alla menu-items kan editeras genom att clicka på nedåtpilen bredvid.
Du kan sedan ändra menyalternativets namn härifrån. Du kan också klicka på ”Ta bort” för att ta bort länken från menyn helt och hållet.
Om du har svårt att hantera drag-and-drop-gränssnittet kan du också flytta runt menu-item genom att clicka på lämplig ”Move”-länk.
Lägga till navigeringsmenyer i Redigering av hela webbplatsen (Site Editor, Redigering av hela webbplatsen)
Den new full site editor allow dig att customize dina WordPress teman med hjälp av block editor. Den lanserades i WordPress 5.9 och aktiverar dig att add to olika block till dina templates för att skapa en unik design.
För att add a navigation menu using the full site editor, visit the Appearance ” Editor from your WordPress dashboard.
Vi kommer att använda standardtemat Twenty Twenty-Three för denna tutorial. För mer detaljer, kan du se vår artikel om de bästa WordPress Full Site Editing teman.
När du är i Editorn, gå vidare och klicka på tabben ”Navigation” för att förstora den.
Detta öppnar några new settings i den vänstra Column.
Härifrån klickar du bara på ikonen ”Edit” högst upp.
Då öppnas hela webbplatsredigeraren på skärmen, där du kan klicka på ikonen ”+” för att lägga till ett navigeringsmenyalternativ.
En prompt öppnas nu och du kan välja ett alternativ från rullgardinsmenyn.
Om du däremot vill lägga till en custom link kan du lägga till en etikett och URL för navigation menu item i block panelen. You can also add a search alternative to your menu.
När du har lagt till ett objekt växlar du till tabben ”Styles” i columnen till höger.
You can now change the typography, appearance, height, spacing, letter case, and text decoration for your menu items.
Du kan också lägga till en undermeny genom att klicka på dess ikon i blockets verktygsfält.
När du är klar kan du göra en preview av ändringarna för att se hur menyn ser ut i realtid. Glöm sedan inte att clicka på knappen ”Save” högst upp.
Lägga till WordPress-menyer i sidebar och footers
Du behöver inte bara klistra fast dig vid de locations som visas i ditt theme. Du kan add to navigation menus i alla area som använder widgetar, gillar din sidebar eller footer.
Gå bara till Appearance ” Widgets och klicka sedan på knappen ”Add Block” (+) högst upp och lägg till widgetblocket ”Navigation Menu” i din sidebar.
Lägg sedan till en Rubrik för widgeten och välj korrekt menu från dropdown-listan ”Select Menu”.
När du är klar klickar du bara på knappen ”Update”.
Här är ett exempel på en anpassad WordPress-fotmeny som byggts på vår grundare, Syed Balkhis webbplats.
Gå vidare med navigationsmenyer
Om du vill skapa en riktigt episk meny med massor av links har vi en tutorial om hur du skapar en megameny i WordPress.
Detta gör att du kan skapa en rullgardinsmeny med många objekt, inklusive bilder.
Megamenyer är ett bra alternativ om du har en stor webbplats, t.ex. en webbutik eller nyhetssajt. Den här typen av meny används av webbplatser som Reuters, Buzzfeed, Starbucks etc.
Video Tutorial
Om du föredrar att titta på den här handledningen kan du kolla in vår video nedan:
Vanliga frågor om menyer i WordPress
Här är några av de vanligaste frågorna som nybörjare ställer om navigationsmenyer i WordPress.
1. Hur addar jag en homepage-länk till en WordPress-meny?
Om du vill add to din homepage till en navigation menu måste du click the ”View All” tabs under Pages. Där kommer du att se din homepage.
Markera rutan bredvid ”Home” och klicka på ”Add to Menu”. Kom ihåg att spara dina ändringar.
2. Hur lägger jag till flera menyer för navigation i WordPress?
I WordPress kan du skapa hur många menyer som helst. För att placera en meny på din webbplats måste du lägga till den på en av ditt temas menypositioner eller i ett widgetområde, som vi visade ovan.
Om du vill add to flera menyer för navigation till din site WordPress, skapa först menyerna genom att följa vår tutorial ovan.
För att placera dem på din site klickar du på tabben ”Manage Locations”.
Härifrån kan du selecta vilken meny du gillar att visa på de locations som finns tillgängliga i your theme.
Om du vill lägga till en new menu location på din site, se vår tutorial om hur du lägger till customize navigation menus i WordPress-teman.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en navigation menu i WordPress. Du kanske också vill kontrollera våra guider om hur man stylar navigationsmenyer i WordPress och hur man skapar en sticky flytande navigation menu 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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi
what your thoughts are on having a sticky navigation menu? do recommend having a sticky one or an nonstick one?
WPBeginner Support
It is mostly a question of personal preference. There is not specifically better option between the two. At the moment we use a static menu instead of sticky
Administratör
Dayo Olobayo
This was exactly what I needed. I’ve been wanting to make my website look more professional and adding a navigation menu is a big part of that. Thanks for the clear instructions!
Jiří Vaněk
Regarding adding pages to the menu, don’t know how to solve the search problem? Or if you haven’t met him. I have a website where there are currently about 600 pages, which are mainly used for dictionary purposes. The problem is, when I want to add one of the pages to the menu, I write its link in the search, so wordpress does not find it and I have to first display all and find it alphabetically. It delays my work quite a bit and I haven’t figured out where the problem is.
WPBeginner Support
You would want to try writing the title of the page, otherwise you could use custom links and link to the page if you have the URL directly.
Administratör
Jiří Vaněk
Yes, I do. I type the site name into the search box and WordPress lists similar sites, but usually not the one I’m looking for. So I will search further where the problem might be.
David Keevis
Thanks so much for a really excellent tutorial. We’re building our site with multiple CPT’s and this post clearly explained what was needed. Had it implemented in a couple minutes. We’re using Generate Press/Generate Blocks and the query loop is exceptionally powerful. Y’all just made our day!!!!
WPBeginner Support
Glad to hear our guide helped!
Administratör
NPH LLC
If I ”remove” a link within my main navigation menu, can I bring it back easily? We want to take a page offline while we are reconfiguring it.
Thanks!
WPBeginner Support
Yes, you can easily add and remove menu items and if the menu items even if the item is not currently on the menu. You would want to ensure you clear any caching on your site so your visitors see the up-to-date menu.
Administratör
Akanksha
Thank you ..This was very helpful to me
WPBeginner Support
Glad it was helpful!
Administratör
Sunny
A very basic question. How can you link your website URL to your homepage? Meaning, having the website URL, also as your homepage section in the menu. Thanks
WPBeginner Support
You could either set the menu to the homepage you have set under Settings>General for your site or create a custom URL and add your domain there to point to your homepage.
Administratör
Lisa
I’m confused about how to get my posts where I want them to go… I have a recipe blog. On the top of my site, I have categories you can click such as ”Dinner recipes” and ”Side dishes”… How do I get my specific posts to go on those specific pages when you click on the title at the top of the page?
aberry
Is there a way that when you add a category it automatically adds the sub categories?
WPBeginner Support
You would want to take a look at one of our older articles covering this below for showing subcategories on the parent category page:
https://www.wpbeginner.com/wp-tutorials/display-subcategories-on-category-pages-in-wordpress/
Administratör
HJ
Very basic question, but how to enable menu on a subpage? I designed some subpages, but the menu is not visible on top. In my main pages the menu is visible. How to enable the menu to make it visible on the sub-pages?
WPBeginner Support
You would want to reach out to the support for your specific theme, it sounds like your theme may remove the menu for certain pages. If you reach out to the support they should let you know how to add the menu back.
Administratör
Janien
I’m trying to get a navigation menu that is sticky and is not transparent. I’ve tried everything. Am I allowed to change the navigation bar in a theme?
WPBeginner Support
You are but it would require some coding knowledge, we would recommend reaching out to your theme’s support and they can normally assist.
Administratör
Miranda
I have made a navigation menu but it won’t show up on the mobile site and when I go to navigation menu settings it does not have mobile menu as an option. Do you know how I can fix this or do I need to find a different theme?
WPBeginner Support
You would need to reach out to the support for your specific theme for it not displaying properly and they would be able to assist.
Administratör
sadik
Thenk you Wp Begginer
WPBeginner Support
You’re welcome
Administratör
Nanyc
This helped a lot. I wanted a heads up before I started. Presented very well.
WPBeginner Support
Glad our article was helpful
Administratör
atta
Thanks for the detailed guide. I have a question: how can we add a navbar (for a landing page) which links the landing page sections/elements instead of navigating to other pages. An example is Wikipedia. On any Wikipedia page, you can click on the name of the section and it will immediately go down to that section.
WPBeginner Support
For that, you would want to use anchor links which we cover in our article below:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administratör
Gina
Hi,
I created categories and added to my menu so that once a reader clicks they can find all the blog posts on that category. My problem is that I don’t want the blog name to appear at the top of the page, that is, Blogging category => Blogging category description => blog posts, how do I remove that?
WPBeginner Support
That would depend on your specific theme’s styling. If you reach out to your theme’s support they should be able to assist with changing what is shown
Administratör
wan
i try to add menu item on my menu structure. even when i save menu, the website doesn’t change. why?
WPBeginner Support
You would want to ensure your site or your hosting provider does not have a cache that could be causing your issue.
Administratör
Keith
Great resources
WPBeginner Support
Thank you
Administratör
Linda McMillan
Hello, I am using Elementor and OceanWP. I set up a custom link in my menu so that when clicking on it goes to the Home page. How can I make it go instead of just to the Home page, but down the page to a certain section? I appreciate your help.
WPBeginner Support
You would want to take a look at making an anchor link: https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administratör
Annie
Pretty much there with the navigation. One question though, I have one point in my navigation ”products” from there it splits into 3 other sections (drop down menu coming up). I don’t want visitors be able to access this product page as it will be empty, I want them to choose directly from the drop down menu instead of accessing the products page first. So products will be still displayed in the navigation but will be inaccessible, visitors have to click onto the drop down menu to choose what they are after. How do I do this? I m I m removing the whole products section it wont be displayed in the navi anymore, how can I make the products page inaccessible?
WPBeginner Support
You can create a custom link under Appearance>Menus titled Products and link it to either a different page or # which should keep the users on the same page they are on.
Administratör
Ishan
Thank you for your help.I was facing the same problem
Terry L. Cooper
How old is this anyway?? I’m not seeing any of this on the WP page.
WPBeginner Support
The steps in this article should still work for WordPress.org sites, are you on WordPress.com? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administratör
Azizi
Sorry sir, which WordPress theme you’re using on WPbeginner.com?????
WPBeginner Support
We are using a theme we created for our site built on the Genesis Framework, for more on what we’re using on our site you would want to take a look at our blueprint page here: https://www.wpbeginner.com/blueprint/
Administratör
Inzamam ul haq
It really helped me. very informative.Thanks
Natalie V
Hi! Thanks so much for this post. It helped me a lot. I have the ”Karuna” theme. Whenever I add more menu options (I have 4) they are displayed in two row. I would like them all to be in one row. Is there a way to fix this? Thank you so much!
David
Needed to link a buy now button to woo commerce cart page. Spent two days going in circles. Tried to contact woo with little success. Then found you guys who helped solve the problem.
Often it is the little things which can stop us in our tracks. A big thank you for the simplified set of clear instructions.
Elliot Kershaw
Hello,
I am making a website with Ocean WP and Elementor, however I am unable to see the menu at the top of all of my pages. It only appears at the top of the home page. So people can navigate to any page from the home page, however if anyone wanted to navigate back to the home page or to another page from there, it would tricky. Do you have a solution for this? Thank you!