Главная страница » Статьи » Как вывести хлебные крошки в Elementor

Как вывести хлебные крошки в Elementor

Хлебные крошки на сайте (англ. Breadcrumbs) — это навигационные цепочки, показывающие путь текущей страницы. Они облегчают навигацию пользователя на сайте. Особенно важен этот элемент в интернет-магазинах с большой вложенностью категорий товаров.

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

Если у Вас установлен плагин Yoast SEO, то добавить хлебные крошки на страницу очень легко с помощью соответствующего виджета:

Плагин All in One SEO позволяет добавить хлебные крошки на страницу Elementor с помощью шорткода. Для этого в настройках плагина нужно выставить следующие настройки:

На способе добавления хлебных крошек с помощью плагина Breadcrumb NavXT остановимся подробнее. К сожалению, плагин, количество загрузок которого 900 тыс., не предоставляет шорткод и виджет Elementor для добавления на сайт. Доступен лишь PHP-код. Все, что нам нужно – это добавить его на наш сайт. Но PHP код тоже просто так не вставить на страницу, поэтому создадим свой собственный шорткод.

Выведем хлебные крошки с помощью своего шорткода:

				
					// Код для размещения с помощью шорткода. Breadcrumb NavXT - должен быть установлен и активирован
function wpc_elementor_shortcode($atts)
{
	if (function_exists('bcn_display')) {
		bcn_display();
	}
}

add_shortcode('esa_breadcrumbs', 'wpc_elementor_shortcode');

Другой вариант, если Вы используете плагин Yoast SEO:

				
					// Код для размещения с помощью шорткода. Yoast SEO - должен быть установлен и активирован
function wpc_elementor_shortcode($atts)
{

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

add_shortcode('esa_breadcrumbs', 'wpc_elementor_shortcode');

Теперь достаточно просто вставить шорткод "esa_breadcrumbs" в нужном месте (вместо кавычек используйте квадратные скобки).