Termen ”brödsmulor” hänvisar till ett effektivt webbplatsnavigeringsverktyg som (som Hansel och Gretel lärde oss) är tänkt att hjälpa till att spåra ens steg tillbaka till en webbplatss ”hem” (eller hemsida). De tillåter användare att se hur den aktuella sidan passar in i hela webbplatsens struktur genom att tillhandahålla ett inline spår av länkar (eller etiketter) som leder hela vägen tillbaka till hemsidan.
Home Depot produktsida med brödsmulor
Brödsmulor är faktiskt viktigare för din WordPress-webbplats än du kanske tror. De förbättrar inte bara användarupplevelsen, utan de kan också ge din webbplats en stöta i sökrankingen. Google gillar det här strukturella elementet på en webbplats, och besökare kommer att få avgörande navigeringshjälp när de organiskt snubblar på en av dina sidor (sänker din avvisningsfrekvens).
Du skulle kunna tro att det skulle vara svårt att lägga till ett sådant integrerat navigeringssystem på din webbplats, men det är faktiskt ganska enkelt med hjälp av ett plugin. Faktum är att om du använder Yoast SEO plugin, du har ett försprång eftersom brödsmulans funktionalitet redan är inbyggd i Yoast! Och att lägga till ströbröd genom Yoast är definitivt en av de föredragna metoderna där ute. Bortsett från Yoast SEO, plugin NavXT är ett annat bra alternativ som är mycket anpassningsbart och som också fungerar bra med vårt eget Divi-tema. För en fullständig lista över tillgängliga plugins, kolla in recensionen av de 5 bästa WordPress breadcrumbs plugins.
För att lägga till brödsmulor till din WordPress-webbplats med Yoast SEO, måste du ta itu med tre enkla steg:
- Installera och aktivera Yoast SEO Plugin
- Lägga till Breadcrumbs-kodavsnittet till ditt WordPress-tema
- Aktivera/konfigurera Breadcrumbs the Yoast Breadcrumbs i plugin-inställningarna
Installera och aktivera Yoast SEO-plugin
För att installera Yoast SEO-plugin, gå till din WordPress Dashboard och navigera till Plugins > Add New. Sök sedan efter WordPress repository för ”yoast”. När du ser Yoast SEO-plugin, klicka för att installera och aktivera plugin.
Därefter måste vi lägga till ett kort kodavsnitt till dina WordPress-temafiler. Så om du inte redan har gjort det är det en bra idé att göra det skapa ett barntema. För det här exemplet ska Vi visa dig hur du lägger till kodavsnittet för brödsmulor till ett standard TwentyNineteen WordPress-tema. Du kan lägga till koden till vilken temafil/mall som helst, men för det mesta vill du lägga till den i din single.php-fil (för att visas på alla inlägg), page.php-fil (för att dyka upp på alla sidor ), eller till din header.php-fil (för att visas på hela webbplatsen).
För det här exemplet kommer Vi att lägga till brödsmulor-koden till header.php-filen för mitt barntema. När du har kopierat över header.php-filen från det överordnade temat, öppna för att redigera filen i en valfri kodredigerare.
Lägg sedan till följande php-utdrag längst ner i header.php-filen tillhandahålls av Yoast för att aktivera Breadcrumbs-funktionen:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Detta kommer att visa brödsmulor direkt under rubriken på alla sidor, en vanlig placering för brödsmulor.
När kodavsnittet har lagts till i ditt WordPress Child-tema är allt du behöver göra att aktivera Brödsmulorna i Yoast SEO-plugininställningarna. För att göra detta, gå till din WordPress Dashboard och navigera till SEO > Sökutseende och klicka sedan på fliken Brödsmulor. Se till att aktivera brödsmulor under Breadcrumbs-inställningarna genom att växla alternativet till ”enabled”. Sedan kan du konfigurera brödsmulans inställningar efter dina behov. Du kanske också vill välja en taxonomi att visa i brödsmulor för ditt inlägg. För det här exemplet ska Vi ställa in mina inlägg så att de visar kategorier i brödsmulorna.
Nu ska vi gå vidare och kolla in hur brödsmulorna ser ut i ett av inläggen Vi skapade i TwentyNineteen-temat.
Så här ser inlägget ut innan du aktiverar brödsmulor.
Så här ser inlägget ut efter att ha aktiverat brödsmulor. Det här specifika inläggsexemplet har en kategori (”WordPress”) och en överordnad kategori (”Webbdesign”) för att visa dig kategoriklassificeringen för brödsmulorna som Vi valde i brödsmulornas inställningar.
Du kan behöva justera stilen på dina brödsmulor med hjälp av någon extern CSS. För att göra det kan du använda CSS-ID:t ”brödsmulor” som ingick i php-koden. Öppna style.css-filen för ditt barntema (eller så kan du lägga till den i Temaanpassare under Ytterligare CSS) och lägg till följande:
#breadcrumbs {
/*Add breadcrumb styling here*/
}
För TwentyNineteen-temat kanske Vi vill matcha marginalen på min rubriktext genom att lägga till följande anpassade CSS:
#breadcrumbs {
margin: 0 calc(10% + 60px);
}
Om du vill ha mer kontroll över den specifika platsen för dina brödsmulor kan du använda följande kortkod till enskilda inlägg eller sidor också.
Blog / Tips & Tricks /
Om du av någon anledning inte vill installera Yoast SEO eller om du letar efter ett annat enkelt alternativ är Breadcrumb NavXT-plugin ett utmärkt val.
Till installera plugin, gå till din WordPress Dashboard och navigera till Plugins > Lägg till nytt. Sök sedan i WordPress-förvaret efter ”breadcrumb navxt”. När du ser plugin-programmet klickar du för att installera och aktivera det.
För att kalla brödsmulorna så att de visas på din webbplats kan du använda den inbyggda Breadcrumb NavXT-widgeten som finns på widgetsidan. Detta gör att du kan dra widgeten till de olika widgetområdena som ditt tema tillhandahåller. För att göra detta, gå till din WordPress Dashboard och navigera till Utseende > Widgets. Dra sedan widgeten över till widgetområdet eller ditt val och uppdatera widgetinställningarna.
För det här exemplet använder Vi Divi-temat för att visa brödsmulorna överst i min sidofält. Så här ser det ut på ett inlägg.
I likhet med Yoast Breadcrumb-exemplet kan du också ringa brödsmulans spår till din webbplats genom att lägga till den nödvändiga koden i ditt barntema. Här är koden de tillhandahåller som är schema.org breadcrumblist-kompatibel:
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
Eftersom Vi använder Divi-temat för det här exemplet, kommer Vi att lägga till koden i Single.php-filen för mitt Divi Child-tema precis ovanför artikeltaggen. Detta kommer att visa brödsmulorna överst i alla mina inlägg.
Så här ser ett inlägg ut efter att ha lagt till koden.
Insticksprogrammet Breadcrumb NavXT har några kraftfulla alternativ för att konfigurera dina brödsmulor. Du kan anpassa hela mallen för dina brödsmulor för olika taxonomier och mycket mer. Du kan få tillgång till dessa inställningar från din WordPress Dashboard genom att navigera till Inställningar > Breadcrumb NavXT.
Om du vill styla brödsmulorna kan du rikta in dig på klassen som heter ”brödsmulor” som ingår i koden.
Lägg bara till följande CSS till ditt barntemas style.css-fil eller till temaanpassarens ytterligare CSS:
.breadcrumbs {
/*add css to style breadcrumbs here*/
}
Om du vill använda brödsmulans widget med Divi-temat kan du också använda Divis sidofältsmodul för att lägga till stil till brödsmulan i Divi Builder.