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

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

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

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

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

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

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

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

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

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

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

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

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

После сохранения настроек, на блоге ничего не появиться, потому что система не знает, где показывать крошки в 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, представленный выше.

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

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

Проверяем отображение breadcrumbs
Проверка работы

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

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

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

Показ последнего элемента
Последняя ссылка

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

Хлебные крошки с подрубриками
Отображение подрубрик

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

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

Альтернативный плагин для хлебных крошек
Альтернатива

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

Настройка в разделе Option
Настройка Option

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

Копируем Shortcodes
Shortcodes

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

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

Процедура добавления хлебных крошек без плагина, занимает времени не больше чем с ним, система та же, только вместо установки дополнения, мы прописываем функцию в тему. Берем конфигурацию написанную ниже и вставляем в 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;
}
куда вставить функцию без плагина
Функция в function.php

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

<?php echo wpcourses_breadcrumb( ' / ' ); ?>
Показываем breadcrumbs
Выводим на экран

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

  • К <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. У последнего пункта добавил подчеркивание.
Внешний вид BC в style.css
Задаем оформление

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

Проверяем показ
Смотрим внешний вид

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

Код для WooCommerce

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

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

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

Ставим Woo Visual Hook Guide
Работа Woo Visual Hook Guide
  1. Нажимаем Start visual hooks
  2. Выбираем область куда вставлять хлебные крошки, выберу перед заголовком
  3. Вставляем название, так он будет выглядеть
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_breadcrumb', 5, 0 );

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

Хук хлебных крошек WooCommerce
Вставка хука WooCommerce

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

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

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

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

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

Крошки в BBPress
BBpress

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

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

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

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

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

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

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

Просмотр исходного кода
Инструмент разработчика

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

Находим класс
Узнаем class

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

Где еще могут быть хлебные крошки
Возможные файлы

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

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

.breadcrumb-container {display:none}
Скрытие через стили
Указываем display:none

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

Результат удаления через style
Результат

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

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

Пожалуйста, оцените материал:

Давно занимаюсь и разрабатываю сайты на Wordpress. Считаю что лучшего решения для ведения бизнеса не найти, поэтому считаю долгом делиться информацией с остальными.
Получай полезные материалы удобным способом!

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

  1. Авторское решение интересное, но там не работает вывод главных рубрик, если в них есть подрубрика.

    1. Да к сожалению не предусмотрена такая вещь, переделаем код. Спасибо за сообщение )

Добавить комментарий

Ntrcn