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.

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.

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.

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:

Metod 1: Lägga till Breadcrumb navigation i WordPress med All in One SEO (rekommenderas)

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.

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

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’.

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.

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.

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.

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.

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.

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.

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.

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.

Ändra hur Breadcrumbs-länkar visas i AIOSEO

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.

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.

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.

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.

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”.

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.

Därefter kan du updating eller publicera your content.

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

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.

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.

Video Tutorial

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.