ostalo 

Dekoracija od krušnih mrvica. Prekrasne prezle koristeći CSS. Primjeri korištenja krušnih mrvica u web dizajnu

Na web stranicama s mnogo stranica, put kroz web ( navigacija putem puta) može uvelike pomoći posjetiteljima da se snađu u hijerarhijskoj strukturi dokumenata i naznače trenutnu lokaciju korisnika na stranici. Iz perspektive upotrebljivosti, putevi mogu smanjiti broj koraka koje posjetitelj mora poduzeti da pronađe put do najviše razine stranice.

Što je breadcrumb?

Krušne mrvice (Navigacijski izbornik, "Krušne mrvice", Engleski Krušne mrvice) - navigacijski element web mjesta, koji predstavlja put kroz web mjesto od njegovog "korijena" do trenutne stranice na kojoj se korisnik nalazi.

Naslov "Mrvice kruha" ironična je referenca na njemačku bajku "Hansel i Gretel", u kojoj djeca, kada su po drugi put odvedena u šumu, nisu uspjela pronaći put natrag, jer ovaj put umjesto sitne kamenčiće koje su ostavljale za sobom krušne mrvice koje su naknadno kljucale šumske ptice.

Obično možete vidjeti puteve na stranicama s mnogo sadržaja koji je poredan hijerarhijski. Najjednostavniji oblik je kada su putevi predstavljeni kao horizontalne tekstualne veze i odvojeni simboli (> -"veće od") koji označavaju razinu te stranice u odnosu na druge stranice.

Kada biste trebali koristiti Breadcrumbs?

Koristite trag mrvica za velike web stranice i web stranice s hijerarhijskom organizacijom stranica.

Breadcrumbs se ne bi smjeli koristiti za web stranice s jednom razinom koje nemaju nikakvu logičku hijerarhiju ili grupiranje.

Sjajan način da odredite hoće li web-mjesto imati koristi od korištenja putova kroz web-mjesto je izrada karte web-mjesta ili dijagrama koji predstavlja navigacijsku arhitekturu web-mjesta, a zatim analizirati omogućuju li putevi kroz web-mjesto korisniku jednostavnu navigaciju unutar i između kategorija.

Hijerarhijsku navigaciju treba smatrati dodatnom značajkom i ne smije zamijeniti učinkovit primarni navigacijski izbornik. Ovo je sekundarna navigacijska shema koja korisnicima omogućuje da utvrde gdje se nalaze i alternativni je način za navigaciju web mjestom.

Vrste krušnih mrvica

Postoje tri glavnevrsta "krušnih mrvica".

Na temelju lokacije

Putevi kroz koje se temelje na lokaciji pokazuju korisniku gdje se nalazi u hijerarhiji web mjesta.Obično se koriste za navigacijske strukture koje imaju više razina (obično više od dvije razine).U donjem primjeru (izSitePoint ), svaka tekstualna poveznica stranice koja se nalazi lijevo je jedna razina viša.

Na temelju svojstava

Putovi kroz svojstva odražavaju atribute određene stranice.

Na temelju puta

Oni pokazuju put kojim je korisnik došao do trenutne stranice. Ova staza je dinamična.

Prednosti korištenja Breadcrumbsa

Oni mogu pomoći korisniku

Breadcrumbs se primarno koriste kako bi korisnicima pružili dodatna sredstva za navigaciju web mjestom.Na velikim web-mjestima s više razina, vizualizacija prijeđenog puta može pomoći korisniku da prilično jednostavno dođe do kategorija više razine.

Smanjuje broj klikova ili radnji za povratak na stranice više razine

Umjesto korištenja gumba za povratak u pregledniku ili primarne navigacije web-mjesta, korisnici se mogu vratiti na glavne kategorije pomoću putova uz manje klikova.

Obično nemojte začepiti zaslon

Obično su vodoravne orijentacije i stoga ne zauzimaju puno prostora na stranici.

Smanjite stopu napuštanja početne stranice

Breadcrumbs mogu navesti nove posjetitelje da pregledaju ostatak vaše web stranice. Na primjer, korisnik ode na stranicu putem Google pretraživanja, vidi kategorije koje su objavljene iznad i može se zainteresirati. To zauzvrat smanjuje stopu napuštanja stranice.

Pogreške pri korištenju Breadcrumbsa

Korištenje krušnih mrvica vrlo je jednostavno. Ali prije nego što ih implementirate na svoje web mjesto, morate razmotriti neke pogreške koje biste trebali izbjegavati.

Korištenje krušnih mrvica kada nije potrebno

Uobičajena pogreška je korištenje krušnih mrvica kada od toga nema nikakve koristi.

U gornjem primjeru možemo vidjeti previše navigacijskih opcija koje su smještene prilično blizu jedna drugoj: primarna navigacija, putanje kroz web stranicu i sekundarna navigacija.

Korištenje puteva kao glavne navigacije

Kao što je ranije navedeno, mrvice kruha treba koristiti kao dodatnu pomoć pri navigaciji.

Korištenje putanja kada stranice imaju više kategorija

Breadcrumbs imaju linearnu strukturu, pa će ih biti teško koristiti ako se vaše stranice ne mogu podijeliti u jasne kategorije.Odluka o korištenju puteva uvelike ovisi o tome kako ste izradili hijerarhiju web-mjesta.Na niskoj razini stranice korištenje puteva je neučinkovito, netočno i zbunjujuće za korisnika.

Breadcrumb dizajn

Prilikom razvijanja krušnih mrvica mogu se pojaviti neka pitanja. Na primjer:

Koji simbol treba koristiti za odvajanje poveznica?

Uobičajeni i najprepoznatljiviji simbol za odvajanje hiperveza u putevima kroz web stranicu je simbol veće od - (>).

Također možete koristiti navodnike da označite desni kut (") i kosu crtu (/).

Izbor ovisi o samoj stranici i vrsti lanca koji koristite.Na primjer, ako poveznice u putevima nisu međusobno hijerarhijski povezane, korištenje simbola veće od > možda neće točno prenijeti njihovu bit.

Što bi trebali biti?

Ne želite da vaše mrvice dominiraju stranicom.Trebali bi se koristiti kao dodatna pomoć korisnicima (zbog praktičnosti), tako da bi i njihova veličina trebala odgovarati ovoj i ispravno prenijeti ovu funkciju korisnicima - trebali bi biti manji ili manje uočljivi od primarne navigacije izbornika.

Dobro pravilo pri određivanju prijeđene udaljenosti je dane treba biti prvi element koji privlači pozornost korisnika na stranici.

Gdje bi se trebale nalaziti krušne mrvice?

Putanja se obično pojavljuju na vrhu stranice, ispod glavnog navigacijskog izbornika, ako se koristi horizontalni izbornik.

Statistika

Dolje su statistički podaci prikupljeni u svibnju 2002. na 75 vodećih stranica za e-trgovinu.

Orijentacija lanca

95% - horizontalno

5% okomito

Razdjelnik između elemenata (za horizontalne lance)

Primjeri korištenja krušnih mrvica u web dizajnu

Sada kada smo pogledali tko, kako, kada i zašto ljudi koriste mrvice kruha, možemo pogledati neke primjere kako se koriste na web stranicama.

Klasično korištenje krušnih mrvica

Korištenje drugih simbola

Lijepi pozdrav. Breadcrumbs su prilično koristan blok na bilo kojoj web stranici jer vam omogućuju da vidite cijeli put do stranice na kojoj se trenutno nalazite. A danas ću vam reći kako dizajnirati prezle u CSS-u? Ne stvarati, nego formalizirati. Općenito, postoji mnogo opcija, dotaknut ću se dvije.

Jednostavna opcija dizajna - bez slike

HTML kod simulira puteve. Neka bude ovako:

U principu, možete jednostavno staviti kutnu zagradu, ali tada nećete moći kontrolirati debljinu crte. Predlažem da to učinite drugačije, koristeći transformacije. Ovo je kod koji će to učiniti:

Cumbs1 a:not(:last-child):after(
sadržaj: "";
prikaz: inline-block;
širina: 5px;
visina: 5px;
rub-top: 2px puna crna;
rub-desno: 2px puna crna;
transformacija: rotacija (45 stupnjeva);
margina-lijevo: 5px
}
.cumbs1 a:hover(
boja: narančasta;
}

Možda će vam ovi selektori biti malo komplicirani, pa pogledajte ovaj članak. Suština je sljedeća: korištenje pseudoelementa (o tome što je i kako ga koristiti) nakon toga dodaje naš separator na kraj svake veze. Formira se pomoću dva okvira i rotacijom od 45 stupnjeva. Također dodajemo narančastu boju lebdećim vezama. To je u biti cijeli dizajn.

Još jedna opcija dizajna - sa slikom

U ovom će slučaju krušne mrvice izgledati zanimljivije, ovako:

Za ovo nam je potrebna slika i neki css stilovi:

Cumbs2(
pozadina: narančasta;
max-width: 250px;
}
.cumbs2 a(
prikaz: inline-block;
ispuna: 7px 0;
boja: #000;
}
.cumbs2 a:not(:posljednje-dijete)(
pozadina: url(arrow.png) bez ponavljanja 100% 50%;
padding-desno: 33px;
}

Ne dajem HTML kod, jer je isti kao u prvom slučaju. Gdje započeti? Prvo određujemo boju pozadine i dimenzije cijelog bloka s krušnim mrvicama. Zatim postavljamo opće stilove za veze - tip bloka, gornji i donji ispun i boju.

Sljedeća faza je najzanimljivija - pomoću pseudo-klase not odabiremo sve poveznice u bloku osim posljednje i postavljamo im pozadinsku sliku arrow.png , bez ponavljanja, s položajem pozadine u sredini visine i na samom kraju u širinu jedne karike. Prve dvije poveznice trebaju uvući s desne strane samo da biste tamo postavili sliku. Da ga nema, slika bi prekrivala tekst.

Mislim da ste već pogodili kako pseudo-klasa not radi - odabire sve elemente osim onih koji su navedeni u zagradama. Ako išta, u budućnosti ću napisati još jednu kratku bilješku o radu sa pseudo-class:not, gdje će sve biti jasnije. Pa, evo 2 jednostavna dizajna krušnih mrvica koje možete koristiti za izradu vlastitih.

Dobar dan, dragi čitatelji!

Kako breadcrumbs utječu na optimizaciju tražilice i kako ih napraviti na WordPress stranici. Upravo o tome će se raspravljati u današnjem članku. Gledajući unaprijed, reći ću da mrvice kruha pomažu vašim korisnicima u kretanju web-stranicom. Također imaju pozitivan utjecaj na SEO.

Breadcrumbs su savjeti na web stranici koji korisniku pokazuju gdje se nalazi. Neka vrsta lanca koji je stvoren za plovidbu.

Oni su klikabilni, što znači da posjetitelj u svakom trenutku može prijeći na višu “razinu” - u potkategoriju ili kategoriju. Breadcrumbs u pravilu imaju sljedeći oblik: glavno – naslov – potkategorija – članak. Posljednji element se vrlo često uklanja, u uvjerenju da stvara nepotrebno dupliciranje.

Vjeruje se da je ovo ime referenca na bajku, gdje su djeca, idući u šumu, za sobom ostavljala stazu od mrvica kruha za navigaciju. Morali su se vratiti ovom stazom. Lanac poveznica također je put; što dalje idete na stranicu, to više elemenata sadrži. I zapravo, duž ovog lanca možete se vratiti natrag na glavnu stranicu. Baš kao u bajci.

Kako utječu na SEO?

Korištenje navigacijske trake smatra se dobrim oblikom u svijetu optimizacije za tražilice.

Prvo, poboljšava čimbenike ponašanja. A ovo je, kao što znate, gotovo najosnovniji pokazatelj kvalitete stranice. Ako je upotrebljivost na dobroj razini, korištenje i navigacija jasni i praktični, posjetitelji će to svakako cijeniti i dulje ostati na resursu. Osim toga, što su čimbenici ponašanja bolji, to će vaš resurs biti viši u rezultatima pretraživanja.

Drugo, prisutnost prezli već se smatra dobrim faktorom za tražilicu. Roboti vide da projekt ima navigacijski sustav i strukturu, a to ima dobar učinak na rangiranje.

Naravno, sama navigacijska traka neće dovesti vaš resurs na vrh. Ovo funkcionira u kombinaciji s drugim aspektima dobrog SEO-a.

Ukratko, mrvice kruha pomažu:

  • poboljšati čimbenike ponašanja i upotrebljivost,
  • učiniti strukturu stranice jasnom i pristupačnom,
  • jednostavno kretanje kroz stranice,
  • tehnički poboljšati SEO,
  • napraviti poveznicu.

Odnosno, korištenje navigacijske vrpce nužno je za one koji žele da njihov projekt bude prikladan, praktičan i posjećen.

Vrste krušnih mrvica

Da, da, imaju sorte. Nema ih mnogo, ali ipak vrijedi razmotriti ovu točku.

Linearno

Obična traka koja prikazuje put od glavne stranice do članka. Najčešći tip krušnih mrvica... Imamo samo linearni tip navigacijske trake.

Gumb Natrag

Vrlo nezgodna vrsta navigacije, koja je vrlo česta u internetskim trgovinama. U pravilu, korisnici nisu posebno zadovoljni s tim i koriste sličan gumb u samom pregledniku. Za informativno mjesto ova je opcija praktički beskorisna.

Hibrid

Ova opcija kombinira prethodne dvije. Odnosno, resurs ima i linearnu navigaciju i gumb "Natrag". Možemo reći da je ovo kompromis koji pomaže svima ugoditi. Ali, kao što sam rekao gore, ljudi rijetko koriste gumb "Natrag", preferirajući gumb u samom pregledniku - srećom, sve moderne aplikacije ih imaju.

Obično se navigacijska traka nalazi na svim stranicama osim na glavnoj stranici. U WordPressu su to kategorije, oznake, članci i druge taksonomije.

Kako stvoriti Breadcrumbs u WordPressu

Najlakši način za stvaranje navigacijskog feeda na WordPressu i drugim stranicama je putem html-a. Točnije, bit će to hibrid html-a i php-a - inače ćete svaki navigacijski lanac morati pisati ručno, a to nije baš ugodan zadatak.

Korištenje predloška

Bilo bi pametno odmah odabrati šablonu s krušnim mrvicama. Ako tek razmišljate o svojoj sljedećoj web stranici i još je niste počeli stvarati, trebali biste pogledati neku WordPress trgovinu s predlošcima i tamo potražiti temu s ovom funkcijom (preporučam Root).

To će biti najpraktičnija opcija jer nećete morati instalirati dodatne dodatke. U isto vrijeme, ne morate ništa ručno dodavati ili uređivati; sve će raditi, kako kažu, izvan kutije (odmah nakon instalacije).

Dodaci

Možete instalirati navigacijski feed zajedno s dodatkom. Ali imajte na umu da svaki dodatak može još više opteretiti vaš CMS. Ako već postoji toliko dodataka, onda još jedan novi može jednostavno sve pokvariti, usporavajući stranicu.

Yoast SEO – detaljne upute za postavljanje mrvica

Ako ga koristite kao SEO dodatak, imam sjajne vijesti za vas. Breadcrumbs su prisutni u funkcionalnosti, tako da ih sve što trebate učiniti je konfigurirati.

Ovo su opće upute koje bi trebale odgovarati većini korisnika. Temelji se na informacijama koje su dali sami autori dodataka.

Dakle, kako bi navigacijski feed u Yoast SEO radio, moramo postaviti sljedeći PHP kod u naše datoteke predložaka:

Obično se ovaj kod umeće u uobičajene predloške stranica - single.php ili page.php. Također, neki korisnici ubacuju ovaj kod u header.php - na samom kraju. Ne znam hoće li to raditi konkretno u vašem slučaju ili ne, ali možete pokušati.

Uobičajeni predlošci stranica mogu se uređivati ​​pomoću ugrađenih WordPress alata. Idite na "Izgled" - "Uređivač", pronađite željenu datoteku na popisu.

Ovdje je PHP kod i HTML oznaka. Neobučeni korisnik može se zbuniti, ali morate se sabrati i pokušati razumjeti što i gdje.

Konkretno, u mojoj temi, mrvice kruha su već dostupne odmah nakon zaglavlja postoji funkcija koja poziva izvorne mrvice. Vaš će kôd biti drugačiji, ali opće značenje ostaje isto.

Najbolje je staviti krušne mrvice direktno ispod zaglavlja - funkcija get_header(); – samo služi da ga nazovem. Stoga je ispravno postaviti kod Yoast SEO direktno ispod njega.

No imajte na umu da ćete za prilagodbu navigacijske trake možda morati raditi s CSS stilovima. Omogućuje ih sam dodatak, ali možda nisu prikladni.

Možete čak koristiti prezle u člancima. Samo trebate ostaviti sljedeći kratki kod na pravom mjestu: .

Ali ni kod ni kratki kod neće raditi ako je funkcija puta kroz stranicu onemogućena u samom dodatku. Da biste ga omogućili, morate otići na postavke dodatka (kartica SEO) - prikaz u rezultatima pretraživanja - putanje.

Prebacite klizač na "Omogućeno", zatim se pomaknite prema dolje po stranici i kliknite "Spremi promjene". Od ove točke nadalje, krušne mrvice će početi djelovati.

Možete ih prilagoditi ako želite. Na primjer, postavite razdjelnik između elemenata, odredite tekst poveznice na glavnu stranicu, prefikse za taksonomije itd.

Zadnju stranicu (ili naslov materijala) možete istaknuti i podebljanim slovima. Da biste to učinili, prebacite odgovarajući klizač.

Ako Yoast SEO nije posebno prikladan za vas, onda možete obratiti pozornost na druge dodatke koji vam omogućuju stvaranje puteva na vašoj web stranici. Ima ih puno u besplatnom katalogu, ali ja ću istaknuti najpopularnije opcije.

Breadcrumb NavXT

Jednostavan dodatak koji može stvoriti puteve za vaš projekt. Trenutno ima više od 800 tisuća aktivnih korisnika. Dodatak ima vlastitu upravljačku ploču i prikladan je za većinu WordPress stranica.

Gotovo sve se može prilagoditi u Breadcrumb NavXT. Izgled, prikazani elementi i njihov redoslijed. Ovdje postoji mnogo više mogućnosti nego u istom Yoast SEO (posebno u vezi s postavljanjem navigacijskog lanca).

Ovo proširenje se može instalirati potpuno besplatno iz WordPress imenika. Možete ga pronaći pomoću ključnih riječi.

Breadcrumb


Još jedno proširenje koje se može instalirati izravno iz imenika. Za razliku od prethodnog, ovaj dodatak nema tako veliku publiku. Ukupno 10.000 aktivnih korisnika. Ali ako uzmete u obzir da mnogi ljudi preferiraju druge opcije za stvaranje krušnih mrvica, onda je ovo prilično dobar rezultat.

Dodatak je jednostavan i lagan. Ima prekrasan dizajn (pogledajte snimak zaslona), možete mijenjati boje. Za korištenje na malim projektima više je nego dovoljno.

Postoje i drugi dodaci. Manje su popularni, ali ih ipak možete isprobati. Samo idite u direktorij dodataka i unesite ključnu riječ breadcrumbs. WordPress će vam odmah dati nekoliko desetaka odgovarajućih opcija.

Zaključak

Breadcrumbs su sjajan način za navigaciju web stranicom. Oni poboljšavaju SEO, povećavaju čimbenike ponašanja i omogućuju korisnicima navigaciju stranicama stranice.

Gotovo sve moderne stranice pokušavaju obratiti pozornost na to. Web dizajneri ne zaostaju; sada se odsutnost krušnih mrvica u predlošku smatra vrlo značajnim nedostatkom. Netko će čak odbiti kupiti takav predložak samo zbog ovog naizgled beznačajnog detalja. Svakako uzmite u obzir ovu činjenicu i pokušajte da vaša stranica bude prilagođena korisniku.

Ako želite saznati više o stvaranju informacijskih projekata za prihod, savjetujem vam da pogledate. Autor govori o izradi web stranice na WordPressu, kompetentnoj tehničkoj i optimizaciji za tražilice, i što je najvažnije, o trenutnim metodama monetizacije.

Popisi su prikladni zbog svoje hijerarhijske strukture i fleksibilnih postavki prikaza, pa se koriste ne samo za namjeravanu svrhu, već i za stvaranje raznih elemenata stranice kao što su putevi, numeriranje stranica, izbornici, kartice itd.

krušne mrvice

Breadcrumbs vam pomažu u kretanju web mjestom i prikazuju položaj trenutne stranice u odnosu na druge dijelove web mjesta. To olakšava prelazak na višu razinu i razumijevanje u kojem se odjeljku sada nalazite. Dakle, za tehničku stranicu, navigacija može biti sljedeća (slika 1).

Riža. 1. Vrsta krušnih mrvica

Posljednji tekst upućuje na trenutnu stranicu i nije poveznica. Sve stavke su odvojene jedna od druge nekim simbolom, obično strelicom (→), kosom crtom (/), znakom veće od (>) i slično.

Budući da je dizajn povjeren stilovima, HTML kod je vrlo lakonski. Stvorimo popis i dodijelimo mu klasu putanje tako da se stil ne proširi na druge popise.

  • Dom
  • Transferi
  • Mjenjači
  • Pužni mjenjač

Imajte na umu da ovdje nema separatora; oni se prikazuju pomoću svojstva stila sadržaja (primjer 1).

Primjer 1: Stvaranje Breadcrumbs

krušne mrvice

  • Dom
  • Transferi
  • Mjenjači
  • Pužni mjenjač

Za početak, poništavamo sve margine i ispune popisa i vodoravno poredamo stavke pomoću svojstva prikaza s vrijednošću inline-block. Također uklanja markere, tako da nema potrebe da to radite namjerno. Pseudoelement ::before potreban je za dodavanje razdjelnika između stavki i kontrolu njihovog izgleda. Tekst je dodan svim točkama, uključujući i prvu, koja nam, naravno, nije potrebna. Stoga ga uklanjamo pomoću pseudoklase :first-child, koja primjenjuje stil na prvi element

  • .

    Velika količina materijala, poput članaka na stranici, često je podijeljena na zasebne stranice od 10-15 članaka po stranici, što dovodi do smanjenja učitavanja stranice. Prijelaz između pojedinih stranica vrši se njihovim numeriranjem, pri čemu svaki broj služi kao poveznica na odgovarajuću stranicu. Moguće je prikazati sve stranice, određeni broj njih ili samo poveznice na sljedeću i prethodnu stranicu. Koju opciju odabrati ovisi o dizajnu stranice i vašim željama. Jedan od mogućih načina numeriranja prikazan je na sl. 2.

    Riža. 2. Numeriranje stranica

    Da bismo napravili ovo numeriranje, ponovno koristimo jednostavan popis, sada s klasom straničnika, svaka stavka na ovom popisu bit će poveznica na stranicu. Da biste istaknuli trenutnu stranicu, dodajte aktivnu klasu (primjer 2).

    Primjer 2: Numeriranje stranica

    Paginacija

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Crta između točaka napravljena je kroz svojstvo border-bottom za element