Breadcrumb-Navigation

Die folgende Beschreibung zeigt, wie man eine Breadcrumb-Navigation in WordPress ohne ein zusätzliches Plugin ergänzen kann.

Bei Seiten wird die Hierachie angezeigt, falls man sich auf einer Unterseite befindet und kann so leicht zu einer übergeordneten Seite wechseln.

Bei Blog-Beiträgen die Kategorie angezeigt und welche Schlagworte für den Beitrag vergeben wurden. Klickt man diese Angaben an, gelangt man zur jeweiligen Archiv-Übersicht der Kategorie oder des Schlagwortes.

Technische Umsetzung

Für die Umsetzung benötigt man kein Plugin, nur etwas zusätzlichen Code im Theme. Zunächst habe ich folgende Funktion in der functions.php des Themes ergänzt. Diese Funktion gibt die Navigation aus, wenn sie passend ist – nur für einzelne Beiträge oder Seiten mit mindestens einem übergeordneten Eintrag:

function the_breadcrumb() {
    if(!is_home()) {
        if(is_single()) {
            echo '<div class="breadcrumb">';
            the_category(' ');
            the_tags(' (', ', ' ,')');
            echo ' » ';
            the_title();
            echo '</div>';
        } elseif(is_page()) {
            $ancestors = get_ancestors(get_the_ID(), 'page');
            $count = count($ancestors);
            if($count > 0) {
                echo '<div class="breadcrumb">';
                while($count > 0) {
                    $page_data = get_page( $ancestors[$count-1] );
                    echo '<a href="'.get_permalink($page_data->ID).'">'.
                        get_the_title($page_data->ID).'</a> » ';
                    $count--;
                }
                echo the_title();
                echo '</div>';
            }
        }
    }
}

Diese Funktion wird dann an passender Stelle (in meinem Fall den Templates für Beiträge und Seiten) eingefügt:

<?php the_breadcrumb(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...
</article>

Für das Layout sorgt eine zusätzliche CSS-Klasse in style.css:

.breadcrumb {
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #c0c0c0;
}