Navigácia "Drobky" umožňuje návštevníkovi stránky pochopiť, kde sa na stránke momentálne nachádza. Takáto navigácia zvyčajne pozostáva z riadku odkazov, ktoré sú umiestnené v reťazci pod hlavičkou stránky.

Takáto navigácia prechádza z hlavnej stránky webu na nadpisy, na stránky s článkami, na jednotlivé stránky webu. Všetky odkazy v strúhanke sú aktívne, okrem posledného, ​​pretože toto je miesto, kde sa návštevník práve nachádza a odkaz na túto stránku webu nie je potrebný.

Drobečková navigácia dopĺňa interné prepojenie webu o ďalší prvok a umožňuje návštevníkovi pohodlne sa pohybovať po stránkach a sekciách webu, čím zvyšuje faktory správania.

Výraz „Breadcrumbs“ (v angličtine Breadcrumbs) bol prevzatý z nemeckej rozprávky bratov Grimmovcov. V tejto rozprávke si deti vyznačili cestu do lesa, pričom na ceste za sebou nechávali omrvinky chleba, aby sa vedené levou omrvinkou mali možnosť vrátiť domov.

Na svojom blogu som už popisoval inštaláciu strúhanky pomocou pluginu.

Breadcrumbs je možné nainštalovať na vaše stránky bez pomoci špeciálneho pluginu. Má to svoje výhody, keďže to nezvýši zaťaženie vašej stránky. Preto je žiaduce, kde je to možné, nahradiť pluginy používané na stránke vkladaním kódu a rôznymi skriptami.

Pozor! Pred inštaláciou kódu si zálohujte súbory, kam budete kódy vkladať, aby ste v prípade problému mohli obnoviť funkčnosť vašej WordPress témy.

Ak chcete nainštalovať strúhanku, budete musieť vložiť niektoré kódy do príslušných súborov vašej témy.

Na domovskú stránku blogu nemusíte inštalovať navigáciu v strúhanke. Návštevník, ktorý zadá do vyhľadávania názov stránky, bude v drvivej väčšine prípadov tak v čísle presmerovaný na hlavnú stránku webu.

Ak návštevník prišiel z vyhľadávania na konkrétnu stránku, potom pomocou strúhanky uvidí svoju polohu na webe. Hlavná stránka bude potom hypertextovým odkazom a návštevník bude môcť prejsť na hlavnú stránku, ak na to použije navigáciu.

Inštalácia strúhanky na webe

Dve verzie kódu bude potrebné vložiť do nasledujúcich súborov tém: "Funkcie témy (functions.php)", "Jedna položka (single.php)", "Šablóna stránky (page.php)", "Archívy ( arhvie.php)", " Výsledky vyhľadávania (search.php)".

Prvý kód bude potrebné vložiť do súboru „Funkcie témy (functions.php)“ vašej témy WordPress nainštalovanej na vašom blogu.

// funkcia omrviniek dimox_breadcrumbs() ( $showOnHome = 0; // 1 – zobraziť „omrvinky“ na domovskej stránke, 0 – nezobrazovať ich $delimiter = „““; // rozdeliť medzi „omrvinky“ $home = "Domov"; // textový odkaz "Domov" $showCurrent = 1; // 1 - zobrazenie názvu aktuálneho článku/stránky, 0 - nezobrazenie $predtým = " "; // značka pred aktuálnym "dieťaťom" $after = ""; // tag za aktuálnym globálnym $príspevkom drobky; $homeLink = get_bloginfo("url"); if (is_home() || is_front_page()) ( if ($showOnHome == 1) echo "

Ak chcete vložiť tento kód do súboru témy nainštalovanej na vašej stránke, musíte prejsť na „Panel správy WordPress“ => „Vzhľad“ => „Editor => „Šablóny“ a tam kliknúť na položku „Funkcie témy“ (funkcie.php)“.

V okne "Upraviť motívy" v súbore "Funkcie motívu ((functions.php)" budete musieť vložiť prvý kód úplne na začiatok súboru za

Názov položky na domovskej stránke je „Domov“, ak chcete, môžete ho zmeniť na názov svojej stránky. Ak to chcete urobiť, v príslušnom riadku kódu musíte nahradiť slovo „Domov“ názvom svojej stránky.

Ak chcete, aby navigácia v strúhanke nezobrazovala názov stránky, na ktorej sa práve nachádzate, musíte v nasledujúcom riadku zmeniť číslo „1“ na číslo „0“.

Po vložení kódu a vykonaní zmien podľa vášho želania kliknite na tlačidlo „Aktualizovať súbor“.

Nasledujúci kód bude potrebné vložiť do niekoľkých súborov vašej témy: "Jeden príspevok (single.php)", "Šablóna stránky (page.php)", "Archívy (arhvie.php)", "Výsledky vyhľadávania (hľadanie. php)"".

V súbore "Jeden príspevok (single.php)" zodpovednom za stránky s článkami je kód vložený na miesto zobrazené na obrázku.

Po vložení tohto kódu je potrebné kliknúť na tlačidlo "Aktualizovať súbor".

V súbore "Archives (arhvie.php)" vložte tento kód na miesto, ktoré je zvýraznené v rámčeku na obrázku.

Potom kliknite na tlačidlo "Aktualizovať súbor".

Do súboru „Search results (search.php)“, ktorý je zodpovedný za vyhľadávanie na stránke, vložte kód na miesto uvedené na obrázku.

Po vložení kódu kliknite na tlačidlo "Aktualizovať súbor".

Vložte kód do súboru „Šablóna stránky (page.php)“ zodpovedného za statické stránky, ako je znázornené na obrázku.

Po nainštalovaní kódu kliknite na tlačidlo "Aktualizovať súbor".

To je všetko, strúhanka je teraz nainštalovaná na vašom webe. Musíte otvoriť svoju stránku a uvidíte nainštalovanú navigáciu. Ak bol váš web v tom čase otvorený, budete musieť obnoviť stránku, aby ste videli vykonané zmeny.

Tento kód môžete pridať aj do súboru „Štýlový list (style.ccs)“:

/* Drobka */ #crumbs ( padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%; border-radius:0 0 8px 8px; -moz- border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px;)

Tento kód sa vkladá na úplný koniec súboru „Šablón so štýlmi (style.ccs)“, aby sa zmenil vzhľad nainštalovanej navigácie v strúhanke. Kód, ktorý sa má vložiť do súboru „Štýlový list (style.php)“ môže mať iné vlastnosti (veľkosti, zarážky atď.). Tento alebo podobný kód nie je potrebné vkladať na váš blog.

Na mojej stránke v predchádzajúcej šablóne som tento kód nenainštaloval, páčil sa mi vzhľad strúhanky bez týchto vylepšení.

Článok Závery

Teraz máte na svojom blogu nainštalovanú Breadcrumbs bez použitia pluginu. Tvorcom tejto funkcie je známy blogger Dimox (Dmitry).

Dobrý deň, milí čitatelia blogu. Dnes chcem hovoriť o doplnku WordPress, ktorý sa na mojom blogu používa na dva veľmi dôležité účely naraz.

Po prvé, uľahčuje navigáciu a po druhé rieši veľmi dôležitý problém – vytvorenie správneho interného prepojenia. Aby som nezdržiaval intrigy, hneď poviem, že sa budeme baviť o doplnku Breadcrumb NavXT. Ale prvé veci.

Už som veľa hovoril o potrebe vytvoriť správne prepojenie stránok webu tak, aby sa statická váha prenášaná akýmikoľvek externými odkazmi rovnomerne rozložila na všetky webové stránky projektu. Toto je obzvlášť dôležité.

Prečo potrebujete strúhanku vo WordPress

Propagácia na LF má množstvo výhod, z ktorých hlavnou (dôležitou najmä pri nekomerčných projektoch) je, že si nevyžaduje investovanie finančných prostriedkov potrebných na nákup externých odkazov. Je to spôsobené tým, že LF možno propagovať iba prostredníctvom samotnej internej stránky a vytvorením správneho prepojenia, ako je opísané.

Mimochodom, pri komerčných projektoch má propagácia na nízkych frekvenciách tiež množstvo výhod, z ktorých hlavnou sú opäť nižšie náklady, no okrem toho sa návštevníci, ktorí pochádzajú z vydávania takýchto požiadaviek, s oveľa väčšou pravdepodobnosťou premenia na bankoviek ako návštevníkov, ktorí prichádzajú so strednými požiadavkami a s vysokou frekvenciou (kvôli nejasnostiam).

Hlavnou myšlienkou správneho prepojenia je zabezpečiť, aby sa statická váha prenášaná na rôzne stránky webu (väčšina externých odkazov zvyčajne vedie na hlavnú) bez problémov preniesla na tie, ktoré sa priamo pohybujú po spodnej časti (kde, v skutočnosti sú články umiestnené).

Ideálnu kruhovú schému opísanú v článku je však ťažké implementovať v reálnych podmienkach, takže sférická schéma prepojenia by bola dobrou voľbou. Zhruba povedané, takáto schéma môže byť prehnaná do tej miery, že čím viac vnútorných prepojení bude, tým lepšie bude rozložená statická váha. Je to ako rozsiahly obehový systém, ktorý umožňuje krvi prenášať kyslík do všetkých vnútorných orgánov, dokonca aj do tých najvzdialenejších od pľúc.

Pri každom písaní článkov, ktoré budú relevantné, môžete manuálne pridávať odkazy na iné materiály na svoje stránky. Pravdaže, takto vytvorený interný kotevný zoznam pre každý z článkov berte veľmi vážne. Musíte to urobiť takmer rovnakým spôsobom ako. Nemali by ste používať rovnaký nezriedený kľúč vo všetkých odkazoch naň, viete, čo tým myslím.

Je to veľmi dobrý spôsob, ale vždy bude užitočné ho rozširovať a dopĺňať pomocou automatických metód.podobné materiály vášho projektu, tématicky podobné tomuto článku.

Dnes chcem podrobne zvážiť prvú možnosť, ale o podobných materiáloch pre WordPress v .

Na implementáciu strúhanky použijeme doplnok Breadcrumb NavXT. V zásade môžete na tento účel použiť aj iné WordPress pluginy, ale tieto sa mi páčili viac. Dokonca je to možné.

Inštalácia doplnku Breadcrumb NavXT vo WordPress

Dobre, je čas prejsť priamo k inštalácii a konfigurácii doplnku. Ak zrazu neviete, čo sú strúhanky, potom je to v poriadku. Vlastne som to najskôr nevedel ani ja, lebo tento výraz bol prevzatý z buržoázie a spája sa s ich buržoáznou rozprávkou o Jankovi a Gréte, ktorí nimi označili cestu.

V našom chápaní by sa tento prvok navigácie na stránke mal volať „Ariadnina niť“, pretože sme si akosi bližší. No dobre, ako to nazvali, tak to nazvali. Zvyčajne sa teda zobrazujú niekde v hornej časti okna lokality a v skutočnosti predstavujú cestu k článku, ktorý práve čítate.

Napríklad mám veľmi rád navigáciu pomocou omrviniek a vždy sa snažím nájsť ich riadok na akejkoľvek stránke, aby som pochopil, kde vlastne som a ako prejsť do sekcie, kde sa nachádza tento úžasný článok, aby som si prečítal viac rovnaká téma.

Pamätáte si, čo sú strúhanky? Myslím, že si spomenuli, a ak nie, tak sa pozrite úplne hore v tomto okne pod hlavičkou tohto blogu.

Najprv si budete musieť stiahnuť Breadcrumb NavXT odtiaľ. Inštalácia pluginu na WordPress je štandardná. Pripojte sa k svojmu blogu cez FTP (práca s klientom FileZilla je podrobne popísaná) a otvorte priečinok na serveri:

/wp-content/plugins

Rozbaľte archív pomocou Breadcrumb NavXT a skopírujte výsledný priečinok na hostiteľský server do adresára (/wp-content/plugins). Teraz budete musieť prejsť na administračný panel WordPress, v ľavom menu vybrať položku „Pluginy“ a v okne, ktoré sa otvorí, prejsť na kartu „Neaktívne“. Nájdite riadok s tým, ktorý potrebujete, a kliknite na štítok „Aktivovať“, ktorý sa nachádza hneď pod ním.

Vyvolanie Breadcrumb NavXT a prispôsobenie vzhľadu Breadcrumb

To je vlastne všetko. Teraz zostáva ešte jeden podstatný detail: vyberte si miesto vo WordPress šablóne (téme), kde sa bude zobrazovať riadok s strúhankou a na toto miesto vložte kód funkcie zásuvného modulu Breadcrumb NavXT. Úloha nie je úplne triviálna pre začínajúceho webmastera, ktorý nie je príliš oboznámený so štruktúrou enginu a fungovaním jeho tém.

Ale možno vás to nebude zmiasť, pretože. vždy sa dá čítať, našťastie tam nie je nič ťažké.

Ak ste už oboznámení s témami a poznáte účel určitých šablón v nej, potom budeme pokračovať. Ale inak vám stále odporúčam, aby ste sa s tým aspoň povrchne oboznámili pomocou materiálu uvedeného vyššie (alebo nejakého iného).

Našou úlohou je teda určiť tie súbory z priečinka s témou, ktorú používate, do ktorej budeme musieť vložiť kód volania drobky. A potom sa budete musieť rozhodnúť, kam presne do kódu vložíme toto:

Najprv sa musíte pripojiť k svojmu blogu cez FTP a otvoriť priečinok témy, ktorý momentálne používate:

wp-content/themes/názov témy WordPress

A teraz si povieme, ako som si záver strúhanky urobila ja sama a všetko si po mne môžete zopakovať, alebo využiť svoju možnosť vkladania.

Ak sa pokúsite vizualizovať účel šablón z témy, dostanete niečo ako toto rozloženie:

Z tohto rozloženia môžeme usúdiť, že budeme musieť vložiť kód volania Breadcrumb NavXT do tých šablón, ktoré sú zodpovedné za zobrazovanie obsahu v centrálnej časti blogu: INDEX, SINGLE, ARCHIVE, PAGE alebo SEARCH.

Je pravda, že som nezačal zobrazovať omrvinky v INDEXE, ktorý je zodpovedný za vytvorenie hlavnej stránky WordPress, pretože tam by bola nadbytočná ďalšia navigácia.

Vložil som ho do: SINGLE (zodpovedný za tvorbu stránok s článkami), ARCHÍV (generuje stránky pre kategórie, dočasné archívy, archívy značiek), PAGE (formuje do statických stránok, napr. "O blogu").

Kód volania Breadcrumb NavXT som vložil do týchto šablón na to isté miesto - úplne na začiatku, hneď za prvým riadkom:

aby to vyzeralo takto:

V kaskádovom súbore štýlov STYLE.CSS v priečinku témy som pridal niektoré vlastnosti CSS pre triedu BREADCRUMB:

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

Tieto vlastnosti definujú vzhľad strúhanky vo WordPress: , a . Tiež určujú farbu odkazov z strúhanky (.breadcrumb a) a farbu odkazov, keď na ne umiestnite kurzor myši (.breadcrumb a:hover). Vo všeobecnosti vám odporúčam prečítať si stránku.

Funkcie a nastavenia doplnku Breadcrumb

Môžete slobodne robiť, ako chcete. Ako sa hovorí, majster je pán. Ale týmto sme len určili miesto pre výstup strúhanky a nastavili ich vzhľad. Ale tento plugin má stále pomerne veľa nastavení.

Ak to chcete urobiť, prejdite na panel správcu WordPress a v ľavej ponuke v oblasti „Nastavenia“ vyberte položku „Breadcrumb NavXT“. V okne, ktoré sa otvorí, uvidíte niekoľko kariet:

Na karte „Všeobecné“ môžete nastaviť parametre, ktoré sa použijú na všetky stránky vášho blogu. V poli "Oddeľovač" zadajte znak, ktorý bude slúžiť ako oddeľovač v strúhanke. V mojom prípade ide o symbol „>“, ktorý je nastavený špeciálnym kódom, pretože výslovne uvedený symbol ">" bude WordPress interpretovať ako znak otváracej HTML značky.

Vo všeobecnosti existujú (mnemotechnické pomôcky), ktoré sa napríklad nedajú vložiť priamo. Tu sú niektoré z nich:

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

Ako oddeľovač strúhanky vyberte ľubovoľný znak, ktorý sa vám páči.

V poli "Maximálna dĺžka" môžete nastaviť dĺžku kotvy (text odkazu) v znakoch. Obmedzenie dĺžky som nastavil na 60 znakov nie z dizajnových dôvodov, ale z dôvodov optimalizácie obsahu.

Vyhľadávače môžu byť ambivalentné ohľadom odkazov s rovnakými kotvami, preto ich pre jedinečnosť skracujem v omrvinkách. Možno to nie je potrebné, ale pre každý prípad.

Do polí "Prefix" a "Suffix" môžete zadať text, ktorý bude predchádzať alebo nasledovať odkaz na domovskú stránku v strúhanke.

Upozorňujeme, že tento text bude umiestnený v atribúte TITLE značky A a vyhľadávače ho môžu považovať za alternatívnu kotvu. Myslím tým, že by mal používať kľúčové slová súvisiace s hlavnou stránkou vášho blogu.

Nezabudnite uložiť zmeny v nastaveniach doplnku Breadcrumb NavXT pomocou tlačidla s rovnakým názvom. Potom môžete prejsť všetkými kartami. Napríklad na ďalšom môžete nastaviť nastavenia pre odkaz, ktorý povedie na stránku, kde sa práve nachádzate:

Na ďalšej karte „Príspevky / Stránky“ môžete nakonfigurovať zobrazovanie odkazov na stránky s článkami a statické stránky vášho blogu:

Pre články som nastavil predchádzajúci nápis „Aktuálny článok“ a text som uzavrel do úvodzoviek pomocou mnemotechnického kódu (pozri zoznam mnemotechnických kódov vyššie):

Prejdite na ďalšiu kartu „Kategórie“. V zásade sa tu opakujú všetky rovnaké nastavenia ako v predchádzajúcich. Nenastavil som hranicu (predponu a príponu) pre odkazy na kategórie, ale nastavil som hranicu pre stránky archívu:

Výsledkom je, že na webových stránkach archívu vyzerá strúhanka takto:

Flector 5

Drobková navigácia NavXT je to najpokročilejší a najpopulárnejší doplnok“ chlebové omrvinky“ pre blog na WordPress. Má to len jednu nevýhodu – nie sú tam zabudované žiadne vizuálne štýly. Tento nedostatok doplnku môžete vyriešiť prebratím štýlov pripravených na použitie z tohto článku. V plugine je veľa jemných nastavení, tak som to preložil do ruštiny, aby nastaveniam rozumeli aj začiatočníci. Prečítajte si tiež, ako navrhnúť panel " chlebové omrvinky"v značke RDFa, čo pomôže vyhľadávačom nájsť a použiť tento panel pri generovaní úryvku.

Tieto štýly budú fungovať s väčšinou návrhov šablón, ale neváhajte sa pohrať s farbami, aby ste získali niečo takéto:

Drobková navigácia NavXT je to vysoko prispôsobiteľný doplnok. V prípade potreby ho môžete nakonfigurovať tak, aby vygeneroval kód " chlebové omrvinky"podľa štandardu Google." RDFa. Toto rozloženie panela " chlebové omrvinky“ nie je zárukou, že ich Google použije pri generovaní úryvku vyhľadávania, ale pravdepodobnosť, že sa tak stane, sa dramaticky zvýši.

Ako to spraviť? Najprv zmeňte kód hovoru panelu na:

Domov

%htitle%

A tak pre každý odkaz v navigačnom paneli. Nebudem vás nútiť ručne meniť každý odkaz v nastaveniach pluginu – tu sú pre vás hotové nastavenia (pravé tlačidlo myši a " Uložiť objekt ako").Stlačte " Pomoc“, potom kliknite na „ Import/Export/Reset“ a vyberte stiahnutý súbor, ktorý chcete nahrať a importovať. Tento exportný súbor používa predvolené nastavenia doplnku plus RDFa značkovanie a nič iné. Ak chcete, môžete si doplnok prispôsobiť, ale nedotýkajte sa všetkého v nastaveniach, ktoré sa týkajú RDFa.

Potom plugin začne generovať správny kód panela" chlebové omrvinky", vhodné pre vyhľadávače. Ak chcete, môžete skontrolovať výstupný kód. Ak je všetko správne, potom sa vám vo výsledkoch vyhľadávania vizuálne ukáže, ako bude váš úryvok vyzerať:

Hlavná stránka sa v tomto náhľade nezobrazuje, ale pri reálnom vyhľadávaní bude, samozrejme, prítomná.

Mimochodom, doplnok formálne podporuje značkovanie pre " chlebové omrvinky". Ale z nejakého dôvodu iba v miniaplikácii a iba v značke " schema.org“. Podporuje to však krivo – takéto označenie neprejde overením od Googlu:

V každom prípade však doplnok podporuje značenie iba v miniaplikácii, čo pravdepodobne nebude vyhovovať nikomu, pretože " chlebové omrvinky“ sa spravidla zobrazujú na začiatku stránky a vôbec nie na bočnom paneli.

Žiaľ, momentálne chlebové omrvinky" nie sú podporované službou Yandex. A to v žiadnej forme - či už označené alebo nie. Je to samozrejme škoda, ale nedá sa nič robiť. Stiahnite si plugin verzie 6.2.1 (celkom stiahnuté 6 988 695 raz)

Páčil sa vám príspevok? Prihláste sa na odber aktualizácií na alebo

Dobré popoludnie milí čitatelia! Pokračujem v rozprávaní o hlavných doplnkoch WordPress, ktoré by ste si mali ihneď nainštalovať. Dnes vám chcem predstaviť doplnok Breadcrumb NavXT, ktorý rieši niekoľko dôležitých úloh. Najprv vytvorí ďalšiu navigáciu na blogu. Vďaka čomu bude môcť návštevník sledovať cestu od koreňového adresára webu až po stránku, na ktorej sa nachádza. Po druhé, je to dodatočný nástroj pri vytváraní interných odkazov na stránky. Po tretie, pred časom začal vyhľadávací nástroj Google vydávať „ chlebové omrvinky” v SERP, čo vám umožní pritiahnuť do projektu ďalšiu návštevnosť. A po štvrté, ďakujem Doplnok Breadcrumb NavXT statická váha je rovnomerne rozložená na všetky strany. Pravdepodobne však stojí za to prejsť k inštalácii „strúhanky“.

Najprv si teda musíte zo stránky stiahnuť doplnok Breadcrumb NavXT http://wordpress.org/extend/plugins/breadcrumb-navxt. Rozbaľte výsledný archív a pomocou ftp klienta ho vložte do adresára /wp-content/plugins. A nakoniec aktivujte na paneli správcu. Po úspešnej aktivácii doplnku sa v konzole Nastavenia zobrazí riadok Breadcrumb NavXT.

Ak však chcete úplne aktivovať doplnok Breadcrumb NavXT, musíte do určitých súborov šablón vložiť výstupný kód funkcie Breadcrumb. Kód vyzerá takto:

Tento kód bude potrebné nainštalovať do nasledujúcich súborov šablón: single.php (zobrazí články), archive.php (archivované články, kategórie), search.php (články nájdené prehľadávaním blogu), page.php (zobrazí stránky) . Ak to chcete urobiť, v administratívnom paneli prejdite na položku Návrh a vyberte položku Upraviť a potom aktivujte požadovaný súbor, predpokladajme, že single.php Hneď za riadok vložte kód funkcie zásuvného modulu Breadcrumb NavXT

A kliknite na Uložiť zmeny. Ďalej musíme vytvoriť štýl pre našu ďalšiu navigáciu. Preto otvoríme súbor style.css a napíšeme niekoľko vlastností štýlu pre triedu BREADCRUMB:

Breadcrumb ( font:bolder 12px Georgia; padding-bottom: 1px; padding: 4px 8px; color: #FFffff!important; background:#9C1718 ; border: 0 !important; ) .breadcrumb a( color: #ffffff;!important; ) .breadcrumb a:hover ( farba: #ffffff; background:#C9CACB !dôležité; )

Tým nastavím vlastnosti odrazu pre strúhanku.

Písmo:tučné 12px Georgia; je veľkosť a typ písma
- spodná výplň: 1px; - zarážky
- farba: farba textu
- výplň: výplň textu
-pozadie: farba pozadia, na ktorú budú umiestnené strúhanky
- .strúhanka a - farba odkazu
- .breadcrumb a:hover - farba odkazov pri umiestnení kurzora myši
pozadie: farba pozadia po umiestnení kurzora myši

Tento kód je možné nastaviť úplne dole v súbore style.css

Zmeny uložíme.

Tým je práca na úprave kódu dokončená a zostáva už len nakonfigurovať odraz doplnku v administračnom paneli. Na to potrebujeme položku Breadcrumb NavXT v Nastaveniach. Okno nastavení pluginu pozostáva z niekoľkých záložiek.

Začnime generálom
Táto karta vám umožňuje nastaviť možnosti, ktoré sa vzťahujú na všetky stránky.
V riadku „Oddeľovač“ uvádzame mnemotechnický kód, ktorý vám umožňuje oddeliť omrvinky. Tento malý výber mnemotechnických kódov vám môže pomôcť

V poli "Maximálna dĺžka" môžete nastaviť maximálnu dĺžku kotvy v strúhanke. Už som povedal, že odkazy z strúhanky berú do úvahy vyhľadávače a slúžia na prenos statickej váhy.
Ďalej je potrebné zaškrtnúť políčko „Odkaz na domovskú stránku“, ktorý umožňuje zobraziť odkaz na domovskú stránku v strúhanke. Zvyčajne je to kotva alebo kľúčové slovo.

Skôr než prejdem priamo k prehľadu modulov, poviem pár slov o tom, ako a prečo sa toto riešenie použije:

• Jednak je to užitočné z hľadiska použiteľnosti – navigácia zorientuje ľudí na stránke a sprehľadní jej štruktúru.
• Po druhé, táto funkcia funguje aj na optimalizáciu, pretože v skutočnosti je to ďalšia možnosť a tiež zvyšuje počet prechodov a dobu zotrvania (+ môže byť zobrazené v SERP).

Táto funkcia je však účinná v každom webovom projekte. Ak máte jednoduchú 10-20 stranovú vizitku bez vnorenej hierarchie, potom nemá zmysel pridávať strúhanku do WP. Prvok nebude mať absolútne žiadne využitie, ale iba zaberie voľné miesto na obrazovke. V prípade firemných portálov s viacúrovňovými kategóriami / sekciami je to úplne iná vec. Navyše aj skvelo vyzerá.

Teoreticky nie je výstup tohto bloku povolený na všetkých stránkach. Napríklad máte blog, ktorý spočiatku poskytuje niekoľko tradičných ciest cez stránku: značky a kategórie, archívy dátumov, autorov a konkrétne príspevky. V sekciách a poznámkach by som nechal navigáciu, kým v menovkách a dátumoch je hodnota takýchto informácií minimálna, pretože. len duplikuje názov. Ak vám to vaše zásuvné moduly WordPress neumožňujú priamo, použite . Okrem toho je žiaduce maximálne a nenápadne štylizovať prvok prostredníctvom rozloženia a štýlov.

Bude hlúpe, keď hneď pod reťazcom „Hlavná“ - „Kategória“ - „Názov príspevku“ uvidíte rovnaký názov + označenie aktuálnej kategórie. Takéto zobrazenie kategórií sa mimochodom často nachádza v štandardných šablónach WP, takže po integrácii zodpovedajúceho riešenia je vhodné túto nuanciu opraviť.

Pluginy a drobky vo WordPresse

Moduly pre túto úlohu sa dajú ľahko nájsť podľa anglického názvu funkcie Breadcrumbs – v úložisku WordPress alebo cez vyhľadávače. Existuje dostatok rôznych možností implementácie, ale väčšina z nich nebola aktualizovaná už niekoľko rokov.

Možno sú autori unavení zo súťaženia s permanentnými lídrami Breadcrumb NavXT so 600k. sťahovanie a SEO od Yoast. Okrem toho je dosť ťažké v tejto veci niečo vymyslieť nad originál, pretože. je to čo najjednoduchšie a dokonca môžete implementovať strúhanku vo WordPress bez pluginu. Nech je to akokoľvek, vybral som 4 najzaujímavejšie riešenia:

Hlavná úloha modulu v zásade nemá nič spoločné s našou dnešnou témou, no nemožno ju nespomenúť. Jednou z ďalších funkcií doplnku Yoast SEO je strúhanka. To znamená, že nemusíte inštalovať nový modul, ale jednoducho aktivujte príslušnú možnosť. V práci túto možnosť využívam.

je najpopulárnejší doplnok strúhanky WordPress s viac ako 600 000 stiahnutiami. Pravidelne sa aktualizuje a obsahuje veľa funkcií na jednoduché prispôsobenie zobrazenia navigácie. Obsahuje aj vstavaný widget, podporu pre bbPress, BuddyPress, lokalizáciu, možnosť vývojárov používať filtre/háčiky a mnoho ďalšieho.

strúhanka

V zásade je ťažké nájsť riešenia, ktoré by boli zaujímavejšie ako predchádzajúce dve, aj keď existujú dobré pokusy. Takže napríklad v module Breadcrumb pre WordPress bola zavedená podpora krátkych kódov plus samotný reťazec odkazov má originálny dizajn (pozri odkaz Live Demo!). Nie je jasné len to, či sú dizajny podporované v bezplatnej verzii. Môžete tiež prispôsobiť typ oddeľovača a pridať text na začiatok prvku. Podľa vývojárov je scenár maximálne jednoduchý a ľahký.

Ďalšia možnosť, ktorá má plus mínus slušný počet stiahnutí aj napriek tomu, že bola aktualizovaná asi pred rokom. Autori sľubujú flexibilné prispôsobenie strúhanky vo WordPresse: vstavané háčiky, možnosti zobrazenia a podpora štýlu (v popise je CSS Sample). Modul sa zdal byť celkom dobrým a jednoduchým riešením s dobrými hodnoteniami.

Drobky v Yoast SEO

Nebudem podrobne popisovať všetky jemnosti práce, o tom si môžete prečítať v, zameriam sa výlučne na vytvorenie prvku s drobkami. Proces integrácie pozostáva z dvoch častí – inštalácia v admin paneli + úprava šablóny.

Po aktivácii sa objaví úplne nová sekcia SEO, kde je potrebné vybrať položku „Rozšírené“. Ďalej posuňte prepínač v položke s podivným názvom „Enable Crumb“ do polohy „On“:

V zásade tu nie je toľko rôznych možností. Definujete znak oddeľovača, názov hlavnej stránky, predponu, text pre archívy a 404 strán. O niečo nižšie zvoľte možnosť taxonómie zobrazenej v príspevku (nadpis je najlogickejší).

Potom prejdite do súboru šablóny, kde chcete zobraziť navigačný blok, a pridajte riadky:

Najobľúbenejšie miesta na vloženie kódu sú príspevky (single.php) a stránky (page.php) pred zobrazením hlavičky. Niekedy môže byť umiestnený na konci rozloženia hlavičky (header.php). Vyššie uvedený kód má podmienené vyhlásenie a kontroluje prítomnosť doplnku a potom zobrazuje výsledok. S týmto dizajnom bude jednoduché zakázať strúhanku v nastaveniach. Mimochodom, v mnohých odborných témach bol tento kód pôvodne pridaný, pretože. modul je veľmi populárny.

Ďalšou výhodou Yoast SEO je, že v dodatočných parametroch blogových príspevkov je možné nastaviť strúhanku:

To znamená, že máte možnosť manuálne definovať akúkoľvek hodnotu názvu príspevkov WP prostredníctvom panela správcu. To je užitočné pri dlhých názvoch článkov + umožňuje vám zbaviť sa duplicitných informácií.

Doplnok Breadcrumb NavXT pre WordPress

Pri vytváraní strúhanky pre WordPress sa používa aj plán Breadcrumb NavXT. Modul má dobrú funkcionalitu, ktorú som čiastočne spomenul vyššie, navyše obsahuje veľa zaujímavých možností. Takmer každý používateľ to pochopí a ľahko zmení požadované nastavenia navigačného prvku.

Prostredníctvom administračného panela alebo stiahnutím z oficiálneho úložiska. Dôležité! Pre verziu 5.2 Breadcrumb NavXT budete potrebovať PHP5.3, staršie vydania vyžadujú PHP5.2. Potom aktivujte a príslušná časť sa zobrazí vo WP.

Tu sú 4 karty možností:

• V "Základnom" si môžete vybrať typ oddeľovača, odstrániť odkaz na hlavnú stránku a nastaviť zobrazenie aktuálnej stránky. Formát reťazca je určený pomocou šablón.
• "Príspevky" - obsahuje možnosti pre príspevky.
• "Taxonómie" - zodpovedné za značky / kategórie.
• "Iné" - formáty stránok autora, archívy, 404 chýb.

Odporúčam vám prejsť každú kartu a pozrieť si všetky žetóny. Formát zobrazenia umožňuje vykonávať akékoľvek zmeny v tejto navigácii - pridávať vlastný text / symboly, meniť štýly atď.

Po zadaní parametrov Breadcrumbs breadcrumbs vo WordPress plugine je potrebné nastaviť výstup informácií v šablóne – otvorte príslušný súbor rozloženia (zvyčajne header.php) a umiestnite riadky na správne miesto:

Podobne ako pri práci s Yoast SEO závisí výber miesta na umiestnenie kódu od nainštalovanej témy. Ak má byť výstup bloku v hlavičke, použite header.php. Vzhľadom na to, že tento súbor je spoločný pre všetky stránky rozloženia, na každej z nich uvidíte reťazec odkazov. Môžete tiež zobraziť prvok iba vo vybraných sekciách - v tomto prípade vložte kód do single.php, page.php, archive.php atď. Celkovo vzaté, Breadcrumb NavXT je dobrý nástroj.

Drobky vo WordPress bez doplnku

Je povolené implementovať funkciu Breadcrumbs vo WordPress bez doplnkov. Predtým, ako pristúpim k popisu rôznych možností, vyjadrím svoj subjektívny názor, prečo to nie je najlepší nápad:

• Začínajúcim používateľom bude integrácia určite spôsobovať ťažkosti.
• Úprava parametrov priamo v kóde nie je príliš prehľadná – nastavovanie šablón zobrazenia cez admin panel je oveľa pohodlnejšie ako úprava priamo.
• Moduly majú viac funkcií – vezmite si aspoň lokalizáciu, podporu Schema.org, widgety.
• Nie všetky kódy nájdené na webe sú aktuálne, správne a pravidelne aktualizované, zatiaľ čo aspoň Yoast SEO a Breadcrumb NavXT vo WordPress sú stabilné.

Úprimne povedané, nemyslím si, že vytváranie strúhanky vo WordPress bez doplnku vám prinesie vážne zvýšenie výkonu. Áno, ak ste skvelý webový vývojár a vytvárate si projekt pre seba, potom je celkom možné vystačiť si s „čistým kódom“, vo všetkých ostatných prípadoch je pripravený modul oveľa jednoduchší.

Jedno z najkompaktnejších a plus-mínus skutočných riešení. Najprv pridáte novú vlastnú funkciu get_breadcrumb() do súboru functions.php:

/** * Generovanie strúhanky * @author CodexWorld * @authorURL www.codexworld.com */ function get_breadcrumb() ( echo "Home"; if (is_category() || is_single()) ( echo " » "; the_category(" . "); if (is_single()) ( echo " » "; the_title(); ) ) elseif (is_page()) ( echo " » "; echo the_title(); ) elseif (is_search()) ( echo " » Výsledky vyhľadávania pre... "; echo "" "; echo the_search_query(); echo """; } }

Potom v rozložení zobrazenia príspevku single.php alebo v akomkoľvek inom to nazvite:

strúhanka ( padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; ) .breadcrumb a ( color: #428bca; text-decoration: none; )

V dôsledku toho dostanete niečo ako:

Ak ti to stačí, tak prečo nie. Môžem tiež poradiť možnosť od spoločnosti Dimox, ktorá sa snažila zohľadniť všetky nedostatky existujúcich úryvkov. Zdrojového kódu je tam mnohonásobne viac, celkom dobre sa z neho dá vytvoriť plnohodnotný modul :)

Ako odstrániť omrvinky vo WordPress

V zásade je táto úloha opakom procesu inštalácie prvku. Preto pred vypnutím musíte presne pochopiť, ako sa všetko implementuje vo vašom konkrétnom prípade. Algoritmus je približne nasledujúci:

1. Pozrite sa, či existuje doplnok strúhanky pre web WordPress. Ak áno, pokúsime sa skryť zobrazenie reťazca odkazov v nastaveniach a / alebo ho deaktivovať.
2. Ak vývojár správne vykonal integráciu, odstránenie modulu nepovedie k chybám. V opačnom prípade vyhľadajte v súboroch šablón výstupný kód navigácie (WinGrep na záchranu). Môžu to byť napríklad funkcie yoast_breadcrumb(), bcn_display(), bread_crumb() atď. Zbavte sa nadbytočných čiar.
3. Ešte raz skontrolujeme zobrazenie stránok projektu v prehliadači.

V zásade nie je zakázanie alebo odstránenie strúhanky vo WordPresse také ťažké, hlavnou vecou je zistiť, ako sa pridávajú. Opatrne upravte kód, aby ste nevymazali nič dôležité (riadky môžete vopred komentovať).

Celkom. V článku som podrobne rozobral, ako urobiť strúhanku vo WordPresse, mali by ste mať dostatok informácií o nastavení. Pred inštaláciou vám odporúčam, aby ste si premysleli, či tento blok skutočne potrebujete. Čo sa týka implementácie, osobne nevidím zmysel implementovať element cesty webu do WordPressu bez pluginu, vzhľadom na to, že váš webový projekt bude mať s najväčšou pravdepodobnosťou Yoast SEO. Čo sa týka ostatných modulov, tie budú užitočné len v prípade nejakej pôvodnej funkcionality. Breadcrumb NavXT vyzerá celkom dobre, ale ja som za riešenie Yoast.

Ak máte nejaké otázky týkajúce sa práce s Breadcrumbs a WordPress pluginmi pre nich, napíšte nižšie - vyriešime to.

P.S. Stráž. V našej dobe je potrebné používať moderné potrubné systémy - plynové potrubia prezentované spoločnosťou TD "Evrotrubplast" spĺňajú všetky štandardy kvality.