kaxigt.com

De flesta använder sig av olika WordPress-plugin – bland annat just breadcrumbs. Men det går också att fixa breadcrumbs utan plugin på egen hand.

Du kan å ena sidan använda din functions.php eller å den andra lägga in några koder direkt på sidan där du vill ha din trådade navigering.

Vi ska nu kika på hur du kan gå tillväga, och vi börjar med alternativet med att lägga in koderna direkt på sidan. För att göra den enkelt för mig så har jag mina koder i en php-include vilken jag sedan kallar på respektive sida navigeringen ska vara.

Breadcrumbs utan plugin på kaxigt vis

Först ska vi titta på själva navigeringskoden. Personligen valde jag att lägga in den högst upp i det block där mina poster ska visas. Koden då?

<?php
if ((is_page() && !is_front_page()) || is_home() || is_category() || is_single()) {
echo '<div id="crumbs">';
echo '<ul id="breadcrumbs">';
echo '<li class="front_page"><a href="'.get_bloginfo('url').'">Hem</a></li>';
$post_ancestors = get_post_ancestors($post);
if ($post_ancestors) {
$post_ancestors = array_reverse($post_ancestors);
foreach ($post_ancestors as $crumb)
echo '<li><a href="'.get_permalink($crumb).'">'.get_the_title($crumb).'</a></li>';
}
if (is_category() || is_single()) {
$category = get_the_category();
echo '<li><a href="'.get_category_link($category[0]->cat_ID).'">'.$category[0]->cat_name.'</a></li>';
}
if (!is_category())
echo '<li class="current"><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
echo '</ul>';
echo '</div>';
}
?>

Jag har modifierat koderna lite grann så de passar mig, men en snabb och enkel genomgång är ändå på sin plats och då särskilt följande två:

echo '<div id="crumbs">';
echo '<ul id="breadcrumbs">';

I originalkoden fanns inte div ID crumbs – men jag ville placera listan i ett eget block eftersom det här rör sig om en navigering.

Även om man anger ett unikt ID för de oordnade listelementen så kan det uppstå problem om navigeringen ligger inuti ett block, exempelvis #main, och denna inte omfattas av ett globalt värde utan har sin specificerade lista, ett grupperat värde, typ #main ul {.

Lägger man in så kallade ”korsvärden” i stilmallen blir resultatet garanterat inte alltid det man har tänkt sig. Navigeringar menar jag därför alltid ska ligga i en egen box, och skilj för all del på navigeringsblock och listor.

Ett fall för stilmallen!

Vi måste ju också snygga till vår navigering och jag lämnar generöst ut min stilmall (som även den är lite modifierad för mitt behov) så kan ni ändra efter behag. Tuten är för övrigt simple_scalable_css_based_breadcrumbs/ och hämtad hos Veerle.

Thanks Veerle!

#crumbs {margin:0; padding:5px 0px; background:transparent;}
#breadcrumbs ul, li {list-style-type:none;padding:0; margin:0; border:0;}
#breadcrumbs { height:2.7em; border-width: 1px;border-style: solid; border-color: #fff #c6bc96 #c6bc96 #fff; padding-bottom:5px;}
#breadcrumbs li {float:left; line-height:2.7em; color:#777; border:0; padding-left:.85em;}
#breadcrumbs li a {background: url() no-repeat right center; display:block; border:0;padding:0 5px 0 0; }
#breadcrumbs li a:link, #breadcrumbs li a:visited { color:#993300; border:0; text-decoration:none;}
#breadcrumbs a:link, a:visited, #breadcrumbs li a:hover, #breadcrumbs li a:focus {border:0; }
#breadcrumbs .current {font-weight:bold; color:#993300;text-shadow: 0 1px 0 #fff;}

Breadcrumbs i functions.php á la CatsWhoCode

Jean-Baptiste Jung är en ung och duktig webutvecklare som har specialiserat sig på WordPress. Han har skrivit en enkel kod som du lätt klistrar in i din functions.php. OBS! Kontrollera noggrant så du inte få ett blanksteg efter koden!

<?php function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> » ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}
?>

När du har klistrat in koden och sparat den så skickar du upp filen i din temamapp. Därefter öppnar du upp de filer som du vill placera din navigeringskod i, exempelvis archive.php, single.php och page.php. Koden som kallar på din breadcrump ser ut så här:

<?php the_breadcrumb(); ?>

Nu är det så här – när vi väljer att använda oss av filen functions.php så kan man säga att koderna vi lägger i denna fil är ”detsamma” som ett plugin. Istället för att installera ett plugin så lägger vi koden direkt i functions.php och får samma resultat.

Vilket därutöver också är mer ”korrekt” och snällare eftersom filen är till för att kunna implementera olika funktioner. Av den anledningen har jag skrivit om koden som kallar på navigeringen, i synnerhet om något i koden skulle bli fel, så det inte uppstår problem med hemsidan.

Den modifierade koden är följande (och om du kikar noga så ser du att den initialt ser likartad ut som WordPress egna koder när de kallar på en funktion.

<?php if( function_exists( 'the_breadcrumb' ) ) { the_breadcrumb(); } ?>

Skulle ovanstående kod mot förmodan skapa problem så använd den icke-modifierade.

Lycka till med ditt egenhändigt gjorda function (plugin)!