Zainstaluj kod Breadcrumb navxt na swoim własnym cmsie. Jak zrobić bułkę tartą bez wtyczki Breadcrumb NavXT? Generowanie bułki tartej za pomocą wtyczki Yoast SEO

Pozdrowienia, drodzy czytelnicy bloga. W tym artykule pokażę jak zrobić pasek nawigacyjny, który będzie widoczny u góry przed nagłówkami artykułów. Dzięki temu łańcuchowi nawigacji jest to dla mnie proste wtyczka dlaWordPressaBułka tartaNavXT, co oznacza „bułka tarta”.

Wtyczka otrzymała taką nazwę, ponieważ jej autorowi, Johnowi Havlikowi, spodobała się bajka o braciach Grimm, w której chłopiec Jaś posypał bułką tartą, aby znaleźć drogę powrotną. To prawda, bardziej logiczne byłoby nazwanie wtyczki „kamykami”, ponieważ według opowieści z bajki Jaś i Małgosia nie mogli znaleźć drogi powrotnej, ponieważ bułka tarta została zjadana przez ptaki. No cóż, nie o to chodzi, najważniejsze jest to, że ta wtyczka pomoże odwiedzającym nie zgubić się na Twojej stronie i poinformuje Cię dokładnie, gdzie i w jakiej kategorii (części witryny) się aktualnie znajdują.

Dodatkowo wtyczka Breadcrumb NavXT pomaga równomiernie rozłożyć ciężar statyczny na wszystkie strony serwisu, co jest bardzo ważne dla jego promocji Wyszukiwarki. Na wypadek, gdybyś tak myślał linkowanie wewnętrzne(optymalizacja) strony nie jest aż tak ważna, polecam przeczytać tę, dzięki której zmienisz swój punkt widzenia.

Dlatego w tym artykule pokażę, jak to wdrożyć tę nawigację na swojej stronie internetowej lub blogu za pomocą Wtyczka Breadcrumb NavXT , jak również prosty kod.

Instalowanie wtyczki chlebowej Bułka tarta NavXT.

1 ) Jak zwykle pobierz wtyczkę i wgraj ją na bloga, aktywuj.

2 ) Teraz musimy umieścić specjalny kod w miejscu, w którym chcesz zobaczyć linię bułka tarta. Aby to zrobić, przejdź do „ wygląd» „edytor” i wybierz plik, do którego wkleisz kod. Najczęściej kod wtyczki wstawiany jest do pliku „single Entry” (single.php) bezpośrednio przed lub po tytule artykułu. Jeśli w ogóle nie rozumiesz kodów, po prostu poszukaj dwóch tagów na samym początku kodu

I , które odpowiadają za wyświetlanie nazw publikacji. Mój kod wygląda następująco:</p> <p><b><h2>" tytuł="(!JĘZYK:<?php the_title (); ?>!}"><?php the_title (); ?></h2> </b></p> <p>Gdy znajdziesz coś podobnego, natychmiast wklej przed nim ten kod nawigacyjny i zaktualizuj plik.</p> <p><b><?php </b><br><br><b>(bcn_display();)</b><br><b>?> </b></p> <p>Swoją drogą, jeśli nie podoba Ci się nawigacja pozioma i chcesz, aby była wyświetlana w pionie, to musisz wstawić ten kod zamiast poprzedniego.</p> <p><b><?php if (function_exists ("bcn_display_list")) </b><br><b>{ </b><br><b>bcn_display_list();</b><br><b>}?> </b></p> <p>Dobrze, jak widać, masz teraz pasek nawigacyjny, ale bez wyświetlania daty publikacji na samym końcu, jak ja. Jeśli chcesz dołączyć go do swojego paska nawigacyjnego, wystarczy, że znajdziesz w swoim motywie kod odpowiedzialny za wyświetlanie daty publikacji i dodasz go po kodzie nawigacyjnym.</p> <p><b><?php </b><br><b>if (funkcja_istnieje("bcn_display"))</b><br><b>(bcn_display();)</b><br><b>?><span>> <span>Opublikowany<?php the_time (" j F Y"); ?></span></div> </span> </b></p> <p>Jeżeli coś nie jest jasne to > - wyświetla mi taką strzałkę > i litera j - oznacza dzień, F - miesiąc, Y - rok. Myślę, że po takich wyjaśnieniach znalezienie takiego kodu nie będzie dla Ciebie trudne.</p> <p>OK, teraz spójrzmy na projekt. Sam styl czcionki i kolor łączy paska nawigacji są pobierane ze stylów motywu, ale jeśli Ci się nie podobają i chcesz je zmienić, po prostu dodaj tę dodatkową linię do kodu, który wkleiliśmy powyżej.</p> <p><b><divclass="breadcrumb"></div> </b></p> <p>W rezultacie powinieneś otrzymać taki kod:</p> <p><b><divclass="breadcrumb"> </b> </span><br><b><?php </b><br><b>if (funkcja_istnieje("bcn_display"))</b><br><b>{ </b><br><b>bcn_display();></b><br><b>} </b><br><b>?> </b><br><b></div> </b> </p> <p>Teraz przejdź do „edytora wyglądu” i otwórz plik „arkusza stylów” (style.css). I wklej <a href="https://rustrackers.ru/pl/network-and-internet/gosuslugi-personalnye-dannye-vvesti-kod-pravila-registracii/">ten kod</a> prawie do samego dołu i zaktualizuj plik.</p> <p><b>.bułka tarta (</b><br><b>czcionka: pogrubiona 12px „Trebuchet MS”, Verdana, Arial;</b><br><b>dopełnienie-dół: 10px;</b><br><b>} </b><br><b>.bułka tarta a(</b><br><b>kolor: #1B7499;</b><br><b>} </b><br><b>.breadcrumb a:hover (</b><br><b>kolor: #EF0E0E;</b><br><b>} </b></p> <p>Tak zwane „bułka tarta” służą poprawie nawigacji w witrynie i pomagają odwiedzającemu witrynę dowiedzieć się, gdzie się teraz znajduje. Odwiedzający dowolną stronę witryny rozumie swoją lokalizację w strukturze bloga za pomocą bułki tartej.</p><p>Breadcrumbs to kolejny element wewnętrznego linkowania stron internetowych. Nawigacja po witrynie jest uproszczona, co jest wygodne dla osoby odwiedzającej witrynę, a pod tym względem zwiększają się czynniki behawioralne.</p><p>Samo określenie „Bułka tarta” zostało zaczerpnięte z baśni braci Grimm „Jaś i Małgosia”, w której dzieci zabierano do lasu. Za pierwszym razem, gdy ojciec na rozkaz złej macochy zabiera brata i siostrę do lasu, ci odnajdują drogę powrotną dzięki temu, że zostawili po drodze kamyki. Za drugim razem dzieci nie miały kamyków, a zamiast kamyczków zostawiły po drodze okruszki chleba, które zjadały leśne ptaki i dzieci zgubiły się w lesie. Po różnych przygodach dzieciom udało się jednak wrócić do domu.</p><p>Zazwyczaj nawigacja Breadcrumbs to pasek u góry strony, który wygląda mniej więcej tak:</p><p>Wszystkie sekcje serwisu, z wyjątkiem ostatniej, są linkami. Ostatnia sekcja nawigacyjna to dokładnie strona, na której się aktualnie znajdujesz. Nie ma potrzeby tworzenia hiperłącza do tej strony.</p><p>Ten ostatni element niekoniecznie musi być osobną stroną, ale np. nazwą kategorii, jeśli należysz do jakiejś kategorii. W takim przypadku tytuł kategorii nie będzie już hiperłączem.</p><p>Breadcrumbs można zainstalować na stronie internetowej za pomocą wtyczki lub bez użycia do tego specjalnej wtyczki. Najpierw przyjrzyjmy się instalacji bułki tartej za pomocą wtyczki Breadcrumb NavXT.</p><h2>Wtyczka Breadcrumb NavXT</h2><p>Aby zainstalować wtyczkę Breadcrumb NavXT należy zalogować się do „Panelu administracyjnego WordPressa” => „Wtyczki” => „Dodaj nową”. W polu „Wyszukaj” należy wpisać wyrażenie „Breadcrumb NavXT”, a następnie kliknąć przycisk „Wyszukaj wtyczki”. <br>W oknie „Zainstaluj wtyczkę” pod nazwą wtyczki „Breadcrumb NavXT” kliknij link „Zainstaluj”.</p><p>W otwartym oknie „Instalacja wtyczki: Breadcrumb NavXT” kliknij link „Aktywuj wtyczkę”. Następnie na pasku bocznym „Panelu administracyjnego WordPress” pojawił się nowy element „Breadcrumb NavXT”. Jeśli klikniesz na ten element, będziesz mógł wejść w ustawienia wtyczki breadcrumbs.</p><p>Okno ustawień Breadcrumb NavXT zawiera sporo ustawień tej wtyczki. Ustawienia Breadcrumb NavXT można pozostawić na ustawieniach domyślnych. Jeśli chcesz, w zakładce „Podstawowe” możesz zmienić pozycję „Link do strony głównej”.</p><p>Teraz musisz wstawić następujący kod do plików motywu, w miejscach, w których będą wyświetlane bułki tarte:</p><p> <div class="breadcrumb"> <?php if(function_exists("bcn_display")) { bcn_display(); } >? </div> </p><p>Zalecane jest wstawienie tego kodu do następujących plików motywu: „Pojedynczy wpis (single.php)”, „Szablon strony (page.php)”, „Archiwa (arhvie.php)”, „Wyniki wyszukiwania (search.php). php)”.</p><p>Aby wstawić ten kod należy wejść w „Panel administracyjny WordPressa” => „Wygląd” => „Edytor” => „Szablony”.</p><p>W szablonie „Single Post (single.php)”, który odpowiada za strony z artykułami, wstawiany jest kod w sposób pokazany na tym obrazku.</p><p><img src='https://i2.wp.com/vellisa.ru/wp-content/uploads/2012/11/22.png' align="center" width="100%" loading=lazy loading=lazy></p><p>Po wstawieniu kodu kliknij przycisk „Aktualizuj plik”.</p><p><img src='https://i0.wp.com/vellisa.ru/wp-content/uploads/2012/11/31.png' align="center" width="100%" loading=lazy loading=lazy></p><p>Kod zostanie wstawiony, następnie należy kliknąć przycisk „Aktualizuj plik”.</p><p>Będziesz także musiał wstawić ten kod do pliku „Archives (arhvie.php)”, który jest odpowiedzialny za kategorie.</p><p><img src='https://i2.wp.com/vellisa.ru/wp-content/uploads/2012/11/41.png' align="center" height="252" width="365" loading=lazy loading=lazy></p><p>Po wstawieniu kodu kliknij przycisk „Aktualizuj plik”.</p><p>A po zainstalowaniu kodu w plikach motywu WordPress, kod jest wstawiany do pliku „Wyniki wyszukiwania (search.php)”, który odpowiada za przeszukiwanie witryny. Wklej kod w miejscu pokazanym na obrazku.</p><p><img src='https://i1.wp.com/vellisa.ru/wp-content/uploads/2012/11/51.png' align="center" width="100%" loading=lazy loading=lazy></p><p>Ten obraz pokazuje, jak wygląda nawigacja nawigacyjna. Nazwa strony głównej nie została zmieniona na nazwę serwisu.</p><p><img src='https://i2.wp.com/vellisa.ru/wp-content/uploads/2012/11/61.png' align="center" height="134" width="323" loading=lazy loading=lazy></p><p>Możesz także wstawić następujący kod do pliku „Arkusz stylów (style.ccs)” (jest to opcjonalne):</p><p>Bułka tarta (czcionka: pogrubiona 12 pikseli „Trebuchet MS”, Verdana, Arial; dopełnienie dolne: 10 pikseli; ) .breadcrumb a( kolor: #1B7499; ) .breadcrumb a:hover ( kolor: #EF0E0E; )</p><p>W tym kodzie możesz zmienić rozmiar i czcionkę (czcionka: pogrubiona 12px „Trebuchet MS”, Verdana, Arial), dopełnienie (dopełnienie: 10px), a także kolor linków nawigacyjnych w stanie statycznym i po najechaniu kursorem najedź na nie kursorem myszy (możesz zmieniać wartości cyfrowe).</p><p>Odczyty w tym kodzie można zmienić według własnego uznania lub można znaleźć inny podobny kod w Internecie. Możesz także obejść się bez instalowania tego kodu w pliku „Arkusz stylów (style.ccs)”. W motywie, który zainstalowałem, po zainstalowaniu kodu czcionka trochę się zmieniła.</p><p>W tym artykule omówiono instalowanie bułki tartej na stronie internetowej za pomocą wtyczki Breadcrumb NavXT. W następnym artykule omówimy to pytanie - jak zainstalować bez użycia wtyczki.</p><h2>Wnioski z artykułu</h2><p>Za pomocą wtyczki Breadcrumb NavXT na stronie instalowana jest nawigacja, tzw. „breadcrumbs”, która pomaga użytkownikowi zorientować się, w której sekcji serwisu w danym momencie się znajduje.</p> <p>Breadcrumbs to wielopoziomowy system nawigacji, który informuje użytkowników, w którym miejscu serwisu aktualnie się znajdują w stosunku do strony głównej. W tym artykule pokażemy, jak wyświetlić bułkę tartą WordPress:</p> <h2>Co to są bułki tarte i do czego służą?</h2> <p>Breadcrumbs to termin używany do opisania hierarchicznego menu nawigacyjnego prezentowanego jako łańcuch linków. Często wykorzystywane jest jako dodatkowe menu nawigacyjne.</p> <p>Bułka tarta różni się od domyślnego systemu menu nawigacyjnego WordPress.</p> <p>Celem bułki tartej jest ułatwienie użytkownikom poruszania się po witrynie. Pomagają zrozumieć, gdzie obecnie znajduje się użytkownik. Pomaga także wyszukiwarkom określić hierarchię linków do stron internetowych.</p> <p>Wyszukiwarki takie jak Google zaczęły wyświetlać elementy nawigacyjne witryny w wynikach wyszukiwania. Zwiększa to widoczność witryny w wynikach wyszukiwania i poprawia współczynniki konwersji:</p> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/breadcrumbs-seo-261125.png' width="100%" loading=lazy loading=lazy></p> <h3>Dodawanie bułki tartej za pomocą wtyczki Breadcrumb NavXT</h3> <p>Jest to elastyczna i łatwa w użyciu wtyczka WordPress. Ma bardziej różnorodne funkcje, niż możesz sobie wyobrazić. Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Breadcrumb NavXT. Po aktywacji należy przejść do strony ustawień wtyczki: <span>Ustawienia — Breadcrumb NavXT</span>:</p> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/breadcrumbnavxt-settings-261126.png' width="100%" loading=lazy loading=lazy></p> <p>W przypadku większości witryn ustawienia domyślne będą wystarczające. Ale jeśli to konieczne, możesz wprowadzić zmiany w ustawieniach.</p> <p>Strona ustawień jest podzielona na kilka sekcji. W zakładce Ogólne możesz zdefiniować jak wtyczka będzie się zachowywać na stronie.</p> <p>Tutaj możesz zmienić szablon linku. Te szablony używają parametrów Schema.org w tagu linku.</p> <p>W sekcji „Typy postów” możesz ustawić „bułkę tartą” dla postów, stron i dowolnych niestandardowych typów postów. Można wybrać wyświetlanie hierarchii rekordów. Domyślnie wtyczka będzie używać hierarchii " <span>Tytuł witryny > Kategoria > Tytuł wpisu</span>».</p> <p>Możesz zastąpić elementy nawigacyjne tagami, datami lub rodzicami postów. Karty Taksonomie i Autorzy zawierają podobne szablony łączy menu. Nie zapomnij kliknąć „ <span>Zapisz zmiany</span>».</p> <h3>Wyświetlanie Breadcrumb NavXT na Twojej stronie</h3> <p>Aby korzystać z tej wtyczki bułki tartej WordPress, musisz edytować pliki motywu. Musisz dodać następujący kod do pliku header.php motywu w miejscu, w którym wyświetli się bułka tarta:</p> <p><div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <?php if(function_exists("bcn_display")) { bcn_display(); }?> </div></p> <p>Przejdź do witryny i otwórz post lub stronę. Zobaczysz, że masz już wyświetloną bułkę tartą.</p> <h3>Dodawanie bułki tartej za pomocą wtyczki Yoast SEO</h3> <p>Zainstaluj i aktywuj wtyczkę Yoast SEO. Po aktywacji wtyczki należy przejść do strony <span>SEO > Zaawansowane</span> i zaznacz pole wyboru „ <span>Włącz bułkę tartą</span>»:</p> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/yoastbreadcrumb-1-261131.png' width="100%" loading=lazy loading=lazy></p> <p>Następnie dostępnych będzie kilka opcji, za pomocą których można zmienić opcję wyświetlania bułki tartej. Ustawienia domyślne powinny być odpowiednie dla większości witryn, ale w razie potrzeby można je łatwo zmienić.</p> <p>Po zakończeniu kliknij przycisk „ <span>Zapisz zmiany</span>».</p> <h3>Generowanie bułki tartej za pomocą wtyczki Yoast SEO</h3> <p>Niektóre motywy obsługują już bułkę tartą Yoast. Przejdź do witryny i otwórz dowolną stronę lub post, aby sprawdzić, czy wyświetlana jest nawigacja WordPress. Jeśli nie, musisz dodać mały fragment kodu do aktywnego motywu.</p> <p>Wklej ten kod do pliku header.php motywu na końcu pliku:</p> <p><?php if (function_exists("yoast_breadcrumb")) {yoast_breadcrumb("");} ?></p> <p>To wszystko, teraz możesz przejść do swojej witryny, bułka tarta będzie już tam wyświetlona.</p> <p>Mamy nadzieję, że ten artykuł Ci pomógł.</p> <p>Tłumaczenie artykułu „ <span>Jak wyświetlić linki nawigacyjne Breadcrumb w WordPress</span>„został przygotowany przez zaprzyjaźniony zespół projektowy.</p> <p>Dobry zły</p> <p>Witam, drodzy czytelnicy bloga. Dzisiaj chcę porozmawiać o wtyczce do WordPressa, która jest używana na moim blogu w dwóch bardzo ważnych celach.</p><p>Po pierwsze ułatwia nawigację, a po drugie rozwiązuje bardzo ważny problem - stworzenie prawidłowego linkowania wewnętrznego. Aby nie przedłużać intrygi, od razu powiem, że porozmawiamy o wtyczce Breadcrumb NavXT. Ale najpierw najważniejsze.</p><p>Mówiłem już dużo o konieczności stworzenia odpowiedniego linkowania stron serwisu, tak aby ciężar statyczny przenoszony przez wszelkie linki zewnętrzne był równomiernie rozłożony na wszystkie strony projektu. Jest to szczególnie ważne.</p><h2>Dlaczego potrzebujesz bułki tartej w WordPress?</h2><p>Promocja poprzez LF ma szereg zalet, z których główną (szczególnie istotną w przypadku projektów niekomercyjnych) jest to, że nie wymaga inwestycji środków niezbędnych do zakupu linków zewnętrznych. Dzieje się tak dlatego, że awans w LF jest możliwy tylko poprzez samą stronę wewnętrzną i poprzez utworzenie prawidłowego linkowania, zgodnie z opisem.</p><p>Nawiasem mówiąc, w przypadku projektów komercyjnych promocja za pomocą niskiej częstotliwości ma również wiele zalet, z których główną jest ponownie niższy koszt, ale poza tym odwiedzający, którzy przybyli z wyników wyszukiwania takich zapytań, będą znacznie bardziej skłonni do zostać przeliczone na banknoty niż odwiedzający, którzy pochodzili z zapytań przeciętnych i o dużej częstotliwości (ze względu na niejasność tego ostatniego).</p><p>Główną ideą prawidłowego linkowania jest zapewnienie, że ciężar statyczny przenoszony na różne strony serwisu (większość linków zewnętrznych zwykle prowadzi do strony głównej) przepływa bez problemów do tych, które są bezpośrednio promowane wzdłuż LF (gdzie artykuły rzeczywiście się znajdują).</p><p>Jednak idealny schemat kołowy opisany w powyższym artykule jest trudny do wdrożenia w rzeczywistych warunkach, dlatego dobrym rozwiązaniem byłby schemat łączenia sferycznego. Z grubsza rzecz biorąc, taki schemat można przesadzić do tego stopnia, że ​​im więcej będzie ogniw wewnętrznych, tym lepiej rozłożony zostanie ciężar statyczny. To jest jak rozgałęziony układ krwionośny, który pozwala krwi transportować tlen do wszystkich narządów wewnętrznych, nawet tych najbardziej oddalonych od płuc.</p><p>Za każdym razem, gdy piszesz artykuły, możesz ręcznie dodać linki do innych materiałów w swojej witrynie, które będą istotne. To prawda, że ​​bardzo poważnie podchodzisz do wewnętrznej listy zakotwiczeń, którą tworzysz dla każdego artykułu. Należy to zrobić w przybliżeniu w taki sam sposób, jak. Nie powinieneś używać tego samego nierozcieńczonego klucza we wszystkich odniesieniach do tego, cóż, wiesz, co mam na myśli.</p><p>Jest to bardzo dobra metoda, ale zawsze warto ją rozwijać i uzupełniać metodami automatycznymi.Jedną z najczęstszych opcji organizowania czegoś takiego są tzw. breadcrumbs, które rozszerzają możliwości poruszania się po zasobie , a także utworzenie bloku linków do innych podobnych materiałów Twojego projektu, podobnych tematycznie do tego artykułu.</p><p>Dziś chcę szczegółowo przyjrzeć się pierwszej opcji, ale o podobnych materiałach dla WordPressa w .</p><p>Do implementacji breadcrumbów użyjemy wtyczki Breadcrumb NavXT. W zasadzie do tych celów można używać innych wtyczek WordPress, ale te przypadły mi do gustu najbardziej. To nawet możliwe.</p><h3>Instalowanie wtyczki Breadcrumb NavXT w WordPress</h3><p>OK, czas przejść do instalacji i konfiguracji wtyczki. Jeśli nagle nie wiesz, czym jest bułka tarta, nie ma problemu. Właściwie ja też na początku nie wiedziałam, bo to określenie zostało zaczerpnięte od mieszczaństwa i kojarzy się z ich mieszczańską bajką o Jaśku i Grecie, którzy używali ich do oznaczania ścieżki.</p><p>W naszym rozumieniu ten element nawigacji serwisu należy nazwać „nicią Ariadny”, bo jest nam w jakiś sposób bliższy. No cóż, tak to nazywali. Dlatego zazwyczaj pojawiają się one gdzieś u góry okna witryny i zasadniczo stanowią ścieżkę do artykułu, który aktualnie czytasz.</p><p>Na przykład bardzo lubię nawigację za pomocą okruchów i zawsze staram się znaleźć ich linię na dowolnej stronie, aby zrozumieć, gdzie właściwie jestem i jak przejść do sekcji, w której znajduje się ten wspaniały artykuł, aby przeczytać więcej na ten sam temat .</p><p>Pamiętasz, co to jest bułka tarta? Myślę, że pamiętałeś, ale jeśli nie, spójrz na samą górę tego okna pod nagłówkiem tego bloga.</p><p>Najpierw musisz pobrać Breadcrumb NavXT <b>stąd</b>. Instalacja wtyczki na WordPressie jest standardem. Połącz się ze swoim blogiem poprzez FTP (praca z klientem FileZilla została szczegółowo opisana) i otwórz folder na serwerze:</p><p>/wp-content/plugins</p><p>Rozpakuj archiwum za pomocą Breadcrumb NavXT i skopiuj powstały folder na serwer hostujący w katalogu (/wp-content/plugins). Teraz musisz przejść do obszaru administracyjnego WordPress, wybrać „Wtyczki” z lewego menu i w oknie, które zostanie otwarte, przejdź do zakładki „Nieaktywne”. Znajdź linię zawierającą to, czego potrzebujesz i kliknij tekst „Aktywuj” znajdujący się tuż poniżej.</p><h2>Wywoływanie Breadcrumb NavXT i dostosowywanie wyglądu okruchów</h2><p>Właściwie to wszystko. Teraz pozostał jeszcze jeden ważny szczegół: wybierz w szablonie WordPress (motywie) miejsce, w którym wyświetli się linia z nawigacją, i wstaw w to miejsce kod funkcji wtyczki Breadcrumb NavXT. Zadanie nie jest całkiem trywialne dla początkującego webmastera, który nie jest zaznajomiony ze strukturą silnika i działaniem jego motywów.</p><p>Ale to prawdopodobnie Cię nie zmyli, ponieważ... zawsze możesz przeczytać, na szczęście nie ma tam nic skomplikowanego.</p><p>Jeśli znasz już strukturę motywów i znasz cel niektórych szablonów, będziemy kontynuować. Ale w przeciwnym razie nadal radzę przynajmniej powierzchownie zapoznać się z tym, korzystając z materiału wskazanego powyżej (lub innego).</p><p>Naszym zadaniem jest więc zidentyfikowanie tych plików z folderu z motywem, którego używasz, w którym będziemy musieli wstawić kod wywołujący okruchy. A potem będziesz musiał dokładnie zdecydować, gdzie w kodzie wstawimy to:</p><p> <div class="breadcrumb"> <?php if(function_exists("bcn_display")) { bcn_display(); } ?> </div> </p><p>Najpierw musisz połączyć się ze swoim blogiem poprzez FTP i otworzyć folder z motywem, którego aktualnie używasz:</p><p>Wp-content/themes/Nazwa motywu WordPress</p><p>Teraz opowiem Ci, jak sam zrobiłem wyjście z bułki tartej, a Ty możesz wszystko powtórzyć za mną lub użyć własnej wersji wstawiania.</p><p>Jeśli spróbujesz zwizualizować przeznaczenie szablonów z motywu, otrzymasz mniej więcej taki układ:</p><p>Z tego układu możemy wywnioskować, że będziemy musieli wstawić kod wywołujący Breadcrumb NavXT do tych szablonów, które odpowiadają za wyświetlanie treści w centralnej części bloga: INDEX, SINGLE, ARCHIVE, PAGE lub SEARCH.</p><p>Co prawda nie wyświetliłem okruchów w INDEKSIE, który odpowiada za utworzenie strony głównej WordPressa, bo dodatkowa nawigacja tam byłaby niepotrzebna.</p><p>Wstawiłem go do: SINGLE (odpowiedzialny za tworzenie stron z artykułami), ARCHIWUM (formularze stron kategorii, archiwa tymczasowe, archiwa tagów), PAGE (formularze do stron statycznych, np. „O blogu”).</p><p>Kod wywołujący Breadcrumb NavXT umieściłem w tych szablonach w tym samym miejscu - na samym początku, zaraz po pierwszej linijce:</p><p> <?php get_header(); ?> </p><p>żeby wyszło tak:</p><p> <?php get_header(); ?> <div class="breadcrumb"> <?php if(function_exists("bcn_display")) { bcn_display(); } ?> </div> </p><p>Dodałem kilka właściwości CSS dla klasy BREADCRUMB do pliku kaskadowego arkusza stylów STYLE.CSS z folderu motywu:</p><p>Bułka tarta (czcionka: pogrubiona 12 pikseli „Trebuchet MS”, Verdana, Arial; dopełnienie dolne: 10 pikseli; ) .breadcrumb a( kolor: #1B7499; ) .breadcrumb a:hover ( kolor: #EF0E0E; )</p><p>Te właściwości definiują wygląd bułki tartej w WordPressie: , a . Określają także kolor linków z bułki tartej (.breadcrumb a) oraz kolor linków po najechaniu na nie myszką (.breadcrumb a:hover). Ogólnie radzę przeczytać stronę.</p><h2>Funkcje i ustawienia wtyczki Breadcrumb</h2><p>Jesteś wolny i możesz robić, co ci się podoba. Jak to mówią właściciel jest panem. Ale dzięki temu określiliśmy jedynie lokalizację okruchów chleba i ustaliliśmy ich wygląd. Ale ta wtyczka wciąż ma sporo ustawień.</p><p>Aby to zrobić, przejdź do obszaru administracyjnego WordPress i wybierz „Breadcrumb NavXT” z lewego menu w obszarze „Ustawienia”. W oknie, które zostanie otwarte, zobaczysz kilka zakładek:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt.png' height="607" width="541" loading=lazy loading=lazy></p><p>Na karcie Ogólne możesz ustawić parametry, które będą stosowane do wszystkich stron Twojego bloga. W polu „Separator” określ znak, który będzie pełnił rolę separatora w bułce tartej. W moim przypadku jest to symbol „>”, który jest oznaczony specjalnym kodem, ponieważ Symbol „>”, jeśli zostanie umieszczony jawnie, zostanie zinterpretowany przez WordPress jako znak otwierającego tagu HTML.</p><p>Ogólnie rzecz biorąc, istnieją (mnemoniki), których na przykład nie można wstawić bezpośrednio. Tutaj jest kilka z nich:</p><p>Kod mnemoniczny Symbol „ ” & &< < > > ¤ ¤ ¦ ¦ § § © ª ? « « ® ® ° ° ± ± µ µ ¶ ¶ · ¹ ? € € </p><p>Wybierz dowolny symbol jako separator bułki tartej.</p><p>W polu „Maksymalna długość” możesz ustawić długość kotwicy (tekstu linku) w znakach. Ustawiłem limit długości na 60 znaków nie ze względów projektowych, ale ze względu na optymalizację treści.</p><p>Wyszukiwarki mogą mieć ambiwalentne podejście do linków z tymi samymi kotwami, dlatego skracam je w małych fragmentach, aby były unikalne. Możliwe, że nie jest to naprawdę konieczne, ale na wszelki wypadek.</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/plagin-breadcrumb-navxt.png' width="100%" loading=lazy loading=lazy></p><p>W polach „Prefiks” i „Sufiks” możesz wpisać tekst, który będzie poprzedzał lub podążał za linkiem do strony głównej w bułce tartej.</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-glavnay.png' width="100%" loading=lazy loading=lazy></p><p>Należy pamiętać, że ten tekst zostanie umieszczony w atrybucie TITLE tagu A i może zostać uznany przez wyszukiwarki za alternatywną kotwicę. Mam na myśli to, że powinien używać słów kluczowych związanych ze stroną główną Twojego bloga.</p><p>Nie zapomnij zapisać zmian w ustawieniach wtyczki Breadcrumb NavXT za pomocą przycisku o tej samej nazwie. Następnie możesz przeglądać wszystkie zakładki. Przykładowo na poniższej stronie możesz ustawić ustawienia linku prowadzącego do strony, na której się teraz znajdujesz:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/nastroika-breadcrumb-navxt.png' width="100%" loading=lazy loading=lazy></p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-tekushay.png' width="100%" loading=lazy loading=lazy></p><p>W kolejnej zakładce „Posty / Strony” możesz skonfigurować wyświetlanie linków do stron z artykułami i stron statycznych Twojego bloga:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/nastroika-hlebnye-kroshki.png' height="607" width="541" loading=lazy loading=lazy></p><p>W przypadku artykułów umieściłem poprzedzający napis „Aktualny artykuł” i ująłem tekst w cudzysłów, stosując kod mnemoniczny (patrz lista kodów mnemonicznych powyżej):</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-statiy.png' width="100%" loading=lazy loading=lazy></p><p>Przejdź do kolejnej zakładki „Kategorie”. W zasadzie wszystkie te same ustawienia są tutaj powtarzane, jak w poprzednich. Nie ustawiłem ramki (prefiksu i sufiksu) dla linków do kategorii, ale ustawiłem ramkę dla stron archiwum:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/hlebnye-kroshki-nastroiki.png' width="100%" loading=lazy loading=lazy></p><p>W rezultacie nawigacja na stronach internetowych archiwum wygląda następująco:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-rubriki.png' width="100%" loading=lazy loading=lazy></p> <p>Dziś opowiem o wtyczce do WordPressa popularnie zwanej „Breadcrumbs”, oficjalnie nazywanej Breadcrumb NavXT. <span>Jest to prawdopodobnie najpopularniejsza i najpopularniejsza wtyczka wśród webmasterów. Jego popularność wynika z dwóch powodów.</p> <h2>Pierwszy powód popularności wtyczki Breadcrumbs</h2> <p>Jest to wygoda w nawigacji. Po zainstalowaniu i skonfigurowaniu wtyczki Breadcrumb NavXT na górze strony pojawia się wygodne menu nawigacyjne, które stopniowo pokazuje użytkownikowi nie tylko nazwę strony, na której się znajduje, ale także po kolei wszystkie strony serwisu, na którym się znajduje odwiedził już wcześniej. Co z pewnością jest bardzo wygodne, szczególnie podczas studiowania dużej ilości materiału i przeglądania kilku stron.</p> <h2>Drugi powód zapotrzebowania na tę wtyczkę</h2> <p>Dodatkowe linkowanie stron i w rezultacie <b>+ </b> w rankingach wyszukiwarek. (Właściwie przydomek „Bułka tarta” pochodzi z bajki braci Grimm Jaś i Małgosia, w której dzieci rzucały do ​​lasu okruchy chleba, żeby się nie zgubić... Ale to taka dygresja liryczna.) Wróćmy do naszej wtyczki.</p> <h2>Pobierz i zainstaluj wtyczkę Breadcrumb NavXT.</h2> <p>Najlepszym sposobem na pobranie wtyczki Breadcrumb NavXT jest odnalezienie jej poprzez panel sterowania wpisując „w pasku wyszukiwania” <b>Breadcrumb NavXT</b>"</p> <p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-11_065655.png' align="center" height="248" width="380" loading=lazy loading=lazy></p> <p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-11_065501.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Normalna instalacja nie różni się od instalowania innych wtyczek. Ale będziesz musiał pokombinować z ustawieniami.</p> <p>Przejdź do zakładki „Opcje”...</p> <p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_185405-e1389337037125.jpg' align="center" height="525" width="300" loading=lazy loading=lazy></p> <p>... i dochodzimy do panelu ustawień wtyczki Breadcrumb NavXT. W tym przypadku interesuje nas tylko zakładka <b>"Podstawowy"</b>, wszystkie pozostałe zakładki ustawień: <i>Posty i strony, taksonomie, inne</i>, na razie można pozostawić bez zmian. Być może pewnego dnia będziesz musiał do nich wrócić, aby skonfigurować bardziej zaawansowaną Breadcrumbs, ale na razie zostawimy wszystko tak, jak jest. Cóż, zmieńmy ustawienia zakładki „Podstawowe” jak pokazano na poniższym obrazku:</p><p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2019/01/2019-01-24_142049.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_185939.png' align="center" height="648" width="600" loading=lazy loading=lazy></p> <p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_190130.png' align="center" height="631" width="600" loading=lazy loading=lazy></p> <p>Zapisujemy zmiany ustawień i to wszystko tutaj.</p> <p>Przejdźmy teraz do zabawnej części.</p> <h2>Musisz edytować szablon motywu.</h2> <p>Bez tego niestety nie da się tego zrobić. Wtyczka Breadcrumb NavXT nie będzie działać „tak po prostu”.</p> <p>Przejdź do konsoli i wybierz „Wygląd” → „Edytor”:</p> <p><img src='https://i2.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-10_092847.png' height="288" width="192" loading=lazy loading=lazy></p> <p>W rezultacie przechodzimy do sekcji edycji motywu. W tej sekcji edycji musisz wybrać dokładnie ten motyw, którego aktualnie używasz. Z reguły wielu administratorów witryn instaluje kilka szablonów witryn, ale używany jest tylko jeden. Dlatego powinieneś edytować ten, który jest używany.</p> <p>Musisz edytować następujące szablony: single.php, indeks.php i page.php (jeśli istnieje specjalnie utworzona strona, na przykład kategoria.php, to także ta)</p> <p>To wygląda tak:</p> <p>Najpierw wybierz wymagany szablon. (Ten przykład pokazuje szablony dostępne w moim motywie; możesz mieć ich więcej lub mniej. Musisz edytować wszystko, co jest dostępne zgodnie z listą: <b>single.php, indeks.php i page.php, kategoria.php</b> Jeśli którykolwiek z wymienionych szablonów nie jest wyświetlany na Twojej liście, po prostu go pomiń.)</p> <p><b>Następnie bierzemy kod:</b></p> <p><b><span><div class="breadcrumb"> </span> </b></p> <p><b><span><?php </span> </b></p> <p><b><span>if(function_exists("bcn_display"))</span> </b></p> <p><b><span>{ </span> </b></p> <p><b><span>bcn_display();</span> </b></p> <p><b><span>} </span> </b></p> <p><b><span>?> </span> </b></p> <p><b><span></div> </span> </b></p> <p>I wstawiamy go do każdego z wymienionych szablonów mniej więcej w tym samym miejscu, po tytule ( <b>nagłówek</b>):</p> <p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_191416.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Naturalnie zapisujemy każdy zmieniony plik. Po czym wtyczka Breadcrumb NavXT zacznie działać.</p> <p>No cóż, to wszystko, prawie... Prawie, bo z reguły takie ustawienia w zupełności wystarczą.</p> <p>Są jednak chwile, kiedy projekt motywu witryny nie pasuje do projektu wyświetlanej linii Breadcrumbs.</p> <h2>W takim przypadku będziesz musiał osobno dostosować Breadcrumbs do projektu witryny.</h2> <p>Robi się to tak. <b>Weźmy ten kod:</b></p> <p><b><span>.bułka tarta (</b> </p> <p><b><span>czcionka: pogrubiona 12 pikseli „Trebuchet MS”, Verdana, Arial;</span> </b> </p> <p><b>dopełnienie-dół: 10px;</b> </p> <p><b><span>} </b> </p> <p><b><span>.bułka tarta a(</b> </p> <p><b><span>kolor: #1B7499;</b> </p> <p><b><span>} </b> </span><span><b>.breadcrumb a:hover (</b> </p> <p><b><span>kolor: #EF0E0E;</b> </p> <p><b><span>} </b> </p> <p>Zmieniamy parametry wyświetlania rozmiaru tekstu, czcionki i koloru w nim na wymagane. Następnie skopiuj zmieniony kod, przejdź do zakładki <b>„Arkusz stylów”</b> Twój temat</p> <p><img src='https://i2.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_192714.png' height="337" width="227" loading=lazy loading=lazy></p> <p>... i wklej kod na samym dole edytora</p> <p>...zapisz klikając <b>"Aktualizować plik"</b> Oczywiście będziesz musiał trochę poeksperymentować, aby uzyskać zadowalający wynik.</p> <p>Coż, to na razie wszystko.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </div> </div> <aside role="complementary"> <div class="block cat-list"> <div class="block-title"> <h3>Kategorie</h3> </div> <div class="block-content"> <ul> <li> <a href="https://rustrackers.ru/pl/category/internet/">Internet</a> </li> <li> <a href="https://rustrackers.ru/pl/category/windows-10/">Windows 10</a> </li> <li> <a href="https://rustrackers.ru/pl/category/multimedia/">Multimedia</a> </li> <li> <a href="https://rustrackers.ru/pl/category/utilities/">Narzędzia</a> </li> <li> <a href="https://rustrackers.ru/pl/category/network-and-internet/">Sieć i Internet</a> </li> <li> <a href="https://rustrackers.ru/pl/category/system-programs/">Programy systemowe</a> </li> <li> <a href="https://rustrackers.ru/pl/category/configuring-programs/">Konfigurowanie programów</a> </li> <li> <a href="https://rustrackers.ru/pl/category/os-problems/">Problemy z systemem operacyjnym</a> </li> </ul> </div> </div> <div> </div> </aside> </div> </div> </section> </div> <footer class="b-footer"> <div class="container"> <div class="b-footer-content"> <p>rustrackers.ru - Darmowe programy na Twój komputer</p> </div> </div> </footer> <div id="back-top" class="back-top bounce-out"> <a href="#" title="Szczyt"></a> </div> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/libs/jquery/jquery.js"></script> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/vendor/jquery.colorbox-min.js"></script> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/scripts.min.js"></script> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/custom/custom.js"></script> </body> </html>