Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hur man visar länkar för breadcrumb navigation i WordPress

Om du vill göra det lättare att navigera på din WordPress-webbplats rekommenderar vi att du lägger till brödsmulslänkar.

Breadcrumb navigation talar om för användarna var de befinner sig på en website relativt till homepage. Detta breadcrumb trail visas sedan också i sökresultaten, vilket gör att din website sticker ut.

Vi använder brödsmulor på våra egna webbplatser och har upptäckt att denna funktion gör det lättare för läsarna att flytta runt på olika sidor. Och i den här artikeln visar vi hur du visar navigationslänkar med brödsmulor i WordPress.

How to display breadcrumbs navigation in WordPress

Vad är Breadcrumb navigation och varför behöver du det?

Breadcrumb navigation är en term som används för att beskriva en hierarkisk navigation menu som presenteras som ett spår av links. Den används ofta som en sekundär navigation som allow användare att gå upp i webbplatsens hierarki av pages.

Navigational links preview in WPBeginner

Breadcrumb navigation links är annorlunda än standard navigation menu system i WordPress.

Breadcrumb-navigering hjälper användare att navigera runt på webbplatsen och hjälper sökmotorer att förstå strukturen och hierarkin för länkar på en webbsida.

Om dina breadcrumbs är uppsatta på rätt sätt kommer search engines som Google att displayed dem tillsammans med sidans titel i sökresultaten. Detta ger din website mer synlighet i sökresultaten och ökar din click through rate.

Breadcrumb navigation links in search results

Metoderna i den här guiden hjälper you att ställa in breadcrumbs på rätt sätt genom att använda schema markup. Schema är en smart markeringskod som hjälper Google att identifiera dina breadcrumbs så att de visas i sökresultaten.

Med detta sagt, låt oss ta en titt på hur man addar breadcrumb navigation links i WordPress. Vi kommer att visa dig två metoder, och du kan välja den som fungerar bäst för dig:

Denna metod är enklare och rekommenderas för alla användare av WordPress.

För denna metod kommer vi att använda All in One SEO för WordPress, som är det bästa WordPress SEO tillägget på marknaden. Det hjälper dig att enkelt förbättra din sökmotorsoptimering för WordPress utan några tekniska färdigheter. Det kommer också med en användarvänlig breadcrumbs-funktion.

Obs: Det finns också en gratis version av All in One SEO available med begränsade funktioner, inklusive breadcrumbs. Vi rekommenderar dock att du uppgraderar till det betalda pluginet för att få tillgång till premium-funktioner som en länkassistent, avancerade sitemaps och mer.

Efter aktivering kommer du att tas till plugins installationsguide. Du kan följa instruktionerna på skärmen för att konfigurera pluginet.

All in One SEO setup

Behöver du hjälp med installationen? Se vår steg-för-steg tutorial om hur du installerar och ställer in All in One SEO.

Därefter måste du besöka All in One SEO ” General Settings page och växla till fliken ’Breadcrumbs’.

Enable breadcrumbs in AIOSEO

Breadcrumbs schemamarkering läggs automatiskt till av All in One SEO till din websites kod så att search engines kan hitta den.

Men om du vill visa breadcrumb navigation länkar på din website också, då måste du aktivera alternativet ”Aktivera Breadcrumbs”.

Switching the toggle allows you to see the different breadcrumb display settings that you can use on your WordPress website.

Show breadcrumbs on website options

Det finns fyra sätt som du kan använda för att displaya breadcrumb navigation trail på din WordPress website.

1. Lägga till Breadcrumb navigation med hjälp av shortcode

Metoden med krótki kod är enkel och gör att du kan visa navigationslänkar med brödsmulor i dina WordPress-inlägg och sidor eller produktsidor i din webbutik.

Redigera bara posten, page eller produkten och add to följande shortcode där du vill visa breadcrumb navigation trail:

[aioseo_breadcrumbs]

Om du använder standard block editor kommer shortcoden automatiskt att konverteras till Shortcode-blocket.

Add shortcode for breadcrumbs

You can now save your post or page and preview it to see the breadcrumb navigation menu in action.

Så här såg det ut på vår test site.

Preview of shortcode breadcrumbs navigational links

2. Lägga till Breadcrumb navigation med hjälp av Gutenberg Block

Nu, om du inte vill använda shortcode-alternativet eller inte kommer ihåg shortcode, kan du visa breadcrumb navigation genom att använda AIOSEO – Breadcrumbs block.

Redigera bara posten eller sidan där du vill visa breadcrumb navigation och add to AIOSEO – Breadcrumbs block.

AIOSEO breadcrumbs block

Tillägget kommer sedan att ladda en live preview av dina breadcrumb navigation länkar och visa den i content området.

Glöm inte att updating eller publicera dina ändringar.

AIOSEO breadcrumbs block preview

3. Lägga till Breadcrumb Navigation med Widget

De två metoderna ovan kräver att du lägger till en shortcode eller ett block i varje post eller page där du vill visa breadcrumb navigation links.

Vad händer om du vill visa breadcrumbs automatiskt för varje post eller page?

Med widgeten AIOSEO Breadcrumbs kan du enkelt göra det.

Gå bara till sidan Appearance ” Widgets och add AIOSEO – Breadcrumbs widget block. You can add it to your site’s sidebar, footer, or any widgetar area.

Add AIOSEO breadcrumbs to widget

Du kan ange en Rubrik för widgeten eller lämna den tom om du föredrar det.

Glöm inte att klicka på knappen ”Update” för att spara dina settings.

Enter breadcrumbs widget title

You can now visit your website and see the breadcrumb navigation menu on all posts and pages.

4. Lägga till Breadcrumb navigation med hjälp av kod

Denna metod allow you att visa breadcrumbs navigation länkar exakt där du vill ha dem. Det är dock obligatoriskt att add to code i dina WordPress theme-filer.

Om du inte har gjort det tidigare, läs gärna vår artikel om hur du lägger till code snippets i WordPress.

Först måste du bestämma var du vill visa brödsmulslänkarna. Den vanligaste platsen är under det enskilda inlägget, sidan eller produkttiteln.

WordPress-teman använder mallfiler för att visa olika delar av din webbplats. Många teman använder instancja en fil som heter content-single.php som finns i temats template-parts mapp.

Se vår fusklapp för att hitta vilka filer som ska editeras i ett WordPress theme.

Därefter måste du redigera din temafil med hjälp av en FTP-klient. Se vår przewodnik om hur du använder FTP för att ladda upp filer till WordPress för instruktioner.

Placera sedan följande kod där du vill visa navigationslänkarna med brödsmulor:

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

Glöm inte att save dina ändringar och uploada filen tillbaka till din website.

You can now visit your website to see the breadcrumbs links in action.

Preview of  breadcrumbs navigational links

Som standard använder All in One SEO en template för att visa dina breadcrumb navigation-länkar. Den innehåller en länk till din home page, kategori, parent page och post eller page title separerade med symbolen ’”.

Du kan ändra det genom att besöka All in One SEO ” Allmänna Settings page och heading över till ’Breadcrumbs’ tabs. Därefter rullar du helt enkelt ner till Breadcrumbs Settings section.

AIOSEO breadcrumbs settings

Härifrån kan du ändra separator, visa eller dölja startlänken, add to ett prefix med mera.

När du är slutförd, glöm inte att store dina settings.

Metod 2: Add till Breadcrumb Navigation med Breadcrumb NavXT

Den här metoden kan användas med alla andra sökmotorsoptimeringar i WordPress. Den är användarvänlig om du har ett kompatibelt tema, men om du inte har det måste du editera dina temafiler för att visa dina breadcrumb navigation links.

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

Efter aktivering måste du besöka Settings ” Breadcrumb NavXT page för att konfigurera plugin-inställningarna.

Breadcrumbs NavXT settings

Standardinställningarna bör fungera för de flesta websites. Du kan dock customize inställningarna efter behov.

Settings page är indelad i olika sections. På tabben för allmänna inställningar kan you ändra stil och settings för dina breadcrumbs.

You will also notice that these link templates use Schema.org markup in the link tag.

Fliken post types under plugin-inställningar allow you to set up breadcrumbs links for posts, pages, and any custom post types.

Post types breadcrumbs settings

Du kan välja hur du vill displaya din post-hierarki. Som standard kommer pluginet att använda hierarkin ”Site Rubrik > Category > Post Rubrik”.

Du kan ersätta kategorier med taggar, datum eller inläggsförälder och ändra separatorn.

Choose post hierarchy

Tabbarna Taxonomies och Miscellaneous har liknande templates för dina breadcrumb navigation links.

Glöm inte att save dina ändringar när du är klar.

Breadcrumb NavXT erbjuder flera sätt att visa länkar för breadcrumb navigation på din website.

1. Display Breadcrumb Navigation med Theme Support

Några av de mest populära WordPress-temana har ett built-in alternativ för att visa breadcrumb navigation genom att välja Breadcrumb NavXT eller your WordPress sökmotorsoptimering plugin som källa.

Om du till exempel använder Astra kan du gå till sidan Appearance ” Customize och klicka på menyn ’Breadcrumbs’.

Därifrån väljer du var du vill att dina breadcrumbs ska visas i dropdown ’Header Position’.

I ”Breadcrumb Source” måste du välja ”Breadcrumb NavXT”.

Adding breadcrumbs with theme customizer

Om du viewar ett enskilt inlägg eller page, så kommer du att se en live preview av dina breadcrumb navigation links.

Glöm inte att clicka på knappen ”Publicera” för att save your changes.

2. Display Navigation Links With Breadcrumb Trail Block

Du kan också visa navigationslänkarna i breadcrumbs genom att använda blocket Breadcrumb Trail.

Gå bara till din WordPress content editor och add sedan Breadcrumb Trail-blocket där du vill visa navigationslänkarna.

Add breadcrumb trail block

Därefter kan du updating eller publicera your content.

Därefter besöker du din website för att se navigations links in action.

Breadcrumb trail preview

3. Lägga till Breadcrumbs navigation med hjälp av en widget

Pluginet tillhandahåller också en widget som du kan använda för att visa breadcrumb navigation i sidebar eller något widget-ready area.

Först, gå till appearance ” Widgets page och add ’Breadcrumb Trail’ widget block till din webbplats widget area, gillar sidebar eller footer.

Add breadcrumb trail widget

Standardinställningarna för widgetar fungerar för de flesta websites, men du kan ändra dem om det behövs. Till exempel kanske du vill dölja spåret på front page.

Glöm inte att klicka på knappen ”Update” för att lagra dina inställningar för widgetar.

4. Lägga till Breadcrumb navigation med hjälp av kod

Pluginet erbjuder också en kodmetod för att visa breadcrumb navigation länkar för avancerade användare.

Först måste du ansluta till din WordPress site med hjälp av en FTP-klient. Efter det navigerar du till din aktuella WordPress theme folder som ligger i /wp-content/themes/ directory.

WordPress teman använder template-filer för att displayed olika sections på din website. Många teman använder till exempel en fil som heter content-single.php som finns i template-parts folder i your theme.

Se vår fusklapp för att hitta vilka filer som ska editeras i ett WordPress theme.

Öppna template-filen för att edit den, och placera sedan följande kod där du vill visa breadcrumb trail:

<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>

Glöm inte att save dina ändringar och uploada filen tillbaka till din website.

You can now visit your website to see the breadcrumb links trail in action.

Breadcrumb trail preview

Video Tutorial

Subscribe to WPBeginner

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar navigationslänkar med brödsmulor i WordPress. Du kanske också vill läsa vår przewodnik om hur du visar olika menyer för inloggade användare i WordPress eller hur du lägger till en megameny på din WordPress-webbplats.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

40 kommentarerLämna ett svar

  1. 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!

  2. Dennis Muthomi

    My theme had a problem with breadcrumbs feature it could not let me click the breadcrumb item, it just displayed the breadcrumb.
    I do not know if it was coded like that or it was na error.
    But since i had AIOSEO, I used its breadcrumbs feature and made it easy to jump back up the site hierarchy.
    AIOSEO solved my problem.

  3. Dayo Olobayo

    Thanks for this informative article. I added the aioseo breadcrumbs widget and it automatically shows breadcrumbs for my blog posts. However, I notice it displays breadcrumbs on the home page which I don’t like. Is there a way to fix that please?

    Also, I notice from the screenshot above that your breadcrumbs looks appealing compared to what I have on my blog. Is there a way to customize it?

    PS: I use the aioseo lite plugin.

    • WPBeginner Support

      It would depend on what method you used to add breadcrumbs to your site for how to remove it from the homepage specifically. For our breadcrums those are currently something we have styled specifically with our theme.

      Administratör

      • Dayo Olobayo

        About the breadcrumbs showing up on my homepage, I contacted aioseo support and they provided me with a CSS code that fixed the problem. Thanks for your response.

  4. Steven Jæger

    I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.

    My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.

    • WPBeginner Support

      You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.

      Administratör

  5. Surjeet Kumar Verma

    Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administratör

  6. Rintesh Roy

    The plugin is not at all documented. At least, I could not find any.

    • WPBeginner Support

      The documentation for the plugin is linked on the plugin’s page :)

      Administratör

  7. Elizabeth Morgan

    I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:

    ”Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.

    syntax error, unexpected ’<', expecting end of file"

    What do I do about this?

  8. Varun

    Thank you finally problem is solved

    • WPBeginner Support

      Glad our recommendations could help :)

      Administratör

  9. Hammad Rashid

    The plugin is awesome…. Thank You!

    • WPBeginner Support

      Glad we could recommend it :)

      Administratör

  10. Andres

    Hi WPBeginner,

    Amazing post.

    I wonder the following.

    How do you make the ”home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.

    I mean, when you go ”home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.

    Thanks a lot for your time.

    • Editorial Staff

      In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.

      Administratör

  11. Manish Ransubhe

    Hello, I am not using any plugin and I have never enabled Breadcrumbs.

    Why my search Result showing breadcrumbs help me to disable this

    Thank you

    • Ravi Singh

      same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.

  12. Dua Centre

    I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?

  13. Walter

    Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.

  14. DUy

    Is it posible to change the font size and the font color of Breadcrumb?

    thanks

  15. Sameer

    Hello,

    I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.

    Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?

  16. Joshua

    Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using ”insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.

    Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.

  17. juan luis

    Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?

    • WPBeginner Support

      Hi Juan,

      If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.

      Administratör

  18. Nate Balcom

    By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.

  19. Nate Balcom

    Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.

  20. Anna

    My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.

    I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?

    • subhan

      Just copy the header.php to the the generate press child theme forlder.

  21. Sunil

    Thanks for great post. Cheers!

  22. Raymond Chukwuman

    Thank you so much. It is really working on my website God bless you

  23. Abiodun

    I followed the steps, didn’t really work for me with the posts. I just saw the ’Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO

    • WPBeginner Support

      Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.

      Administratör

      • Abiodun

        It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?

        • Michelle

          Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ’child’ of the articles page, and the articles page as ’child’ of the homepage. you can do it in the page editor.

  24. JOY

    Great! This is really useful! Thanks a lot! :)

  25. malek

    thanks you , really usefull

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.