Хлебные крошки — очень полезный элемент навигации. Данная функция позволяет показывать весь путь к необходимому разделу или статье. А так же способствует оптимизации сайта и будет полезна не только посетителям сайта, но и для поисковых систем, для того, чтобы ускорить процесс индексации.

Навигация по странице:

Преимущества уникального сервиса

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

Как пользоваться данным модулем?

Установите специальный плагин Yoast SEO или Breadcrumb NavXT. После этого добавьте в шаблон темы специальный код от разработчиков, для вызова необходимого модуля. Для этого необходимо перейти в редактор тем, найти файл single.php и добавить туда код, который предоставили разработчики. С помощью редактирования style.css можно задать собственный стиль например изменить цвет и размер шрифта, который отображается в пути.

Устанавливаем хлебные крошки с помощью плагина Yoast SEO

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

Итак, переходим в SEO → Отображение в поисковой выдаче → «Хлебные крошки» → кликаем «Включено». 

Что такое хлебные крошки на WordPress

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

Устанавливаем хлебные крошки с помощью плагина Yoast SEO

После того, как включили и настроили хлебные крошки — переходим в редактор тем. (Если вы впервые пользуетесь редактором тем — то при переходе даем свое согласие, нажимаем на «Я понимаю»).

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

Устанавливаем хлебные крошки на WordPress без плагина

Код, который предоставили разработчики плагина:

<? php if (function_exists ('yoast_breadcrumb')) {yoast_breadcrumb ('<p id = "breadcrumbs">', '</ p>'); }?>

Я пошел другим путем и добавил этот код в тег div — для того, чтобы можно было задать свой индивидуальный стиль, например установить размер шрифта и цвет на свой вкус:

<div class="bread-header"><?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); }?> </div>

Разработчики плагина предлагают добавить код в: single.php и / или page.php чуть выше заголовка страницы или просто вставить код в header.php в самом конце. Я добавил код в single.php:

Как убрать хлебные крошки в WordPress

Прописываем необходимый стиль на свой вкус в файле style.css, я установил размер шрифта 18px и цвет # 3364c1 (светло-синий):

} #breadcrumbs a { color: #3364c1; font-size: 18px; }

Добавляем этот стиль в style.css:

хлебные крошки

Готово! Вот что у нас получилось:

хлебные крошки wordpress

Заметьте, на странице имеется дубль названия статьи — его можно убрать. Для этого необходимо добавить следующий код в functions.php: 

// "хлебные крошки" - убираем дубль названия записи function adjust_single_breadcrumb( $link_output) { if(strpos( $link_output, 'breadcrumb_last' ) !== false ) { $link_output = ''; } return $link_output; } add_filter('wpseo_breadcrumb_single_link', 'adjust_single_breadcrumb' );

плагин хлебные крошки

В итоге получаем:

микроразметка хлебных крошек

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

как сделать хлебные крошки

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

хлебные крошки страниц

Далее, все аналогично, как и с предыдущим плагином. Нам необходимо разместить код предоставленный разработчиками. Разместите код в зависимости от того, где у вас будут отображаться хлебные крошки, например в single.php или header.php. Я добавил код в single.php:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div>

woocommerce хлебные крошки

Вот, что должно получиться после добавления кода:

хлебные крошки yoast

Аналогично, как и с настройкой хлебных крошек, на примере плагина Yoast SEO, на свое усмотрение можно задать необходимый стиль на свой вкус в файле style.css.

Устанавливаем хлебные крошки на wordpress без плагина

Не думаю, что стоит изобретать и использовать этот способ. Ведь давно все придумано, а с плагином намного проще и в настройках можно все настроить под себя. Но для тех, кто гонится за производительностью (хоть это и не принесет существенный прирост) и хочет лишний раз обойтись без дополнительного плагина. То есть способ, разработанный автором CodexWorld, его реквизиты указаны в комментариях кода.  Для начала необходимо добавить новую функцию в файл functions.php:

/** * Generate breadcrumbs * @author CodexWorld * @authorURL www.codexworld.com */ function get_breadcrumb() { echo '<a href="'.home_url().'" rel="nofollow">Главная</a>'; if (is_category() || is_single()) { echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;"; the_category(' &bull; '); if (is_single()) { echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; "; the_title(); } } elseif (is_page()) { echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;"; echo the_title(); } elseif (is_search()) { echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... "; echo '"<em>'; echo the_search_query(); echo '</em>"'; } }

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

Размещаем следующий код в single.php:

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

хлебные крошки вордпресс

Получаем результат:

хлебные крошки яндекс

Аналогично, как с описанием предыдущих способов добавления «хлебных крошек», мы можем задать свой собственный стиль и добавить его в файл style.css. Вот вам пример:

.breadcrumb a { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #e6e6e6; border-radius: 4px; }

yoast seo хлебные крошки

Результат в этот раз показывать не буду 🙂. Вы можете поэкспериментировать с цветом и размером шрифта.

Как убрать хлебные крошки в WordPress

Для начала необходимо понять каким из способов были установлены «хлебные крошки»:

  1. Перейдите в установленные плагины и посмотрите не был ли реализован способ установки с помощью плагина Yoast SEO или Breadcrumb NavXT. Если использовался такой способ, то необходимо в настройках плагина отключить функцию показа, либо деактивировать/удалить плагин.
  2. Если плагин не был обнаружен, значит придется копаться в коде методом редактора тем и искать код в одном из файлов. В основном это: single.php, page.php или header.php. А пример кода вы можете посмотреть в одном из способов его реализации, поднимитесь немного выше.

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