Breadcrumbs in WordPress Themes nachrüsten

Breadcrumbs können sehr hilfreich sein, um sich auf großen Websites mit tiefen Hierarchien zurechtzufinden. Das sieht auch Google so, denn korrekt formatierte Breadcrumbs werden in der Google Search Console als »Enhancement« aufgeführt. Aber nicht alle Themes bieten diese nützliche Funktion, mit dem Script »Breadcrump-trail« von Justin Tadlock kann diese Funktion jedoch leicht in vorhandene Themes eingebaut werden. Das Script wurde unter der GPL 2.0 veröffentlicht.

Eine neue Funktion ruft die Breadcrumbs mit optionalen Parametern auf:

function my_breadcrumbs () {

    include_once get_stylesheet_directory() . '/page-templates/breadcrumbs.php';

    $args = array(
      'container'     => 'nav',
      'show_browse'   => false,
      'show_on_front' => false
    );

    breadcrumb_trail( $args );
}

Mit den Parametern, kann der angezeigte Inhalt angepasst werden und gibt es Hooks und Methoden, mit denen die Funktionsweise verändert oder erweitert werden kann.

Wo die Breadcrumps platziert werden, hängt natürlich von der Gestaltung und dem jeweiligen Theme ab. Dort müssen nur folgende Zeilen an passender Stelle eingefügt werden.

<?php if ( function_exists( 'my_breadcrumbs' ) ) :  ?>
<div id='breadcrumbs'>
   <?php my_breadcrumbs(); ?>
</div>
<?php endif; ?>

Jetzt fehlt nur noch das Styling, welches das Aussehen an die eigene Seite anpasst. In diesem Beispiel wird ein »Guillemet« genutzt, um die Einträge optisch voneinander abzugrenzen und ein Icon vor dem Home-Link soll die Aufmerksamkeit der Besucher auf die Breadcrumps lenken.

#breadcrumbs {
  max-width: 100%;
  padding: 10px 20px 10px 20px;
}
.trail-items li {
  color: var(--white);
  display: inline-block;
}
.trail-items li span {
  font-size: 0.9em;
}
.trail-items li a {
  display: inline-block;
  padding: 0 5px 0 5px;
  line-height: 150%;
  color: var(--white);
  font-size: 0.9em;
}
.trail-items li a::after {
  content: "»";
  margin-left: 10px;
}
li.trail-end  {
  padding: 0 5px 0 5px;
}
.trail-begin a::before {
  content: "";
  background-image: url( 'images/home.svg' );
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 0 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}