Breadcrumb-Navigation manuell umsetzen im Theme „Seashell“

Navigation im Blog
Geschätzte Lesezeit: 4 Minuten

Was mir in meinem neuen Theme fehlte, war die „Brotkrümel“-Navigation. Ich finde es immer schön, wenn ich anhand dieser Linkanzeige im oberen Bereich eines Beitrages erkennen kann, wo ich mich gerade auf der Seite befinde. Also sollten Breadcrumbs auch wieder im Theme „Seashell“ eingebaut werden.

Der Code stammt von Kulturbanause, der bereits im alten Theme als Toolbox-Modul wunderbar funktionierte. Dank seines Tipps im Kommentarbereich wird nun auch auf der Startseite angezeigt, dass ich mich bei „Home“ befinde. So sieht also nun mein Modul-Code aus:

<?php
/*
Module Name: Breadcrumbs
Description: Breadcrumbs anzeigen [Frontend]
Author: Sergej Müller
Author URI: https://sergejmueller.github.io/
*/


/* Sicherheitsabfrage */
if ( !class_exists('Toolbox') ) {
	header('Status: 403 Forbidden');
	header('HTTP/1.1 403 Forbidden');
	exit();
}

function nav_breadcrumb() {

  $delimiter = '&raquo;';
  $home = 'Home';
  $before = '<span class="current">';
  $after = '</span>'; 

  if ( !is_paged() ) {

    echo '<div id="breadcrumb">';

    global $post;
    $homeLink = get_bloginfo('url');
    echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';

    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $before . single_cat_title('', false) . $after;

    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $before . get_the_time('d') . $after;

    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo $before . get_the_time('F') . $after;

    } elseif ( is_year() ) {
      echo $before . get_the_time('Y') . $after;

    } elseif ( is_single() && !is_attachment() ) {
      if ( get_post_type() != 'post' ) {
        $post_type = get_post_type_object(get_post_type());
        $slug = $post_type->rewrite;
        echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
        echo $before . get_the_title() . $after;
      } else {
        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        echo $before . get_the_title() . $after;
      }

    } elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
      $post_type = get_post_type_object(get_post_type());
      echo $before . $post_type->labels->singular_name . $after;

    } elseif ( is_attachment() ) {
      $parent = get_post($post->post_parent);
      $cat = get_the_category($parent->ID); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;

    } elseif ( is_page() && !$post->post_parent ) {
      echo $before . get_the_title() . $after;

    } elseif ( is_page() && $post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;

    } elseif ( is_search() ) {
      echo $before . 'Ergebnisse für Ihre Suche nach "' . get_search_query() . '"' . $after;

    } elseif ( is_tag() ) {
      echo $before . 'Beiträge mit dem Schlagwort "' . single_tag_title('', false) . '"' . $after;

    } elseif ( is_author() ) {
       global $author;
      $userdata = get_userdata($author);
      echo $before . 'Beiträge veröffentlicht von ' . $userdata->display_name . $after;

    } elseif ( is_404() ) {
      echo $before . 'Fehler 404' . $after;
    }

    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo __('Seite') . ' ' . get_query_var('paged');
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }

    echo '</div>';

  }
}

Ausgabe im Theme

Im „Smoky“ musste ich die Anzeige dann per Ausgabe des Codes

<div id="breadcr"><?php if (function_exists('nav_breadcrumb')) nav_breadcrumb(); ?></div>

in archive.php, single.php, index.php usw. an passender Stelle vornehmen. Aber wo soll ich nun in „Seashell“ ansetzen? Denn das funktionierte bei diesem Theme nicht auf diese Weise. Den entscheidenden Hinweis erhielt ich von Vladimir in seinem Beitrag zu dem Plugin Breadcrumb NavXT. Daher habe ich den Code für die Ausgabe am Ende der header.php eingefügt:

<!-- BEGIN MAIN -->
<section id="main" class="main_bg">
<div class="breadcrumb"><?php if (function_exists('nav_breadcrumb')) nav_breadcrumb(); ?></div>
<?php if(!is_singular() || is_page_template('template-home.php')): ?>
	<?php if(shl_get_option('enable_scroll_menu')): ?>
		<?php get_template_part('sections/scroll-menu'); ?>
	<?php endif; ?>
<?php endif; ?>

Die Optik

Die CSS-Attribute sehen bei mir so aus:

.breadcrumb{display:inline-block;margin:20px 0 0 27px}

Edit

Damit die Breadcrumb-Navigation nicht zu nah am Scroll-Menü klebt, habe ich noch folgenden Wert der style.css hinzugefügt:

.scroll-menu{padding:70px 0 0}

Breadcrumbs mobil

 

Und auch mobil hat sich diese Navigation dem kleinen Display recht gut angepasst.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen, sei es über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Wenn Du hier kommentierst, bist Du mit den Datenschutzbedingungen von Sylvis Blog einverstanden.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung