Breadcrumb zwany również „okruszkami chleba” pokazuję ścieżkę z pomocą, której możemy ustalić swoje aktualne położenie na stronie internetowej, blogu lub w sklepie.
Jak działa Breadcrumb?
Dodatkowo umożliwia on nam przejście (cofnięcie się) do elementu wyżej (np. do kategorii, na stronę główną) w stosunku do artykułu, produktu na którym aktualnie się znajdujemy. Jest on więc bardzo użyteczny, zwłaszcza kiedy np. oglądamy produkt w sklepie lub artykuł na blogu. Może on wyglądać np.:
Jesteś tutaj | Strona domowa -> Strona sekcji ->Strona sekcji podrzędnej
Każdy z elementów Breadcrumb (z wyjątkiem rozdzielnika) powinien być klikalny by umożliwić swobodne poruszanie się po witrynie. Niestety nie jest tak zawsze.
W jaki sposób dodać Breadcrumb do WordPress?
W przypadku WordPress jeśli twój motyw nie posiada jeszcze breadcrumb można go dodać samodzielnie. Jak zwykle można to zrobić na kilka sposobów takich jak:
- instalacja wtyczki (pluginu) – np. Yoast SEO (czyli wtyczka do SEO)
- modyfikacja pliku header.php w motywie.
W tym wpisie zajmiemy się właśnie tym drugim przypadkiem.
Budujemy własny breadcrumb w motywie WordPress
Jak nietrudno się domyśleć będziemy modyfikować plik header.php. Plik ten jest domyślnym plikiem motywów WordPress, niektórzy twórcy motywów plik ten jednak dzielą na części więc będziesz musiał poszukać czasem właściwego pliku. Kolejnym wyzwaniem może być znalezienie właściwej lokalizacji dla naszego breadcrumb.
Może być on dodany np. pod tytułem strony lub nad nim. Tytuł strony powinien znajdować się w <h1>. Kiedy już mamy to ustalone możemy przejść do kolejnych kroków.
Zaczniemy od wypisania nazwy strony na której obecnie przebywamy.
<?php echo get_the_title(); ?>
W codex WordPress znaleźć można przykładowy Breadcrumb:
<div class="breadcrumb">
<?php
// if there is a parent, display the link
$parent_title = get_the_title( $post->post_parent );
if ( $parent_title != the_title( ' ', ' ', false ) ) {
echo '<a href="' . get_permalink( $post->post_parent ) . '" title="' . $parent_title . '">' . $parent_title . '</a> » ';
}
// then go on to the current page link
?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a> »
</div>
nie do końca sprawdza się on jednak jeżeli wpisy nie znajdują się na stronie głównej a nasze menu jest zmodyfikowane i składa się ze stron i wpisów.
W tym przykładzie wszystkie elementy są klikalne.
Na podstawie tego przygotowałam kod:
<div class="breadcrumb">
<?php
if (is_category( $category )){
$categories = get_the_category();
echo $categories[0]->cat_name . ' » ';
}
if (is_single()){
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator;
}
echo trim($output, $separator) .' » ';
}}
if ($post->post_parent > 0){// if there is a parent, display the link
$parent_title = get_the_title( $post->post_parent );
if ( $parent_title != the_title( ' ', ' ', false ) ) {
echo '<a href="' . get_permalink( $post->post_parent ) . '" title="' . $parent_title . '">' . $parent_title . '</a> » ';
} }
if (!is_category( $category ) ){
the_title();
echo " » ";
}
?>
</div>
Kod ten nie jest optymalny, ale umożliwia stworzenie Breadcrumb z ostatnim elementem nieklikalnym oraz pokazuje pełną ścieżkę do wpisu czy strony.
Kod pozwala jedynie cofnąć się o jeden poziom do góry, czyli pozyskać rodzica ale nie dziadka.
