Trots det vardagliga namnet är brödsmulor mycket användbara verktyg för att förbättra webbplatsens användarupplevelse (UX) och sökmotoroptimering (SEO). Att aktivera dem är enkelt med hjälp av ett plugin eller lite anpassad kod.
I det här inlägget presenterar vi dig för WordPress-brödsmulor och förklarar hur de fungerar. Sedan visar vi dig hur du lägger till dem på din webbplats, stylar dem och tar bort dem. Det finns mycket att gå igenom, så låt oss sätta igång!
Vad är WordPress-brödsmulor?
Brödsmulor, när vi pratar om WordPress (eller andra webbplatser), är navigeringslänkar som visas högst upp på ett inlägg eller en sida. De visar användarna de överordnade kategorier som ledde dem till det innehåll de för närvarande tittar på och möjliggör även enkel navigering tillbaka till tidigare visade sidor.
Tänk till exempel på följande exempel:
På vänster sida, precis under rubriken, kan du se orden Hem > Resurscenter > Kinstas blogg. Var och ett är en länk tillbaka till sin motsvarande sida från det aktuella inlägget. Detta gör det möjligt för läsare på vår blogg att navigera till något av dessa viktiga innehållsområden med ett enda klick, istället för att behöva använda bakåtknappen, menyn eller sökfunktionen.
Det är så brödsmulor fick sitt namn: de skapar ett spår som leder användarna tillbaka ”hem”. De är särskilt användbara för webbplatser som bloggar och nätbutiker, där besökare kanske vill flytta mellan enskilda inlägg, produktsidor och kategoriarkiv där de kan hitta liknande innehåll.
Hur fungerar WordPress-brödsmulor?
Det finns tre olika typer av WordPress-brödsmulor. Alla innehåller navigeringslänkar som beskrivits ovan, men på något olika sätt:
- Hierarkibaserade:Dessa brödsmulor visar användarna var de befinner sig i webbplatsens struktur, som i exemplet ovan.
- Attributbaserade:Dessa brödsmulor används främst på e-handelssajter och visar de attribut som användaren har sökt efter som ledde dem till den produkt de för närvarande tittar på.
- Historikbaserade::När användare flyttar från sida till sida över hela din webbplats kommer dessa brödsmulor att leda dem tillbaka den väg de kom.
Varje variation av brödsmulor är användbar för olika ändamål. Alla kan dock förbättra navigeringen och i förlängningen användarupplevelsen.
De är också bra för SEO-ändamål. Brödsmulor visar tydligt relationerna mellan olika delar av innehållet på din webbplats. På så sätt gör de det lättare för sökrobotar eller ”bots” att förstå hur din webbplats är strukturerad.
Detta gör det möjligt för dessa robotar att indexera webbplatsens sidor mer exakt. Sökmotorer kan också visa brödsmulor i resultatlistor, så att användare kan se ytterligare innehåll på din webbplats i samband med den information de letar efter.
Så här lägger du till WordPress-brödsmulor till din webbplats (4 metoder)
Oavsett om du är ett proffs på kod, eller en WordPress-nybörjare, kan du snabbt och enkelt lägga till brödsmulor till din webbplats i bara några steg. Här är fyra olika sätt på vilka du kan utföra denna uppgift.
1. Aktivera brödsmulor i Yoast SEO
Yoast SEO är ett populärt plugin som hjälper WordPress-användare approximera sin sökmotorranking och optimera sitt innehåll i enlighet därmed. Det innehåller också några andra funktioner för att öka webbplatsens synlighet, inklusive brödsmulor.
Om du inte redan har det installerat, gör det nu och aktivera pluginet i din WordPress-panel:
Därefter måste du lägga till det här kodavsnittet i ditt tema:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Specifikt var du lägger till det är lite upp till dig. Om du vill använda brödsmulor i dina blogginlägg kan du lägga till den på din single.php-mallfil.
Alternativt kan du klistra in et i slutet av header.php-fil för att lägga till brödsmulor på hela din webbplats:
Tänk på att framtida temauppdateringar kan åsidosätta den här anpassade koden. Du måste kontakta din temautvecklare för information om hur du undviker detta problem eller helt enkelt använda ett barntema. När kodavsnittet är på plats, navigera till SEO > Sökutseende > Brödsmulor i instrumentpanelen:
Växla om Brödsmule-inställningarna till aktiverad. Förhandsgranska sedan din webbplats:
Du bör nu se brödsmulor på relevanta delar av din webbplats, baserat på var du lade till kodavsnittet.
2. Aktivera brödsmulor med ett WordPress-brödsmuleplugin
Att lägga till brödsmulor med Yoast är särskilt bekvämt om du redan använder det pluginet för SEO-ändamål. Men om du föredrar ett annat plugin för att optimera ditt innehåll, är ovanstående tillvägagångssätt mindre användbart. Lyckligtvis finns det flera andra plugins som är specifikt inriktade på att lägga till brödsmulor i WordPress.
Breadcrumb NavXT
Det mest populära plugin för att lägga till brödsmulor till WordPress förutom Yoast är Breadcrumb NavXT:
Detta plugin ger en brödsmule-widget som du kan lägga till de widgetområden ditt tema ger dig, såsom ett sidofält eller sidfot. Det är mycket anpassningsbart, så att du kan välja vilka sidor och kategorier som ska visas i spåret. Breadcrumb NavXT innehåller också schema markup för att förbättra SEO.
För att lägga till brödsmulor med hjälp av detta plugin, navigera till Utseende > Widgets. Du ser en ny Breadcrumb NavXT-widget, som du kan dra till widgetområdet där du vill att den ska visas:
Klicka på rullgardinsmenyn för att öppna widgetinställningarna och fyll sedan i de nödvändiga fälten:
Se till att välja de kryssrutor du behöver för att lägga till länkar till dina brödsmulor, bestämma deras ordning, dölja dem på startsidan och ignorera cachning. När du är klar klickar du på Spara-knappen och kontrollerar sedan frontenden av din webbplats:
Dina brödsmulor borde nu vara synliga i det widgetområde du valde för dem.
Flexy Breadcrumb
Som ett alternativ är Flexy Breadcrumb det högst rankade pluginet för att lägga till brödsmulor till WordPress:
När detta plugin är installerat och aktiverat kan du lägga till brödsmulor till din webbplats med hjälp av [flexy_breadcrumb]-kortkod. Detta ger dig lite mer flexibilitet om var dina spår kommer att visas. Du har också mer kontroll över stylingkomponenter som teckenstorlek, färg och ikoner.
När du har installerat Flexy Breadcrumbs ser du ett nytt objekt i instrumentpanelens sidofält:
Sedan har du några inställningar att konfigurera. På fliken Allmänt kan du ändra text och ikon för din startsida, ställa in teckengränsen och bestämma hierarkin:
På fliken Typografi kan du justera teckenfärg och storlek för dina brödsmulor också:
När du har anpassat ditt spår måste du lägga till [flexy_breadcrumb]-kortkoden där du vill att brödsmulorna ska visas. Även om det är möjligt att göra detta i varje enskilt inlägg du publicerar på din webbplats, är det mer effektivt att lägga till kortkoden till en WordPress-widget:
Om du kollar frontenden av din webbplats, bör du kunna se dina brödsmulor visas där du lagt in kortkoden.
WooCommerce Breadcrumb
For online retailers, WooCommerce Breadcrumbs is an easy way to add navigational links to your product pages:
Om du driver din webbutik med det populära WooCommerce-pluginet, kan detta vara det bästa alternativet för dig. Det gör att du kan aktivera brödsmulor för dina produktsidor, för att förbättra kundnavigering på din webbplats.
Efter installation och aktivering kan du navigera till Inställningar > WC Breadcrumbs för att anpassa dina brödsmulor:
Den viktigaste inställningen är kryssrutan Aktivera brödsmulor. Du måste se till att den är vald för att dina brödsmulor ska visas. Kontrollera sedan en av dina produktsidor:
Ditt brödsmulespår borde vara synlig längst upp på sidan.
Breadcrumb
Till sist, Breadcrumb är ett lättviktigt plugin som gör att du kan lägga till brödsmulor var som helst på din webbplats med hjälp av kortkoder:
Detta plugin har de mest omfattande inställningarna av alla de vi listar i det här inlägget. Du kan komma åt dem genom att klicka på Breadcrumb i din WordPress-panelens sidofält:
Den första fliken är märkt Alternativ och innehåller några allmänna inställningar som anpassad text, avgränsare och teckengränser:
Det finns också en hel flik tillägnad stylingalternativ. Det finns flera pilknappar du kan välja mellan, liksom teckenstorlekar och färger:
Om du har lite kodningskunskaper och vill ha mer kontroll över din styling, kan du också använda Anpassad CSS-fliken:
Slutligen är det viktigt att besöka fliken Kortkod för att lägga till dina brödsmulor på din webbplats:
Du kan använda kortkoden var som helst på din webbplats, precis som med de andra plugins vi har gått igenom. Breadcrumb ger dig dock också ett kodavsnitt som du kan lägga till i en av dina mallfiler för att införliva dina spår i din header, sidfot eller någon annanstans.
3. Använd ett tema som innehåller brödsmulor
Medan de ofta används för att kontrollera hur din webbplats ser ut, kan WordPress-teman också påverka din webbplats funktionalitet. Ett sätt är genom att lägga till brödsmulor till dina sidor.
Nackdelen med att använda ett WordPress-tema för att lägga till brödsmulor till en befintlig WordPress-webbplats är att det innebär att du också ändrar webbplatsens utseende. Om du har ett etablerat varumärke och en webbplats-identitet är detta egentligen inte en praktisk lösning, och det kommer antagligen vara bättre med ett plugin.
Men om du startar en ny WordPress-webbplats eller designar om din webbplats är ett tema som innehåller brödsmulor en metod med låg ansträngning för att lägga till dem på din webbplats. Dessutom finns det flera alternativ tillgängliga gratis i WordPress temakatalog.
OceanWP
OceanWP är ett av de mest populära flersyftesteman för WordPress:
Det innehåller en kortkod som du kan använda för att enkelt tillämpa brödsmulor på dina sidor. Det finns också flera demos tillgängliga för användning med OceanWP som innehåller brödsmulor. För att använda kortkoden, lägg helt enkelt till [oceanwp_breadcrumb] till ett inlägg, sida eller text-widget:
Du kan anpassa brödsmulorna med hjälp av följande parametrar:
- Class: Innehåller en anpassad CSS-klass.
- Color: Ändrar textens färg.
- Hover color: Ändrar färgen på texten när användare håller muspekaren över brödsmulorna.
Lägg bara till några eller alla dessa parametrar direkt i kortkodsparenteserna:
Du bör nu se dina brödsmulor på relevanta sidor.
Astra
Likaså gör Astra också det enkelt att lägga till brödsmulor på din webbplats:
Det enklaste sättet att aktivera brödsmulor med Astra är via Customizer. Med temat installerat och aktiverat, navigera till Utseende > Anpassa:
Välj sedan fliken Brödsmulor:
Här ser du en rullgardinsmeny som låter dig välja var du vill visa brödsmulorna på sidan:
När du gör ditt val, kommer vissa styling-alternativ att visas också:
Se till att klicka på Publiceraknappen i Customizer för att spara dina ändringar.
4. Lägg till brödsmulor Manuellt
Plugins och teman är en del av det som gör WordPress till en användarvänlig och tillgänglig plattform. Men för några mer avancerade användare och utvecklare kan de kännas begränsande. Kod kan vara ett mycket kreativt medium, och att ha möjlighet att fritt skriva egna brödsmulor kan passa dig bra.
För att visa brödsmulor manuellt måste du göra två saker. Först måste du lägga till en funktion till din functions.php-fil för att aktivera dem. Här är ett exempel på koden du kan använda:
function get_breadcrumb() {
echo 'Home';
if (is_category() || is_single()){
echo " " ";
the_category (' • ');
if (is_single()) {
echo " " ";
the_title();
}
} elseif (is_page()) {
echo " " ";
echo the_title();
} elseif (is_search()) {
echo " " ";Search Results for…
echo '"';
echo the_search_query();
echo '"';
}
}
När funktionen har lagts till måste du anropa den i mallfilerna där du vill att brödsmulorna ska visas. Att anropa funktionen i single.php kommer att få brödsmulor att visas på dina inlägg, anropa det i header.php visar dem överallt där din header visas, och så vidare.
Koden du använder ska se ut så här:
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Att ändra dessa filer kommer att visa brödsmulor på din webbplats, men gör inte att du kan styla dem så att de matchar dess design. Till det måste du börja fiffla med lite CSS också.
Så stylar du dina WordPress-brödsmulor
Att styla dina brödsmulor är nödvändigt om du kodar dem själv. Det kan dock också vara till hjälp om du använder ett plugin eller tema för att lägga till dem. Standardstylingen som dessa verktyg tillhandahåller kanske inte passar bra för din webbplats, i vilket fall du kan behöva justera dem för att ge ett enhetligt intryck.
Du kan lägga till anpassad CSS för att styla dina brödsmulor i temats stilmall (style.CSS) eller i Ytterligare CSS-området i Customizer:
Det finns många sätt på vilka du kan anpassa dina brödsmulor för att matcha din webbplats design, till exempel genom att finjustera deras typsnitt, storlek och färg. Du kan också överväga element som marginaler, spaltfyllnad, kant och ikoner.
Här är ett exempel på CSS som kan användas för att styla dina brödsmulor:
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
Det finns många möjligheter när det gäller CSS. Så det kan krävas lite experimentering för att få dina brödsmulor att se exakt som du vill.
Så här tar du bort WordPress-brödsmulor från din webbplats
Även om det finns många fördelar med att lägga till brödsmulor på din webbplats, betyder det inte att de är till för alla. Vissa människor tycka att de är förvirrande eller känner att de gör webbplatsens sidor alltför röriga.
Om du vill ta bort brödsmulor från din WordPress-webbplats kommer metoden variera baserat på hur du ursprungligen lade till dem. Till exempel, om du använde anpassad kodad, kan du helt enkelt ta bort koden du lagt till från dina temafiler.
Att inaktivera brödsmulor som lagts till med ett plugin är vanligtvis lika enkelt som att inaktivera pluginet. När det gäller Yoast SEO kan du navigera till fliken Brödsmulor i inställningarna för Sökutseende och sätta rätt knapp på Inaktivera.
Detsamma kan sägas om teman som möjliggör brödsmulor via en inställning eller WordPress-kortkoder. Det finns dock några teman som lägger till brödsmulor som standard. Att ta bort dessa kan vara lite svårare, speciellt om du inte är särskilt erfaren med kod.
Om det här är din situation måste du navigera till webbplatsen header.php-fil. Där kör du ett sökkommando för ”breadcrumb”. Detta bör markera koden som anropar funktionen som lägger till brödsmulor till din webbplats (om den finns där):
Ta bort den här kodraden för att ta bort brödsmulor från din webbplats. Om du inte hittar rätt kod kan du testa denna process igen i dina single.php och page.php-filer, för att se om funktionen anropas i en av dessa mallar istället.
Om allt annat misslyckas, kontakta temats utvecklare för support. Observera att uppdatering av ditt WordPress-tema kan åsidosätta eventuella ändringar du har gjort i dess filer. Det är därför bästa praxis föreslår att du använder ett barntema av denna anledning, för att bevara dina anpassningar på obestämd tid.
Sammanfattning
Stark användarupplevelse och SEO är båda nycklar till en framgångsrik webbplats. Att aktivera WordPress-brödsmulor kan göra det lättare för besökare att navigera över hela din webbplats, samtidigt som det hjälper sökmotorer att förstå dess struktur och indexera dina sidor korrekt.
I det här inlägget har vi gått igenom fyra metoder för att lägga till brödsmulor på din WordPress-webbplats:
- Slå på brödsmulor i Yoast SEO.
- Installera och konfigurera ett brödsmuleplugin för WordPress.
- Använd ett tema som innehåller brödsmulor.
- Lägg till dina brödsmulor manuellt med kod.
Har du några frågor om WordPress-brödsmulor eller hur man använder dem? Låt oss veta i kommentarerna nedan!
Lämna ett svar