Pesmet pentru WordPress. Pesmeturi pe WordPress fără și cu pluginuri Cum să faci pesmet într-un plugin wordpress

Breadcrumb-urile sunt un element important al navigării pe site-ul web care îmbunătățește gradul de utilizare. Acest lucru este valabil mai ales pentru site-urile cu o structură complexă. Din păcate (sau poate nu din păcate), nu le folosesc pe majoritatea site-urilor mele, poate pentru că structura lor este prea simplă (pentru un site ca acesta, nu par să fie necesare).

Când rezolv orice problemă pe un site WordPress, întotdeauna Încerc să mă descurc fără pluginuri, acolo unde este posibil. Adesea, aceeași sarcină poate fi rezolvată cu mai puțin cod și necesită mai puține resurse decât utilizarea pluginurilor.

Caracteristici Caracteristici

Se afișează lanțul complet de legături la pagina curentă. De exemplu, dacă pagina curentă se află într-o categorie de al doilea nivel, atunci lanțul va arăta astfel:

În toate soluțiile pe care le-am întâlnit (cu excepția pluginurilor), lanțul arăta astfel:

Aceste. se pierde o legătură.

„Femiturile” mele pentru pagini arată similar. De exemplu, pentru o pagină din al 3-lea nivel de imbricare lanțul va fi astfel:

Acasă > Pagina de nivel 1 > Pagina de nivel 2 > Pagina de nivel 3

• Pesmeturile sunt afișate pentru următoarele tipuri de pagini pe un site WordPress:

  • navigarea paginii din pagina principală (tip site.ru/page/2/);
  • arhiva categoriei;
  • arhiva de etichete;
  • arhiva zilnică;
  • arhiva lunara;
  • arhiva pentru anul;
  • arhiva autorului;
  • tip de post personalizat;
  • pagină;
  • rapid;
  • rezultatele căutării;
  • Pagina de eroare 404.
• Numărul de serie al paginii este adăugat dacă aceasta este a doua sau mai multe pagini din arhive.
• Puteți specifica orice caracter separator între legături.
• Puteți seta text pentru linkul Acasă.
• Micro markup Schema.org integrat.

Funcția Breadcrumbs pentru WordPress (actualizat: 03/03/2019)

/* * Breadcrumbs pentru WordPress * autor: Dimox * versiunea: 2019.03.03 * licență: MIT */ function dimox_breadcrumbs() ( /* === OPȚIUNI === */ $text["home"] = " Acasă"; // text of the "Home" link $text["category"] = "%s" // text for the categorie page $text["search"] = "Rezultatele de căutare pentru interogarea "%s""; / text for the search results page $text["tag"] = "Postări cu eticheta "%s"" // text pentru pagina de etichetă $text["author"] = "Articole după autor %s" // text pentru autorul paginii $text["404"] = "Eroare 404" // text pentru pagina 404 $text["page"] = "Pagina %s" // text "Pagina N" $text["cpage"; ] = " Pagina de comentarii %s" // text "Pagina de comentarii N" $wrap_before = "

"; // închiderea etichetei wrapperului $sep = " › "; // separator între "fărâmituri" $before = " "; // etichetă înainte de „crumb” curent $după = ""; // etichetă după "crumb" curent $show_on_home = 0; // 1 - arată "breadcrumbs" pe pagina principală, 0 - nu afișa $show_home_link = 1; // 1 - arată linkul "Home", 0 - nu afișează $show_current = 1 // 1 - arată titlul paginii curente, 0 - nu afișează $show_last_sep = 1 // 1 - arată ultimul separator când titlul paginii curente nu este afișat; , 0 - nu afișează /* === SFÂRȘIT OPȚIUNII === */ global $post $home_url = home_url("/"); "; $link .=" %2$s"; $link .=" "; $link .=" "; $parent_id = ($post) ? $post->post_parent: ""; $home_link = sprintf($link, $home_url, $text["home"], 1); if (is_home() || is_front_page( )) ( if ($show_on_home) echo $wrap_before . $home_link . $wrap_after; ) else ( $poziție = 0; echo $wrap_before; if ($show_home_link) ( $poziție += 1; echo $home_link; ) if (este_categorie) ()) ( $parinti = get_ancestors(get_query_var("cat"), "category"); foreach (array_reverse($parinti) ca $cat) ( $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_category_link($cat), get_cat_name($cat), $position ) if (get_query_var("paginat")) ( $position += 1; $cat = get_query_var("cat"); echo $sep sprintf($link, get_category_link($cat), get_cat_name($cat), $sprintf($text["page"], get_query_var("paged")) $. if ($show_current) ( if ($poziție >= 1) echo $sep; echo $before . sprintf($text["categorie"], single_cat_title("", false)) . $după; ) elseif ($show_last_sep) echo $sept; $inainte de . get_the_title() . $dupa; sprintf($link, get_tag_link($tagID), single_tag_title("", false), $position);

Funcția trebuie plasată în fișierul functions.php al temei dvs. WordPress. După aceea, adăugați următorul cod în locul din șablon unde doriți să afișați pesmet:

Singurul lucru care mai rămâne de făcut acum este să le stilați folosind CSS. Pentru a face acest lucru, este prevăzută o clasă pentru blocul „pesmet” .pesmet , pentru separator - .pesmet__separator și pentru „pesmet” curent - .pesmet__current .

Termenul „pesmet” se referă la un sistem ierarhic de navigare prin meniu prezentat sub forma unui lanț de legături. Le permite vizitatorilor să înțeleagă în ce secțiune a blogului se află. Pe Wordpress, pesmeturile sunt adesea folosite ca ajutoare de navigare pentru a ajuta utilizatorii să navigheze prin paginile site-ului. Acest articol vorbește despre cum să afișați linkuri pe un blog folosind pluginuri.

Funcții

Înainte de a adăuga pesmet la Wordpress, trebuie să înțelegeți de ce se face. Folosind meniul auxiliar, puteți indica vizitatorului unde se află nota sau produsul pe care îl vizionează în prezent. Dacă este necesar, utilizatorul revine instantaneu la categoria dorită fără a fi nevoit să caute elemente de navigare mai complexe. În acest fel puteți îmbunătăți gradul de utilizare a site-ului.

Breadcrumbs ale paginilor Wordpress vă permit să creați legătura corectă. Acest eveniment este una dintre cele mai eficiente modalități de a promova un blog. Folosind breadcrumbs, puteți distribui sucul de link între pagina principală, categorii și articole.

Motorul de căutare Google a început deja să afișeze navigarea asistată sub numele site-urilor în rezultatele căutării. Acest lucru oferă resursei web posibilitatea de a trece pe pozițiile de vârf. O descriere detaliată a procesului este oferită în ajutorul oficial Google. Nu totul este atât de ușor pe cât pare. Este posibil ca motorul de căutare să nu înțeleagă întotdeauna dacă pesmeturile Wordpress ar trebui să fie afișate în rezultatele căutării.

Merită să adăugați navigație auxiliară pe site?

Dacă utilizatorul reușește să împartă subiectul blogului în 3-4 secțiuni, atunci instalarea unui bloc cu link-uri nu este necesară. Structura resursei web va rămâne simplă și clară. În acest caz, nu este recomandat să folosiți pesmet Wordpress. Navigarea auxiliară ar trebui adăugată numai dacă site-ul are o structură complexă.

Pesmeturile din Wordpress sunt afișate pe paginile blogului folosind plugin-uri. Există multe extensii care vă permit să instalați un bloc suplimentar cu link-uri pe site. Această recenzie va acoperi doar câteva dintre ele.

Breadcrumb NavXT

Acest produs software este cel mai popular și mai puternic plugin care vă permite să creați breadcrumbs în Wordpress. Poate fi folosit pentru a genera un meniu secundar care este extrem de personalizabil. Pluginul este potrivit atât pentru începători, cât și pentru experții Wordpress. Are o mulțime de caracteristici. Utilizatorul poate defini clase și identificatori unici pentru stilul avansat al meniului secundar.

Pluginul are suport pentru mai multe limbi. Dezavantajele includ lipsa temelor încorporate. Acest neajuns poate fi corectat prin utilizarea stilurilor oferite în comunități. Cele mai recente versiuni ale produsului software în limba rusă. Autorii proiectului sugerează lucrul cu un număr mare de setări fine.

Dacă este necesar, puteți activa generarea de cod în conformitate cu standardul Google RDFa. O astfel de marcare a panoului de meniu auxiliar nu va garanta că sistemul va folosi „pesmet” atunci când creează un fragment de căutare, dar șansele de a face acest lucru vor crește semnificativ. Linkurile sunt afișate numai în widget. Nu veți putea adăuga un meniu secundar în partea de sus a paginii. Merită să luați în considerare faptul că „pesmeturile” nu sunt acceptate de motorul de căutare Yandex.

Yoast Wordpress SEO

Crearea unui meniu auxiliar este una dintre funcțiile acestui produs software. Un număr mare de instrumente vă permit să efectuați optimizarea SEO avansată. Acest plugin este folosit de oameni care se angajează să promoveze blogul de înaltă calitate. Editarea unui bloc cu linkuri poate fi dificilă pentru unii proprietari de site-uri. Pentru a finaliza această sarcină, trebuie să deschideți panoul de administrare Wordpress, să accesați secțiunea „SEO” și să selectați linia „avansat”.

Va fi încărcată o pagină cu setări suplimentare pentru plugin. Aici trebuie să accesați fila „pesmet”. Opțiunea „activare” trebuie bifată. Pentru ca un meniu auxiliar să apară pe site, trebuie să adăugați o funcție PHP responsabilă de ieșire în codul blogului. În câmpul „separator”, puteți introduce orice caracter care este acceptat de HTML5.

Ca text al link-ului către pagina principală a site-ului, ar trebui să indicați domeniul sau pur și simplu cuvântul „Acasă”. În câmpul „prefix principal” trebuie să introduceți mai multe litere sau simboluri. Acestea vor apărea înaintea tuturor legăturilor submeniului. Câmpurile de prefix al lanțului de navigare pentru arhive și pagini cu rezultate de căutare sunt completate în același mod. În subsecțiunea „taxonomie”, trebuie să selectați „categorii”, „etichete” sau „formate”.

Traseu pesmet

Folosind un plugin de la Justin Tadlock, puteți crea rapid breadcrumbs în Wordpress. Ceea ce a început ca un mic script, acest software a devenit un sistem avansat.

Pluginul vă permite să afișați un meniu auxiliar pentru orice structură. Acesta caută automat permalink-uri pentru blogul tău. Pe baza structurii rezultate, pluginul afișează „pesmet” pe site. Link-uri sunt adăugate la fiecare pagină. Pluginul detectează automat taxonomiile, tipurile de note etc.

Pesmet Yummi

Acest produs software poate fi instalat direct din panoul de administrare din Wordpress. Pentru a face acest lucru, accesați pagina „plugin-uri”. Apoi trebuie să faceți clic pe butonul „adăugați nou”, introduceți numele în bara de căutare, apăsați Enter și instalați software-ul. După activare, trebuie să configurați pluginul. Chiar și un utilizator începător poate face față acestei sarcini.

Mai întâi trebuie să specificați tipul de instalare al blocului cu linkuri. Pentru ca pluginul Wordpress să afișeze automat breadcrumbs, ar trebui să selectați elementul corespunzător. Dacă utilizatorul specifică tipul de „instalare manuală”, atunci va trebui să introducă el însuși codul în site. Apoi trebuie să selectați aspectul blocului cu link-uri. În continuare, ar trebui să specificați pe ce pagini vor fi afișate pesmeturile.

Dacă doriți, puteți activa afișarea de sfaturi cu instrumente și linkuri de pornire. Utilizatorul ar trebui să selecteze, de asemenea, un stil de font pentru breadcrumbs și categoriile principale. Există, de asemenea, o opțiune pentru a activa atributul titlu pentru linkuri. Pentru a elimina informații despre autorul pluginului din paginile site-ului, trebuie să selectați opțiunea „ascunde” de lângă coloana „recunoștința ta” și să salvezi rezultatul. Veți observa că setările pluginului sunt destul de simple și de înțeles.

Pesmet cu adevărat simplu

Acest produs software este o altă soluție simplă pentru Wordpress. Pluginul funcționează corect și fără erori și este afișat conform codului temei utilizate. Puteți instala software-ul prin panoul de administrare. Pentru ca pesmeturile să fie afișate pe paginile statice, trebuie să scrieți codul corespunzător deasupra liniei de titlu. Dacă utilizatorul trebuie să schimbe tipul de separator, el poate edita linia 17 din fișierul breadcrumb.php.

În această opțiune pentru adăugarea unui meniu auxiliar, nu există micro-markup. Cu acesta, „breadcrumbs” vor fi afișate în fragmentul de rezultate ale căutării Google în loc de adresa URL. Acest lucru va crește rata de clic. Prin urmare, utilizatorul trebuie să adauge micro markup sau să folosească o altă opțiune.

DP RDFa Breadcrumb Generator

Plugin-ul a fost creat pentru optimizarea site-ului pentru motoarele de căutare. Ca și în cazul Yoast Wordpress SEO, pesmeturile sunt afișate automat în fragmentul SERP.

După instalarea software-ului, trebuie să deschideți panoul de administrare și să mergeți la setări. Apoi ar trebui să selectați un plugin. În fereastra care apare, creatorul își face reclamă pentru produsul său. Urmează codul de copiat. Trebuie introdus acolo unde doriți să afișați pesmetul.

(Ultima actualizare: 19.05.2019)

Bună ziua, cititori de bloguri WordPress Mania! Dacă voi, prieteni, nu aveți pesmeturi implementate pe site-ul dvs., nu este o problemă. Puteți configura singur traseul breadcrumb (linkuri) folosind aceste instrucțiuni. Așadar, astăzi vă voi arăta: cum să adăugați pesmet (Pesmet) către un site WordPress folosind funcția de plugin Yoast WordPress SEO(Sper că sunteți cel mai bun plugin SEO multifuncțional).

Vă voi spune și ce pluginuri speciale pentru Breadcrumbs (WordPress breadcrumbs) există în acest scop. Iar pentru utilizatorii experimentați, este posibil să adăugați pesmet pe site fără un plugin. Deci, doamnelor și domnilor, citiți: Cum se face pesmet în WordPress?

Cum să adăugați pesmet pe un site WP cu și fără un plugin

Deoarece acest blog este pentru începători, voi explica mai întâi:

Ce sunt pesmeturile?

Acesta este un lanț de navigare (meniu de navigare, „breadcrumbs”, engleză Breadcrumbs) - un element de navigare pe un site web, care este o cale prin site de la „rădăcina” acestuia până la pagina curentă pe care se află utilizatorul (Wikipedia). Dar Artem Lebedev îl numește așa: navigare duplicat - o linie cu linkuri corespunzătoare ierarhiei structurii site-ului. Puteți vedea această linie pe majoritatea site-urilor web deasupra titlului articolului. Cam asa:

Pesmet pe site-ul WordPress

Unii oameni cred că pesmeturile nu trebuie instalate pe site, dar alții cred contrariul.

Breadcrumbs este o parte extrem de importantă a oricărui site web, oferă utilizatorilor o modalitate ușoară de a afla locația lor actuală pe site.

Breadcrumbs este prezent pe blogurile cunoscute, ceea ce înseamnă că nu ne este contraindicat. Să începem.

Pesmet folosind funcția Yoast WordPress SEO Plugin

Scopul navigării este de a ajuta utilizatorii să se deplaseze pe site. Acest lucru îi ajută pe utilizatori să înțeleagă unde se află pe site. De asemenea, ajută motoarele de căutare să înțeleagă ierarhia linkurilor de pe o pagină web. Pentru .

Pașii de mai jos sunt o soluție temporară, deoarece modificările manuale aduse fișierelor de teme pot fi suprascrise în actualizările viitoare ale temei. Când actualizați tema, trebuie să faceți din nou această operațiune.

Yoast SEO oferă o funcție pentru a obține link-uri de navigare pe site-ul dvs. Parametrii breadcrumb nu sunt afișați inițial în Yoast, pentru aceasta trebuie să mergeți la secțiunea SEO a panoului de administrare - „Afișare în rezultatele căutării” - fila „Breadcrumbs”. După aceea, trebuie să activați pesmeturile și să le configurați:

Setări Breadcrumb în Yoast SEO

Setați separatorul dintre articole după cum doriți. Scrieți textul linkului către pagina principală, puteți scrie numele blogului dvs. sau doar „Acasă”. Apoi, în „pesmet” setați taxonomia pentru categorie. Faceți clic pe „Salvați modificările”. Nu uitați să adăugați codul în locul potrivit în șablonul dvs. (temă).

Cum să adăugați pesmet la tema dvs

Pesmeturile nu vor apărea până când nu lipiți un mic cod în site-ul dvs. Începeți prin a copia următorul cod:

Acum trebuie să instalați codul în tema/șablonul unde va fi afișată bara de navigare. Locurile obișnuite în care vă puteți plasa pesmeturile sunt în interiorul fișierului single.php și/sau page.php chiar deasupra titlului paginii. O altă opțiune care face acest lucru foarte ușor în unele teme este să lipiți pur și simplu codul în header.php.

Să luăm ca exemplu tema Twenty Eleven. Să mergem: Aspect - Editor de teme. Deschideți fișierul single.php (o singură intrare) și lipiți codul:

Inserarea codului într-un șablon WP

Salvați fișierul și vedeți ce am primit în final:

Pesmet de pâine Yoast SEO

În plus, puteți afișa orice titlu de pagină, care va fi afișat în breadcrumbs atunci când editați sau creați o nouă postare. Fila Yoast SEO Advanced. Dacă, de exemplu, titlul articolului este lung, atunci titlul poate fi scris mai scurt:

Titlul acestei pagini, care va fi afișat în pesmet

Acesta este modul în care va funcționa:

Titlul tău propriu pentru pesmet într-o postare separată

Pluginuri Breadcrumb pentru site-ul WordPress

Cel mai popular modul astăzi este Breadcrumb NavXT.

Pluginul WordPress Breadcrumb NavXT

Breadcrumb NavXT este un plugin compatibil cu versiunile WordPress 4.0 și ulterioare. Acesta generează lanțuri locale pentru blogul/site-ul dvs. WordPress. Deoarece Breadcrumb NavXT afișează ierarhia paginilor în mod constant, va ajuta la furnizarea de beneficii SEO.

Instalează-l și activează-l în modul standard. Apoi, dacă doriți, îl puteți personaliza pentru dvs. Setări - Breadcrumb NavXT. Plugin în rusă. Cred că majoritatea utilizatorilor vor fi în regulă cu setările implicite.

Încă o dată, va trebui să edităm fișierul Single Post (single.php) și/sau Single Page (page.php). Puteți utiliza fișierul Header (header.php). Să luăm codul:

Deschideți fișierul, de exemplu, page.php și adăugați rezultatul breadcrumbs în locul de care aveți nevoie. De obicei, trebuie să le afișați deasupra titlului articolului.

Instalarea codului Breadcrumb NavXT pe o pagină de site web

Salva. Deschide pagina blogului și uită-te la rezultat:

Adăugați același cod în fișierul Single Entry (single.php, ) așa cum se arată pentru Yoast SEO. Plugin bun? Oh da! Nu se potrivește? Da, nicio problemă.

Accesați Plugins - Adaugă nou și introduceți cuvântul cheie Breadcrumb în câmpul de căutare pentru pluginuri. Alegeți, prieteni:

Pluginuri Breadcrumb pentru WordPress

Rămâneți pe fază pentru actualizări. Acordați atenție pluginului SEO Breadcrumbs:

Pesmet SEO

Pluginul WordPress SEO Breadcrumbs

SEO Breadcrumbs este un plugin puternic și ușor de utilizat, care poate adăuga cinci navigații diferite pe site-ul dvs. WordPress. Este complet personalizabil și receptiv. Pluginul arată breadcrumbs în postări, pagini, taxonomii personalizate, arhive, atașamente. Tot în erori 404, rezultatele căutării.

Plugin-ul vă permite să utilizați orice combinație de culori, cu diverse efecte pentru decorarea pesmetului. Pluginul acceptă, de asemenea, specificația de schemă pentru marcarea fragmentelor de cod utilizată de Google și alte motoare de căutare pentru a identifica breadcrumbs și a le utiliza în rezultatele căutării.

Cum se instalează pesmeturile WordPress fără un plugin

Acest hack (găsit peste deal) este potrivit pentru cei care nu folosesc pluginul. Deschideți fișierul „Funcții tematice” (functions.php) și înainte de eticheta de închidere (în partea de jos)?> introduceți acest cod lung (nu uitați să faceți un fișier de rezervă):

Funcția dimox_breadcrumbs() ( /* === OPȚIUNI === */ $text["home"] = "Acasă"; // link text "Home" $text["category"] = "Arhivă categoria "%s" "; // text for the categorie page $text["search"] = "Rezultatele căutării pentru interogarea "%s"""; // text pentru pagina cu rezultatele căutării $text["tag"] = "Postări cu eticheta " %s" ""; // text pentru pagina de etichetă $text["author"] = "Articole de %s"; // text pentru pagina autorului $text["404"] = "Eroare 404" // text pentru pagina 404 $ show_current = 1 // 1 - afișați titlul articolului/paginii/categorii curente, 0 - nu afișați $show_on_home = 0 // 1 - afișați breadcrumbs pe pagina principală, 0 - nu; show $show_home_link = 1 - arată linkul "Acasă", 0 - nu afișa $show_title = 1 // 1 - arată un indiciu (titlu) pentru linkuri, 0 - nu afișa $delimiter = " " /; / împărțiți între „fărâmituri” $before = " "; // etichetă înainte de „crumb” curent $după = ""; // etichetă după "crumb" curent /* === SFÂRȘITUL OPȚIUNILOR === */ global $post; $home_link = home_url("/"); $link_before = " "; $link_after = ""; $link_attr = " rel="v:url" proprietate="v:title""; $link = $link_before . "%2$s" . $link_after; $parent_id = $parent_id_2 = $post->post_parent; $frontpage_id = get_option("page_on_front"); if (is_home() || is_front_page()) ( if ($show_on_home == 1) echo "

"; ) else ( ecou " "; ) ) // încheie dimox_breadcrumbs()

Actualizați fișierul. Pentru a apela funcția în același mod ca cel descris mai sus, în fișiere single.php (o singură intrare); page.php(șablon de pagină); archive.php(arhive); search.php (rezultatele căutării) lipiți codul:

Toate. Dacă trebuie să setați stilul CSS pentru breadcrumbs (pentru a se potrivi cu designul temei), includeți linia în:

Deschideți fișierul „Foaie de stil” (style.css) și la sfârșitul lipirii codului:

Crumbs ( chenar-jos: 1px punctat #999999; font-family: „Georgia”, „Times New Roman”, „Times”, serif; dimensiunea fontului: 9px; greutatea fontului: 600; înălțimea liniei: 15px; culoare : #ccc; ) .crumbs a( font-family: „Georgia”, „Times New Roman”, „Times”, serif; font-size: 9px; font-weight: 600; line-height: 15px; culoare: # ccc;text-decor: niciunul)

Personalizați stilul pentru a se potrivi cu designul blogului/site-ului dvs. web.

În concluzie

Pesmeturile pentru un site WordPress nu sunt obligatorii, dar pot îmbunătăți experiența utilizatorului. Îmbunătățirea gradului de utilizare are întotdeauna un efect pozitiv asupra factorilor comportamentali.

Datorită micro-markupului, Breadcrumbs (breadcrumbs) este încorporat în rezultatele Google. Yandex nu are o astfel de funcție, dar motorul de căutare poate ajusta în mod independent structura site-ului la șablonul de micro markup.

Asta e tot pentru mine. Până data viitoare. Noroc.

(funcție(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: „R-A -292864-4", renderTo: "yandex_rtb_R-A-292864-4", asincron: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true , acest.

Salutare tuturor!

O altă modalitate de a îmbunătăți legăturile interne și utilizarea site-ului web este breadcrumbs. Acest tip de navigare pe site a căpătat acest nume datorită basmului fraților Grimm despre Hansel și Gretel. Dacă vă amintiți, pentru a-și găsi drumul spre casă, copiii lăsau pesmet pe potecă. De asemenea, metoda de navigare cu același nume va împiedica utilizatorii să se piardă pe site-ul dvs. Scopul și metodele de a adăuga pesmet pe un blog vor fi discutate mai detaliat în articolul de astăzi.

Semnificație și exemplu de pesmet

Pentru a vă face o idee despre cum arată pesmeturile pe un site web, voi da un exemplu de pe blogul meu:

Pesmetul este evidențiat cu un cadru portocaliu. Se mai numesc si pesmet.

Cel mai adesea, un astfel de lanț poate fi găsit sub antetul site-ului, imediat înainte de titlul articolului.

Așadar, vizitatorul poate înțelege cu ușurință în ce secțiune se află articolul pe care îl vizionează. Structura generală a navigării în Breadcrumb este următoarea: Pagina de pornire -> Secțiune -> Titlul articolului. Poate fi complicat dacă, de exemplu, o subsecțiune apare în secțiune, atunci structura va fi astfel: Pagina de pornire –> Secțiune –> Subsecțiune –> Titlul articolului.

Pe lângă navigarea pe site, pesmeturile joacă, de asemenea, un rol important în SEO. Acestea îmbunătățesc utilizarea site-ului, linkurile și, uneori, pot intra în . Acest lucru va crește rata de clic în rezultatele căutării și, de asemenea, va ajuta motoarele de căutare să recunoască rapid structura resursei dvs. Acest lucru necesită micromarcarea pesmeturilor. Vom vorbi mai jos despre cum se face.

Pesmet: cum să o faci pe blogul tău?

Pentru a adăuga breadcrumbs la WordPress, puteți folosi un plugin sau puteți scrie codul necesar pentru a le afișa.

Mai întâi, să vedem cum să afișați breadcrumbs cu cod PHP. Voi spune imediat că același cod va fi dat mai jos, dar cu microelemente de markup, vă sfătuiesc să îl luați imediat.

Iată un exemplu de cod de lipit în fișierul functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

" Pro-wordpress » " term_id). "">" . $categorii [ 0 ] -> nume . " » " " ; " ; }

"; }

term_id) . ""> ". $categorii->nume . " " " ) echo ";

1 2 3 4 5

"; ecou the_title(); ecou"

Numele rusești din cod pot fi înlocuite cu propriile tale. De exemplu, în loc de „Acasă”, înlocuiți numele site-ului.

După aceasta, pe site-ul dvs. ar trebui să apară un pesmet. Cu toate acestea, pentru a obține pesmeturi frumoase, va trebui să faceți modificări fișierului de stiluri. De exemplu, pentru a arăta ca pe blogul meu, trebuie să inserați următorul cod în styles.css:

Breadcrumbs( margine: -5px 0 5px 3px; /* padding */ overflow: hidden; ) .breadcrumbs a ( culoare: #34a6d2; /* link color - blue */ text-decoration: underline; ) .breadcrumb > span ( culoare : #000; /* culoarea punctului final este neagră */ .breadcrumb( float:left; )

Aici puteți vedea culoarea și dimensiunea fonturilor, indentărilor și culoarea linkurilor atunci când treceți cu mouse-ul deasupra sau fără ele. Puteți înlocui toate aceste valori cu propriile valori și puteți experimenta.

Pesmet pentru WordPress: plugin

1 2 3 4 5 6 7 8

Cele mai comune pluginuri pentru afișarea breadcrumbs: Yoast WordPress Seo, BreadCrumb NavXT. Pluginul WordPress SEO by Yoast este bogat în funcții, iar pesmeturile din arsenalul său sunt doar o mică parte. Prin urmare, dacă aveți deja instalat acest plugin, atunci puteți utiliza această funcție.

După instalare, în setări puteți seta opțiunea de cale (categorii, date, etichete), lungimea maximă a titlului, caractere între secțiuni. În plus, puteți dezactiva afișarea numelui paginii pe care se află vizitatorul, pentru a nu duplica titlul articolului. Pentru ca pesmeturile să fie afișate pe pagină, trebuie să scrieți din nou codul în fișierul single.php sau header.php.

Puteți face modificări stilurilor în același mod ca cel descris mai sus.

Micromarcarea pesmetului

Motoarele de căutare pot accepta automat structura breadcrumb care este realizată pe site-ul dvs. și o pot afișa în fragment în consecință. Pentru a verifica acest lucru, trebuie să utilizați validatoare Google și Yandex.

Dacă motoarele de căutare nu recunosc breadcrumbs, atunci au nevoie de ajutor. Pe blogul meu folosesc codul dat la începutul articolului. I-am adăugat micro-elemente de markup. Dacă scoateți și breadcrumb-uri folosind cod PHP, puteți înlocui codul cu acesta:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

funcția my_breadcrumb() ( echo " Pro-wordpress » " ; $categorii = get_the_category() ; " if ($categorii [ 0 ] ) ( echo " term_id ) ." . $categorii [ 0 ] -> nume . " » " " " "" itemprop="url"> " ; }

.

"; }

ecou"

funcția my_breadcrumb() ( echo "
"; $categorii = get_the_category(); if($categorii)( echo "term_id) . "" itemprop="url">

". $categorii->nume ."

"" ) ecou "

"; echo the_title(); ecou"

Nu am încercat să creez micro-markup pentru pesmeturile create folosind pluginul. Dar cred că nu este greu. Puteți modifica codul pluginului într-un mod similar cu codul meu. Să ne uităm la codul dat.

Acest cod permite motoarelor de căutare să stabilească că acesta este un element de tip breadcrumb.

Fiecare element individual din lanț este împachetat într-un div care conține codul: itemscope itemtype="https://data-vocabulary.org/Breadcrumb" .

itemprop="url" – definește valoarea URL, trebuie adăugată la fiecare etichetă

Există, de asemenea, o rațiune de optimizare pentru utilizarea firimituri - acestea sunt un element de legătură internă, despre care am scris nu cu mult timp în urmă. Un alt lucru este că pun greutate statică pe titluri și pe pagina principală, de care eu personal nu am nevoie deloc. Cu toate acestea, am avut deja o perioadă în care firimiturile au stat destul de mult timp (mai mult de un an, iar aceasta a coincis cu perioada de cea mai mare creștere a traficului).

De ce firimituri și de ce fără un plugin?

Au fost apoi implementate pe baza unui plugin - destul de funcțional, dar cu capacități destul de slabe pentru proiectarea vizuală a firimituri.

Desigur, ar fi posibil să folosesc stiluri pentru a crea frumusețe, dar atunci nu am fost foarte prietenoasă cu el. Abia după ce am scris despre stilurile CSS am început să înțeleg puțin eu însumi. A ieșit ca în gluma despre un profesor indignat de lipsa de înțelegere a elevilor, care a declarat furios: „Am explicat de trei ori! eu am inteles! Și tu..."

Ei bine, atunci am îndepărtat firimiturile și nici nu-mi amintesc exact de ce, dar cu siguranță nu din motive de optimizare. În general, dacă te bazezi pe articolele mele, atunci firimiturile vor fi de prisos în problema delicată a creării unei scheme de legături ideale. Dar, cu toate acestea, ar trebui să cred după.

Există multe teorii pe această temă. Dacă în articolele menționate am încercat să fiu inteligent și să caut adevărul în chestiuni înalte (Ajax, scheme corecte de legături), atunci acest prieten, de exemplu, spune cum să optimizez WordPress în rezumate, fără detalii, dar destul de ușor de înțeles. Trebuie să fii mai simplu și oamenii vor fi atrași de tine și poate că motoarele de căutare îi vor urma. Bine, înapoi la firimituri.

Nu este deloc dificil să le faci și nu trebuie să instalezi pluginuri. Acest lucru are avantajul său, deoarece un plugin strâmb poate copleși un server destul de puternic. De exemplu, am avut probleme similare după instalarea pluginului de link intern descris puțin mai devreme (un panou pop-up în zona din dreapta care apare pe blogul meu când derulați pagina lui până la începutul comentariilor).

Eu, după cum vă amintiți (deși nu este clar de ce trebuie să vă amintiți asta, dar totuși), stau acum pe Infobox. Este un lucru minunat și ieftin, dar cu puțin peste o lună în urmă l-am avut - de parcă aș fi revenit la normal.

Frâne groaznice se rostogolesc în valuri, ceea ce se întâmplă destul de des la o găzduire obișnuită, dacă cineva de pe propriul server începe să mănânce resursele partajate în exces sau în măsura unuia dintre vecinii tăi virtuali.

Am început să scriu scrisori supărate către suportul tehnic, cerând satisfacție și scuturându-le cu un link către articolul menționat mai sus despre Paralelele lor, pe care l-am lăudat acolo, dar cât de dezgustător s-a dovedit a fi.

Mi-au răspuns (politicos, dar destul de convingător) că volumul meu de muncă este foarte mare. Le-am răspuns că de la începutul anului a scăzut semnificativ (adică prezența și numărul de vizualizări). Ei bine, în general, m-au convins să mă gândesc în direcția a ceea ce făcusem de fapt cu blogul în ultima vreme, care ar fi putut avea un impact atât de negativ asupra activității sale.

Din cauza dificultăților apărute cu traficul de căutare, mă gândeam mai ales la modalități de a recupera totul sau mă lăsam dedată de melancolie, amintindu-mi zilele de glorie dinaintea prăbușirii. În general, mi-a fost greu să-mi amintesc că cam în același timp am instalat același plugin upPrev. Am intrat în setările sale și am citit corect expresia din fila „Cache”:

Utilizarea pe site-uri mari (mai mult de 1000 de postări) poate provoacă prăbușirea site-ului

Mai exact, pur și simplu nu l-am citit până la sfârșit în momentul configurării și am bifat caseta automat, hotărând că cache-ul este în general minunat, iar în raport cu WordPress, în general este un cimus complet (ține minte pe al meu și îți permite să plătească pentru găzduire de câteva ori mai puțin). În general, am dezactivat cache-ul în upPrev și frânele au dispărut.

Desigur, acest exemplu nu indică clar că pluginurile sunt dăunătoare, dar pot provoca încetiniri (poate chiar neobservate la început). În general, dacă cineva a instalat și upPrev, atunci știți ce să faceți dacă hosterul vă informează că sarcina admisă a fost depășită sau simțiți singur.

De aceea, ori de câte ori este posibil, încerc să mă mulțumesc cu cât mai puțin posibil. Mai mult, este destul de interesant să folosești diferite funcții, pentru că ți se pare mai inteligent decât ești cu adevărat. Acest lucru este deosebit de grozav atunci când cunoașteți PHP, sau mai degrabă nu îl știți deloc. Atunci se dovedește un puzzle adevărat, cum ar fi, de exemplu, cel pe care l-am descris.

Ei bine, și printre altele, aceste pesmeturi fac o impresie vizuală foarte plăcută:

Și pentru a le personaliza în funcție de designul blogului dvs., veți avea la dispoziție șase scheme de culori.

Implementarea unor pesmeturi frumoase pentru WordPress

În primul rând, va trebui să vă conectați la serverul dvs. (gazduire virtuală) prin FTP. De exemplu, folosind Filezilla descris. Apoi accesați folderul cu tema curentă, care de obicei se află în această cale:

/wp-content/themes/numele său

În general, am descris temele WordPress, sau mai degrabă am spus din ce fișiere (șabloane) pot consta și de ce fragmente din layout-ul blogului sunt responsabili. Totuși, pe lângă soluțiile pur de design, în folderul cu tema veți găsi și un fișier functions.php (dacă nu există, atunci creați-l).

Servește pentru a scrie tot felul de funcții sau filtre care vă permit să implementați o mulțime de lucruri utile fără a săpa direct în fișierele motorului, modificări în care ulterior se pot pierde. Și tot ce adăugați la functions.php va fi valabil până când veți schimba tema.

Deci, adăugați următoarea funcție la acest fișier minunat:

//Breadcrumb ca funcția Google the_breadcrumb() ( dacă (!is_home()) ( echo "

"; }

Doar nu-l înghesuiți într-o funcție deja existentă. Cel mai ușor ar fi probabil să găsiți funcția cuvânt și să introduceți construcția de mai sus imediat înaintea acesteia (deși ar fi mai bine să o separați cu o întrerupere de linie pentru claritate).

Acesta este cadrul. Acum trebuie să mai adăugăm câteva stiluri. În primul rând, este recomandabil să vă decideți asupra culorii, dar o puteți ajusta pe parcurs.

Arhiva va conține șase fișiere grafice în format PNG, fiecare dintre ele conținând dungi ale nuanței pe care o alegeți și diferite grade de iluminare:

Una dintre bare va fi folosită în mod implicit, alta va fi afișată când mutați cursorul mouse-ului peste ea, iar a treia va fi afișată când faceți clic pe un link de breadcrumb. Toate acestea sunt setate, firesc, în stiluri CSS, pe care le vom scrie acum.

Dar mai întâi, despachetați arhiva cu fundalurile și încărcați-le în folderul cu tema dvs. din directorul de acolo:

/wp-content/themes/theme folder/images

Acum deschideți pentru editare (de preferință nu în adminul WordPress, ci prin conectarea la site prin FTP) fișierul cu stiluri style.css din folderul cu tema dvs. Puteți adăuga următorul cod până la sfârșit:

#breadcrumb (display:block;float:none;margin:0 0 40px 0;font-weight:600;) #breadcrumb ul (font-family: Helvetica, sans-serif;list-style: none;).crumbs (afișare) : bloc;) .crumbs li.first (padding-left: 8px;) .crumbs li a, .crumbs li a:link, .crumbs li a:visited (culoare: #616d7e;display: block;float: left;font) -size: 11px;margin-left: -13px;padding: 7px 17px 11px 25px;position: relative;text-decoration: none;) .crumbs li a (background-image: url(images/bg-crumbs-blue.png) );background-position: 100% 0%;background-repeat: nu-repeat;position: relative;) .crumbs li a:hover (background-position: 100% -48px;color: #333;cursor: pointer;) .crumbs li a:activ (poziția de fundal: 100% -96px;culoare: #333;) .crumbs li.first a span (chenar-stânga: 1px solid #d9d9d9;înălțime: 29px;stânga: 0;poziție: absolută ;sus: 0;latime: 3px;)

În linia background-image: url (images/bg-crumbs-blue.png) veți fi liber să schimbați numele fișierului grafic de fundal cu cel al cărui culoarea se potrivește cel mai bine designului blogul tau. Despre modul în care funcționează, precum și despre toate variantele sale posibile (culoare, poziție, imagine, repetare, atașament). De fapt, este înfricoșător cât de interesant, pentru că deschide o mulțime de posibilități.

Afișarea firimituri în postările WordPress și reglarea lor ușor

De fapt, am pregătit baza și acum nu mai rămâne decât să decidem unde exact pesmetul nostru va fi vizibil pentru vizitatori. Evident, pe pagina principală vor fi de prisos. Personal, am decis să le afișez doar în postări, ceea ce înseamnă că va trebui să adăugăm codul pentru apelarea lor în fișierul (șablonul) temei tale care este responsabil pentru acest lucru.

În cele mai multe cazuri, acesta va fi un fișier single.php, dar este posibil să rulați în schimb index.php (vezi mai sus pentru linkul către articolul despre temele WordPress). Apoi, pentru a afișa breadcrumbs numai în postări, va trebui să creați un fișier single.php prin copierea conținutului index.php în el și apoi adăugând codul pentru a apela breadcrumbs numai în single.

Acesta (codul) va arăta astfel:

Fără ezitare, am introdus-o chiar de la început, imediat după încărcarea antetului blogului: