Fast auf jeder Webseite sieht man sie, die kleine und meistens unauffällige Brotkrumen-Spur in den verschiedensten Variationen. Sie dient dem Leser als ein Weg durch die Navigation der Website zur aktuell aufgerufenen Seite. Diese sogenannte Breadcrumb-Navigation will Dir sagen: »Du bist hier: Start >> Kategorie >> Artikel oder Seite«.
Um eine hohe Stufe der Usability zu erreichen, wird in den Web Content Accessibility Guidelines (WCAG) 2.0 eine Angabe der direkten Position auf einer Webseite innerhalb eines Webauftrittes verlangt. Mit anderen Worten. Der Leser soll Wissen wo er sich befindet und die Möglichkeit bekommen ohne zusätzliche Scripte vollständig durch die Website navigieren zu können. Plug-Ins gibt es dafür genug. Aber in diesem Fall ist es nicht unbedingt notwendig, denn es geht auch mit einem kleinen und kurzen Eingriff in die functions.php des verwendeten WordPress-Themes.
Es gibt viele verschiedene Möglichkeiten des Code Snippets. doch diese einfache Variante, die ich auch auf Timm‘s Blogwelten nutze, reicht völlig aus. Deshalb mache ich es kurz und schmerzlos:
Die Änderung der »functions.php«
/* Timm's Optimierung: Breadcrumb-Navigation */
/* Funktion anlegen */
function brotkrumen() {
/* Variablen anlegen */
$Blogheimat = get_bloginfo('url');
$Blogname = get_bloginfo('name');
/* Ausgaben bestimmen */
if(is_category() || is_single() || is_page() || is_home()) {
/* Stammverzeichnis ausgeben */
/* echo "<p class=\"breadcrumb\">";
echo "<a href=\"$Blogheimat\" title=\"$Blogname\">$Blogname</a>";
echo " » "; */
echo "<p class=\"breadcrumb\">";
echo "Du bist hier: ";
/* Verschiedene Orte ausgeben */
if(is_category()) { echo single_cat_title(); }
if(is_single()) { echo the_category(', '); echo " » "; echo the_title(); }
if(is_page()) { echo the_title(); }
if(is_home()) { echo get_bloginfo('name'); }
/* Absatz und Funktion schließen */
echo "</p>";
}
}Anzeige der Brotkrumen-Navigation
Damit die Breadcrumb-Navigation auch angezeigt wird bedarf es einer Änderung in Deinem Templates. Meisten geschieht dieser Aufruf im Header.
Beim mir im WordPress-Theme erfolgt der Aufruf als letztes vor dem Abschluss des Header-Segmentes.
<header>
...
<?php if (function_exists('brotkrumen')) { brotkrumen(); } ?>
</header>Breadcrumb-Style anpassen
Mit ein bisschen CSS kannst du das Aussehen der Navigation anpassen. Mein CSS ist jetzt nicht der Hammer, reicht aber erst einmal aus. Deiner Fantasie und technischen Möglichkeiten sind dahingehend keinerlei Grenzen gesetzt. :)
CSS
/* Breadcrumb*/
.breadcrumb {
font-size:0.8em!important;
margin:12px 0 12px 0!important;
}
.breadcrumb a {
color:#ccc;
}
.breadcrumb a:visited {
color:#A8BCBD !important;text-decoration:none;
}
.breadcrumb a:hover {
color:#A2CD08 !important;text-decoration:overline;
}Das war es eigentlich schon. Probiere es einfach mal aus. Viel Spaß damit.
Hast du ein Demo davon?
Viele Grüße
Hallo Mitch,
schau mal bitte unter meinen Header, unterhalb der blau-gelben Linie. Da ist die Breadcrumb-Funktion in Aktion. :)
LG Timm
sie würde auf Deiner Seite gut unter deinem dunklen Menü passen. :)
Hatte ich auf mehreren Projekten. Mittlerweile ist die Breadcrumb überall wieder rausgeflogen, hatte keinen nennenswerten Mehrwert ;-)
Hallo Tanja,
es ist schade, das sie bei Dir wieder rausgeflogen ist. Für mich ist es auch schwierig einen messbaren Mehrwert zu finden. Doch gibt es einige Leser, die diese Orientierungshilfe wirklich gut finden.
Manchmal nutze ich sie beim durchklicken zwischen den Kategorien. Wirklich nur manchmal. ;)
Aber warum sollte sie rausfliegen? Bei mir passt sie ganz gut unter der blau-gelben Linie. :)
LG Timm
Mir ist es mittlerweile wesentlich wichtiger, den Teil worauf es wirklich ankommt, also die Inhalte der Artikel, so weit wie möglich nach oben zu bekommen, bzw. soviel wie möglich davon im sichtbaren Bereich zu haben. Dabei stört mich alles, was diesen Bereich nach unten schieben, wie auch die Breadcrumb ;-)
Von der Logik her hast du sicherlich Recht. Doch finde ich es von Usability her schöner. In manchen Website-Tests werden Technik und Usability getestet und immer wieder wird geschrieben, das eine interne Verlinkung die »Seite stärkt« (ich habe das jetzt mal so ausgedrückt, auch wenn es nicht 100%ig ist) und das Verhältnis Content zu MarkUp stimmen muss.
Der sichtbare Bereich spielt bei den Optimierungen sicherlich eine große Rolle.
Ich habe mir mal Deine Seite angeschaut, und ich würde mich über Brotkrümel freuen… Negativ beeinflussen würde meine Variante Deine Seite nicht, weil es ja nur Textlinks sind und nicht irgendwelches grafisches Gedöns… ;)
LG Timm
@Timm: In so einer Breadcrumb sind sowieso nur Startseite und Kategorie(n) verlinkt. Keine Links, die es nicht bereits auf der Seite geben würde (sidebar, header oder wo auch immer der Webmaster die gerade hin setzt). In der Regel sind diese Verlinkungen ja auch nochmal unter dem Artikel angegeben. Wie oft muss das denn wirklich sein? Oben über dem artikel in der breadcrumb, in sidebar/header, unter dem artikel…
kurz und knapp: für manche wirklich nicht oft genug, wenn ich nach »DAU« gehe. :)
LG TImm
Hi Timm, feine Anleitung – super erklärt.
Im Übrigen toller Blog, endlich mal wieder einer, der es in meinen Feed geschafft hat.
Eine Frage habe ich: wie hast du das angestellt, dass die Anzeige nach ‚Du bist hier: ‚ fett dargestellt wird.
Ich habe viel im CSS und PHP gebastelt – keine Chance.
Ich sag schon mal danke für die Lösung.
Und weil ich gerade beim Fragen bin – das Verlinken hier drunter – von einem meiner letzten Artikel WOW.
Gibst du mir bitte dazu auch die Lösung.
Und zu guter Letzt; hab mich ja schon etwas von dir inspirieren lassen; falls es OK ist und du willst auf meine Seite ‚Freunde‘ dann mal bitte ein Logo von dir in 200 x 200px.
Das wars auch schon. :)
Hallo Frank, bitte entschuldige, dass ich erst jetzt antworte. Erst einmal vielen Dank für Dein tolles Feedback.
Dein Blog kommt mir vom Design irgendwie bekannt vor.. ;)
Sehr schön gemacht.
Zu Deiner ersten Frage:
In der Zeile 14 des oben abgebildeten Code-Snippets hinter der Zeile »Du bist hier: « ändere die Zeile so, das sie mit dem »strong«-tag ausgestattet ist.
Den End-Tag setzt Du in der Zeile 21:
«echo »« wird zu
Zu Deiner zweiter Frage kann ich dir nur empfehlen folgenden Artikel zu lesen.
Kommentarbereich optimieren.
Natürlich freue ich mich über Deine Einladung zu Deinen Freunden gehören zu dürfen. Das Logo bekommst du innerhalb der nächsten Minuten an Deine hinterlassene E-Mail gesendet.
Selbstverständlich nehem ich dich bei Blogroll mit auf, wenn du möchtest. ;)
LG Timm
Hi Timm,
alles super.
Herzlichen Dank dafür. :)
Das Logo ist unterwegs. :)
LG Timm
Ob das nennenswerten Mehrwerten hat wie Tanja schreibt weiß ich nich,ich nutze
Die Breadcrumb-Navigation bei mir auch ,Code Snippet von erste Hand und ohne CSS .
Breadcrumb-Navigation dint nur zur innere verlinkung glaube nicht das für SEO dies schaden kann.
MfG
Die Navigation ist für eine Website essentiell. Das heißt, jegliche Erleichterung für den Leser ist ein Grund mehr Dein Blog ein weiteres Mal zu besuchen.
LG Timm
Hallo Timm,
wie versprochen jetzt kannst Du mein Barrierefreies Webdesign sehen…
Vor 6 Tagen mit angefahngen,heute morgen endlich Thema geschaltet,aber so wie es sehe haben wir fast gleiche geschmack…. Oder?
MfG
Hallo Viktor,
komisch, das Design kommt mir irgendwie bekannt vor. :) Deine Farben hast Du beibehalten und insgesamt sieht es mit der Artikelanzeige besser als vorher aus.
Na da bin ich mal gespannt, wann Deine nächste Designänderung kommt. :)
LG Timm
Timm das Design bleibt jetzt so.
habe mir viel Mühe gegeben,ja Farben sind geblieben mag helles.
MfG
Hallo Viktor,
Ich finde helle Farben auch viel schöner und ich finde diese Featured-Sidebar auch eine gute Lösung.
LG Timm
Hallo Timm ,
jetzt bin ich entgültig fertig mit allem.
Mit Design,speed Optimierung.Musste leider 3 neue Plugin dazu instalieren,damit Barrierefreies Webdesign dar gestelt wird..
MfG
Hallo Viktor, schön, das Du jetzt fertig bist, mit Deinem Design. Welche Plugins hast Du denn installieren »müssen«?
LG Timm
Ist eben dazu gekommen:
Smart Archives Reloaded
Subscribe To Comments
WP YouTube Lyte– damit iframe html5 Valide wird
Hallo Viktor, die ersten drei Plugins sind Pflicht. Auch wenn das Archiv-Plugin nicht wirklich so wichtig ist, so präsentiert es einfach in schönerer Form Dein Archiv.
«Subscribe to comments« besser »subscribe-to-double-opt-in-comments« ist schon aus rechtlichen Gesichtspunkten mit das wichtigste auf dem Blog. laut deutschem Recht muss der Abonnent extra zustimmen, das er E-Mails erhalten möchte.
Das YouTube-Plugin brauchst Du nicht. Das geht mit reinem HTML5 und mit dem Code, der auf Youtube angeboten wird. der ist auch fehlerfrei.
LG Timm
Hallo Timm,
mit Youtube hast Du nicht ganz recht.
Kann Gut möglich sein das iframe von Youtube sauber ist,aber keine HTML5-Spezifikation so kriegst Du
HTML5 nicht Valide,weiss auch nicht warum aber die grösse wird bei plazierung von iframe auch nicht angehalten,mit dem Plugin ist viel einfacher mann braucht kein ifram embed mehr.
Ich verstehe aber nicht wofür Ellen die /js/jquery.fitvids.js, jquery.placeholder.min.js, /js/custom.js eingebaut hat,die Funktionen sind mir nicht bekannt.
Wegen subscribe-to-double-opt-in-comments Danke werde unter Auge bechalten,erlich gesagt ich war immer die Meinung wenn einer will der soll dann Blog Abo nutzen,bis jetzt war subscribe kein pflicht bei mir.
Hallo Viktor, schau mal in die Dateien rein. Das Script »fitvids« passt Deine Filme responsive an. Für das jquery Placeholder-Plugin empfehle ich Dir folgende Seiten zu lesen:
http://www.magjs.de/2012-01/reuter/reuter.html
http://www.webentwickler-oase.de/jquery/html5-placeholder-und-jquery-losung/
In der »custom.js« sind eigene Scripts hinterlegt. Du kannst dort eigene Scripts hinterlegen und somit weite Abfragen vermeiden. Ob Dein Script dann funktioniert, teste es einfach aus. Problematisch ist nur, wenn in dieser Datei Scripts hinterlegt sind, die einerseits im Header und andererseits im Footer geladen werden sollen. Dann funktioniert eines von beiden nicht oder zumindest nicht richtig.
Nicht jeder möchte gleich das ganze Blog abonnieren nur um zu erfahren ob es einen neuen Artikel oder Kommentar gibt. Ich gebe zu, auch ich möchte selbst entscheiden, zu was ich Neuigkeiten bekommen möchte. ;)
LG Timm
Hallo Timm,Subscribe To Comments oder subscribe-to-double-opt-in-comments Hab keine Große unterschiede entdeckt.
Mit Abo ist auch so eine Sache, hast Du treue Leser die nehmen sowieso Feed.
Mit html5-placeholder-und-jquery-losung/ kenne ich, hab auch schon ausprobiert, guter Plug aber interessant, wenn Du wirklich viel an Videos postest, ansonsten ein Mitfresser, wenn dann nehme Youtube, und zwar ohne iframe,WP YouTube Lyte ideal dafür Code von YouTube bzw. emmbed braucht man nicht.
httpv://www.youtube.com/watch?v=vw9srZ8oezw einfach link,iframe wird sowieso nicht so gut in (SEO) angesehen.
Wie gesagt da soll jeder selber entscheiden was einer braucht und welche Bedürfnisse Mann hat.