Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak wyświetlić okruszki odnośników nawigacyjnych w WordPress?

Jeśli szukasz sposobu na ułatwienie nawigacji w witrynie WordPress, zalecamy dodanie linków breadcrumb.

Okruszki nawigacyjne informują użytkowników, gdzie znajdują się na witrynie internetowej w stosunku do strony głównej. Ścieżka okruszków jest również wyświetlana w wynikach wyszukiwania, co wyróżnia Twoją witrynę internetową.

Używamy okruszków chleba na naszych własnych stronach internetowych i odkryliśmy, że ta funkcja ułatwia czytelnikom poruszanie się po różnych stronach. W tym artykule pokażemy, jak wyświetlać linki nawigacyjne w WordPress.

How to display breadcrumbs navigation in WordPress

Co to jest nawigacja po okruszkach i dlaczego jest potrzebna?

Nawigacja okruszkowa to taksonomia używana do opisania hierarchicznego menu nawigacyjnego przedstawionego jako ścieżka odnośników. Jest często używana jako dodatkowa nawigacja, która pozwala użytkownikom przejść w górę w hierarchii stron witryny internetowej.

Navigational links preview in WPBeginner

Okruszki odnośników nawigacyjnych różnią się od domyślnego systemu menu nawigacyjnego w WordPress.

Nawigacja Breadcrumb pomaga użytkownikom poruszać się po witrynie i pomaga wyszukiwarkom zrozumieć strukturę i hierarchię linków na stronie internetowej.

Jeśli twoje okruszki są skonfigurowane we właściwy sposób, wyszukiwarki takie jak Google będą wyświetlać je wraz z tytułem strony w wynikach wyszukiwania. Dzięki temu Twoja witryna internetowa będzie lepiej widoczna w wynikach wyszukiwania i zwiększy się współczynnik klikalności.

Breadcrumb navigation links in search results

Metody opisane w tym przewodniku pomogą ci prawidłowo skonfigurować okruszki za pomocą znaczników schematu. Schema to inteligentny kod znaczników, który pomaga Google zidentyfikować twoje okruszki, aby były wyświetlane w wynikach wyszukiwania.

Powiedziawszy to, przyjrzyjmy się, jak dodać okruszki do odnośników nawigacyjnych w WordPressie. Pokażemy ci dwie metody i możesz wybrać tę, która najbardziej ci odpowiada:

Ta metoda jest łatwiejsza i zalecana dla wszystkich użytkowników WordPressa.

W tej metodzie będziemy używać All in One SEO for WordPress, która jest najlepszą wtyczką WordPress SEO na rynku. Pomaga ona w łatwym ulepszeniu twojego WordPress SEO bez żadnych umiejętności technicznych. Posiada również łatwą w użyciu funkcję okruszków.

Uwaga: Dostępna jest również darmowa wersja All in One SEO z ograniczonymi funkcjami, w tym okruszkami. Zalecamy jednak uaktualnienie do płatnej wtyczki, aby uzyskać dostęp do funkcji premium, takich jak asystent odnośników, zaawansowane mapy witryn i inne.

Po włączaniu zostaniesz przeniesiony do kreatora konfiguracji wtyczki. Możesz postępować zgodnie z instrukcjami wyświetlanymi na ekranie, aby skonfigurować wtyczkę.

All in One SEO setup

Potrzebujesz pomocy z konfiguracją? Zobacz nasz poradnik krok po kroku, jak zainstalować i skonfigurować All in One SEO.

Następnie należy przejść na stronę All in One SEO ” Ustawienia ogólne i przełączyć się na kartę „Okruszki”.

Enable breadcrumbs in AIOSEO

Okruszki schematu są automatycznie dodawane przez All in One SEO do kodu twojej witryny internetowej, aby wyszukiwarki mogły je znaleźć.

Jeśli jednak chcesz wyświetlać na swojej witrynie internetowej także odnośniki nawigacyjne w postaci okruszków, musisz włączyć opcję „Enable Breadcrumbs”.

Przełączenie przełącznika pozwala zobaczyć różne ustawienia wyświetlania okruszków, których możesz użyć na swojej witrynie internetowej WordPress.

Show breadcrumbs on website options

Istnieją cztery sposoby wyświetlania okruszków nawigacji na twojej witrynie internetowej WordPress.

1. Dodawanie nawigacji po okruszkach za pomocą krótkiego kodu

Metoda krótkiego kodu jest łatwa i umożliwia wyświetlanie linków nawigacyjnych breadcrumb w postach i stronach WordPress lub stronach produktów w sklepie internetowym.

Po prostu edytuj wpis, stronę lub produkt i dodaj następujący krótki kod w miejscu, w którym chcesz wyświetlić ścieżkę nawigacji okruszków:

[aioseo_breadcrumbs]

Jeśli korzystasz z domyślnego edytora bloków, to krótki kod zostanie automatycznie przekonwertowany na blok Shortcode.

Add shortcode for breadcrumbs

Możesz teraz zapisać swój wpis lub stronę i wyświetlić podgląd, aby zobaczyć menu nawigacyjne z okruszkami w działaniu.

Oto jak to wyglądało na naszej witrynie testowej.

Preview of shortcode breadcrumbs navigational links

2. Dodawanie nawigacji po okruszkach za pomocą bloku Gutenberg

Teraz, jeśli nie chcesz korzystać z opcji krótkiego kodu lub nie pamiętasz krótkiego kodu, możesz wyświetlić nawigację po okruszkach za pomocą bloku AIOSEO – Breadcrumbs.

Wystarczy edytować wpis lub stronę, na której ma być wyświetlana nawigacja po okruszkach i dodać blok AIOSEO – Breadcrumbs.

AIOSEO breadcrumbs block

Wtyczka będzie wtedy wczytywać podgląd na żywo twoich odnośników nawigacyjnych okruszków i wyświetlać je w obszarze treści.

Nie zapomnij zaktualizować lub opublikować swoich zmian.

AIOSEO breadcrumbs block preview

3. Dodawanie nawigacji po okruszkach za pomocą widżetu

Powyższe dwie metody wymagają dodania krótkiego kodu lub bloku w każdym wpisie lub stronie, na której mają być wyświetlane odnośniki nawigacji okruszkowej.

A gdybyś chciał automatycznie wyświetlać okruszki dla każdego wpisu lub strony?

Widżet AIOSEO Breadcrumbs pozwala to łatwo zrobić.

Wystarczy przejść do strony Wygląd ” Widżety i dodać blok widżetu AIOSEO – Okruszki chleba. Możesz dodać go do panelu bocznego twojej witryny, stopki lub dowolnego obszaru widżetów.

Add AIOSEO breadcrumbs to widget

Możesz podać tytuł widżetu lub pozostawić go pustym, jeśli wolisz.

Nie zapomnij kliknąć przycisku „Aktualizuj”, aby zapisać twoje ustawienia.

Enter breadcrumbs widget title

Możesz teraz przejść na twoją witrynę internetową i zobaczyć menu nawigacji z okruszkami na wszystkich wpisach i stronach.

4. Dodawanie nawigacji po okruszkach za pomocą kodu

Ta metoda pozwala wyświetlać odnośniki nawigacyjne okruszków dokładnie tam, gdzie chcesz. Wymaga ona jednak dodania kodu do plików twojego motywu WordPress.

Jeśli jeszcze tego nie zrobiłeś, to nie zapomnij zapoznać się z naszym artykułem na temat dodawania fragmentów kodu w WordPress.

Po pierwsze, musisz zdecydować, gdzie wyświetlać linki breadcrumb. Najczęstsze miejsce znajduje się pod indywidualnym tytułem postu, strony lub produktu.

Motywy WordPress wykorzystują pliki szablonów do wyświetlania różnych sekcji witryny. Przykładowo, wiele motywów korzysta z pliku o nazwie content-single.php znajdującego się w folderze template-parts motywu.

Zobacz naszą ściągawkę, aby dowiedzieć się , które pliki należy edytować w motywie WordPress.

Następnie należy edytować plik motywu za pomocą klienta FTP. Instrukcje znajdują się w naszym przewodniku na temat korzystania z FTP do przesyłania plików do WordPress.

Następnie umieść poniższy kod w miejscu, w którym chcesz wyświetlać linki nawigacyjne breadcrumb:

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

Nie zapomnij zapisać swoich zmian i przesłać pliku z powrotem do witryny internetowej.

Możesz teraz przejść na twoją witrynę internetową, aby zobaczyć odnośniki okruszków w działaniu.

Preview of  breadcrumbs navigational links

Domyślnie All in One SEO używa szablonu do wyświetlania twoich odnośników nawigacyjnych. Zawiera on odnośnik do twojej strony głównej, kategorii, strony nadrzędnej i tytułu wpisu lub strony oddzielonych symbolem „”.

Możesz to zmienić, przechodząc na stronę All in One SEO ” Ustawienia ogólne i przechodząc do karty „Okruszki”. Następnie przewiń w dół do sekcji Ustawienia okruszków.

AIOSEO breadcrumbs settings

Z tego miejsca można zmienić separator, pokazać lub ukryć odnośnik do strony głównej, dodać prefiks i nie tylko.

Po zakończeniu nie zapomnij zapisać swoich ustawień.

Metoda 2: Dodanie nawigacji okruszkowej za pomocą Breadcrumb NavXT

Ta metoda może być używana z dowolną inną wtyczką WordPress SEO. Jest łatwy w użyciu, jeśli masz zgodny motyw, ale jeśli go nie masz, musisz edytować pliki motywu, aby wyświetlać twoje okruszki odnośników nawigacyjnych.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Breadcrumb NavXT. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść na stronę Ustawienia ” Okruszki NavXT, aby skonfigurować ustawienia wtyczki.

Breadcrumbs NavXT settings

Domyślne ustawienia powinny działać dla większości witryn internetowych. Można jednak dostosować ustawienia do własnych potrzeb.

Strona ustawień jest podzielona na różne sekcje. Na karcie ustawień ogólnych możesz zmienić styl i ustawienia twoich okruszków.

Zauważysz również, że te szablony linków używają znaczników Schema. org w tagu odnośnika.

Zakładka typów treści w ustawieniach wtyczki pozwala skonfigurować okruszki odnośników dla wpisów, stron i dowolnych własnych typów treści.

Post types breadcrumbs settings

Możesz wybrać sposób wyświetlania hierarchii twoich wpisów. Domyślnie wtyczka będzie używać hierarchii „Tytuł witryny > Kategoria > Tytuł wpisu”.

Kategorie można zastąpić tagami, datami lub rodzicem postu i zmienić separator.

Choose post hierarchy

Karty Taksonomie i Różne mają podobne szablony dla twoich odnośników nawigacji po okruszkach.

Nie zapomnij zapisać swoich zmian po zakończeniu.

Breadcrumb NavXT oferuje wiele sposobów wyświetlania odnośników nawigacyjnych typu breadcrumb na twojej witrynie internetowej.

1. Wyświetlanie nawigacji okruszkowej z pomocą techniczną motywu

Niektóre z najpopularniejszych motywów WordPress mają wbudowaną opcję wyświetlania nawigacji okruszkowej, wybierając Breadcrumb NavXT lub twoją wtyczkę WordPress SEO jako źródło.

Na przykład, jeśli korzystasz z Astry, możesz przejść do strony Wygląd ” Konfigurator i kliknąć menu „Okruszki”.

Następnie w menu rozwijanym „Pozycja nagłówka” wybierz miejsce, w którym mają być wyświetlane twoje okruszki.

W polu „Breadcrumb Source” należy wybrać opcję „Breadcrumb NavXT”.

Adding breadcrumbs with theme customizer

Jeśli przeglądasz pojedynczy wpis lub stronę, zobaczysz podgląd na żywo twoich odnośników nawigacyjnych.

Nie zapomnij kliknąć przycisku „Opublikuj”, aby zapisać twoje zmiany.

2. Wyświetlanie odnośników nawigacyjnych z blokiem ścieżki okruszków

Można również wyświetlać odnośniki nawigacyjne w postaci okruszków, korzystając z bloku Ścieżka okruszków.

Po prostu przejdź do edytora treści WordPress, a następnie dodaj blok Ścieżka okruszków w miejscu, w którym chcesz wyświetlać odnośniki nawigacyjne.

Add breadcrumb trail block

Następnie możesz zaktualizować lub opublikować twoją treść.

Następnie przejdź na twoją witrynę internetową, aby zobaczyć odnośniki nawigacyjne w działaniu.

Breadcrumb trail preview

3. Dodawanie nawigacji po okruszkach za pomocą widżetu

Wtyczka udostępnia również widżet, za pomocą którego można wyświetlać nawigację po okruszkach na panelu bocznym lub w dowolnym obszarze przystosowanym do widżetów.

Najpierw przejdź do strony Wygląd ” Widżety i dodaj blok widżetu „Ścieżka okruszków” do panelu bocznego lub stopki twojej witryny.

Add breadcrumb trail widget

Domyślne ustawienia widżetu będą działać dla większości witryn internetowych, ale można je zmienić w razie potrzeby. Na przykład, możesz chcieć ukryć ścieżkę na stronie głównej.

Nie zapomnij kliknąć przycisku „Aktualizuj”, aby zapisać twoje ustawienia widżetu.

4. Dodawanie nawigacji po okruszkach za pomocą kodu

Wtyczka oferuje również metodę kodu do wyświetlania odnośników nawigacyjnych okruszków dla zaawansowanych użytkowników.

Najpierw musisz połączyć się z twoją witryną WordPress za pomocą klienta FTP. Następnie przejdź do obecnego katalogu motywów WordPress znajdującego się w katalogu /wp-content/themes/.

Motywy WordPress używają plików szablonów do wyświetlania różnych sekcji twojej witryny internetowej. Na przykład wiele motywów używa pliku o nazwie content-single.php znajdującego się w katalogu template-parts twojego motywu.

Zobacz naszą ściągawkę, aby dowiedzieć się , które pliki należy edytować w motywie WordPress.

Otwórz plik szablonu, aby go edytować, a następnie umieść poniższy kod w miejscu, w którym chcesz wyświetlić ścieżkę okruszków:

<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>

Nie zapomnij zapisać swoich zmian i przesłać pliku z powrotem do witryny internetowej.

Możesz teraz przejść na twoją witrynę internetową, aby zobaczyć ścieżkę odnośników breadcrumb w działaniu.

Breadcrumb trail preview

Film instruktażowy

Subscribe to WPBeginner

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyświetlać linki nawigacyjne breadcrumb w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tego, jak wyświetlać różne menu zalogowanym użytkownikom w WordPress lub jak dodać mega menu na swojej stronie WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

39 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dayo Olobayo

    Thanks for this informative article. I added the aioseo breadcrumbs widget and it automatically shows breadcrumbs for my blog posts. However, I notice it displays breadcrumbs on the home page which I don’t like. Is there a way to fix that please?

    Also, I notice from the screenshot above that your breadcrumbs looks appealing compared to what I have on my blog. Is there a way to customize it?

    PS: I use the aioseo lite plugin.

    • WPBeginner Support

      It would depend on what method you used to add breadcrumbs to your site for how to remove it from the homepage specifically. For our breadcrums those are currently something we have styled specifically with our theme.

      Administrator

      • Dayo Olobayo

        About the breadcrumbs showing up on my homepage, I contacted aioseo support and they provided me with a CSS code that fixed the problem. Thanks for your response.

  3. Steven Jæger

    I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.

    My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.

    • WPBeginner Support

      You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.

      Administrator

  4. Surjeet Kumar Verma

    Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrator

  5. Rintesh Roy

    The plugin is not at all documented. At least, I could not find any.

    • WPBeginner Support

      The documentation for the plugin is linked on the plugin’s page :)

      Administrator

  6. Elizabeth Morgan

    I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:

    „Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.

    syntax error, unexpected '<', expecting end of file"

    What do I do about this?

  7. Varun

    Thank you finally problem is solved

    • WPBeginner Support

      Glad our recommendations could help :)

      Administrator

  8. Hammad Rashid

    The plugin is awesome…. Thank You!

    • WPBeginner Support

      Glad we could recommend it :)

      Administrator

  9. Andres

    Hi WPBeginner,

    Amazing post.

    I wonder the following.

    How do you make the „home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.

    I mean, when you go „home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.

    Thanks a lot for your time.

    • Editorial Staff

      In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.

      Administrator

  10. Manish Ransubhe

    Hello, I am not using any plugin and I have never enabled Breadcrumbs.

    Why my search Result showing breadcrumbs help me to disable this

    Thank you

    • Ravi Singh

      same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.

  11. Dua Centre

    I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?

  12. Walter

    Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.

  13. DUy

    Is it posible to change the font size and the font color of Breadcrumb?

    thanks

  14. Sameer

    Hello,

    I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.

    Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?

  15. Joshua

    Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using „insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.

    Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.

  16. juan luis

    Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?

    • WPBeginner Support

      Hi Juan,

      If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.

      Administrator

  17. Nate Balcom

    By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.

  18. Nate Balcom

    Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.

  19. Anna

    My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.

    I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?

    • subhan

      Just copy the header.php to the the generate press child theme forlder.

  20. Sunil

    Thanks for great post. Cheers!

  21. Raymond Chukwuman

    Thank you so much. It is really working on my website God bless you

  22. Abiodun

    I followed the steps, didn’t really work for me with the posts. I just saw the 'Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO

    • WPBeginner Support

      Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.

      Administrator

      • Abiodun

        It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?

        • Michelle

          Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as 'child’ of the articles page, and the articles page as 'child’ of the homepage. you can do it in the page editor.

  23. JOY

    Great! This is really useful! Thanks a lot! :)

  24. malek

    thanks you , really usefull

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.