Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку). Wordpress, "хлебные крошки": обзор плагинов

Навигация «Хлебные крошки» позволяет посетителю сайта понять, в каком месте сайта он сейчас находиться в данный момент. Обычно такая навигация состоит из линии ссылок, которые расположены цепочкой под шапкой сайта.

Такая навигация идет с главной страницы сайта в рубрики, на страницы со статьями, на отдельные страницы сайта. Все ссылки в хлебных крошках являются активными, за исключением последней, потому что именно в этом месте сейчас находится посетитель и ссылка на эту страницу сайта не нужна.

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

Термин «Хлебные крошки» (по-английски Breadcrumbs) был взят из немецкой сказки братьев Гримм. В этой сказке дети отмечали свой путь в лес, оставляя после себя на своем пути хлебные крошки, чтобы ориентируясь по оставленным хлебным крошкам, у них оставалась возможность вернуться домой.

На своем блоге я уже описывал установку хлебных крошек с помощью плагина .

Хлебные крошки можно установить на свой сайт и без помощи специального плагина. В этом есть свои преимущества, так как при этом не будет повышаться нагрузка на ваш сайт. Поэтому желательно, там, где возможно, заменять используемые на сайте плагины, вставкой кода и различными скриптами.

Внимание! Перед установкой кода сделайте резервные копии файлов, в которые вы будете вставлять коды, чтобы в случае неполадок восстановить работоспособность вашей темы WordPress.

Для установки хлебных крошек вам необходимо будет вставить несколько кодов в соответствующие файлы вашей темы.

Устанавливать навигацию хлебные крошки на главную страницу блога не требуется. Посетитель, набирая в поиске название сайта, в абсолютном большинстве случаев, итак в выдаче будет направлен на главную страницу сайта.

Если посетитель пришел с поиска на конкретную страницу, то он будет видеть с помощью хлебных крошек свое местонахождение на сайте. Главная страница при этом будет гиперссылкой и посетитель сможет перейти на главную страницу, если воспользуется для этого навигацией хлебные крошки.

Установка хлебных крошек на сайт

Два варианта кода потребуется вставить в следующие файлы темы: «Функции темы (functions.php)», «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

Первый код нужно будет вставить в файл «Функции темы (functions.php)», установленной на вашем блоге темы WordPress.

// хлебные крошки function dimox_breadcrumbs() { $showOnHome = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $delimiter = "»"; // разделить между "крошками" $home = "Главная"; // текст ссылка "Главная" $showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать $before = ""; // тег перед текущей "крошкой" $after = " "; // тег после текущей "крошки" global $post; $homeLink = get_bloginfo("url"); if (is_home() || is_front_page()) { if ($showOnHome == 1) echo "

" . $home . "

"; } else { echo "

" . $home . " " . $delimiter . " "; if (is_category()) { global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, " " . $delimiter . " ")); echo $before . single_cat_title("", false). $after; } elseif (is_day()) { echo "" . get_the_time("Y") . " " . $delimiter . " "; echo "" . get_the_time("F") . " " . $delimiter . " "; echo $before . get_the_time("d") . $after; } elseif (is_month()) { echo "" . get_the_time("Y") . " " . $delimiter . " "; echo $before . get_the_time("F") . $after; } elseif (is_year()) { echo $before . get_the_time("Y") . $after; } elseif (is_single() && !is_attachment()) { if (get_post_type() != "post") { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; echo "" . $post_type->labels->singular_name . " " . $delimiter . " "; if ($showCurrent == 1) echo $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat; echo get_category_parents($cat, TRUE, " " . $delimiter . " "); if ($showCurrent == 1) echo $before . get_the_title() . $after; } } elseif (!is_single() && !is_page() && get_post_type() != "post" && !is_404()) { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif (is_attachment()) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat; echo get_category_parents($cat, TRUE, " " . $delimiter . " "); echo "" . $parent->post_title . " " . $delimiter . " "; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif (is_page() && !$post->post_parent) { if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif (is_page() && $post->post_parent) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs = "ID) . "">" . get_the_title($page->ID) . ""; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . " " . $delimiter . " "; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif (is_search()) { echo $before . "Результаты поиска по запросу "" . get_search_query() . """ . $after; } elseif (is_tag()) { echo $before . "Записи с тегом "" . single_tag_title("", false) . """ . $after; } elseif (is_author()) { global $author; $userdata = get_userdata($author); echo $before . "Статьи автора " . $userdata->display_name . $after; } elseif (is_404()) { echo $before . "Error 404" . $after; } if (get_query_var("paged")) { if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo " ("; echo __("Page") . " " . get_query_var("paged"); if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ")"; } echo "

"; } } // end dimox_breadcrumbs()

Для вставки этого кода в файл установленной на вашем сайте темы, нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор => «Шаблоны», и там нажать на пункт «Функции темы (functions.php)».

В окне «Редактировать темы», в файл «Функции темы ((functions.php)» потребуется вставить первый код в самом верху файла, после

Название записи домашней страницы - «Главная», можно изменить по вашему желанию на название вашего сайта. Для этого в соответствующей строке кода нужно заменить слово «Главная» на название вашего сайта.

Если вы хотите, чтобы на странице сайта, в навигации хлебные крошки не отображалось название той страницы, на которой вы находитесь в данный момент, то для этого нужно в следующей строке поменять цифру «1» на цифру «0».

После вставки кода и сделанных в нем по вашему желанию изменений, нажимаете на кнопку «Обновить файл».

Следующий код нужно будет вставить в несколько файлов установленной у вас темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

В файл «Одна запись (single.php)», отвечающий за страницам со статьями, код вставляется в место, показанное на изображении.

После вставки этого кода нужно нажать на кнопку «Обновить файл».

В файл «Архивы (arhvie.php)», вставляете этот код, в место, которое выделено в рамке на изображении.

Потом нажимаете на кнопку «Обновить файл».

В файл «Результаты поиска (search.php)», отвечающий за поиск по сайту, вставляете код в место, указанное на изображении.

После того, как вы вставили код, нажимаете на кнопку «Обновить файл».

В файл «Шаблон страницы (page.php)», отвечающий за статические страницы, вставляете код, как это показано на изображении.

После установки кода нажимаете на кнопку «Обновить файл».

Все, теперь хлебные крошки установлены на вашем сайте. Вам нужно открыть свой сайт, и вы увидите установленную навигацию. Если в это время ваш сайт был открыт, то вам потребуется обновить страницу, чтобы увидеть сделанные изменения.

Можно еще добавить такой код в файл «Таблица стилей (style.ccs)»:

/* Хлебные крошки */ #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;}

Этот код вставляется в самом конце файла «Таблица стилей (style.ccs)» для изменения внешнего вида установленной навигации хлебные крошки. Код для вставки в файл «Таблица стилей (style.php)» может иметь и другие характеристики (размеры, отступы и т. д.). Вставлять такой или подобный код на свой блог совсем не обязательно.

На своем сайте, в предыдущем шаблоне, я не стал устанавливать этот код, мне больше понравился внешний вид хлебных крошек без этих улучшений.

Выводы статьи

Теперь на вашем блоге установлены Хлебные крошки без использования плагина. Создателем этой функции является известный блогер Dimox (Дмитрий).

Так называемые «Хлебные крошки» служат для улучшения навигации по сайту и помогают посетителю сайта разобраться, где он сейчас находиться. Посетитель, находящийся на любой странице сайта, с помощью хлебных крошек понимает свое местонахождение в структуре блога.

Хлебные крошки являются еще одним элементом внутренней перелинковки сайта. Упрощается навигация по сайту, что удобно посетителю сайта, и в связи с этим повышаются поведенческие факторы.

Сам термин «Хлебные крошки» взят из сказки братьев Гримм «Гензель и Гретель», в которой детей заводили в лес. В первый раз, когда отец по воле злой мачехи заводит брата и сестру в лес, они находят дорогу обратно, благодаря тому, что оставляли по своему пути камешки. Во второй раз у детей камешков не оказалось, и они оставляли на своем пути вместо камешков хлебные крошки, которые склевали лесные птицы и дети заблудились в лесу. После различных приключений детям все-таки удалось вернуться домой.

Обычно навигация Хлебные крошки (по-английски Breadcrumbs) представляет из себя полосу в верхней части страницы, которая имеет примерно такой вид:

Все разделы сайта, кроме последнего являются ссылками. Последний раздел навигации является именно той страницей, на которой вы сейчас находитесь. На эту страницу гиперссылку делать не нужно.

Этот последний элемент может быть не обязательно отдельной страницей, а например названием рубрики, если вы вошли в какую-нибудь рубрику. В этом случае название рубрики уже не будет гиперссылкой.

Хлебные крошки на сайт можно установить с помощью плагина, а также без использования для этого специального плагина. Вначале рассмотрим установку хлебных крошек с помощью плагина Breadcrumb NavXT.

Плагин Breadcrumb NavXT

Для установки плагина Breadcrumb NavXT нужно войти в «Админ-панель WordPress» => «Плагины» => «Добавить новый». В поле «Поиск» нужно ввести выражение «Breadcrumb NavXT», а после этого нужно нажать на кнопку «Поиск плагинов».
В окне «Установить плагин» под названием плагина «Breadcrumb NavXT» следует нажать на ссылку «Установить».

В открывшемся окне «Установка плагина: Breadcrumb NavXT» необходимо нажать на ссылку «Активировать плагин». После этого в боковой панели «Админ-панели WordPress» появился новый пункт «Breadcrumb NavXT». Если нажать на этот пункт, то тогда можно будет войти в настройки плагина хлебных крошек.

В окне «Настройки Breadcrumb NavXT» расположено довольно много настроек этого плагина. Настройки Breadcrumb NavXT можно оставить сделанными по умолчанию. Во вкладке «Основные» можно, если вы хотите, изменить пункт «Ссылка на главную».

Теперь нужно вставить в файлы вашей темы, в те места, где должны будут отображаться хлебные крошки, следующий код:

Этот код желательно вставить в такие файлы вашей темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

Для того, чтобы вставить этот код нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор» => «Шаблоны».

В шаблон «Одна запись (single.php)», который отвечает за страницы со статьями, код вставляется так, как показано на этом изображении.

После вставки кода, нажимаете на кнопку «Обновить файл».

Код вставлен, затем нужно нажать на кнопку «Обновить файл».

В файл «Архивы (arhvie.php)», который отвечает за рубрики, также нужно будет вставить этот код.

После того, как код вставлен, нажимаете на кнопку «Обновить файл».

И в завершении установки кода в файлы темы WordPress, код вставляется в файл «Результаты поиска (search.php)», который отвечает за поиск по сайту. Вставляете код в то место, как это показано на изображении.

На этом изображении видно как выглядит навигация хлебные крошки. Имя главной страницы не было изменено на название сайта.

Можно также вставить в файл «Таблица стилей (style.ccs)» такой код (это делать необязательно):

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

В этом коде можно менять размер и шрифт (font:bolder 12px «Trebuchet MS», Verdana, Arial), отступы (padding-bottom: 10px), а также цвет ссылок хлебных крошек в статическом состоянии и при наведении на них курсора мыши (можно менять цифровые значения).

Показания в этом коде можно менять по своему усмотрению, или найти другой подобный код в Интернете. Также можно вообще обойтись и без установки этого кода в файл «Таблица стилей (style.ccs)». В установленной у меня теме, после установки кода, немного изменился шрифт.

В этой статье было рассмотрена установка хлебных крошек на сайт с помощью плагина Breadcrumb NavXT. В следующей статье будет рассмотрен такой вопрос - как установить без использования плагина.

Выводы статьи

При помощи плагина Breadcrumb NavXT на сайт устанавливается навигация, так называемые «хлебные крошки», которая помогает пользователю понять в каком разделе сайта он находится в данный момент времени.

Всем привет друзья. В сегодняшней статье я расскажу вам о том, что такое хлебные крошки, для чего они нужны и как добавить их на свой wordpress блог при помощи плагина и без него. Начнем!

Хлебные крошки – удобный способ перелинковки блога

Один из простых способов одновременно упростить навигацию по сайту и его перелинковку, это Хлебные крошки (breadcrumbs). Свое название он получил в честь того способа, благодаря которому герои немецкой сказки «Гензель и Гретель» пытались найти дорогу из леса.

Правда, детям крошки не помогли – их склевали птицы, а вот в сайтостроении функция, названная в честь неудачного способа спасения, прижилась и используется в ресурсах самого разного назначения, от личных блогов до интернет-магазинов.

Вы наверняка видели эту навигационную цепочку на самых разных интернет ресурсах. Обычно ее размещают над статьей, и выглядит она примерно так:

Главная страница > Рубрика > Подрубрика > Текущая страница

Причем все «звенья», кроме последнего — это внутренние ссылки.

Благодаря этой цепочке, читатель в любой момент может понять, на каком уровне сайта он находится и имеет возможность пройти как по всей цепочке, так и сразу перейти в интересующий его раздел или же вернуться на главную страницу ресурса.

Какую пользу несут хлебные крошки для сайта и блога

Как сказано выше, во-первых, это упрощение навигации. Например, читатель зашел в статью, прочитал ее и решил почитать другие статьи раздела. Благодаря хлебным крошкам, ему не нужно искать карту сайта или список рубрик. Он просто вернется на шаг назад.

Вы ненавязчиво приглашаете читателя перейти по ссылкам, то есть даете ему еще одну причину задержаться на вашем сайте. Это, в свою очередь, улучшает поведенческие факторы, то за что поисковые роботы, в первую очередь, отличают блоги и сайты.

Чем сложнее структура сайта, тем важнее установить на него breadcrumbs. Так как посетителям, особенно впервые оказавшимся на данном ресурсе, сложно разобраться во всех блоках, страницах, разделах и подразделах. Если им не будет подсказок, они так и будут уходить, прочитав лишь одну статью.

Вторая задача этого элемента, тесно связанная с первой – внутренняя оптимизация сайта, точнее еще один способ связать ссылками как можно большее количество статей. Причем, в отличие от ручной перелинковки, здесь все происходит автоматически. Над каждой опубликованной статьей сразу появляется нужная навигационная цепочка.

Данную функцию можно добавлять на сайты и блоги разными способами. Рассмотрим два самых простых варианта для WordPress – установку с помощью плагина и с помощью внесения небольших изменений в код.

Как добавить хлебные крошки на блог плагином

Самый простой способ установить хлебные крошки на блог – установить специальный плагин. Для WordPress обычно используют Breadcrumb NavXT.

Способ его установки стандартный: заходим в админку блога -> Плагины -> Добавить новый. В появившееся окно вставляем название плагина и нажимаем «Найти плагины».

Вот он, наш плагин, нажимаем «Установить сейчас», затем «Активировать».

и над этой строчкой вставляем следующий кусочек кода:

Если вы хотите разместить навигационную цепочку в другом месте, значит этот же код размещаете там.

После этого переходим в «Настройки» — > «Настройки Breadcrumb NavXT» и в графе «Название ссылки» меняем название на свое и сохраняем изменения.

Осталось перейти на блог и полюбоваться на результат.

Как добавить хлебные крошки на блог без плагина

Так как любые плагины, это дополнительная нагрузка на блог, замедляющая его работу, то лучше просто немного изменить код, тем более что в данном случае, это проще, чем установить плагин.

Заходим в админку –> «Внешний вид» -> «Редактор» -> functions.php. Здесь в любом месте (главное не внутрь другой функции) вставляем следующий код:

Function the_breadcrumb() { echo "You are here: "; 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 "Home"; } }

и сохраняем. Если боитесь запутаться, просто вставьте его в самом конце над последней скобкой.

Теперь нужно вот этот код:

разместить там, где вы хотите видеть навигационную цепочку, например, опять же над заголовком статьи. Для этого идем в single.php, ищем строчку с the_title и над ней вставляем этот код и сохраняем изменения.

Можете перейти на сайт и посмотреть, что получилось. Как видите, You are here и Home тут явно не к месту и их нужно изменить на что-то более подходящее, например, на Путь и Главная (или название блога).

Кроме того, нужно убедиться, что изменения одинаково хорошо смотрятся на разных браузерах – не наплывают на другие части темы и, одновременно, хорошо заметны.

Все, «Хлебные крошки» помогают вашим читателям, а вы можете гордиться тем, что самостоятельно разобрались в их установке. Всем спасибо за внимание!

P.S. В заключение статьи видео о том как поставить хлебные крошки на свой блог:

Приветствую вас, уважаемые читатели блога сайт. В этой статье я покажу вам, как сделать навигационную строку, которую вы можете наблюдать у меня вверху перед началом заголовков статей. Данную цепочку навигаций мне делает простой плагин для WordPress — Breadcrumb NavXT , который переводится как «хлебные крошки».

Данное название плагин получил из-за того, что его автору Джону Хавлику понравилась сказка про братьев Гримм, где мальчик Гензель сыпал хлебные крошки, чтобы по ним найти обратный путь. Правда было бы логичнее назвать плагин «камушки», так как по истории сказки Гензель и Гретель не смогли найти путь назад, так как хлебные крошки съели птицы. Ну да ладно, не в этом суть, главное, что этот плагин поможет посетителям не потеряться на вашем сайте и точно даст знать, где и в какой категории (части сайта) они сейчас находятся.

К тому же плагин Breadcrumb NavXT помогает равномерно распределить статический вес по всем страницам сайта, что очень важно для его и продвижения в поисковых системах. На всякий случай, если вы считаете, что внутренняя перелинковка (оптимизация) сайта не так важна, то рекомендую почитать вам вот эту , из которой вы поменяете свою точку зрения.

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

Установка плагина хлебных крошек Breadcrumb NavXT.

1 ) Как обычно скачиваем плагин и закачиваем его на блог, активируем.

2 ) Теперь нам нужно разместить специальный код в том месте, где вы хотите видеть строчку хлебных крошек. Для этого перейдите во «внешний вид» «редактор» и выберите файл, в который будете вставлять код. Чаще всего код плагина вставляют в файл «одна запись» (single.php) непосредственно перед или после заголовка статьи. Если вы совсем не разбираетесь в кодах, то просто ищите в самом начале кода два тега

и , которые отвечают за вывод названия публикаций. У меня данный код выглядит так:</p> <p><b><h2>" title="<?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>Теперь зайдите во «внешний вид» «редактор» и откройте файл «таблица стилей» (style.css). И вставьте данный код практически в самый низ и обновите файл.</p> <p><b>.breadcrumb { </b><br><b>font:bolder 12px «Trebuchet MS», Verdana, Arial; </b><br><b>padding-bottom: 10px; </b><br><b>} </b><br><b>.breadcrumb a{ </b><br><b>color: #1B7499; </b><br><b>} </b><br><b>.breadcrumb a:hover { </b><br><b>color: #EF0E0E; </b><br><b>} </b></p> <p>Flector 5 <h1></h1> <p><b>Breadcrumb NavXT </b> это самый продвинутый и популярный плагин "<b>хлебных крошек </b>" для блога на <b>WordPress </b>. У него всего один недостаток – нет никаких встроенных стилей оформления. Этот недостаток плагина вы можете исправить, взяв готовые к использованию стили из этой статьи. В плагине достаточно много тонких настроек, так что я перевел его на русский язык, чтобы в настройках могли разобраться даже новички. Также читайте как оформить панель "<b>хлебных крошек </b>" в разметке <b>RDFa </b>, которая поможет поисковикам найти и использовать эту панель при формировании сниппета.</p> <tr><td valign="top" width="18"> </td> <td valign="top" width="465"> <p><img src='https://i0.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/6.gif' width="100%" loading=lazy></p> </td> <td valign="top" width="44"> </td> </tr><tr><td valign="top" width="18"> </td> <td valign="top" width="465"> <p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/7.gif' width="100%" loading=lazy></p> </td> <td valign="top" width="44"> </td> </tr><tr><td valign="top" width="18"> </td> <td valign="top" width="465"> <p><img src='https://i2.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/8.gif' width="100%" loading=lazy></p> </td> <td valign="top" width="44"> </td> </tr><tr><td valign="top" width="18"> </td> <td valign="top" width="465"> <p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/9.gif' width="100%" loading=lazy></p> </td> <td valign="top" width="44"> </td> </tr><tr><td valign="top" width="18"> </td> <td valign="top" width="465"> <p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/10.gif' width="100%" loading=lazy></p> </td> <td valign="top" width="44"> </td> </tr><tr><td valign="top" width="18"> </td> <td valign="top" width="465"> <p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/11.gif' width="100%" loading=lazy></p> </td> <td valign="top" width="44"> </td> </tr><p>Эти стили подойдут к дизайну большинства шаблонов, но никто вам не мешает поиграться с цветами, чтобы получить что-то типа:</p> <p><b>Breadcrumb NavXT </b> это очень настраиваемый плагин. При желании можно настроить его так, чтобы он генерировал код "<b>хлебных крошек </b>" в соответствии с принятым гуглом стандартом <b>RDFa </b>. Такая разметка панели "<b>хлебных крошек </b>" не является гарантией того, что гугл применит их при формировании поискового сниппета, но шансы на это резко возрастут.</p> <p>Как это сделать? Первым делом, поменяйте код вызова панели на:</p> <p><span typeof="v:Breadcrumb"> Главная </p></p> <table><tr><td class="code"> < span typeof= "v:Breadcrumb" > < a href= "%link%" rel= "v:url" property= "v:title" >% htitle%</ a> </ span> </td> </tr></table><p><span typeof="v:Breadcrumb"> %htitle% </p> <p>И так для каждой ссылки в панели навигации. Я не буду заставлять вас вручную менять каждую ссылку в настройках плагина - вот вам готовый настроек (правая кнопка мышки и "<b>Сохранить объект как </b>"). Нажмите "<b>Помощь </b>", затем кликните на "<b>Импорт/Экспорт/Сброс </b>" и выберите скаченный файл для загрузки и импорта. В данном файле экспорта использованы настройки плагина по умолчанию плюс <b>RDFa </b> разметка и ничего больше. При желании вы можете настроить плагин под себя, но не трогайте в настройках все, что относится к <b>RDFa </b>.</p> <p>После этого плагин начнет генерировать правильный код панели "<b>хлебных крошек </b>", пригодный для поисковиков. При желании можно проверить выводимый код . Если все правильно, то вам визуально покажут, как примерно будет выглядеть ваш сниппет в выдаче:</p> <p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/13.gif' width="100%" loading=lazy></p> <p>Главная страница в этом превью не отображается, но в реальном поиске она, конечно, будет присутствовать.</p> <p>Кстати, формально плагин поддерживает разметку для "<b>хлебных крошек </b>". Но почему-то только в виджете и только разметку "<b>schema.org </b>". Однако поддерживает он ее криво - валидацию у гугла такая разметка не проходит:</p> <p><img src='https://i0.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/14.gif' width="100%" loading=lazy></p> <p>Но в любом случае плагин поддерживает разметку только в виджете, что вряд ли может кого устроить, так как "<b>хлебные крошки </b>" выводят, как правило, в начале страницы, а вовсе не в сайдбаре.</p> <p>К сожалению, на данный момент "<b>хлебные крошки </b>" не поддерживаются яндексом . Причем ни в каком виде – что в размеченном, что нет. Жаль, конечно, но тут ничего не поделаешь.Скачать плагин версии 6.2.1 (всего скачено <b>6 988 695 </b> раз)<br></p> <p>Понравился пост? Подпишись на обновления по или</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>");</script> </div> </article> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Рекомендуем другие статьи</div> <div class="items"> <div class="item"> <a href="/reviews/kak-prazdnovat-letnee-solncestoyanie-kak-prazdnovat-letnee-solncestoyanie.html" class="itemlink"> <img src="/uploads/d002eb7ee7f8ca5839027a5ec58464a2.jpg" width="220" height="170" alt="Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние" class="itemimage" / loading=lazy> <div class="itemtitle">Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние</div> </a> </div> <div class="item"> <a href="/internet/programmirovanie-mikrokontrollerov-dlya-nachinayushchih-legko-i.html" class="itemlink"> <img src="/uploads/cc080e5fe541f0a30c5c0fdf1654e93a.jpg" width="220" height="170" alt="Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих" class="itemimage" / loading=lazy> <div class="itemtitle">Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих</div> </a> </div> <div class="item"> <a href="/life-hacks-for-ios/pochemu-planshet-ne-vyklyuchaetsya-chto-delat-zavis-planshet---chto-delat-vozmozhnye.html" class="itemlink"> <img src="/uploads/5ee684d277379108d1f4344cff82eff8.jpg" width="220" height="170" alt="Завис планшет - что делать?" class="itemimage" / loading=lazy> <div class="itemtitle">Завис планшет - что делать?</div> </a> </div> </div> </div> </div> </main> <aside class="sidebar"> <div class="section"> <div class="sectionheadline">Самое популярное</div> <div class="sidebar-items"> <a class="sidebar-item" href="/program/videonablyudenie-cherez-usb-kameru-besprovodnaya-usb-kamera-kupit.html"> <img src="/uploads/c5ad1ebb2eec805aceb765a476962621.jpg" width="75" height="75" alt="Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом" class="sidebar-itemimage" / loading=lazy> <div class="sidebar-itemtitle">Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом</div> </a> <a class="sidebar-item" href="/life-hacks-for-pc/sem-putei-voiti-v-svoi-lichnyi-kabinet-stoloto-russkoe-loto-obman.html"> <img src="/uploads/ef0eb579f517d663a977671e7a51ce14.jpg" width="75" height="75" alt="Столото, Русское лото – обман?" class="sidebar-itemimage" / loading=lazy> <div class="sidebar-itemtitle">Столото, Русское лото – обман?</div> </a> <a class="sidebar-item" href="/internet/v-chem-smysl-maininga-kak-rabotaet-maining-kriptovalyuty-process.html"> <img src="/uploads/e7ccb6fbe0cf024cedb045c511cf5fad.jpg" width="75" height="75" alt="Как работает майнинг криптовалюты Процесс майнинга криптовалют" class="sidebar-itemimage" / loading=lazy> <div class="sidebar-itemtitle">Как работает майнинг криптовалюты Процесс майнинга криптовалют</div> </a> <a class="sidebar-item" href="/game/professiya-programmist-dlya-detei-konspekt-zanyatiya-v-detskom.html"> <img src="/uploads/9d0201b81adc610408d4507ccf6f9186.jpg" width="75" height="75" alt="Конспект занятия в детском саду «Программист – великий волшебник" class="sidebar-itemimage" / loading=lazy> <div class="sidebar-itemtitle">Конспект занятия в детском саду «Программист – великий волшебник</div> </a> <a class="sidebar-item" href="/life-hacks-for-ios/aliekspress-prosit-ukazat-proverochnyi-kod-pri-vhode-chto.html"> <img src="/uploads/85f99bb622febba2f51f6ce46c571a8f.jpg" width="75" height="75" alt="Как пройти проверку при входе в аккаунт на Алиэкспресс?" class="sidebar-itemimage" / loading=lazy> <div class="sidebar-itemtitle">Как пройти проверку при входе в аккаунт на Алиэкспресс?</div> </a> <a class="sidebar-item" href="/game/otklyuchenie-uslugi-mobilnye-podpiski-kak-uznat-kakie-platnye.html"> <img src="/uploads/ce520cb58283add55341e217e52bd195.jpg" width="75" height="75" alt="Как узнать какие платные подписки от мегафон подключены и как их отключить" class="sidebar-itemimage" / loading=lazy> <div class="sidebar-itemtitle">Как узнать какие платные подписки от мегафон подключены и как их отключить</div> </a> </div> </div> <script> // <![CDATA[ $(document).ready(function() { var floatsidebar = $("#float-sidebar"); var offset = floatsidebar.offset(); var left = offset.left; var top = offset.top; var width = $("#float-sidebar").width(); var height = $("#float-sidebar").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= top) { $('#float-sidebar').css({ left: left + 'px', position: 'fixed', top: "50px", width: width + "px" }); } else { $('#float-sidebar').css({ position: 'static', }); } }); }); // ]]> </script> <div id="float-sidebar"> <div id="laqybe1" style="height:500px;width:270px;" align="center"></div> </div> </aside> </div> <footer class="footer"> <div class="footer-left"> <div class="footerlogo"> <div class="footerlogo-sitename">radiobud.ru</div> </div> <div class="footercopyright"> <p>© 2024 - radiobud.ru<br /></p> <p>Обзоры, лайфхаки, игры, программы</p> </div> <nav class="footernav-1"> <ul> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> </ul> </nav> </div> <nav class="footernav-2"><ul> <li class="menu-item type-taxonomy object-category "><a href="/feedback.html">Контакты</a></li> <li class="menu-item type-taxonomy object-category "><a href="">Реклама</a></li> <li class="menu-item type-taxonomy object-category "><a href="">О сайте</a></li> </ul></nav> <div class="footercounters"> </div> <div class="footer__note"></div> </footer> </div> </div> <script type='text/javascript' src='https://radiobud.ru/wp-content/themes/radiobud.ru/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ / var tocplus = { "smooth_scroll":"1","visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; / ]]> */ </script> <script type='text/javascript' src='https://radiobud.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://radiobud.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> </body> </html>