Dzięki rozwojowi CSS i CSS3 w ostatnich latach osiągnęliśmy punkt, w którym wiele starych rozwiązań programowych obejmujących obrazy tła można teraz budować w całości w CSS. W tym samouczku przyjrzymy się tworzeniu sekwencji łączy nawigacyjnych o nazwie „okruszek chleba” w płaskim stylu, bez potrzeby stosowania popularnej wcześniej techniki tworzenia obrazu tła zwanej metodą „drzwi przesuwnych”.
Okruszki chleba, które będziemy tworzyć, są stylizowane na szewrony, aby zwizualizować ideę ustrukturyzowanej treści. Wcześniej do stworzenia tego wzoru w jodełkę używalibyśmy obrazu tła w formacie PNG, ale teraz, dzięki sprytnej technice obramowania, możemy stworzyć ten sam efekt, używając tylko CSS.
Zaczniemy od utworzenia odnośników nawigacyjnych w formie listy nieuporządkowanej. Każda bułka tarta będzie elementem
#crumbs ul li a ( display : block ; float : left ; height : 50px ; background : #3498db ; text-align : center ; padding : 30px 40px 0 40px ; position : względny ; margin : 0 10px 0 0 ; rozmiar czcionki : 20px ; dekoracja tekstu : brak ; kolor : #fff ; )
Początkowy kod CSS ustawia zakotwiczenie każdego elementu listy w eleganckim stylu niebieskiego prostokąta. Tekst jest wyśrodkowany, a ze wszystkich stron dodawane jest równe wypełnienie. Aby pozycjonować absolutnie kolejne elementy, do tych elementów dodawana jest właściwość position: relative;, dzięki czemu elementy pozycjonowane absolutnie są renderowane względem tego elementu rodzica.
#crumbs ul li a:after ( content : "" ; border-top : 40px stałe czerwone ; border-bottom : 40px stałe czerwone ; border-left : 40px stałe niebieskie ; position : absolute ; right : -40px ; top : 0 ; )
Teraz stworzymy w CSS efekt szewronu, który wcześniej był osiągalny tylko przy użyciu obrazu tła. Użyj selektora :after, aby utworzyć dodatkowy element, który można indywidualnie stylizować. Trójkątny kształt jest tworzony przy użyciu różnych ramek CSS, więc jak widać na poprzednim obrazku, niebieski trójkąt można utworzyć, stosując górną i dolną krawędź, aby przeciąć obszar pokrycia. Te obramowania są dla przejrzystości pokolorowane na czerwono, ale jeśli są przezroczyste, powstanie niebieski trójkąt. Ten efekt graniczny jest następnie przesuwany na miejsce przy użyciu pozycjonowania bezwzględnego.
Border-top: 40px stałe przezroczyste; border-bottom : 40px stałe przezroczyste ; obramowanie po lewej: 40px stałe #3498db ;
Efekt obramowania z prawidłowymi wartościami kolorów stworzy pożądany trójkąt, nadając bułce tartej popularny kształt szewronu.
#crumbs ul li a:before (content : "" ; border-top : 40px solid transparent ; border-bottom : 40px solid transparent ; border-left : 40px solid #d4f2ff ; position : absolute ; left : 0 ; top : 0 ; )
Stosując te same zasady, inny trójkątny kształt można nałożyć na lewą stronę bułki tartej. Tym razem kolor obramowania jest ustawiony na taki sam kolor jak kolor tła, aby ukryć części niebieskiego koloru tła łącza.
Padding : 30px 40px 0 80px ;
W miarę dodawania linków do kodu HTML, kolejność okruszków chleba, oddzielonych ciekawie ukształtowanymi szewronami, wzrasta, dzięki efektowi trójkątnego obramowania CSS i niewielkiemu prawemu marginesowi.
#crumbs ul li:first-child a ( border-top-left-radius: 10px ; border-bottom-left-radius: 10px ; ) #crumbs ul li:first-child a:before ( display : none ; ) #crumbs ul li:last-child a ( padding-right : 80px ; border-top-right-radius: 10px ; border-bottom-right-radius: 10px ; ) #crumbs ul li:last-child a:after ( display : none ; )
Całe pole menu nawigacyjnego można dalej stylizować, usuwając efekt trójkąta z pierwszego i ostatniego elementu za pomocą selektorów :first-child i :last-child, po czym można nieco zaokrąglić rogi za pomocą właściwości border-radius.
#crumbs ul li a:hover ( background : #fa5ba5 ; ) #crumbs ul li a:hover :after ( border-left-color : #fa5ba5 ; )
Pozostało tylko zastosować efekt najechania na linki. Nie zapomnij zmienić wartości właściwości border-left-color dla efektu trójkąta w stanie najechania kursorem, tak aby cały bułka tarta zmieniła kolor.
Tłumaczenie - biurko
Listy są wygodne ze względu na ich hierarchiczną strukturę i elastyczne ustawienia widoku, dlatego służą nie tylko zgodnie z ich przeznaczeniem, ale także do tworzenia różnych elementów strony, takich jak bułka tarta, paginacja, menu, zakładki itp.
bułka tarta
Okruszki ułatwiają poruszanie się po witrynie i pokazują pozycję bieżącej strony w stosunku do innych sekcji witryny. Ułatwia to przejście na wyższy poziom i zrozumienie, w której sekcji aktualnie się znajdujesz. Tak więc w przypadku witryny technicznej nawigacja może wyglądać następująco (ryc. 1).
Ryż. 1. Rodzaj bułki tartej
Ostatni tekst wskazuje na bieżącą stronę i nie jest łączem. Wszystkie elementy są oddzielone od siebie jakimś symbolem, zwykle strzałką (→), ukośnikiem (/), znakiem większości (>) i tym podobnymi.
Ponieważ projekt jest przypisany do stylów, kod HTML jest bardzo zwięzły. Tworzymy listę i przypisujemy do niej klasę breadcrumbs, aby styl nie rozprzestrzeniał się na inne listy.
Zwróć uwagę, że nie ma tutaj separatorów, są one wyświetlane przy użyciu właściwości stylu treści (przykład 1).
Przykład 1: Robienie bułki tartej
Na początek resetujemy wszystkie marginesy i wcięcia listy i ustawiamy elementy poziomo we właściwości display z wartością inline-block . Usuwa również znaczniki, więc nie musisz tego robić celowo. Pseudoelement ::before jest wymagany do dodania separatora między elementami i kontrolowania jego wyglądu. Tekst dodawany jest do wszystkich pozycji, w tym do pierwszego, którego oczywiście nie potrzebujemy. Dlatego usuwamy go za pomocą pseudoklasy :first-child, która stosuje styl do pierwszego elementu
Duża liczba materiałów, takich jak artykuły witryny, jest często dzielona na osobne strony po 10-15 artykułów na stronę, co prowadzi do zmniejszenia obciążenia witryny. Przejście między poszczególnymi stronami odbywa się poprzez ich numerację, gdzie każdy numer służy jako łącze do odpowiedniej strony. Możliwe jest wyświetlenie wszystkich stron, określonej ich liczby lub tylko linków do następnej i poprzedniej strony. Wybór opcji zależy od projektu strony i Twoich preferencji. Jedną z możliwych metod numeracji pokazano na ryc. 2.
Ryż. 2. Paginacja
Aby wykonać tę numerację, ponownie używamy prostej listy, teraz z klasą pagera, każdy element tej listy będzie linkiem do strony. Aby wyróżnić bieżącą stronę, dodajmy aktywną klasę (przykład 2).
Przykład 2: Paginacja
- 1
- 2
- 3
- 4
- 5
- 6
Linia między elementami jest wykonywana przez właściwość border-bottom elementu
- . Ponieważ
- oraz (przykład 3). Dobrze do siebie pasują i tworzą efekt pojedynczego paska.
Przykład 3. Menu poziome
Menu Gradient w tym przykładzie jest dodawany za pomocą funkcji linear-gradient, a cień jest dodawany za pomocą właściwości box-shadow.
Rozwijane menu
Bardziej złożony typ menu nazywa się menu rozwijanym. Po najechaniu kursorem na pozycje pojawia się podmenu, wcześniej niewidoczne (rys. 4); gdy tylko wskaźnik odsunie się od tekstu, menu ponownie się chowa.
Ryż. 4. Rozwiń widok menu
Ten typ menu jest dość skomplikowany pod względem układu, więc przeanalizujmy go bardziej szczegółowo. Najpierw tworzymy listę zagnieżdżoną - pozycje z pierwszej listy służą jako tekst menu głównego, druga lista znajduje się wewnątrz elementu
- będzie służyć jako podmenu. Jeśli podmenu nie jest wymagane, pozostaw tylko jeden element
- , a
- nie dodawaj do tego. Struktura każdej pozycji jest następująca.
- kuchnia rosyjska
- befstroganow
- Gęś z jabłkami
- Krupenik Nowogród
- Raki po rosyjsku
- aby ustawić styl dla pozycji menu pierwszego i drugiego poziomu. Jeśli po prostu określisz selektor li, styl zostanie zastosowany do wszystkich elementów w ogóle. Dlatego używamy .menu > selektor li, stosuje on tylko styl do elementów
- pierwszy poziom. W rezultacie styl naszego poziomego menu nieco się zmienia.
/* Wyzeruj dopełnienie i usuń znaczniki z list */ .menu, .menu ul ( styl listy: brak; margines: 0; dopełnienie: 0; ) .menu ( background: linear-gradient(do dołu, #fff, #f1f2f2 ); /* Gradient */ border: 1px solid #999; /* Opcje obramowania */ padding: 0 5px; /* Marginesy */ font: 14px Arial, sans-serif; /* Opcje czcionki */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Cień menu */ .menu > li ( display: inline-block; /* Wyrównaj poziomo */ border-right: 1px solid #fff; /* White linia po prawej */ position: relative; /* względne położenie */ ) .menu a ( text-decoration: none; /* usuń podkreślenie */ color: #4c4c4c; /* kolor linku */ display: block; /* Blokuj linki */ ). index : 3; /* Rysuj nad innymi elementami */ ) .menu ul ( wyświetl: brak; /* Ukryj podmenu */ )
Ukrywamy podmenu poprzez właściwość wyświetlania, w rezultacie menu powinno wyglądać tak, jak pokazano na rys. 3. Dodano również zerowe wartości dla list, przyda się to nam przy dodawaniu podelementów, plus pozycjonowanie względne, bez niego z-index nie będzie działał. A potrzebujemy go do prawidłowego nałożenia jednych elementów na drugie.
Możesz tymczasowo włączyć wyświetlanie podmenu i dostosować ich wygląd.
Menu ul ( position: absolute; /* pozycjonowanie bezwzględne */ display: none; /* ukryj podmenu */ width: 200px; /* szerokość podmenu */ background: #fff; /* kolor tła */ box-shadow: 0 0 10px #666; /* Opcje cieni */ ) .menu ul a ( padding: 5px 10px; /* Marginesy */ ) .menu ul a:hover ( background: #008df2; /* Kolor tła */ color: #fff ; /* Kolor tekstu */ )
Pozostaje wyświetlić podmenu po najechaniu myszą na pozycje menu. W tym celu używamy pseudoklasy :hover, dodając ją do li.
Menu li:hover ul (wyświetlanie: blok; )
Ten selektor mówi, że styl powinien zostać zastosowany do elementu.
- , w tym przypadku wyświetlaj go tylko wtedy, gdy wskaźnik myszy znajduje się nad elementem
- wewnątrz kontenera z menu klas .
Następnie nasze menu będzie działać i wyświetlać podmenu, w którym jest dostępne. Ostatnie ozdobne akcenty związane są z cieniami i ich prawidłowym nałożeniem. Aby poprawnie wyświetlić cień pod pozycjami menu pierwszego poziomu, utwórz pusty pseudoelement za pomocą ::before , ustaw dla niego cień i umieść go pod linkiem (tutaj znajduje się indeks Z dla i przydatne).
Menu > li:hover::before ( content: ""; /* Utwórz pusty pseudoelement */ top: 0; left: 0; right: 0; bottom: 0; /* Taki sam rozmiar jak pozycja menu */ box- shadow: 0 5px 10px #666; /* Opcje cienia */ position: absolute; /* pozycjonowanie bezwzględne */ )
Ostateczny kod pokazano w przykładzie 4.
Przykład 4 - Rozwijane menu
Menu Nawigacja Breadcrumb pomaga odwiedzającym witrynę poruszać się po hierarchicznej strukturze dokumentów i znaleźć drogę do najwyższego poziomu. Dlatego też, jeśli na stronie umieszczona jest duża liczba dokumentów, należy ją zaopatrzyć w „bułkę tartą”. W tym samouczku zostanie przedstawiony kod CSS do tworzenia różnych opcji projektowych dla tak pożądanego narzędzia nawigacyjnego.
znaczniki HTML
Oznaczenia są proste i minimalne. Opiera się na nieuporządkowanej liście.
css
Najpierw zróbmy mały reset CSS na naszej nieuporządkowanej liście:
Ul( margines: 0; dopełnienie: 0; styl listy: brak; )
Pseudo-elementy zostaną użyte do zaprojektowania naszej bułki tartej.
Pierwszy przykład
W tym przykładzie zastosowano bardzo prostą technikę. Na ramie po prawej stronie tworzy się trójkąt za pomocą umieszczonych jeden nad drugim pseudoelementów. Ciemny trójkąt jest przesunięty, aby uzyskać efekt obramowania.
#bułka tarta-jeden(tło: #eee; szerokość obramowania: 1px; styl obramowania: solid; kolor obramowania: #f5f5f5 #e5e5e5 #ccc; promień obramowania: 5px; cień pudełka: 0 0 2px rgba(0, 0,0,.2); przepełnienie: ukryte; szerokość: 100%; ) # bułka tarta-one li( float: lewo; ) # bułka tarta-one a( padding: .7em 1em .7em 2em; float: lewo; tekst- dekoracja: brak; kolor: #444; pozycja: względna; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: #ddd; background-image: linear-gradient(do prawej, #f5f5f5, # ddd); ) #bułka tarta-jeden li:pierwsze-dziecko a( padding-left: 1em; border-radius: 5px 0 0 5px; ) #bułka tarta-jeden a:hover(tło: #fff; ) #bułka tarta-jeden a ::after, #breadcrumbs-one a::before( content: ""; position: absolute; top: 50%; margin-top: -1,5em; border-top: 1,5em solid transparent; border-bottom: 1,5em solid transparent; border-left: 1em solid; right: -1em; ) #breadcrumbs-one a::after( z-index: 2; border-left-color: #ddd; ) #breadcrumbs-one a::before( kolor-lewego obramowania: #ccc;ri moc: -1,1em; indeks z: 1; ) #bułka tarta-one a:hover::after( border-left-color: #fff; ) #bułka tarta-one .current, #okruszka-one .current:hover( grubość czcionki: pogrubienie; tło: brak; ) # bułka tarta-jeden .current::after, #bułka-tarta-jeden .current::before( content: normal; )
Kształty CSS są budowane z pseudoelementów umieszczonych przed i po elemencie.
#bułka tarta-dwa( przepełnienie: ukryte; szerokość: 100%; ) #bułka tarta-two li( float: lewo; margines: 0 .5em 0 1em; ) #bułka tarta-dwa a( tło: #ddd; dopełnienie: .7em 1em ; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; ) #breadcrumbs-two a:hover( background: #99db76; ) #breadcrumbs-two a::before( content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border- color: #ddd #ddd #ddd transparent; left: -1em; ) #bułka tarta-dwa a:hover::before( kolor obramowania: #99db76 #99db76 #99db76 transparent; ) #bułka tarta-dwa a::after( zawartość : ""; position: bezwzględne; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #ddd; right: -1em; ) #bułka tarta-dwa a:hover::after( border-left-color: #99db76; ) #bułka tarta-dwa .current, #bułka tarta-dwa .current:hover( grubość czcionki: pogrubienie; tło: brak; ) #bułka tarta-dwa .current::after, #bułka tarta-dwa .current::before( content: normal; )
Właściwość border-radius zaokrągla rogi prostokątów i kwadratów. Kwadrat obraca się, aby zrobić z niego diament.
# bułka tarta-trzy( przepełnienie: ukryte; szerokość: 100%; ) # bułka tarta-trzy li( float: lewo; margines: 0 2em 0 0; ) # bułka tarta-trzy a( dopełnienie: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; background: #ddd; position: relatywnym; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-radius: .4em 0 0 .4em; ) #bułka tarta-trzy a:hover(tło: #abe0ef; ) #bułka tarta-trzy a::after(tło: #ddd; zawartość: ""; wysokość: 2,5em; górny margines: -1,25em ; pozycja: bezwzględna; prawo: -1em; góra: 50%; szerokość: 2,5em; z-index: -1; transform: rotate(45deg); border-radius: .4em; ) #breadcrumbs-three a:hover: :after( background: #abe0ef; ) #bułka tarta-trzy .current, #bułka tarta-trzy .current:hover( grubość czcionki: pogrubiona; tło: brak; ) #bułka tarta-trzy .current::after( zawartość: normal; )
Dwa prostokąty są dodawane za pomocą pseudoelementów. Potem skręcają za rogiem.
#bułka tarta-cztery( przepełnienie: ukryte; szerokość: 100%; ) #bułka tarta-four li( float: lewo; margines: 0 .5em 0 1em; ) #bułka tarta-cztery a( tło: #ddd; padding: .7em 1em ; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; ) #breadcrumbs-four a:hover( background: #efc9ab; ) #bułka tarta-cztery a::before, #bułka tarta-cztery a::after(treść:""; pozycja:absolute; góra: 0; dół: 0; szerokość: 1em; tło: #ddd; przekształcenie: skośny(-10deg ) ::after( prawo: -.5em; border-radius: 0 5px 5px 0; ) #bułka tarta-cztery a:hover::after(tło: #efc9ab; ) #bułka tarta-cztery .current, #bułka tarta-cztery .current :hover( font-weight: bold; background: none; ) #bułka tarta-cztery .current::after, #bułka tarta-cztery .current::before( treść: normal; )
Korzyści z projektowania okruszków CSS3
- Brak obrazów, więc po prostu aktualizuj i konserwuj.
- Łatwy do skalowania.
- Wstecznie kompatybilny ze starszymi przeglądarkami.
zbiór bezpłatnych Nawigacja HTML i CSS przykłady kodu nawigacyjnego: prosty, responsywny, wielowierszowy, zwinięty itp. Aktualizacja kolekcji luty 2018. 3 nowe przedmioty.
Powiązane artykuły
O kodzie
prosty css.
O kodzie
Zapraszam do dostosowania go na swój własny sposób. Kolory, rozmiary, cienie, obramowania itp. Wykonane z Bootstrap.
O kodzie
Bułka tarta z „inteligentną” elipsą (Flex)
Baw się rozmiarem przeglądarki, aby zobaczyć, jak zachowują się, gdy nie ma dla nich miejsca.
O kodzie
Ten przykład pokazuje, co się dzieje, gdy użytkownik zbliża się do przycisku Wstecz. Bułka tarta rozszerza się i umożliwia użytkownikowi nawigację do niemal dowolnego miejsca na kursie, mając tylko minimalny wpływ na przestrzeń.
Bułka tarta z niestandardowymi właściwościami CSS jako API.
Wykonane przez Stasia Melnikova
15 czerwca 2017 r.
Adaptacyjne, wielowierszowe, czyste strzałki nawigacyjne CSS.
Wykonane przez Glynna Smitha
30 maja 2017 r.
Demo GIF: bułka tartaOkruszki HTML i CSS.
Wykonane przez Dany Santosa
15 lipca 2016
Okruszek chleba Material Design, śledzenie postępów.
Wykonane przez Shyama Chen
30 lipca 2015 r.
Lista menu nawigacyjnych została zwinięta, aby wyświetlić tylko podgląd tekstu dla wszystkich stron oprócz bieżącej, z pełnym tekstem wyświetlanym po najechaniu kursorem/fokusie.
Wykonane przez Skye
4 marca 2015 r.
Czysta, responsywna bułka tarta CSS.
Wykonane przez Olivera Knoblicha
2 kwietnia 2014Dzień dobry, drodzy czytelnicy!
Jak bułka tarta wpływa na optymalizację wyszukiwarek i jak je tworzyć w witrynie WordPress. O tym będzie mowa w dzisiejszym artykule. Patrząc w przyszłość, bułka tarta pomaga użytkownikom poruszać się po witrynie. Mają też pozytywny wpływ na SEO.
Bułka tarta to podpowiedzi na stronie, które pokazują użytkownikowi, gdzie się znajduje. Rodzaj łańcucha, który został stworzony do nawigacji.
Są klikalne, co oznacza, że odwiedzający w dowolnym momencie może przejść do „poziomu” powyżej – do podsekcji lub sekcji. Z reguły bułka tarta wygląda tak: główny - nagłówek - podtytuł - artykuł. Ten ostatni element jest bardzo często usuwany, w przekonaniu, że powoduje to niepotrzebne powielanie.
Uważa się, że nazwa ta nawiązuje do bajki, w której dzieci idąc do lasu zostawiały za sobą ścieżkę z okruchów chleba do nawigacji. Mieli wrócić tą ścieżką. Łańcuch linków jest również ścieżką, im dalej do serwisu, tym więcej w nim elementów. I faktycznie, wzdłuż tego łańcucha możesz wrócić do strony głównej. Jak w bajce.
Jak wpływa na SEO
Korzystanie z kanału nawigacyjnego jest uważane za dobrą formę w świecie optymalizacji pod kątem wyszukiwarek.
Po pierwsze, poprawia czynniki behawioralne. A to, jak wiadomo, jest prawie najważniejszym wskaźnikiem jakości strony. Jeśli użyteczność jest na dobrym poziomie, użytkowanie i nawigacja są przejrzyste i wygodne, to odwiedzający na pewno to docenią i pozostaną na zasobach dłużej. Ponadto im lepsze czynniki behawioralne, tym wyższy zasób będzie w wynikach wyszukiwania.
Po drugie, obecność bułki tartej jest już uważana za dobry czynnik dla wyszukiwarki. Roboty widzą, że projekt ma system nawigacji, strukturę, co ma dobry wpływ na ranking.
Oczywiście sam pasek nawigacyjny nie wyniesie Twojego zasobu na szczyt. Działa to w połączeniu z innymi aspektami dobrego SEO.
Podsumowując, bułka tarta pomaga:
- poprawić czynniki behawioralne i użyteczność,
- uczynić strukturę strony przejrzystą i przystępną,
- łatwa nawigacja po stronach,
- poprawić technicznie SEO,
- zrobić ponowne połączenie.
Oznacza to, że korzystanie z kanału nawigacyjnego jest bezwzględnie obowiązkowe dla tych, którzy chcą, aby ich projekt był wygodny, praktyczny i odwiedzany.
Rodzaje bułki tartej
Tak, mają odmiany. Nie ma ich wielu, ale i tak warto zastanowić się nad tym momentem.
Liniowy
Zwykły pasek, który pokazuje ścieżkę od strony głównej do artykułu. Najpopularniejszy rodzaj bułki tartej.. Mamy po prostu liniowy typ paska nawigacyjnego.
Przycisk powrotu
Bardzo niewygodny rodzaj nawigacji, który jest bardzo powszechny w sklepach internetowych. Z reguły użytkownicy nie są z tego szczególnie zadowoleni i używają podobnego przycisku w samej przeglądarce. W przypadku witryny informacyjnej ta opcja jest praktycznie bezużyteczna.
Hybrydowy
Ta opcja łączy poprzednie dwie. Oznacza to, że zasób ma zarówno nawigację liniową, jak i przycisk „Wstecz”. Można powiedzieć, że jest to kompromis, który pomaga zadowolić wszystkich. Ale, jak powiedziałem powyżej, ludzie rzadko używają przycisku „Wstecz”, preferując przycisk w samej przeglądarce - na szczęście są takie we wszystkich nowoczesnych aplikacjach.
Zazwyczaj pasek nawigacyjny znajduje się na wszystkich stronach oprócz głównej. W WordPressie są to kategorie, tagi, artykuły i inne taksonomie.
Jak stworzyć bułkę tartą w WordPress
Najłatwiejszym sposobem utworzenia kanału nawigacyjnego w WordPressie i innych witrynach jest html. Raczej będzie to hybryda html i php - w przeciwnym razie będziesz musiał pisać każdy łańcuch nawigacji ręcznie, a nie jest to zbyt przyjemne zadanie.
Korzystanie z szablonu
Rozsądnie byłoby wybrać szablon od razu z bułką tartą. Jeśli dopiero myślisz o kolejnej witrynie i nie zacząłeś jej jeszcze tworzyć, powinieneś zajrzeć do jakiegoś magazynu szablonów WordPress i poszukać tam motywu z tą funkcją (polecam Root).
Będzie to najbardziej praktyczna opcja, ponieważ nie będziesz musiał instalować dodatkowych wtyczek. W takim przypadku nie musisz ręcznie dodawać ani edytować, wszystko będzie działać, jak mówią, po wyjęciu z pudełka (zaraz po instalacji).
Wtyczki
Możesz zainstalować pasek nawigacyjny wraz z wtyczką. Pamiętaj jednak, że każda wtyczka może jeszcze bardziej załadować Twój CMS. Jeśli jest tak wiele wtyczek, kolejna nowa może po prostu wszystko zepsuć, spowalniając witrynę.
Yoast SEO - szczegółowe instrukcje dotyczące konfigurowania okruchów
Jeśli używasz go jako wtyczki SEO, mam dla Ciebie świetną wiadomość. Bułki tarte są obecne w funkcjonalności, więc wystarczy je skonfigurować.
To jest ogólny przewodnik, który powinien działać dla większości użytkowników. Opiera się na informacjach dostarczonych przez samych autorów wtyczek.
Aby więc kanał nawigacyjny w Yoast SEO działał, musimy umieścić następujący kod PHP w naszych plikach szablonów:
Zwykle ten kod jest wstawiany do popularnych szablonów stron - single.php lub page.php. Niektórzy użytkownicy wklejają ten kod do pliku header.php - na samym końcu. Czy to zadziała w twoim konkretnym przypadku, czy nie, nie wiem, ale możesz spróbować.
Ogólne szablony stron można edytować za pomocą wbudowanych narzędzi WordPress. Przejdź do „Wygląd” - „Edytor”, znajdź żądany plik na liście.
Oto kod PHP i znaczniki HTML. Nieprzygotowany użytkownik może się pomylić, ale trzeba się zebrać i spróbować zrozumieć, co i gdzie.
Konkretnie, w moim motywie znajdują się już okruszki chleba, zaraz po nagłówku znajduje się funkcja, która wywołuje natywny łańcuch nawigacji. Twój kod będzie inny, ale ogólne znaczenie pozostanie takie samo.
Najlepiej jest umieścić bułkę tartą tuż pod nagłówkiem za pomocą funkcji get_header(); - po prostu służy, aby do niego zadzwonić. Dlatego poprawne będzie umieszczenie kodu z Yoast SEO tuż pod nim.
Pamiętaj jednak, że dostosowanie wstążki nawigacyjnej może wymagać pewnych stylów CSS. Są one dostarczane przez samą wtyczkę, ale mogą nie być odpowiednie.
Możesz nawet użyć bułki tartej w artykułach. Wystarczy pozostawić w odpowiednim miejscu następujący krótki kod: .
Ale ani kod, ani shortcode nie będą działać, jeśli funkcja breadcrumb jest wyłączona w samej wtyczce. Aby ją włączyć należy przejść do ustawień wtyczki (zakładka „SEO”) – wyświetlaj w wynikach wyszukiwania – bułkę tartą.
Przełącz suwak na „Włączone”, a następnie przewiń stronę w dół i kliknij „Zapisz zmiany”. Od teraz bułka tarta zacznie działać.
Możesz je dostosować, jeśli chcesz. Na przykład ustaw separator między elementami, napisz tekst linku do strony głównej, prefiksy dla taksonomii itp.
Możesz także pogrubić ostatnią stronę (lub tytuł artykułu). Aby to zrobić, przełącz odpowiedni suwak.
Jeśli Yoast SEO tak naprawdę Ci nie odpowiada, możesz przyjrzeć się innym wtyczkom, które umożliwiają tworzenie bułki tartej w Twojej witrynie. W darmowym katalogu jest ich sporo, ale zaznaczę najpopularniejsze opcje.
bułka tarta NavXT
Prosta wtyczka, która może tworzyć okruszki chleba dla twojego projektu. Obecnie ma ponad 800 000 aktywnych użytkowników. Wtyczka ma własny panel sterowania i jest odpowiednia dla większości witryn WordPress.
Prawie wszystko można dostosować w Breadcrumb NavXT. Wygląd, wyświetlane elementy i ich kolejność. Jest tu znacznie więcej opcji niż w tym samym Yoast SEO (a mianowicie w odniesieniu do konfiguracji łańcucha nawigacji).
To rozszerzenie można zainstalować całkowicie bezpłatnie z katalogu WordPress. Możesz go znaleźć według słów kluczowych.
bułka tarta
Kolejne rozszerzenie, które można zainstalować bezpośrednio z katalogu. W przeciwieństwie do poprzedniej, ta wtyczka nie ma tak dużej liczby odbiorców. Tylko 10 000 aktywnych użytkowników. Ale jeśli weźmiesz pod uwagę, że wiele osób woli inne opcje tworzenia łańcuchów nawigacyjnych, to jest to całkiem dobry wynik.
Wtyczka jest prosta i lekka. Ma piękny design (patrz zrzut ekranu), możesz zmieniać kolory. Do użytku w małych projektach to więcej niż wystarczające.
Są też inne wtyczki. Są mniej popularne, ale nadal możesz je wypróbować. Po prostu przejdź do katalogu wtyczek i wpisz słowo kluczowe breadcrumbs. WordPress od razu poda kilkadziesiąt odpowiednich opcji.
Wniosek
Bułka tarta to świetny sposób na poruszanie się po witrynie. Poprawiają SEO, zwiększają czynniki behawioralne i umożliwiają użytkownikom poruszanie się po stronach serwisu.
Prawie wszystkie nowoczesne witryny starają się zwracać na to uwagę. Projektanci stron internetowych nie pozostają daleko w tyle, teraz brak bułki tartej w szablonie jest uważany za bardzo istotną wadę. Ktoś nawet odmówi zakupu takiego szablonu, tylko z powodu tego pozornie nieistotnego drobiazgu. Pamiętaj, aby wziąć pod uwagę ten fakt i postaraj się, aby Twoja witryna była przyjazna dla użytkownika.
Jeśli chcesz dowiedzieć się więcej o tworzeniu projektów informacyjnych dla zarobków, to radzę zajrzeć. Autor opowiada o stworzeniu strony na WordPressie, kompetentnej optymalizacji technicznej i pod kątem wyszukiwarek, a co najważniejsze o obecnych metodach zarabiania.
- wewnątrz kontenera z menu klas .
Teraz musimy rozróżnić styl dla różnych elementów
- jest elementem blokowym i zajmuje całą dostępną mu szerokość, musi być ograniczony przez ustawienie width , lub, jak pokazano w przykładzie, przez ustawienie display z wartością inline-block . Linia znajduje się pod numerami, więc pozycje menu są przesunięte w dół o połowę ich wysokości.
Rozmiary wszystkich kół są ustawione dokładnie, poprzez szerokość i wysokość , dlatego pojawiają się dwa problemy. Po pierwsze, link jest znacznie mniejszy niż sam okrąg i użytkownik nie trafi; drugi - link znajduje się w górnej części koła, ale nie w jego środku. Pierwszy problem jest rozwiązany po prostu - musisz sprawić, by linki się blokowały, wtedy zajmą całą szerokość i wysokość koła. Jednocześnie linki pozostają kwadratowe i nieznacznie wychodzą poza kolorowe tło. Ale nie jest to widoczne i staje się zauważalne dopiero po najechaniu kursorem na jeden z rogów linku. Wyrównanie tekstu odbywa się za pomocą właściwości line-height, której wartość jest taka sama jak wysokość elementu. Ta metoda pozwala wyrównać tekst do połowy wysokości elementu i przyda się nam w przyszłości.
Tworzenie menu
Menu na stronie jest jednym ze sposobów poruszania się po nim. Najprostszą opcją jest zestaw poziomych linków, które wyglądają jak bułka tarta. Różnica polega na tym, że między ogniwami nie ma wskaźników (rys. 3).
Ryż. 3. Menu poziome
Do stworzenia takiego menu stosujemy zasady, które zastosowaliśmy w poprzednich przykładach, ale dla odmiany wprowadzimy zmiany dekoracyjne. Menu ma lekki gradient, pod nim jest słaby cień, a pozycje menu są oddzielone pionową linią. Sama linia jest niestandardowa i składa się z szaro-białych pasków, dlatego do elementów dodamy osobno własną linię
