Breadcrumbs WordPress инсталация и конфигурация. Breadcrumbs на WordPress без и с плъгини

Оставете коментар 6,950

Здравейте всички!

Breadcrumbs са друг начин за подобряване на вътрешните връзки и използваемостта на сайта. Този тип навигация в сайта придоби това име благодарение на приказката на братя Грим за Хензел и Гретел. Ако си спомняте, за да намерят пътя към дома, децата оставяха трохи от хляб на пътеката. По същия начин, методът за навигация със същото име ще предотврати загубата на потребителите на вашия сайт. Прочетете повече за целта и методите за добавяне на трохи за хляб към блог ще бъдат обсъдени в днешната статия.

Значение и пример за хляб

За да имате представа как изглеждат галетата в сайта, ще дам пример от моя блог:

Панените галета са подчертани с оранжева рамка. Наричат се още галета.

Най-често такава верига може да се намери под заглавието на сайта, непосредствено преди заглавието на статията.

Така посетителят може лесно да разбере в кой раздел се намира статията, която разглежда. Общата структура за навигация за Breadcrumbs е както следва: Начало -> Раздел -> Заглавие на статия... Може да бъде сложно, ако например в секцията се появи подраздел, тогава структурата ще бъде следната: Начало -> Раздел -> Подраздел -> Заглавие на статия.

В допълнение към навигацията на сайта, галетата също играят важна роля в SEO. Те подобряват използваемостта на сайта, свързването и понякога могат да влязат. Това ще увеличи честотата на кликване в резултатите от търсенето, както и ще помогне на търсачките бързо да разпознаят структурата на вашия ресурс. Това изисква микро-маркиране на хлебни трохи. Ще говорим за това как да го направим по-долу.

Breadcrumbs: Как да направите в блога си?

За да добавите breadcrumbs към WordPress, можете да използвате плъгин или да напишете необходимия код, за да ги покажете.

Първо, нека да разгледаме как да показваме галета с php код. Веднага трябва да кажа, че същият код ще бъде даден по-долу, но с елементи на микро-маркиране, съветвам ви да го вземете веднага.

Ето малко примерен код, който да поставите във вашия файл functions.php:

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

" " ; }

"; }

Руските имена в кода могат да бъдат заменени с вашите собствени. Например, заменете името на сайта вместо "Начало".

1 2 3 4 5

След това на сайта ви трябва да се появи галета. Въпреки това, за да получите хубави галета, трябва да направите промени в таблицата със стилове. Например, за да го получите като в моя блог, трябва да вмъкнете следния код в styles.css:

Breadcrumbs (марж: -5px 0 5px 3px; / * padding * / overflow: hidden;) .breadcrumbs a (цвят: # 34a6d2; / * цвят на връзката - син * / text-decoration: underline;) .breadcrumb> span (цвят : # 000; / * цветът на дестинацията е черен * /) .breadcrumb (float: left;)

Тук можете да намерите цвета и размера на шрифтовете, отстъпите и цвета на връзките при задържане на мишката и без. Можете да замените всички тези стойности със свои собствени, експериментирайте.

Breadcrumbs за WordPress: плъгин

Най-често срещаните плъгини за breadcrumbs са Yoast WordPress Seo, BreadCrumb NavXT. Плъгинът WordPress SEO от Yoast е богат на функции и галетата са само малка част от него. Следователно, ако вече имате инсталиран този плъгин, можете да използвате и тази функция.

След инсталиране в настройките можете да зададете опцията за път (заглавия, дати, етикети), максималната дължина на заглавието, знаците между разделите. Освен това можете да изключите показването на заглавието на страницата, на която се намира посетителят, за да не се дублира заглавието на статията. За да се появят галетата на страницата, отново трябва да напишете кода във файла single.php или header.php.

1 2 3 4 5 6 7 8

Можете да правите промени в стиловете по същия начин, както е описано по-горе.

Микромаркиране на хлебни трохи

Вече говорихме колко е важно. Трохи в моя блог фрагмент изглежда така:

Този изглед е по-разбираем и приятен за потребителя от просто URL адреса на страницата.

Търсачките могат автоматично да вземат структурата на вашия сайт и да я покажат съответно във фрагмента. За да проверите това, трябва да използвате валидаторите Google и Yandex.

Ако търсачките не са разпознали галетата, значи имат нужда от помощ. В моя блог използвам кода в началото на статията. Добавих елементи на микро-маркиране към него. Ако също така извеждате breadcrumbs с php код, можете да замените кода си с този:

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

функция my_breadcrumb () (ехо "

" ; }

функция my_breadcrumb () (ехо "

"; }

Не съм се опитвал да създам микро-маркиране за галетата, създадена с приставката. Но мисля, че не е трудно. По аналогия с моя код, можете да промените кода на плъгина. Нека да разгледаме горния код.

Този код позволява на търсачките да определят, че това е елемент от Breadcrumbs.
Всеки отделен елемент от веригата е обвит в div, съдържащ кода: itemscope itemtype = "https://data-vocabulary.org/Breadcrumb".

itemprop = "url" - дефинира стойността на url, трябва да се добави към всеки таг

itemprop = "title - дефинира стойността на заглавието на елемента от веригата

Целият код е обвит в div с параметъра xmlns: v = "https://rdf.data-vocabulary.org/#">, за да включи речника schema.org.

След като добавите кода, проверете отново дали галетата са разпознати от Yandex и Google.

Ако имате допълнителни въпроси по темата на тази статия, не забравяйте да ги попитате в коментарите.

И накрая, предлагам да гледате видеоклип за вътрешно свързване.

Breadcrumbs в WordPress са помощник за навигация, който показва позицията на потребителя по отношение на цялата йерархия на ресурсите. Просто казано, това меню показва къде се намира посетителят в момента.

Breadcrumbs се наричат менюта, защото показват секции с връзки, които ви позволяват да „прескачате“ през йерархията на сайта.

Между другото, такава навигация беше иронично наречена по аналогия с една от приказките. Същността му беше, че децата, които бяха отведени в гората, не можеха да се върнат вкъщи, тъй като по целия път разхвърляха трохи хляб. В резултат на това те бяха кълвани от птици, така че децата не намериха пътя обратно (трябваше да хвърлят камъни).

Самите галета са много полезни за посетителите, защото могат да ориентират потребителя в правилната посока и да дадат обща представа за структурата на сайта. Не е лош вариант за спомагателна навигация, която не компрометира основната. Те също така предоставят възможност за свързване на страници, което е добре за SEO. Но винаги има нюанси. Така че, ако вземете стандартен шаблон, тогава ще има малка полза от трохите за хляб (когато потребителят е в заглавията, трохите, всъщност, просто ще повторят тази информация).

Хлебът е полезен в такива случаи:

когато изглеждат страхотно с дизайна на сайта (в този случай менюто не се използва за оптимизация, а само за полза и удобство на посетителите);
когато сайтът има наистина сложна структура (например корпоративен ресурс със сложна и сложна структура).

Като цяло има няколко вида трохи, които се използват както в рускоезичния сегмент на Интернет, така и в чужбина:

Местоположение. Този тип дефинира път и той е постоянен, т.е. няма да се промени, докато потребителят се движи из ресурса;
пътека. Този тип показва на посетителя пътя, по който вече е минал. Основният недостатък на такива трохи е, че ако потребителят идва от търсачката, трохите няма да бъдат показани;
Атрибут. Тези трохи се показват като тагове на конкретни страници и ви позволяват да дефинирате категория на сайта. Тази опция е най-удобната и работи на почти всички ресурси.

Промоцията на сайтове за нискочестотни заявки има редица предимства, което е особено важно за търговски проекти; трохите понякога обезкуражават инвестицията, необходима за придобиване на входящи връзки. Тоест, възможно е да се популяризират нискочестотни заявки само с помощта на оптимизация чрез създаване на правилно свързване (понякога наистина работи, но не трябва да очаквате твърде много от такова решение). Основното тук е, че посетителите, които идват от търсачките за такива заявки, много често се превръщат в пари, а не само в малки гости (този номер не работи със средно- и високочестотни заявки).

По някакъв начин хлебните трохи са подобни на кръвоносната система, която осигурява способността да пренася кислород до най-отдалечените „вътрешни органи“. Разбира се, можете сами да добавяте връзки към други материали по темата, но това ще изисква от вас да напишете отделен материал. За да създадем меню от галета, първо ще разгледаме опцията без необходимост от инсталиране на плъгини, а след това все пак ще разгледаме няколко от тях, които според нас са най-добрите.

Опция без инсталиране на плъгина

Нека разгледаме начин как да внедрите трохи на вашия сайт, без да инсталирате никакви плъгини. Доста е просто от гледна точка на изпълнение, така че не трябва да очаквате нещо оригинално от това решение. Но всичко работи без плъгини, което означава, че няма натоварване на сайта.

Методът се състои от няколко стъпки:

въвеждане на кода във файла functions.php;
поставяне на кода на трохите на правилното място.

И така, нека вземем първия код и го поставим във файла functions.php на вашия активен шаблон:

функция the_breadcrumb () (
ако (! is_front_page ()) (
ехо "Дом";
ехо "" ";
ако (е_категория () || е_единично ()) (
the_category ("");
if (is_single ()) (
ехо "" ";
заглавието ();
}
) elseif (е_страница ()) (
echo the_title ();
}
}
друго (
ехо "Дом";
}
}

Може да се постави в самия край на документа, преди символите "?>" (без кавички). Ако в края няма етикет, тогава кодът може да бъде хвърлен в самото начало преди отварящия маркер. Когато поставяте кода, уверете се, че кодирането е UTF-8, в противен случай някои руски букви и думи ще се покажат неправилно. Можете да зададете кодирането с помощта на редактора на Notepad, като използвате елемента „Кодиране - Кодиране в UTF-8 (без PTO).

Сега използваме различен код и го пишем там, където се изисква за показване на галета:

the_breadcrumb ();
?>

Смята се, че трохите трябва да се поставят навсякъде с изключение на началната страница. Това означава, че трябва да поставите този код в single.php, archive.php, page.php и category.php файлове. Къде точно да го поставите зависи от вас, но по подразбиране се вмъква преди да се покаже основното съдържание. Ако е възможно да поставите кода в основния блок, направете го, защото тогава няма да ви се налага да си играете със стиловете, така че трохите да се показват според очакванията.

Както можете да видите, просто трябва да се поразровите малко във файловете с теми. И освен това методът работи без помощни модули. Е, който иска да може да сменя трохите по свое усмотрение, ще трябва да инсталира плъгини на трети страни. SEO от Yoast и Breadcrumb NavXT работи страхотно. Нека да разгледаме първия.

SEO плъгин от Yoast

Като алтернатива на горния метод можете да използвате приставката SEO от Yaost, която е в състояние да създаде много атрактивни трохи. Основните му предимства:

няма нужда да инсталирате модули на трети страни;
плъгинът може да показва заглавия и подзаглавия, като по този начин показва пълната картина на сайта;
възможно е да се промени текста на връзката, водеща към основната връзка;
подчертаване на последните страници с удебелен шрифт;
възможността за промяна на разделителя и префикса;
задаване на формата на таксономията;
с CSS можете да експериментирате с външния вид на трохите.

Но въпреки това имайте предвид, че в някои случаи плъгинът може да показва трохи не съвсем правилно, но с развитието на приставката сме сигурни, че разработчиците ще коригират грешките и ще добавят всички липсващи функции.

Нека започнем с изтеглянето и инсталирането. Можете да получите приставката от връзката: https://wordpress.org/plugins/wordpress-seo/. Инсталацията е стандартна - попълнете съдържанието в папката wp-content / plugins и го активирайте в админ панела. Сега можете да отидете на конфигурацията:

В административния панел отидете на секцията "SEO - Advanced";
Ще бъдат заредени допълнителни настройки на плъгина (той е създаден не само за показване на трохи), но се интересуваме специално от секцията „Навигационна верига“;
Активираме трохите, но за да се появят на сайта, ще е необходимо да поставите специален код (можете да го намерите в края на този списък);
Изберете един от разделителите, който се поддържа от HTML5;
След това изберете текста на главната страница на сайта (например "Начало", "Начало" и т.н.);
Префиксът е символ или дума, която ще се показва пред всички трохи на ресурса (обикновено те поставят стрелка);
След това можете да изберете префикси специално за архиви, страници с резултати от търсене, 404 страници;
Открояването на последния абзац с удебелен шрифт може да изглежда полезно за някого, но последната страница често е идентична със заглавието, така че тук можете сами да решите какво да правите;
Последният елемент в настройките е таксономия (можете да избирате между категории, формати, тагове);
Запазваме направените промени.

След като завършите конфигурацията, трябва да добавите кода към шаблона:

(yoast_breadcrumb ("");)?>

Това е всичко, във всички останали аспекти на работата с плъгина, няма да е трудно да го разберете.

Breadcrumb NavXT Plugin

Плъгинът има огромен брой настройки и най-важното е, че работи като висококачествен часовник за няколко хиляди долара. Както бе споменато по-горе, пагинацията на WordPress е възможна без инсталиране на модули на трети страни, но с помощта на Breadcrumb NavXT всичко е опростено - всеки потребител може да персонализира навигационната верига по начина, който му харесва.

Можете да изтеглите приставката на страницата: http://wordpress.org/extend/plugins/breadcrumb-navxt/ (поне 3.0 и PHP 5). След изтегляне качете приставката в папката wp-content / plugins и я активирайте в административния панел. Имайте предвид, че ако вече сте имали стара версия на модула, тогава тя трябва да бъде деактивирана, или плъгинът може да е малко бъг (настройките не се запазват). Ако сте забравили да го изключите и нищо не работи, след инсталирането го изключете и го поставете по нов начин. Сега всичко ще започне правилно.

Можете също да добавите код към други файлове във вашата тема. Сега трябва да отидете в менюто с настройки и да „призовете“ малко с неговите опции, благодарение на които можете да правите с тези трохи това, което сърцето ви желае (разработчиците наистина го направиха съвестно).

Така че, отидете в администраторския панел на ресурсите, погледнете левия панел и изберете елемента "Breadcrumb NavXT" там. Тук ще бъдат показани няколко раздела, като "Общи", "Текуща позиция" и т.н. Главният раздел "Общи" съдържа параметри, които ще засегнат всички страници на сайта. Полето "Разделител" ви позволява да посочите символ, който ще действа като разделител за галета (според нас най-успешният знак е ">" - прост и разбираем за всички).

Полето "Максимална дължина" показва дължината на котвата в символи. Препоръчваме да посочите ограничение от 60 знака, което е полезно за оптимизационни цели. Вече споменахме ползите за SEO от трохите по-горе; тоест трохите ще бъдат индексирани от търсачките и те няма да се използват само за предаване на празно тегло. Нека направим резервация, че търсачките могат непредвидимо да третират връзките с идентични котви, така че препоръчваме да ги съкратите (това не е необходимо, но все пак можете да отделите малко време за това).

Ако поставите отметка пред "Начална връзка", тогава трохите ще покажат връзката към основната. И ако е необходимо, можете да изберете котва. Полетата "Prefix" и "Suffix" ви позволяват да посочите текста, който ще се появи преди или след връзката към главната страница. Е, полето „Текст за връзка към началната страница“ ще ви позволи да посочите текста, който ще се показва, когато задържите курсора на мишката върху връзката към началната страница.

Струва си да се вземе предвид: този текст може да бъде взет предвид от търсачките като котва. Тоест, струва си да се споменат ключови думи, които се отнасят до главната ви страница. След това запазваме всички направени промени с помощта на съответния бутон.

Но това е само един раздел "Общи", така че можете да прегледате останалите раздели. И така, на следващия има елемент за настройка за връзка, който ще сочи към страницата, където се намирате. Връзката към текущата позиция подобрява вътрешната оптимизация на ресурса, затова препоръчваме да поставите отметка до това поле. Също така, не забравяйте, че препоръчваме да не надвишавате 60 знака, за да избегнете създаването на големи заглавия.

Следващото поле "Текст на текущата позиция" не може да бъде докоснато, просто защото показва добре значението на прехода (този текст ще се види от посетителя, когато задържи курсора на мишката върху връзката). Разделът "Публикации / Страници" ви позволява да конфигурирате показването на връзки към страници със съдържание и статични страници на сайта (за статии можете да зададете надписа "Текуща статия").

В раздела "Категории" всъщност всички настройки са подобни на тези, които бяха на предишните страници. При конфигурирането не зададохме префикси и суфикси, а направихме промени в полето „Архиви“. В резултат на всичко това получихме толкова атрактивни трохи, където всичко работи добре.

Поздрави за вас, скъпи читатели на сайта на блога. В тази статия ще ви покажа как да направите лентата за навигация, която можете да видите в горната част преди началото на заглавията на статиите. Тази верига за навигация ми го прави лесна плъгин заWordPress— галетаNavXT, което се превежда като "хлебни трохи".

Приставката получи това име поради факта, че нейният автор Джон Холик харесва приказката за братя Грим, където момчето Хензел ги изсипва с трохи от хляб, за да намери пътя обратно. Вярно е, че би било по-логично приставката да се нарече „камъчета“, тъй като според историята на приказката Хензел и Гретел не можаха да намерят пътя си обратно, тъй като птиците изядоха трохите. Е, добре, не това е въпросът, основното е, че този плъгин ще помогне на посетителите да не се изгубят във вашия сайт и ще ги уведоми къде точно и в коя категория (част от сайта) се намират в момента.

В допълнение, плъгинът Breadcrumb NavXT помага за равномерното разпределение на статичното тегло на всички страници на сайта, което е много важно за него и популяризирането в търсачките. За всеки случай, ако смятате, че вътрешното свързване (оптимизиране) на сайта не е толкова важно, тогава ви препоръчвам да прочетете този, от който ще промените гледната си точка.

И така, в тази статия ще ви покажа как да внедрите тази навигация на вашия уебсайт или блог с помощта на плъгина Breadcrumb NavXT. , както и прост код.

Инсталиране на плъгина Breadcrumb NavXT breadcrumbs.

1 ) Както обикновено, изтеглете плъгина и го качете в блога, активирайте го.

2 ) Сега трябва да поставим персонализирания код там, където искате да се появяват галетата. За да направите това, отидете на "редактор на външен вид" и изберете файла, в който ще поставите кода. Най-често кодът на плъгин се вмъква във файла "единичен запис" (single.php) непосредствено преди или след заглавието на статията. Ако изобщо не разбирате кодове, просто потърсете два етикета в самото начало на кода

и , които отговарят за показване на заглавието на публикациите. Моят код изглежда така:</p> <p><b><h2>"заглавие =" (! LANG:<?php the_title (); ?>!}"><?php the_title (); ?></h2> </b></p> <p>Когато намерите нещо подобно, непосредствено преди него поставете този код на галета и актуализирайте файла.</p> <p><b><?php </b><br><br><b>(bcn_display ();)</b><br><b>?> </b></p> <p>Между другото, ако не харесвате хоризонталната навигация и искате тя да се показва вертикално, тогава трябва да вмъкнете този вместо предишния код.</p> <p><b><?php if (function_exists ("bcn_display_list")) </b><br><b>{ </b><br><b>bcn_display_list ();</b><br><b>}?> </b></p> <p>Добре, както виждате, имате лента за навигация, но без да се показва датата на публикуване в самия край, като моята. Ако искате да го прикачите към вашата навигационна лента, просто трябва да намерите кода във вашата тема, който е отговорен за показването на датата на публикуване, и да го добавите след кода на галета.</p> <p><b><?php </b><br><b>if (function_exists ("bcn_display"))</b><br><b>(bcn_display ();)</b><br><b>?><span>> <span>Публикувани от<?php the_time (" j F Y"); ?></span></div> </span> </b></p> <p>Ако нещо не е ясно, тогава> - показва стрелка като тази> и буквата j - обозначава деня, F - месец, Y - година. Мисля, че след подобни обяснения няма да ви е трудно да намерите такъв код.</p> <p>Добре, сега нека разберем дизайна. Самият стил на шрифта и цветът на връзките в лентата за навигация са взети от вашите стилове на кожата, но ако не ви харесват и искате да ги промените, просто добавете този допълнителен ред към кода, който вмъкнахме по-горе.</p> <p><b><divclass="breadcrumb"></div> </b></p> <p>В резултат на това трябва да получите следния код:</p> <p><b><divclass="breadcrumb"> </b> </span><br><b><?php </b><br><b>if (function_exists ("bcn_display"))</b><br><b>{ </b><br><b>bcn_display ();></b><br><b>} </b><br><b>?> </b><br><b></div> </b> </p> <p>Сега отидете на "изглед" "редактор" и отворете файла "stylesheet" (style.css). И поставете този код почти в дъното и актуализирайте файла.</p> <p><b>.breadcrumb (</b><br><b>шрифт: удебелен 12px "Trebuchet MS", Verdana, Arial;</b><br><b>padding-bottom: 10px;</b><br><b>} </b><br><b>.breadcrumb a (</b><br><b>цвят: # 1B7499;</b><br><b>} </b><br><b>.breadcrumb a: задръжте курсора на мишката (</b><br><b>цвят: # EF0E0E;</b><br><b>} </b></p> <p>Здравейте всички!. Днес в тази статия бих искал да ви разкажа как можете да подобрите използваемостта на вашия сайт с помощта на приставката Yoast SEO, за която ще говоря подробно в една от следващите си статии.</p> <p>Със сигурност мнозина вече са чували за този плъгин и знаят, че е необходим за писане на SEO оптимизирани статии. Но какво друго може да се направи с WordPress Yoast SEO breadcrumbs, малцина предполагат.</p> <p>Като начало нека обясня какво представляват „хлебните трохи“ и защо по принцип са необходими.</p> <p>Така, <span>"Breadcrumbs" е допълнителна навигация страница по страница, която показва в кое заглавие или в кой раздел се намира статията.</span>Посетител, отивайки на някоя страница от вашия блог, трябва да разбере в кой раздел се намира и дали в правилния раздел търси информацията, от която се нуждае. Най-общо тази навигация може да бъде представена по следния начин:</p> <p><img src='https://i2.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/zamena-kartinki.jpg' width="100%" loading=lazy loading=lazy></p> <p>На нашия уебсайт изглежда така:</p> <p><img src='https://i0.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/hlebnyie-kroshki-nash-sayt.jpg' width="100%" loading=lazy loading=lazy></p> <p>В допълнение, наличието на тази навигация помага на роботите по-ясно да разберат структурата на сайта и да индексират вашия блог по-бързо. И това е много важно при прожектиране в мрежата.</p> <p>"Защо?" - питате, ние решихме да използваме този плъгин. Отговорът е прост. В интернет има голям брой подобни услуги, които ще помогнат за изтеглянето на „трохи“, но в същото време те допълнително ще заредят сайта, това със сигурност няма да го направи по-добър. И тъй като все още използваме Yoast SEO за оптимизиране на публикациите, тогава е грехота да не се възползваме от възможностите му и да не направим удобна използваемост с негова помощ.</p> <h2><span><b>Настройване на изхода на галета с приставката Yoast SEO</b> </span></h2> <p>Няма да пиша тук как да инсталирам това Yoast SEO. Ако не знаете как да направите това, прочетете тази моя статия "". В него ви разказвам подробно и показвам по какви начини можете да инсталирате необходимите плъгини за работа.</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Nastroyki-plagina-SEO.jpg' height="264" width="157" loading=lazy loading=lazy></p> <p>В прозореца, който се отваря, поставете отметка в квадратчето „Активиране на галета (хлеб)“.</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Vklyuchenie-navigatsii.jpg' width="100%" loading=lazy loading=lazy></p> <p>За наша радост настройките ще се отворят на руски и са интуитивни. Във видеото, което ще се появи скоро в тази статия, ще покажа по-ясно какво ще се случи, когато промените някои от елементите в това меню. Междувременно можете лесно да експериментирате сами и да опитате да промените настройките. Тук не може да се направи нищо ужасно, тъй като това са само визуални корекции на нашите „трохи“.</p> <p>След активиране на галетата, следващата стъпка е да вмъкнете кода за активиране на тази функция във вашия шаблон за тема. За да разберете какъв код трябва да въведете, следвайте връзката, която следва настройките на нашата верига.</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Perehod-po-ssyilke.jpg' width="100%" loading=lazy loading=lazy></p> <p>След като стигнем до официалния сайт на този плъгин, копираме необходимия код и го поставяме на мястото на нашата тема, където планираме да ги покажем.</p> <p><img src='https://i0.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Kod-dlya-vstavki-v-shablon.jpg' width="100%" loading=lazy loading=lazy></p> <p>Не мога да ви посъветвам универсално място за вмъкване на този код, тъй като зависи от темата, която използвате. Може да се наложи да го напишете или във файла single.php, или в page.php, а в някои случаи и в header.php.</p> <p>В нашия случай вмъкнахме кода почти в самото начало на файла single.php, който се намира на адрес www /wp-content /themes / your theme /.</p> <p><i>Забележка:</i>Обръщам вниманието ви на факта, че е по-добре да вмъкнете кода през FTP клиент. Използваме Filezilla, за която сме писали подробно. Не забравяйте да прочетете нашите инструкции, за да избегнете много от грешките на начинаещите.</p> <p>Освен това, моля, обърнете внимание, че кодът, който имаме, е малко по-различен от този, препоръчан от разработчиците. А именно, увихме функцията breadcrumbs в div таг. Това се прави, за да можете да зададете свой собствен индивидуален стил на показване.</p> <p>За да направите това, във файла style.css записваме стиловете, от които се нуждаем. В тях можем да зададем цвят, фон, размер на шрифта, подчертаване, тоест да доведем до визия, която напълно да отговаря на нашия вкус или да се комбинира с общия стил на страницата. В нашия случай това изглежда така:</p> <p>Това завършва настройката на приставката, но в тази версия, след като се покаже категорията, ще се покаже и заглавието на статията. Това може да доведе до прекомерен спам. Мисля, че ще се съгласите с мен, че това е излишно, тъй като заглавието на статията вече е напълно видимо за потребителя и няма нужда да се дублира отново.</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/obrazets-perespamlennosti.jpg' width="100%" loading=lazy loading=lazy></p> <p>За да избегнете това, трябва да добавите малко код към файла functions.php.</p><p>Функция adjust_single_breadcrumb ($ link_output) (if (strpos ($ link_output, "breadcrumb_last")! == false) ($ link_output = "";) return $ link_output;) add_filter ("wpseo_breadcrumb_single_link", "bread_single_link").</p><p>Сега всички наши настройки са готови. Ако сте направили всичко правилно, тогава ще получите приблизително същото като в нашия блог.</p> <p>Ако имате въпроси - пишете в коментарите!</p> <p>Чао всички!</p> <p><i>Антон Калмиков беше с вас</i></p> <p>Здравейте приятели, всички. В днешната статия ще ви разкажа какво представляват галетата, за какво служат и как да ги добавите към своя wordpress блог със и без плъгин. Да започваме!</p><h2>Breadcrumbs са удобен начин за повторно свързване на вашия блог</h2> <p>Един лесен начин да направите навигацията в сайта и свързването по-лесно в същото време е с галета. Той получи името си в чест на начина, по който героите от немската приказка "Хензел и Гретел" се опитват да намерят изход от гората.</p> <p>Вярно, трохите не помогнаха на децата - те бяха кълвани от птици, но в изграждането на сайтове функцията, кръстена на неуспешен начин на спасяване, се е вкоренила и се използва в ресурси за най-различни цели, от лични блогове до онлайн магазини.</p> <p>Вероятно сте виждали тази галета в различни интернет ресурси. Обикновено се поставя над статията и изглежда така:</p> <p>Начална страница</span>> Заглавие> Подзаглавие> <span>Текуща страница</p> <p>Освен това всички "връзки", с изключение на последната, са вътрешни връзки.</p> <p>Благодарение на тази верига, читателят по всяко време може да разбере на какво ниво на сайта се намира и има възможност да премине както по цялата верига, така и веднага да отиде в секцията, която го интересува, или да се върне на главната страница на ресурса .</p> <h2>Какви са ползите от галетата за вашия уебсайт и блог?</h2> <p>Както беше посочено по-горе, първото е да се опрости навигацията. Например, читател е въвел статия, прочел я и е решил да прочете други статии в раздела. Благодарение на breadcrumbs, не е нужно да търси карта на сайта или списък с категории. Той ще се върне само една крачка назад.</p> <p>Вие ненатрапчиво приканвате читателя да следва връзките, тоест давате му още една причина да остане на вашия сайт. Това от своя страна подобрява поведенческите фактори, поради което роботите за търсене на първо място разграничават блоговете и сайтовете.</p> <p>Колкото по-сложна е структурата на сайта, толкова по-важно е да инсталирате галета върху него. Тъй като е трудно за посетителите, особено тези, които са дошли до този ресурс за първи път, да разберат всички блокове, страници, раздели и подраздели. Ако не получат подкани, те ще продължат да напускат, след като прочетат само една статия.</p> <p>Втората задача на този елемент, тясно свързана с първата, е вътрешната оптимизация на сайта, или по-скоро друг начин за свързване на възможно най-много статии с връзки. Освен това, за разлика от ръчното свързване, тук всичко се случва автоматично. Желаните галета се появяват непосредствено над всяка публикувана статия.</p> <p>Тази функция може да бъде добавена към сайтове и блогове по различни начини. Нека да разгледаме две от най-простите опции за WordPress – инсталиране с помощта на плъгин и правене на малки промени в кода.</p> <h2>Как да добавите галета към вашия блог с плъгин</h2> <p>Най-лесният начин да инсталирате breadcrumbs в блог е да инсталирате специален плъгин. Breadcrumb NavXT обикновено се използва за WordPress.</p> <p>Начинът за инсталиране е стандартен: отидете в администраторския панел на блога -> Plugins -> Add new. В прозореца, който се показва, въведете името на приставката и щракнете върху „Намиране на плъгини“.</p> <p><img src='https://i0.wp.com/isif-life.ru/wp-content/uploads/2014/08/1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ето го нашия плъгин, щракнете върху „Инсталиране сега“, след това „Активиране“.</p> <h1><?php the_title (); ??></h1> <p>и над този ред поставете следния код:</p> <p><?php if(function_exists("bcn_display")) { bcn_display(); } ??></p> <p>Ако искате да поставите галетата другаде, поставете същия код там.</p> <p>След това отидете на "Настройки" -> "Настройки на Breadcrumb NavXT" и в колоната "Име на връзката" променете името на свое собствено и запазете промените.</p> <p><img src='https://i1.wp.com/isif-life.ru/wp-content/uploads/2014/08/2.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Остава да отидем в блога и да се възхищаваме на резултата.</p> <h2>Как да добавите галета към блог без плъгин</h2> <p>Тъй като всякакви плъгини са допълнително натоварване на блога, което забавя работата му, по-добре е просто да промените малко кода, особено след като в този случай е по-лесно, отколкото да инсталирате плъгин.</p> <p>Отидете в административния панел -> "Външен вид" -> "Редактор" -> functions.php. Тук, навсякъде (основното нещо не е вътре в друга функция), поставете следния код:</p><p>Функция the_breadcrumb () (echo "Вие сте тук:"; if (! Is_front_page ()) (echo "Home"; echo "" "; if (is_category () || is_single ()) (the_category (" "); if (is_single ()) (echo "" "; the_title ();)) elseif (is_page ()) (echo the_title ();)) else (echo" Начало ";))</p><p>и спестете. Ако се страхувате да се объркате, просто го поставете в самия край, над последната скоба.</p> <p>Сега имате нужда от този код:</p> <?php the_breadcrumb(); ??><p>място, където искате да видите галетата, например, отново над заглавието на статията. За да направите това, отидете на single.php, потърсете реда с the_title и поставете този код над него и запазете промените.</p> <p>Можете да отидете на сайта и да видите какво се е случило. Както можете да видите, Вие сте тук и Началото явно не са на място тук и трябва да бъдат променени на нещо по-подходящо, например на Path и Home (или името на блога).</p> <p>Освен това трябва да се уверите, че промените изглеждат еднакво добре в различните браузъри – те не се заливат в други части на темата и в същото време са ясно видими.</p> <p>Всички, "Breadcrumbs" помага на вашите читатели и можете да се гордеете, че сами сте разбрали тяхната инсталация. Благодаря на всички за вниманието!</p> <p>P.S. В края на статията видео за това как да поставите галета в блога си:</p> <p><span class="MVWNvgeSPJI"></span></p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+""+screen.height+""+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="clear"></div> </div> </article> <div class='yarpp-related'> <section id="related_posts"> <div class="block-head"> <span>Повече информация по темата</span> <div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/6d530784f99ff60ef54e6ea282b18c93.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Проследяване на колети чрез проследяващ номер" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/sweden-post---nacionalnaya-pochta-shvecii-otslezhivanie-posylok-po/">Проследяване на колети чрез проследяващ номер</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/6e93681d4b4c58554ca85e500973548e.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Приложения за родителски контрол за Android" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/roditelskii-kontrol-na-android-s-zashchitoi-udaleniya-prilozheniya-dlya/">Приложения за родителски контрол за Android</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/0229028f98d687355052b922043805c5.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Кой редактор на снимки за Android е най-добрият и кой може да бъде изтеглен безплатно и законно?" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/luchshie-fotoredaktory-makiyazh-na-android-kakoi-fotoredaktor-dlya-android-luchshe/">Кой редактор на снимки за Android е най-добрият и кой може да бъде изтеглен безплатно и законно?</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/07a965cde5d8c692b50aa680350a3457.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Най-добрите безплатни редактори на снимки за компютър" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/skachat-prilozhenie-dlya-fotografii-luchshie-besplatnye-fotoredaktory-dlya-kompyutera/">Най-добрите безплатни редактори на снимки за компютър</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/f44aa07171ae4480896e118e30c44254.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Графични програми за android Нашият Android Market е вашият правилен избор" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/luchshie-fotoredaktory-dlya-android-graficheskie-programmy-dlya-android-nash-android/">Графични програми за android Нашият Android Market е вашият правилен избор</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/d5a002118d59b07a11ab8355dde6f904.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Компютърно подпомагана услуга" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/programma-sony-xperia-z3-svyaz-s-kompyuterom-obsluzhivanie-s-pomoshchyu/">Компютърно подпомагана услуга</a></div> </div> </section> </div> <div id="comments"> <ol class="commentlist"> <div class='rreekk' rel='15'> <div id="smartrotator_ad_4" onclick="yaCounter40492595.reachGoal ('tizercommentbefore1'); return true;"></div> </div> </ol> <div class="clear"></div> <div id="respond" class="comment-respond"> </div> </div> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> <div class="execphpwidget"> <div id="text-4" class="widget widget_text"> <div class="widget-top"> <span>Полезен</span> <div class="stripe-line"></div> </div> <div class="widget-container"> <div class="textwidget"> <style> .wpp-list li img { -webkit-border-radius: 65px; -moz-border-radius: 65px; border-radius: 65px; } .wpp-list li .post-views { display: block; margin-left: 70px; color: #828283; font-size: 12px; } .wpp-list li .post-views i { font-size: 13px; } .wpp-list li { line-height: 22px !important; } .replacemy { cursor: pointer; } } </style> <ul class="wpp-list"> <li> <div class="replacemy"><img src="/uploads/af72807776c7ef644bcaf87f6872025a.jpg" width="65" height="65" title="Живи тапети с пролетни цветя за android" alt="Живи тапети с пролетни цветя за android" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/oboi-na-telefon-android-vesna-vertikalnye-vesennie-cvety/" class=""><br>Живи тапети с пролетни цветя за android</a></li> <li> <div class="replacemy"><img src="/uploads/577c7b81c2712c7e92533d8fc2ddb5c0.jpg" width="65" height="65" title=""Детски режим" в Xiaomi: как да се измъкнем от него За най-малките - блокиране в приложението" alt=""Детски режим" в Xiaomi: как да се измъкнем от него За най-малките - блокиране в приложението" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/poleznyi-rezhim-dlya-detei-i-ih-roditelei-detskii-rezhim-v-syaomi-kak-iz-nego-vyiti/" class=""><br>"Детски режим" в Xiaomi: как да се измъкнем от него За най-малките - блокиране в приложението</a></li> <li> <div class="replacemy"><img src="/uploads/e1a8b83e4f57cc5e203a15d1f576e3ed.jpg" width="65" height="65" title="Живи тапети с пролетни цветя за android Изтеглете свежи цветя на вашия смартфон" alt="Живи тапети с пролетни цветя за android Изтеглете свежи цветя на вашия смартфон" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/cvety-zhivye-oboi-vesennie-cvety-zhivye-oboi-dlya-android-skachat-na/" class=""><br>Живи тапети с пролетни цветя за android Изтеглете свежи цветя на вашия смартфон</a></li> <li> <div class="replacemy"><img src="/uploads/1b31258831bd9344ce328a337a2da316.jpg" width="65" height="65" title="Изтеглете жив тапет за Нова година и Коледа за Android Анимиран тапет за телефон зима" alt="Изтеглете жив тапет за Нова година и Коледа за Android Анимиран тапет за телефон зима" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/skachat-novogodnie-zhivye-oboi-na-android-skachat-novogodnie-i-rozhdestvenskie-zhivye-oboi-dlya-android/" class=""><br>Изтеглете жив тапет за Нова година и Коледа за Android Анимиран тапет за телефон зима</a></li> <li> <div class="replacemy"><img src="/uploads/874007be3148f9d1311c0172a91b2e77.jpg" width="65" height="65" title="Мента - новини от vkontakte" alt="Мента - новини от vkontakte" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/kak-otkryt-izbrannoe-myata-na-drugom-ustroistve-myata---novosti-iz/" class=""><br>Мента - новини от vkontakte</a></li> </ul> </div> </div> </div> </div> </div> <div> </div> </aside> <div class="clear"></div> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="wide-narrow-2c"><div id="footer-first" class="footer-widgets-box"><div id="text-2" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"> <p>Всичко за съвременните технологии. Грешки. игри. Разбивки. Техника. интернет <p></p> </div></div></div></div><div id="footer-second" class="footer-widgets-box"><div id="text-3" class="footer-widget widget_text"> <div class="footer-widget-top"></div> <div class="footer-widget-container"> <div class="textwidget"><a href="https://qzoreteam.ru/bg/sitemap.xml">карта на сайта</a></div> </div> </div><div id="text-7" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"><br> <a href="">Обратна връзка</a> </div></div></div></div></div><div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"></div> <div class="alignleft">© Авторско право 2017, https://qzoreteam.ru</div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Отидете в горната част на страницата"></div> <div id="fb-root"></div> <script type="text/javascript"> jQuery(function($) { $(document).on("click", ".pseudo-link", function() { window.open($(this).data("uri")); }); }); </script> <script type='text/javascript'> /* / var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "310px" }; / / </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-polls/polls-js.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-postratings/js/postratings-js.js'></script> <script type='text/javascript'> / / var tie = { "mobile_menu_active": "true", "mobile_menu_top": "", "lightbox_all": "", "lightbox_gallery": "", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "true", "sticky_sidebar": "", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "", "lang_no_results": "\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c", "lang_results_found": "\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b" }; / / </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/tie-scripts.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/ilightbox.packed.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script type='text/javascript'> / / var gglcptch_pre = { "messages": { "in_progress": "\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 Google reCAPTCHA.", "timeout": "\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c Google reCAPTCHA. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0412\u0430\u0448\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0442\u0438 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443." } }; / */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/pre-api-script.js'></script> <script type='text/javascript' data-cfasync="false" async="async" defer="defer" src='https://www.google.com/recaptcha/api.js?onload=gglcptch_onload_callback&render=explicit'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/script.js'></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/my.js"></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/etimer.js"></script> <script type="text/javascript">  </script><br> <br> </body> </html>