Breadcrumb – wörtlich Brotkrumen – Navigationen, oder auch Klickpfad-Navigationen sind eine wertvolle Bereicherung für eine Website. Sie zeigen dem Besucher, wo genau er sich gerade befindet und unterstützen somit die Usability einer Website. Auch aus SEO Sicht sind Breadcrumbs sinnvoll, unterstützen Sie doch aktiv die interne Verlinkung. Es gibt dafür natürlich einige Plugins, aber manchmal möchte man vielleicht auf ein Plugin verzichten.
breadcrumbs.php erstellen
Zunächst erstellen wir eine Datei namens “breadcrumbs.php” (natürlich kann diese Datei auch anders heißen, aber der Name ist doch irgendwie sinnvoll). Diese Datei solllte sich im Verzeichnis des aktiven Themes befinden. Hier notieren wir dann folgenden Code:
<?php
function breadcrumbs() {
$theFullUrl = $_SERVER["REQUEST_URI"];
$urlArray=explode("/",$theFullUrl);
echo ‘Sie sind hier: <a href="/">Home</a>’;
while (list($j,$text) = each($urlArray)) {
$dir=”;
if ($j > 1) {
$i=1;
while ($i < $j) {
$dir .= ‘/’ . $urlArray[$i];
$text = $urlArray[$i];
$i++;
}
if($j < count($urlArray)-1) echo ‘ » <a href="’.$dir.‘">’ . str_replace("-", " ", $text) . ‘</a>’;
}
}
echo wp_title();
}
breadcrumbs();
?>
</div>
Die Breadcrumb Navigation einbinden
Um die Navigation nun dort einzubinden, wo wir sie haben wollen, rufen wir die Datei per include auf. Das Codeschnipsel gehört genau an die Stelle, wo die Brotkrumen-Navigation erscheinen soll. Sinnvoll ist das häufig in der header.php Datei, da diese auf allen Seiten verwendet wird.
Styling per CSS
Wie Sie viellleicht gesehen haben, ist das Ganze in einen DIV Container mit der Klasse “breadcrumb” eingebunden. Das erleichtert natürlich das Styling via CSS ungemein.
Hier ein Beispiel:
font-size: 10px;
margin: 0px 0px 20px 0px;
}
.breadcrumb a, .breadcrumb a:visited {
color: #2255AA;
text-decoration: none;
}
.breadcrumb a:hover {
color: #2255AA;
text-decoration: underline;
}
Es gibt natürlich weitere, ausgefeiltere Varianten, aber ich wollte es mal wieder möglichst simpel halten. Viel Spaß damit.
10 Kommentare zu “Eine Breadcrumb Navigation in WordPress ohne Plugin”
Kommentare wurden abgeschaltet.