Breadcrumb NavXT ruska verzija. Breadcrumbs na WordPress blogu sa i bez dodatka - vodič korak po korak za početnike

Dobar dan dragi čitaoci! Nastavljam da vam govorim o glavnim WordPress dodacima koje biste trebali odmah instalirati. Danas želim da vam predstavim Breadcrumb NavXT dodatak, koji rješava nekoliko važnih zadataka. Prvo, kreirat će dodatnu navigaciju na blogu. Zahvaljujući čemu će posjetitelj moći pratiti putanju od korijena stranice do stranice na kojoj se nalazi. Drugo, to je dodatni alat u kreiranju internog povezivanja stranica. Treće, prije nekog vremena, Google pretraživač počeo je izdavati “ mrvice hljeba” u SERP-u, što će vam omogućiti da privučete dodatni promet na projekat. I četvrto, hvala Breadcrumb NavXT dodatak statička težina je ravnomjerno raspoređena na sve stranice. Ali vjerovatno vrijedi prijeći na instalaciju "krušnih mrvica".

Dakle, prvo morate preuzeti dodatak Breadcrumb NavXT sa stranice http://wordpress.org/extend/plugins/breadcrumb-navxt. Raspakujte rezultujuću arhivu i koristite ftp klijent da je ispustite u /wp-content/plugins direktorijum. I konačno aktivirajte u admin panelu. Nakon što je dodatak uspješno aktiviran, linija Breadcrumb NavXT se pojavljuje u konzoli postavki.

Ali da biste u potpunosti aktivirali dodatak Breadcrumb NavXT, morate umetnuti izlazni kod funkcije breadcrumb u određene datoteke šablona. Kod izgleda ovako:

Ovaj kod će morati biti instaliran u sljedeće datoteke šablona: single.php (prikazuje članke), archive.php (arhivirani članci, kategorije), search.php (članci pronađeni putem pretraživanja bloga), page.php (prikazuje stranice). Da biste to uradili, u administrativnom panelu idite na Dizajn i izaberite stavku Uredi, a zatim aktivirajte željenu datoteku, pretpostavimo single.php Ubacite funkcijski kod Breadcrumb NavXT dodatka odmah iza reda

I kliknite na Sačuvaj promjene. Zatim moramo kreirati stil za našu dodatnu navigaciju. Stoga otvaramo datoteku style.css i pišemo nekoliko svojstava stila za klasu BREADCRUMB:

Breadcrumb (font:bolder 12px Georgia; padding-bottom: 1px; padding: 4px 8px; boja: #FFffff!important; background:#9C1718 ; granica: 0 !important; ) .breadcrumb a( boja: #ffffff;!important; ) .breadcrumb a:hover ( boja: #ffffff; background:#C9CACB !važno; )

Ovim sam postavio svojstva refleksije za krušne mrvice.

Font:bolder 12px Georgia; je veličina i tip fonta
- padding-bottom: 1px; - uvlake
- boja: boja teksta
- padding: dopuna teksta
-pozadina: boja pozadine na koju će se postaviti prezle
- .breadcrumb a - boja veze
- .breadcrumb a:hover - boja linkova pri lebdenju
pozadina: boja pozadine

Ovaj kod se može postaviti na samom dnu datoteke style.css

Mi čuvamo promjene.

Ovim je završen posao na uređivanju koda i ostaje samo da se konfiguriše odraz dodatka u administrativnom panelu. Da bismo to učinili, potrebna nam je stavka Breadcrumb NavXT u postavkama. Prozor postavki dodatka sastoji se od nekoliko kartica.

Počnimo sa generalom
Ova kartica vam omogućava da postavite opcije koje se odnose na sve stranice.
U liniji "Delimiter" označavamo mnemonički kod koji vam omogućava da odvojite mrvice kruha. Za pomoć možete koristiti ovaj mali izbor mnemotehničkih kodova

U polju "Maksimalna dužina" možete postaviti maksimalnu dužinu sidra u krušnim mrvicama. Već sam rekao da pretraživači uzimaju u obzir linkove iz breadcrumbs i služe za prijenos statičke težine.
Zatim morate označiti okvir "Home link", koji vam omogućava da prikažete vezu do početne stranice u breadcrumbs. Obično je to sidro ili ključna riječ.

Počnimo tako što ćemo vam reći za šta se općenito koriste krušne mrvice prilikom dizajniranja web stranica.

Šta su "krušne mrvice"?

mrvice hljeba(breadcrumbs) je element za navigaciju stranice. Nazivaju se i navigacijski lanac, duplirana navigacija, navigacijski meni itd. U engleskoj literaturi možete pronaći i naziv: " mrvice kolačića» (mrvica kolačića). Hlebne mrvice se ponekad mogu nazvati i navigacionim putem. Zapravo, svi ovi sinonimi opisuju isti objekat, koji ćemo dalje analizirati.

Hlebne mrvice vizuelno prikazuju putanju od glavne (root) stranice sajta do stranice na kojoj se korisnik trenutno nalazi. Zašto je ova navigacija dobila tako čudno ime? Ako ste čitali bajku braće Grimm „Henzel i Gretel“, onda znate da su u njoj deca, čuvši roditelje kako pričaju da su ostavljeni u šumi, pokušala unapred da se opskrbe malim kamenčićima koje su bacali. put da bi izašao. Prvi put je uspjelo, ali drugi put nije bilo moguće pokupiti kamenje, pa su djeca bacala mrvice kruha na cestu. Međutim, nisu predvidjeli činjenicu da su ove mrvice kljucale ptice. Kao rezultat toga, djeca su se izgubila i naišla na vještičinu kuću. Nema smisla prepričavati cijelu radnju bajke, vjerovatno ste je ipak pročitali. Zapravo, naziv navigacije nas također šalje na ovaj događaj.

Vizuelno, prezle su obično mali meni koji se najčešće nalazi na vrhu stranice. Stavke uključene u ovaj meni su hiperveze (osim poslednje stavke) i odražavaju hijerarhijsku strukturu materijala na sajtu.

Breadcrumbs koriste roboti za pretraživanje. Uz pomoć ove navigacije, roboti mogu brzo razumjeti arhitekturu vaše stranice i analizirati je. Shodno tome, nemoguće je zanemariti krušne mrvice ili ih namjerno odbiti, jer to može indirektno utjecati na pogoršanje indeksiranja stranice (ili robotovo nepotpuno indeksiranje stranica resursa).

Što je još važnije, krušne mrvice imaju pozitivan utjecaj na korisničko iskustvo. Korisnik uvijek može tačno shvatiti gdje se trenutno nalazi na stranici, može brzo preći na prethodni nivo ugnježđenja materijala (ili na određenu sekciju), tj. osoba ima pred očima rutu koju je prešao od glavne stranice stranice do trenutne stranice. Hlebne mrvice se koriste i u rezultatima Google pretrage, a uvedene su ne da bi se pojednostavio rad pretraživača, već upravo da bi korisnik mogao da vidi strukturu materijala.

Pozdrav svima!. Danas u ovom članku želim vam reći kako možete poboljšati upotrebljivost svoje stranice pomoću dodatka Yoast SEO, o čemu ću detaljno govoriti u jednom od sljedećih članaka.

Sigurno su mnogi već čuli za ovaj dodatak i znaju da je neophodan za pisanje SEO optimiziranih članaka. Ali šta se još može učiniti s WordPress Yoast SEO breadcrumbs, malo tko nagađa.

Za početak, dozvolite mi da objasnim šta su „krušne mrvice“ i zašto su uopšte potrebne.

dakle, "breadcrumbs" je dodatna paginacija koja prikazuje u kojoj se kategoriji ili odjeljku nalazi članak. Posjetilac, nakon što je otišao na neku stranicu vašeg bloga, trebao bi razumjeti u kojoj se sekciji nalazi i u kojoj sekciji traži informacije koje su mu potrebne. Općenito, ova navigacija se može predstaviti na sljedeći način:

Na našoj web stranici to izgleda ovako:

Osim toga, prisustvo ove navigacije pomaže robotima da jasnije razumiju strukturu stranice i brže indeksiraju vaš blog. A ovo je veoma važno kada je projekat onlajn.

"Zašto?" - pitate, odlučili smo da koristimo ovaj dodatak. Odgovor će ovdje biti jednostavan. Na internetu postoji veliki broj sličnih servisa koji će pomoći u povlačenju "mrvica", ali će u isto vrijeme dodatno učitati stranicu, to je sigurno neće učiniti boljom. A budući da još uvijek koristimo Yoast SEO za optimizaciju postova, grijeh je ne iskoristiti njegove mogućnosti i ne napraviti zgodnu upotrebljivost s njim.

Postavljanje breadcrumbs izlaza pomoću dodatka Yoast SEO

Neću pisati ovdje kako instalirati ovaj Yoast SEO. Ako ne znate kako to učiniti, pročitajte ovaj moj članak "". U njemu detaljno govorim i pokazujem na koje načine možete instalirati potrebne dodatke za rad.

U prozoru koji se otvori potvrdite izbor u polju za potvrdu "Omogući breadcrumbs (breadcrumbs)".

Na našu radost, sva podešavanja će se otvoriti na ruskom jeziku i intuitivna su. U videu koji će se uskoro pojaviti u ovom članku, jasnije ću pokazati šta će se dogoditi kada promijenite neke od stavki u ovom meniju. U međuvremenu, možete jednostavno eksperimentirati i pokušati sami promijeniti postavke. Ovdje se ne može učiniti ništa strašno, jer su to samo vizualne prilagodbe našim „mrvicama“.

Sljedeći korak nakon omogućavanja breadcrumbs je da zalijepite aktivacijski kod za ovu funkciju u predložak teme. Da biste saznali koji kod umetnuti, slijedite link koji dolazi nakon postavki našeg lanca.

Nakon što smo došli na službenu web stranicu ovog dodatka, kopiramo potreban kod i zalijepimo ga na mjesto naše teme gdje planiramo da ih prikažemo.

Ne mogu preporučiti univerzalno mjesto za umetanje ovog koda, jer to ovisi o temi koju koristite. Možda ćete morati da ga upišete ili u single.php fajl, ili u page.php, au nekim slučajevima i u header.php.

U našem slučaju, ubacili smo kod skoro na sam početak single.php fajla, koji se nalazi na www/wp-content/themes/your theme/.

Bilješka: Skrećem vam pažnju da je bolje ubaciti kod preko FTP klijenta. Koristimo Filezilla, čiji je rad detaljno napisan. Obavezno pročitajte naše upute kako biste izbjegli mnoge početničke greške.

Takođe vas molim da obratite pažnju na činjenicu da se kod koji imamo malo razlikuje od onog koji su nam preporučili programeri. Naime, funkciju breadcrumbs smo umotali u div tag. Ovo se radi kako biste mogli postaviti svoj vlastiti individualni stil prikaza.

Da bismo to učinili, u datoteci style.css propisujemo stilove koji su nam potrebni. U njima možemo podesiti boju, pozadinu, veličinu fonta, podcrtavanje, odnosno dovesti ga u izgled koji bi u potpunosti odgovarao našem ukusu ili se kombinovao sa cjelokupnim stilom stranice. U našem slučaju to izgleda ovako:

Ovim je dovršeno postavljanje dodatka, ali u ovoj verziji, nakon što se prikaže naslov, bit će prikazan i naslov članka. Ovo može dovesti do neželjene pošte. Mislim da ćete se složiti sa mnom da je ovo suvišno, budući da je naslov članka već savršeno vidljiv korisniku i nema potrebe da ga ponovo umnožavate.

Da biste to izbjegli, potrebno je dodatno umetnuti mali kod u datoteku functions.php.

Funkcija adjust_single_breadcrumb($link_output) ( if(strpos($link_output, "breadcrumb_last") !== false) ( $link_output = ""; ) return $link_output; ) add_filter("wpseo_breadcrumb_single_sing", "adjustc_rumb_rumb");

Sada su sva naša podešavanja gotova. Ako ste sve uradili kako treba, dobit ćete otprilike isto kao na našem blogu.

Ako imate bilo kakvih pitanja - pišite u komentarima!

Zbogom svima!

Anton Kalmikov je bio sa vama

Pozdrav, dragi čitaoci blog stranice. Danas želim da pričam o WordPress dodatku koji se koristi na mom blogu u dve veoma važne svrhe istovremeno.

Prvo, olakšava navigaciju, a drugo, rješava vrlo važan problem - stvaranje ispravnog internog povezivanja. Kako ne bih odgađao intrigu, odmah ću reći da ćemo razgovarati o Breadcrumb NavXT dodatku. Ali prvo stvari.

Već sam dosta govorio o potrebi kreiranja pravilnog povezivanja stranica stranice kako bi statička težina koju prenose bilo koji vanjski link ravnomjerno raspoređena na sve web stranice projekta. Ovo je posebno važno.

Zašto su vam potrebne breadcrumbs u WordPress-u

Promocija na LF-u ima niz prednosti, od kojih je glavna (posebno važna za nekomercijalne projekte) da ne zahtijeva ulaganje sredstava potrebnih za kupovinu eksternih linkova. To je zbog činjenice da se LF može promovirati samo putem interne stranice i kreiranjem ispravnog povezivanja, kako je opisano.

Inače, za komercijalne projekte, promocija niskim frekvencijama takođe ima niz prednosti, od kojih je glavna, opet, niža cena, ali osim toga, mnogo će veća verovatnoća da će posetioci koji dolaze sa izdavanja ovakvih zahteva biti konvertovane u novčanice od posetilaca koji dolaze sa srednjim zahtevima i visokofrekventnim (zbog nejasnoće potonjeg).

Glavna ideja ispravnog povezivanja je osigurati da statička težina koja se prenosi na različite stranice stranice (većina vanjskih veza obično vodi do glavne) teče bez problema do onih koje se kreću direktno uz dno (gdje, u stvari, članci se nalaze).

Ali idealnu kružnu shemu opisanu u članku teško je implementirati u stvarnim uvjetima, tako da bi sferna šema povezivanja bila dobra opcija. Grubo govoreći, takva šema se može preuveličati do te mjere da što više internih veza ima, to će se statička težina bolje raspodijeliti. To je poput opsežnog cirkulacijskog sistema koji omogućava krvi da prenosi kiseonik do svih, čak i onih najudaljenijih od pluća, unutrašnjih organa.

Možete ručno dodati veze na druge materijale na svojoj web stranici svaki put kada pišete članke koji će biti relevantni. Istina, ovako kreiranu internu listu sidra za svaki od članaka shvatite vrlo ozbiljno. Morate to učiniti na isti način kao. Ne biste trebali koristiti isti nerazrijeđeni ključ u svim referencama na njega, znate na šta mislim.

Ovo je vrlo dobar način, ali uvijek će biti korisno proširiti i dopuniti ga uz pomoć automatskih metoda sličnih materijala vašeg projekta, sličnih tematike ovom članku.

Danas želim detaljno razmotriti prvu opciju, ali o sličnim materijalima za WordPress u .

Za implementaciju breadcrumbs koristićemo dodatak Breadcrumb NavXT. U principu, možete koristiti i druge WordPress dodatke za ovu svrhu, ali su mi se ovi više svidjeli. Moguće je čak.

Instaliranje Breadcrumb NavXT dodatka u WordPress

U redu, vrijeme je da pređete direktno na instalaciju i konfiguraciju dodatka. Ako odjednom ne znate šta su hljebne mrvice, onda je u redu. Zapravo, ni ja prvo nisam znao, jer je ovaj termin preuzet iz buržoazije i povezuje se s njihovom buržoaskom bajkom o Hanzelu i Greti, koji su njima označili put.

Po našem razumijevanju, ovaj element navigacije sajta treba nazvati "Arijadnina nit", jer smo nekako bliži. Pa, dobro, kako su to zvali, tako su i zvali. Dakle, obično se prikazuju negdje na vrhu prozora stranice i zapravo predstavljaju put do članka koji trenutno čitate.

Na primjer, jako volim navigaciju uz pomoć mrvica i uvijek pokušavam pronaći njihovu liniju na bilo kojoj web stranici kako bih shvatio gdje sam zapravo i kako da odem do odjeljka u kojem se nalazi ovaj divni članak kako bih pročitao više o ista tema.

Pa, sećate se šta su mrvice hleba? Mislim da su se sjetili, a ako nisu, onda pogledajte na sam vrh ovog prozora ispod zaglavlja ovog bloga.

Prvo ćete morati preuzeti Breadcrumb NavXT odavde. Instalacija dodatka na WordPress je standardna. Povežite se sa svojim blogom preko FTP-a (detaljno je opisan rad sa FileZilla klijentom) i otvorite folder na serveru:

/wp-content/plugins

Raspakujte arhivu pomoću Breadcrumb NavXT i kopirajte rezultirajuću fasciklu na hosting server u direktorijumu (/wp-content/plugins). Sada ćete morati da odete na WordPress admin panel, da izaberete stavku "Plugins" sa levog menija i u prozoru koji se otvori idite na karticu "Neaktivno". Pronađite liniju sa onom koja vam je potrebna i kliknite na oznaku "Aktiviraj" koja se nalazi ispod.

Pozivanje Breadcrumb NavXT i prilagođavanje izgleda Breadcrumb

To je, u stvari, sve. Sada je ostao još jedan suštinski detalj: odaberite mjesto u WordPress predlošku (temi) gdje će se prikazati linija s breadcrumbs i na ovo mjesto zalijepite funkcijski kod Breadcrumb NavXT dodatka. Zadatak nije sasvim trivijalan za webmastera početnika koji nije baš upoznat sa strukturom motora i kako njegove teme funkcioniraju.

Ali, možda vas ovo neće zbuniti, jer. uvijek možete pročitati, srećom, tu nije ništa teško.

Ako ste već upoznati sa temama i znate svrhu određenih šablona u njima, onda ćemo nastaviti. Ali, inače, ipak vam savjetujem da se barem površno upoznate s ovim, koristeći gore navedeni materijal (ili neki drugi).

Dakle, naš zadatak je da iz fascikle sa temom koju koristite odredimo one fajlove u koje ćemo morati da ubacimo crumb pozivni kod. A onda ćete morati da odlučite gde ćemo tačno u kod umetnuti ovo:

Prvo se morate povezati na svoj blog putem FTP-a i otvoriti folder teme koji trenutno koristite:

wp-content/themes/WordPress naziv teme

A sada hajde da vam kažem kako sam sam napravio zaključak o prezlu, a vi možete sve ponoviti za mnom ili koristiti svoju opciju umetanja.

Ako pokušate vizualizirati svrhu predložaka iz teme, dobit ćete nešto poput ovog izgleda:

Iz ovog izgleda možemo zaključiti da ćemo morati ubaciti Breadcrumb NavXT pozivni kod u one šablone koji su zaduženi za prikaz sadržaja u centralnom dijelu bloga: INDEX, SINGLE, ARCHIVE, PAGE ili SEARCH.

Istina, nisam počeo da prikazujem mrvice u INDEX-u, koji je odgovoran za formiranje glavne stranice WordPress-a, jer bi tamo dodatna navigacija bila suvišna.

Ubacio sam ga u: SINGLE (odgovoran za formiranje stranica sa člancima), ARHIVA (generira stranice za kategorije, privremene arhive, arhive tagova), PAGE (formira u statične stranice, npr. "O blogu").

Ubacio sam Breadcrumb NavXT pozivni kod u ove šablone na istom mjestu - na samom početku, odmah nakon prvog reda:

da izgleda ovako:

U kaskadnoj datoteci stilova STYLE.CSS u folderu teme dodao sam neka CSS svojstva za klasu BREADCRUMB:

Breadcrumb (font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; ) .breadcrumb a( boja: #1B7499; ) .breadcrumb a:hover ( boja: #EF0E0E; )

Ova svojstva definiraju izgled breadcrumbs u WordPress-u: , i . Oni također određuju boju veza iz breadcrumb (.breadcrumb a) i boju veza kada se preko njih pređe kursorom miša (.breadcrumb a:hover). Općenito, savjetujem vam da pročitate stranicu.

Karakteristike i postavke dodatka Breadcrumb

Slobodni ste da radite šta želite. Kako kažu, gospodar je gospodar. Ali time smo samo odredili mjesto za ispuštanje krušnih mrvica i postavili njihov izgled. Ali ovaj dodatak još uvijek ima dosta postavki.

Da biste to učinili, idite na WordPress admin panel i odaberite “Breadcrumb NavXT” iz lijevog izbornika u području “Postavke”. U prozoru koji se otvori vidjet ćete nekoliko kartica:

Na kartici "Općenito" možete postaviti parametre koji će se primjenjivati ​​na sve stranice vašeg bloga. U polju "Delimiter" navedite znak koji će služiti kao separator u krušnim mrvicama. U mom slučaju, ovo je simbol “>” koji je postavljen posebnim kodom, jer simbol ">" eksplicitno upisan će WordPress tumačiti kao znak otvaranja HTML oznake.

Općenito, postoje (mnemotehnike) koje se, na primjer, ne mogu direktno umetnuti. Evo nekih od njih:

Simbol mnemokoda " " & &< < > > ¤ ¤ ¦ ¦ § § © ª ? « « ® ® ° ° ± ± µ µ ¶ ¶ · ¹ ? € €

Odaberite bilo koji znak koji vam se sviđa kao separator za krušne mrvice.

U polju "Maksimalna dužina" možete postaviti dužinu sidra (teksta veze) u znakovima. Postavio sam ograničenje dužine na 60 znakova, ne iz razloga dizajna, već iz razloga optimizacije sadržaja.

Pretraživači mogu biti ambivalentni po pitanju veza sa istim sidrima, pa ih skraćujem u mrvicama radi jedinstvenosti. Možda nije potrebno, ali za svaki slučaj.

U polja "Prefiks" i "Sufiks" možete uneti tekst koji će prethoditi ili pratiti link do početne stranice u breadcrumbs.

Imajte na umu da će ovaj tekst biti smješten u atribut TITLE oznake A i pretraživači ga mogu smatrati alternativnim sidrom. Ovo mislim da treba koristiti ključne riječi vezane za glavnu stranicu vašeg bloga.

Ne zaboravite da sačuvate promene u podešavanjima dodatka Breadcrumb NavXT koristeći istoimeno dugme. Tada možete proći kroz sve kartice. Na primjer, na sljedećem možete postaviti postavke za link koji će voditi na stranicu na kojoj se sada nalazite:

Na sljedećoj kartici "Postovi / Stranice" možete konfigurirati prikaz linkova na stranice sa člancima i statičke stranice vašeg bloga:

Za članke sam postavio prethodni natpis "Aktuelni članak" i stavio tekst u navodnike koristeći mnemonički kod (pogledajte listu mnemoničkih kodova iznad):

Idite na sljedeću karticu "Kategorije". U principu, ovdje se ponavljaju sve iste postavke kao i u prethodnim. Nisam postavio granicu (prefiks i sufiks) za veze do kategorija, ali sam postavio granicu za stranice arhive:

Kao rezultat toga, na web stranicama arhive, krušne mrvice izgledaju ovako: