Nawigacja breadcrumbs (zwana inaczej okruszkami) to element interfejsu użytkownika, który ułatwia śledzenie własnej pozycji w hierarchii dokumentów, folderów, stron internetowych lub paneli. Określenie okruszków chleba bierze się z baśni o Jasiu i Małgosi, którzy rozrzucali okruchy chleba po lesie aby znaleźć drogę do domu.
Implementację tego typu nawigacji można znaleźć nie tylko na stronach internetowych. Najpopularniejszym zastosowaniem nawigacji okruszkowej poza stronami internetowymi może być pasek adresu w eksploratorze Windows. Kliknięcie na nazwę folderu w ścieżce pozwala na szybkie przechodzenie do nadrzędnych folderów:
Nawigacja breadcrumb może być cenna z punktu widzenia użyteczności strony internetowej, tym bardziej jeżeli podstron jest stosunkowo wiele i istnieją pomiędzy nimi powiązania. Standardowa nawigacja okruszkowa to pozioma lista linków do stron, które użytkownik przemierzył na drodze do obecnej lokalizacji. Od lewej strony mamy najbardziej ogólny i nadrzędny element np. stronę główną.
Breadcrumbs w systemie WordPress
Mimo, że system WordPress umożliwia tworzyć hierarchiczną strukturę podstron oraz organizować wpisy w zagnieżdżone kategorie, nie posiada on natywnej funkcji, która generowałaby domyślną nawigację okruszkową dla aktualnie wyświetlanej strony internetowej. Jest to jednak jak najbardziej zrozumiałe, ponieważ nie ma jednego prawidłowego sposobu na generowanie okruszków i deweloperzy WordPressa musieliby z tego powodu umieścić ogrom opcji w panelu tylko po to aby uczynić z nich jakikolwiek pożytek.
Wyświetlanie elementu breadcrumbs wraz z obsługiwanymi przez Google danymi strukturalnymi to stosunkowo częsta potrzeba właścicieli stron internetowych. W tym wpisie zaproponuję rozwiązania, dzięki którym wygenerujemy okruszki w dowolnym miejscu w szablonach WordPress.
Tworzenie własnej funkcji generującej nawigację okruszkową
Breadcrumbs można konstruować na wiele sposobów. Jednym z nich może być uwzględnienie kategorii i stron nadrzędnych tzw. rodziców. Okruszki z lewej strony posiadają najczęściej link do strony głównej. W WordPressie, link do strony głównej można zdobyć na wiele sposobów np: get_option(’home’) lub site_url():
if (!is_home()) {
echo "<li class="breadcrumb-item"><a href="\".get_option("home")."\">"."Strona główna</a></li>";
}
Kiedy strona jest pojedynczym artykułem lub stroną kategorii to wówczas można wyświetlić kategorie wraz z zagnieżdżeniami:
if (is_category() || is_single()) {
the_category(" </li><li> ");
}
Kiedy dana podstrona jest stroną typu page wystarczy sprawdzić czy strona nie jest dzieckiem innej strony. ID do Stron nadrzędnych możemy wyświetlić za pomocą funkcji get_ancestors():
elseif ( is_page() ) {
if ( $post->post_parent ) {
$anc = get_post_ancestors($post->ID);
foreach ($anc as $ancestor) {
echo = '<li class="breadcrumb-item"><a href="' . get_permalink($ancestor) . '" title="' . get_the_title($ancestor) . '">' . get_the_title($ancestor) . '</a></li>';
}
echo get_the_title();
} else {
echo '<li class="breadcrumb-item"> ' . get_the_title() . '</li>';
}
Archiwa mogą wymagać posługiwania się jeszcze innymi funkcjami. W sieci jest wiele przykładów funkcji generującej nawigację okruszkową breadcrumbs bez wtyczki. Najbardziej dokładna implementacja jest według mnie w tym wątku: https://wordpress.stackexchange.com/questions/140362/wordpress-breadcrumb-depth
Wtyczki WordPress do tworzenia nawigacji okruszkowej
Breadcrumbs można umieścić w swoim szablonie za pomocą wielu wtyczek. Najpopularniejszymi wtyczkami, które potrafią wygenerować breadcrumbs są All In One SEO oraz Yoast SEO. Najbardziej wyspecjalizowaną wtyczką do generowania breacrumbs jest Breadcrumb NavXT, której autorem jest John Havlik.
Breadcrumb NavXT
Breadrumb NavXT to następca popularnej wtyczki Breadcrumb Navigation XT. Została napisana od podstaw aby dać jeszcze więcej możliwości i elastyczności. Wtyczka ta generuje ścieżki breadcrumbs, które można w dużym stopniu dostosować do własnych potrzeb. Do najważniejszych zalet tej wtyczki zaliczyłbym:
- możliwość generowania danych strukturalnych Schema.org typu BreadcrumbList w formacie RDFa,
- duża kontrola zarówno z poziomu strony ustawień oraz możliwość wpływania na jej działanie za pomocą akcji i filtrów,
- Kompatybilność z WPML.
Po zainstalowaniu i aktywowaniu wtyczki wyświetlamy okruszki w szablonie za pomocą:
<?php if(function_exists('bcn_display')) {
bcn_display();
} ?>
Wtyczka umożliwia nam dokładnie dostosować kod HTML okruszków co jest jej największą zaletą i sprawia, że to ona jest opisywana w tym artykule. Załóżmy, że musimy zakodować taką nawigację okruszkową w systemie WordPress:
<nav>
<ol class="py-2 my-3 breadcrumb">
<li class="breadcrumb-item"><a href="#">Strona główna</a></li>
<li class="breadcrumb-item"><a href="#">Oferta</a></li>
<li class="breadcrumb-item active">Jakaś usługa</li>
</ol>
</nav>
Na samym początku interesuje nas element <nav> i <ol>, który otacza wszystkie linki składające się na nawigację okruszkową. Jest to statyczny kod dlatego śmiało możemy umieścić go w szablonach składających się na motyw witryny WordPress. Tworzę plik breadcrumbs.php o takiej zawartości:
<nav aria-label="breadcrumb">
<ol class="py-2 my-3 breadcrumb">
<?php if(function_exists('bcn_display')) {
bcn_display();
} ?>
</ol>
</nav>
Teraz trzeba wprowadzić szablon linku do ustawień wtyczki:
Jak widać, NavXT pozwala dostosować różne warianty linku a także ustawić stronę nadrzędną dla postów własnego typu (ang. Custom Post Type). NavXT po prostu rozpoznaje własne typy postów i pozwala ustawić odrębne szablony dla linków różnego typu, taksonomii i archiwów. Ta szczegółowość jest jednak jak najbardziej uzasadniona, bo okruszki można rozwiązać na wiele sposobów i nie ma jednego wzorca jak je konstruować w ramach wpisów, stron czy własnego typu postu.
We wszystkich szablonach, w których chcę wykorzystać breadcrumbs wystarczy umieścić odniesienie do pliku breadcrumbs.php:
<?php get_template_part("breadcrumbs"); ?>
Taki proces pozwala zachować perfekcyjną zgodność pixel perfect w zakresie okruszków z wzorcowym szablonem HTML podczas jego konwersji na motyw WordPress:
Dane strukturalne w breadcrumbs NavXT
Aby zapewnić zgodność z danymi strukturalnymi należy przestrzegać kilku prostych zasad. Należy otoczyć funkcję bcn_display() o dodatkowy kod HTML:
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"></div>
Szablony linków są domyślnie ustawione tak aby spełnione zostały wymagania Schema.org w zakresie elementu BreadcrumbList. Wprowadzając własne edycje i klasy należy po prostu nie usuwać żadnych atrybutów property, typeof, content ani ich wartości:
Podsumowanie
Nawigacja okruszkowa to przydatne narzędzie dla użytkowników twojej witryny WordPress. Podczas kiedy zdecydowanie nie ma sensu stosować jej na prostej stronie z blogiem (bo wygląda to po prostu komicznie) warto ją wdrożyć kiedy twoja witryna posiada już własne typy postów, kategorie lub zagnieżdżasz strony w atrybutach przy użyciu pola „Strona nadrzędna”. Breadcrumbs polepszają UX i sprawność poruszania się po stronie przeciętnemu użytkownikowi Twojej strony.
Warto pamiętać, że okruszki uprawniają nas do używania danych strukturalnych według wzoru BreadcrumbList co usprawnia wyświetlanie się adresów URL w wynikach wyszukiwania a w praktyce okazują się one czytelniejsze. Dzięki breadcrumbs każda strona podrzędna zawiera link do strony nadrzędnej a to w pewnym stopniu może automatycznie poprawić jakość linkowania wewnętrznego i w skrajnych przypadkach poprawić pozycje w wyszukiwarce.
Odpowiedz lub skomentuj