Breadcrumbs (ang. okruszki chleba) to rodzaj nawigacji, która mówi odwiedzającemu w jakim miejscu na witrynie się znajduje. Zwyczajowo stosowana na początku treści wyświetla krok po kroku ścieżkę, którą można dotrzeć do obecnie wyświetlanej strony, a elementy są poukładane w sposób hierarchiczny – począwszy od strony głównej, a kończąc na docelowym adresie url.

Czy dodawać nawigację okruszkową do strony/sklepu ?

Według nas, na każdej witrynie internetowej o bardziej złożonej i rozbudowanej strukturze breadcrumbs są niezbędne! Proste, minimalistyczne strony o płaskiej strukturze (z małą ilością podstron) nie cechują się skomplikowaną nawigacją, wobec czego nie ma potrzeby stosowania dodatkowej formy kierowania użytkownikiem po stronie, gdyż jest w stanie zrobić to sam.
W przypadku większych stron internetowych, które posiadają mocno rozwinięte blogi, katalogi produktów lub usług czy sklepy online z wieloma kategoriami, podkategoriami i zróżnicowanymi produktami, posiadanie tzw. ‘okruszków’ uważamy jako absolutny mus.

Zalety stosowania breadcrumbs

Wyróżniamy kilka istotnych zalet stosowania nawigacji okruszkowej na witrynie:

  1. Znacząco poprawiamy User Experience na naszej stronie. Co to oznacza? Korzystanie z serwisu jest dla użytkownika łatwiejsze, bardziej intuicyjne i wygodne co bezpośrednio przekłada się na jego wrażenia z odwiedzin. Im bardziej pozytywne, tym większa szansa, że zainteresuje się innymi tematami na witrynie, odwiedzi nas ponownie lub poleci znajomym. Dodatkowo za pomocą jednego kliknięcia mamy możliwość szybkiej nawigacji do strony, która znajduje się kilka poziomów wyżej, co znacznie przyspiesza poruszanie się użytkownika po serwisie.

    Breadcrumbs-w-Wordpress
  2. Poprawiamy pozycjonowanie oraz SEO ułatwiając wyszukiwarce Google indeksowanie naszej witryny i sprawdzenie jej budowy, rozbudowujemy również sieć linkowania wewnętrznego (czyli odsyłanie na inne podstrony w obrębie jednej domeny).
  3. Odpowiednie przygotowane breadcrumbs w bardziej atrakcyjny sposób prezentują się nie tylko na stronie internetowej ale również w wyszukiwarce.

    Breadcrumbs-w-Wordpress

Jak dodać breadcrumbs do WordPressa?

Domyślnie w WP nie ma funkcji generowania i wyświetlania nawigacji okruszkowej, nie oznacza to jednak, że stworzenie jej stanowi duży problem. Poza wieloma wtyczkami w repozytorium WordPressa, które zrobią to w ciągu kilku chwil, breadcrumbs możemy samodzielnie umieścić na wybranych stronach naszego CMS-a jednocześnie dostosowując ich wygląd według własnego uznania.

Poniżej przedstawiamy kod, który należy umieścić w pliku functions.php motywu głównego lub motywu potomnego. Krótką instrukcję jak umieścić kod w motywie potomnym znajdziecie w artykule o tworzeniu motywu potomnego w WordPress.

function get_breadcrumb() {
echo '<a href=''.home_url().'' rel='nofollow'>Strona główna</a>';
if (is_category() || is_single()) {
echo ' » ';    // własny punktor lub inny znak
the_category(' • ');
if (is_single()) {
echo '  »  ';    // własny punktor lub inny znak
the_title();
}
} elseif (is_page()) {
echo ' » ';    // własny punktor lub inny znak
echo the_title();
} elseif (is_search()) {
echo ' » Wyniki wyszukiwania dla… ';    // własny punktor lub inny znak
echo ''<em>';
echo the_search_query();
echo '</em>'';
}
}

Jak wyświetlić breadcrumbs na stronie?

Po umieszczeniu funkcji i zapisaniu jej na serwerze musimy sprawić, że breadcrumbs faktycznie pojawią się nam na stronie w odpowiednim miejscu. W zależności od tego na jakich rodzajach stron chcemy wyświetlić nawigację okruszkową (np. we wpisie na bloga, na karcie produktu, podstronie kategorii), tam należy wpisać taki kod, który wyświetla wynik stworzonej przez nas funkcji:

<div class="breadcrumbs">

</div>

Odwiedź nas na Facebooku i Instagramie,
-BSIDEWORK Team #innowacjewpraktyce