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

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

В немецкой сказке « Гензель и Гретель » младшие брат и сестра, услышав план злой мачехи бросить их в лесу на произвол судьбы, взяли кусок хлеба и оставили след из хлебных крошек, который они вернуться домой после того, как их бросили родители.

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

Хлебные крошки — это второстепенные элементы навигации на веб-сайте, которые показывают местоположение посетителя.

Вы читаете эту статью, потому что знаете, что это такое, но если вам интересно, как это выглядит, вы можете отправиться на eBay и посмотреть их.

Покупатель, просматривающий док-станцию ​​с подставкой для зарядки Qi Wireless Fast Charger для Galaxy S9+ iPhone X XS Max, легко узнает, где он находится и как получить различные категории, в которых указан его продукт.

В этом случае есть ссылка на домашнюю страницу, затем ссылка на основную категорию, в которой указан продукт — « Сотовые телефоны и аксессуары», за которой следует подкатегория « Аксессуары для сотовых телефонов » и еще одна подкатегория — « Зарядные устройства и подставки ».

Зачем добавлять хлебные крошки на сайт WordPress?

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

Это приводит нас к еще одному преимуществу добавления хлебных крошек на веб-сайт WordPress: пользователю не нужно нажимать кнопку «Назад» в браузере, только навигационную цепочку.

Хлебные крошки позволяют находить контент на веб-сайте. Рассмотрим посетителя, перешедшего на статью из поисковой системы или ссылку на другом сайте. Когда пользователь прочитал статью, навигационная цепочка предлагает пользователю больше возможностей для перехода в более высокую категорию для просмотра аналогичного контента. Это, как вы можете догадаться, приводит к тому, что пользователь проводит больше времени на веб-сайте, что приводит к снижению показателей отказов.

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

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

Как бы то ни было, добавление хлебных крошек помогает веб-сайту с его усилиями по поисковой оптимизации.

Как добавить хлебные крошки на сайт WordPress?

Большинство современных тем WordPress и почти все темы электронной коммерции имеют встроенные функции хлебных крошек.

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

Если ваша тема изначально не поддерживает хлебные крошки, вы можете легко добавить их с помощью плагинов хлебных крошек. Вы также можете использовать большинство SEO-плагинов WordPress, таких как Yoast, чтобы добавить «хлебные крошки» на свой сайт.

В этой статье мы добавим хлебные крошки в WordPress с помощью бесплатного плагина WordPress — Breadcrumb NavXT.

Шаг 1: Установите плагин Breadcrumb NavXT для WordPress.

Хлебные крошки NavXT генерирует навигационные крошки на основе местоположения пользователя. Затем маршруты можно настроить по своему вкусу.

Идите вперед и установите Breadcrumb NavXT.

Если вы не знаете, как устанавливать плагины в WordPress, это легко. Войдите в свою панель инструментов, затем прокрутите вниз левое меню в разделе «Плагины» и нажмите « Добавить новый».

Введите плагин, который вы хотите установить — Breadcrumb NavXT — в поле поиска.

Через секунду или две результаты вернутся. Теперь нажмите « Установить сейчас », после этого подождите еще секунду-две, затем нажмите « Активировать ».

Шаг 2: Отображение хлебных крошек NavXT на сайте WordPress.

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

1. Использование виджета, предоставляемого Breadcrumb NavXT.

Перейти в главное меню; Внешний вид > Виджеты.

Найдите Breadcrumb NavXT, затем перетащите его на боковую панель, где вы хотите использовать хлебные крошки.

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

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

2. Измените тему

Файлы, которые вам могут понадобиться изменить: home.php, single.php, page.php. Вы также можете изменить таксономии и любой другой файл, если вам нужны хлебные крошки.

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

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

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

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">

<?php if(function_exists('bcn_display')) { bcn_display(); }?>

</div>

Если вы хотите отобразить его в статье, вы изменяете файл single.php. Вставьте код в тег статьи.

Сохраните изменения и перейдите к своим статьям.

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

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

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

Breadcrumb NavXT использует css-класс .breadcrumbs (это также может зависеть от вашей темы). Вы можете изменить код CSS своего сайта или использовать настройщик WordPress для оформления хлебных крошек.

 .панировочные сухари {

цвет: #000;

нижняя граница: 20px;

}

Шаг 3: Настройка хлебных крошек NavXT.

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

Перейдите на страницу настроек Breadcrumb NavXT. Вы можете найти его в общем меню WordPress — Настройки > Breadcrumb NavXT .

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

Не теряйте посетителей в джунглях вашего сайта. Добавьте хлебные крошки на свой сайт.

Далее вы также можете узнать, как добавить пользовательский поиск Google в WordPress, чтобы улучшить навигацию по сайту.