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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Открываем Редактор тем
2. Находим документ WordPress для вставки
3. Определяем место где нужен расположить
4. Вставляем строчки
5. Нажимаем Обновить

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

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

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

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

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

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

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

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

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

Хлебные крошки в премиальной теме Reboot

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

Чтобы включить или выключить хлебные крошки в Ребут, перейдите в настройки.

Далее зайдите в пункт «Модули» > «Хлебные крошки».

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

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

Скидка на Reboot

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

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

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

function wpcourses_breadcrumb( $sep = ' > ' ) {
	global $post;
	$out = '';
	$out .= '<div class="wpcourses-breadcrumbs">';
	$out .= '<a href="' . home_url( '/' ) . '">Главная</a>';
	$out .= '<span class="wpcourses-breadcrumbs-sep">' . $sep . '</span>';
	if ( is_single() ) {
		$terms = get_the_terms( $post, 'category' );
		if ( is_array( $terms ) && $terms !== array() ) {
			$out .= '<a href="' . get_term_link( $terms[0] ) . '">' . $terms[0]->name . '</a>';
			$out .= '<span class="wpcourses-breadcrumbs-sep">' . $sep . '</span>';
		}
	}
	if ( is_singular() ) {
		$out .= '<span class="wpcourses-breadcrumbs-last">' . get_the_title() . '</span>';
	}
	if ( is_search() ) {
		$out .= get_search_query();
	}
	$out .= '</div><!--.wpcourses-breadcrumbs-->';
	return $out;
}

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

<?php echo wpcourses_breadcrumb( ' / ' ); ?>

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

• К <div> с классом wpcourses-breadcrumbs, можно задать стили
• Wpcourses-breadcrumbs-sep – класс у разделителя
• Wpcourses-breadcrumbs-last – класс у последнего пункта

Настраиваем по своему вкусу, если есть знания в CSS. Для примера дам свой вариант.

.wpcourses-breadcrumbs {background: #d2d2d2; padding: 3px 10px; margin-bottom:10px;}
.wpcourses-breadcrumbs a {color:black}
.wpcourses-breadcrumbs-sep {color:#09829e}
.wpcourses-breadcrumbs-last {text-decoration:underline}

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

1. Задал стили для всего блока хлебных крошек, задний фон, внутренний отступ и нижний, чтобы не прилипал к области контента
2. Ссылки сделал черного цвета
3. Цвет разделителя определил синим
4. У последнего пункта добавил подчеркивание.

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

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

Код для WooCommerce

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

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

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

1. Нажимаем Start visual hooks
2. Выбираем область куда вставлять хлебные крошки, выберу перед заголовком
3. Вставляем название, так он будет выглядеть

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_breadcrumb', 5, 0 );

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

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

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

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

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

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

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

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

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

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

1. Отключить по одному какие–либо дополнения SEO оптимизации, потому что в большинстве случаем они подгружают такой функционал
2. Отключить модули, если не добавляли, то они могут остаться от предыдущих вебмастеров или вшиты в сборку
3. Если не помогло, то ищем в файлах темы, для этого узнаем какой div с классом отвечает за вывод.

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

Откроется окно и в нем смотрим какой div оборачивает весь блок с ссылками.

Похожее ищем в теме, где именно не могу сказать, но советую в single, page, index – это самые распространенные места.

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

Но если ничего не помогает и удалить не удается, то остается один способ, это скрыть визуально, но в коде они останутся. Выше мы определили, что класс крошек называется breadcrumb-container. Соответственно в style.css активной темы вписываем:

.breadcrumb-container {display:none}

Переходим в запись и обязательно обновляем с помощью кнопок ctrl+F5, видим что надпись пропала.

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

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