Хлебные крошки для WordPress с плагином и без него

Что такое и почему называются – хлебные крошки

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

Что даст добавление breadcrumbs

Есть несколько причин зачем их добавлять:

• Дополнительная перелинковка
• Удобство использования – при большом количестве рубрик в вордпресс, можно запутаться где был ранее, а такое дополнение покажет место
• Поведенческие факторы, конечно не намного, но добиться большей открываемости можно
• Улучшение снипета в поисковой выдаче (необходима разметка shema)
  

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

Как сделать в YoastSEO

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

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

Включаем Yoast

• Чтобы включить функцию, передвигаем ползунок в положение включено
• Заполняем по желанию разделитель и задаем для разных страниц префиксы
• Последний элемент в цепочке навигации можно вывести жирным цветом
• Таксономию для записей лучше выставить Рубрика, чтобы показать подрубрику поста
  После сохранения настроек, на блоге ничего не появиться, потому что система не знает, где показывать крошки в WordPress. С помощью функции указываем где отобразить BC.

‘ ); } ?>

Добавим его в шаблон записей, по умолчанию это документ single.php. Хочу добавить сразу после заголовка h1, вот здесь.

Отсутствие надписи

Побродив по single.php тега h1 я не нашел. Пришлось рыть глубже, нашел в папке templates-parts и в ней content-single, определил тег h1 и вставил php, представленный выше.

Прописываем хлебные крошки в WordPress

1. Открываем Редактор тем

2. Находим документ WordPress для вставки

3. Определяем место где нужен расположить

4. Вставляем строчки

5. Нажимаем Обновить

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

Проверка работы

Для более презентабельного вида советую добавить CSS. Так же Yoast добавил в редактор записей WordPress свой блок для изменения названия в конце цепочки. Переходим в редактор и идем в меню Дополнительно.

Изменение заголовка последнего элемента

Не забываем обновить, смотрим что получилось.

Последняя ссылка

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

Отображение подрубрик

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

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

Кнопка “назад”

Вместо линейки ссылок выводится одна единственная кнопка “Назад”, возвращающая пользователя на страницу, откуда он пришел. 

• Вконтакте
• Facebook
• Evernote
• Pinterest
  Такой способ хорошо подойдет интернет-магазинам или сайтам имеющим большое количество фильтров. Если юзер настроил этот фильтр и перешел на следующую страницу, то при клике “назад” в браузере, фильтр сбросится, но если кликнуть “назад” на сайте, то он останется настроенным. Вот и вся польза. 

Мы рекомендуем использовать этот функционал с паре с линейными хлебными крошками.

Настроить плагином Breadcrumb

Открытием стал плагин Breadcrumb, простой и постоянно обновляющийся. Устанавливается стандартно из панели в поиске, в выдаче выглядит так.

Альтернатива

После установки в панели появится одноименный пункт, заходим в него и заполняем поля.

Настройка Option

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

Shortcodes

Куда заливать знаем, разбирались в разделе про Yoast. Существует еще один это NavXT, вебмастера скажут, что это отличный вариант, но мне не понравился, потому что такая мелочь создается быстро и легко, а в настройках NavXT много мусора.

Создаем хлебные крошки без плагина

Процедура добавления хлебных крошек без плагина, занимает времени не больше чем с ним, система та же, только вместо установки дополнения, мы прописываем функцию в тему. Берем конфигурацию написанную ниже и вставляем в function.php перед закрывающим тегом ?>, если его нет, то просто в самый низ.

Отмечу что функция авторская от нашего руководителя Сергея Алейникова.

Функция в function.php

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

Выводим на экран

Для красоты добавим стили для оформления, предусмотрены три параметра:

с классом wpcourses-breadcrumbs, можно задать стили

• Wpcourses-breadcrumbs-sep — класс у разделителя
• Wpcourses-breadcrumbs-last — класс у последнего пункта
  Настраиваем по своему вкусу, если есть знания в CSS. Для примера дам свой вариант.

Вставляем в style.css, объясню что означает:

1. Задал стили для всего блока хлебных крошек, задний фон, внутренний отступ и нижний, чтобы не прилипал к области контента

2. Ссылки сделал черного цвета

3. Цвет разделителя определил синим

4. У последнего пункта добавил подчеркивание.

Задаем оформление

Так выглядят крошки визуально на страницах ресурса.

Смотрим внешний вид

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

Код для WooCommerce

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

add_action( ‘название области для вставки’, ‘woocommerce_breadcrumb’, 5, 0 );

Видим есть пометка, ее заменяем на место показа хлебных крошек. Используем плагин Woo Visual Hook Guide, устанавливаем и активируем из админки WordPress . Переходим на страницу товара.

Работа Woo Visual Hook Guide

1. Нажимаем Start visual hooks

2. Выбираем область куда вставлять хлебные крошки, выберу перед заголовком

3. Вставляем название, так он будет выглядеть

add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_breadcrumb’, 5, 0 );

Записываем его в function.php в самый низ и сохраняем.

Вставка хука WooCommerce

При успешном завершении операции WordPress покажет путь до товара, у меня вышло так. Прописываем CSS, как определить class написано ниже, оформляем под дизайн магазина.

Показ ХК на карточке товара

Метод универсальный, потому что используем встроенные возможности в WooCommerce, на его же страницах. В дополнение приложу свое видео.

Хлебные крошки в BBpress

Знаменитый модуль BBPress для формирования форумов на WordPress, имеет свои хлебные крошки.

BBpress

Рекомендую пользоваться данным вариантом, потому что он правильно выстраивает цепочку навигации разделов. Бывает что не отображается, причин может быть несколько:

• В активной теме есть запрет на вывод
• Спор с другими дополнениями, например, с Yoast
• Активный шаблон не предназначен для установки BBPress
  

  Старайтесь использовать темплейты, сделанный специально под продукт, это касается всех дополнительных инструментов.