Jak dodać bułkę tartą do swojej witryny WordPress?

Termin „bułka tarta” odnosi się do skutecznego narzędzia do nawigacji w witrynie, które (jak nauczyli nas Jaś i Małgosia) ma pomóc prześledzić kroki do „domu” witryny (lub strony głównej). Pozwalają użytkownikom zobaczyć, w jaki sposób bieżąca strona pasuje do całej struktury witryny, zapewniając wbudowaną ścieżkę linków (lub etykiet) prowadzących z powrotem do strony głównej.

Strona produktu Home Depot z bułką tartą

Bułka tarta jest w rzeczywistości ważniejsza dla Twojej witryny WordPress, niż mogłoby się wydawać. Nie tylko poprawiają one wrażenia użytkownika, ale także mogą dać Twojej witrynie skok w rankingu wyszukiwania. Google lubi ten element strukturalny w witrynie, a odwiedzający będą mieli kluczową pomoc nawigacyjną, gdy natkną się na jedną z Twoich stron organicznie (obniżając współczynnik odrzuceń).

Wydawałoby się, że dodanie tak zintegrowanego systemu nawigacji do witryny byłoby trudne, ale w rzeczywistości jest to całkiem proste z użyciem wtyczki. W rzeczywistości, jeśli korzystasz z wtyczki Yoast SEO, masz przewagę, ponieważ funkcja bułki tartej jest już wbudowana w Yoast! A dodawanie bułki tartej przez Yoast jest zdecydowanie jedną z preferowanych metod. Oprócz Yoast SEO, wtyczka Breadcrumb NavXT to kolejna świetna opcja, która jest wysoce konfigurowalna i działa również dobrze z naszym własnym motywem Divi.

Subskrybuj nasz kanał YouTube

Jak dodać bułkę tartą do swojej witryny WordPress za pomocą Yoast

Aby dodać bułkę tartą do swojej witryny WordPress za pomocą Yoast SEO, musisz wykonać trzy proste kroki:

• Zainstaluj i aktywuj wtyczkę Yoast SEO
• Dodawanie fragmentu kodu bułki tartej do motywu WordPress
• Włącz/skonfiguruj bułkę tartą bułkę tartą Yoast w ustawieniach wtyczki

Zainstaluj i aktywuj wtyczkę Yoast SEO

Aby zainstalować wtyczkę Yoast SEO, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Wtyczki> Dodaj nowy. Następnie wyszukaj repozytorium WordPress dla „yoast”. Gdy zobaczysz wtyczkę Yoast SEO, kliknij, aby zainstalować i aktywować wtyczkę.

Dodaj fragment kodu bułki tartej do swojego motywu potomnego WordPress

Następnie musimy dodać krótki fragment kodu do plików motywu WordPress. Tak więc, jeśli jeszcze tego nie zrobiłeś, dobrym pomysłem jest utworzenie motywu potomnego. W tym przykładzie pokażę, jak dodać fragment kodu bułki tartej do domyślnego motywu WordPress TwentyNineteen. Możesz dodać kod do dowolnego pliku/szablonu motywu, ale w większości przypadków będziesz chciał dodać go do pliku single.php (aby był wyświetlany na wszystkich postach), pliku page.php (aby był wyświetlany na wszystkich stronach ) lub do pliku header.php (aby pokazać się w całej witrynie).

W tym przykładzie zamierzam dodać kod bułki tartej do pliku header.php mojego motywu potomnego. Po skopiowaniu pliku header.php z motywu nadrzędnego otwórz, aby edytować plik w wybranym edytorze kodu.

Następnie na samym dole pliku header.php dodaj następujący fragment kodu php dostarczony przez Yoast, aby aktywować funkcję Breadcrumbs:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Spowoduje to wyświetlenie bułki tartej bezpośrednio pod nagłówkiem wszystkich stron, co jest typowym miejscem dla bułki tartej.

Włącz i skonfiguruj bułkę tartą Yoast w ustawieniach wtyczki

Po dodaniu fragmentu kodu do motywu WordPress Child wystarczy aktywować bułkę tartą w ustawieniach wtyczki Yoast SEO. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress i przejdź do SEO> Wygląd wyszukiwania, a następnie kliknij zakładkę Bułka tarta. W ustawieniach bułki tartej upewnij się, że włączyłeś bułkę tartą, przełączając opcję na „włączone”. Następnie możesz skonfigurować ustawienia okruszków zgodnie ze swoimi potrzebami. Możesz również wybrać taksonomię, która będzie wyświetlana w bułce tartej dla Twojego posta. W tym przykładzie ustawię moje posty tak, aby wyświetlały kategorie w bułce tartej.

A teraz chodźmy dalej i sprawdźmy, jak wyglądają bułka tarta na jednym z postów, które stworzyłem w motywie TwentyNineteen.

Oto jak wygląda post przed włączeniem bułki tartej.

Oto jak wygląda post po włączeniu bułki tartej. Ten konkretny przykład postu ma kategorię („WordPress”) i kategorię nadrzędną („Projektowanie stron internetowych”), aby pokazać taksonomię kategorii bułki tartej, którą wybrałem w ustawieniach bułki tartej.

Może być konieczne dostosowanie stylu bułki tartej za pomocą zewnętrznego CSS. Aby to zrobić, możesz użyć identyfikatora CSS „bułka tarta”, który został zawarty w kodzie php. Otwórz plik style.css swojego motywu podrzędnego (lub możesz go dodać w Theme Customizer w sekcji Dodatkowy CSS) i dodaj następujące elementy:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

W przypadku motywu TwentyNineteen mogę chcieć dopasować margines tekstu nagłówka, dodając następujący niestandardowy kod CSS:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

Jeśli chcesz mieć większą kontrolę nad konkretną lokalizacją swoich okruchów chleba, możesz również użyć poniższego kodu do poszczególnych postów lub stron.

[wpseo_breadcrumb]

Dodawanie bułki tartej do witryny WordPress za pomocą bułki tartej NavXT

Jeśli z jakiegoś powodu nie chcesz instalować Yoast SEO lub szukasz innej prostej opcji, wtyczka Breadcrumb NavXT jest doskonałym wyborem.

Aby zainstalować wtyczkę, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Wtyczki> Dodaj nowy. Następnie wyszukaj w repozytorium WordPressa „breadcrumb navxt”. Gdy zobaczysz wtyczkę, kliknij, aby ją zainstalować i aktywować.

Aby wywołać bułkę tartą tak, aby wyświetlały się w Twojej witrynie, możesz użyć wbudowanego widżetu Breadcrumb NavXT dostępnego na stronie widżetów. Umożliwi to przeciągnięcie widżetu do różnych obszarów widżetów dostępnych w motywie. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Wygląd> Widgety. Następnie przeciągnij widżet do obszaru widżetów lub swojego wyboru i zaktualizuj ustawienia widżetu.

W tym przykładzie używam motywu Divi, aby wyświetlić bułkę tartą u góry mojego paska bocznego. Oto jak to wygląda na poście.

Podobnie jak w przykładzie Yoast Breadcrumb, możesz również wywołać ścieżkę breadcrumb do swojej witryny, dodając niezbędny kod do motywu potomnego. Oto kod, który udostępniają, zgodny z listą nawigacyjną schema.org:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Ponieważ używam motywu Divi w tym przykładzie, zamierzam dodać kod do pliku Single.php mojego motywu Divi Child tuż nad tagiem artykułu. Spowoduje to wyświetlenie bułki tartej u góry wszystkich moich postów.

Oto jak wygląda post po dodaniu kodu.

Konfiguracja bułki tartej za pomocą ustawień wtyczki

Wtyczka Breadcrumb NavXT ma kilka zaawansowanych opcji konfiguracji bułki tartej. Możesz dostosować cały szablon bułki tartej do różnych taksonomii i nie tylko. Możesz uzyskać dostęp do tych ustawień z pulpitu nawigacyjnego WordPress, przechodząc do Ustawienia > Breadcrumb NavXT.

Stylizacja bułki tartej

Jeśli chcesz nadać styl bułce tartej, możesz wskazać klasę o nazwie „bułka tarta”, która jest zawarta w kodzie.

Po prostu dodaj następujący kod CSS do pliku style.css motywu podrzędnego lub do dodatkowego kodu CSS dostosowania motywu:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Jeśli chcesz użyć widżetu bułki tartej z motywem Divi, możesz również użyć modułu paska bocznego Divi, aby dodać stylizację do bułki tartej w Divi Builder.

Końcowe przemyślenia

Bułka tarta jest ważną częścią witryny zarówno pod względem użyteczności, jak i SEO. Jeśli więc zastanawiasz się nad dodaniem bułki tartej do swojej witryny WordPress, sugeruję zacząć od metod zapewnianych przez wtyczki wymienione w tym artykule (Yoast SEO i Breadcrumb NavXT). Najbardziej sensowne jest używanie bułki tartej Yoast, jeśli już korzystasz z ich wtyczki SEO, ponieważ jest ona już do Twojej dyspozycji. Jednak Breadcrumb NavXT jest również opcją wysoce konfigurowalną. Jasne, być może będziesz musiał uzyskać dostęp do plików motywów, ale w sumie proces jest prosty. Jeśli już, mam nadzieję, że pomoże to złagodzić ból związany z otrzymywaniem bułki tartej na własnej witrynie WordPress.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!