Хостинг от Макхост

Хлебные крошки. Навигация на сайте WordPress

Автор: Евгений Несмелов
Навигация хлебные крошки

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

к оглавлению ↑

Что такое хлебные крошки

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

Из Википедии:  Элемент навигации ( обычно в разных файловых менеджерах на подобии Total Commander ), который представляет собой полный путь по всей файловой системы от корня до текущей папки, в которой находится пользователь.

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

Что такое хлебные крошки

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

к оглавлению ↑

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

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

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

к оглавлению ↑

Пример хлебных крошек

После этого переходим в файл single.php или header.php, в зависимости от вашего шаблона, и ставим в нужное нам место вот этот короткий код. Переходим на любую статью на сайте и смотрим на результат.

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

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

к оглавлению ↑

Добавляем крошки на Wordpress без плагина

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

  • Делаем резервную копию баз данных;
  • Копируем готовый код в functions.php;
  • Вызываем функцию в файле single.php;
  • Проверяем хлебные крошки на странице записей.

Не забываем про резервную копию базы данных. Заходим через FTP клиент в папку с вашей темой или через админ панель «Внешний вид — Редактор». Открываем файл functions.php и в самый конец копируем код. В девятой строчке кода, где выводиться название главной страницы, ее можно изменить на любое другое название. Например «Home», «Главная страница» и так далее. Все на ваше усмотрение, как больше понравится, так и делайте.

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

Хлебные крошки wordpress без плагина

Если по некоторым причинам у вас первые два способа не работают, что то не получается или криво становится, попробуйте третий вариант. Попробуйте третий вариант, он точно должен вам помочь. Все действия делаются точно так же. Для начала копируем в файл functions.php вот этот код.

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

Хлебные крошки без плагина

Все три варианта работают, пользоваться можно любым из них. При желании можно добавить несколько своих стилей. Я лично ничего не дополнял, чтоб не переборщить...может в дальнейшем поменяю решение, пока не решился. В третьем примере используется блок div breadcrumbs (#breadcrumbs). С его помощью можно добавить свои стили в файл style.css для оформления навигации крошек.

Если есть возможность добавить новую фишку на wordpress без плагина, всегда нужно этим пользоваться. Я вообще не сторонник плагинов, всегда ищу им замену. Бывают конечно случаи, когда нужно пользоваться только плагинами, но не в этом случае. Поставили код один раз и забыли навсегда. Дополнительные плагины это всегда лишняя нагрузка на сайт, в добавок дополнительная ячейка для взлома.

к оглавлению ↑

Самые знаменитые плагины

Если вы не умеете или боитесь вставлять дополнительный код на сайт, поставить хлебные крошки на wordpress можно с помощью плагинов. Большой популярностью пользуются вот эти два плагина. Первый плагин Yoast SEO вообще является сео комбайном, в котором очень много разных возможностей. Второй плагин устанавливает только хлебные крошки. Каким из них будете пользоваться, решать уже вам.

  1. Сео комбайн Yoast SEO.
  2. Плагин BreadCrumb NavXT.

к оглавлению ↑

Плагин Yoast SEO

Раньше этот плагин назывался по другому, сейчас его название Yoast SEO. Если на других ресурсах вы найдете старое название плагина, знайте это один и тот же плагин. Заходим в админку сайта, «Плагины — Установить новый». После установки плагина, слева в меню появится новая кнопка «SEO». Нажимаем на нее, раздел «Дополнительно». Первая вкладка называется «Навигационная цепочка (breadcrumbs)».

Хлебные крошки wordpress с плагином

Немного ниже есть ссылка на статью от автора, в которой идет описание всего процесса работы создания навигационной цепочки. Если вы хотите сами разобраться что и как делается, можно прочитать. Нажимаем на «Включить навигационную цепочку (breadcrumbs)». Сразу после нажатия открывается дополнительное меню.

Хлебные крошки плагин yoast seo

В первом пункте пишем разделитель внутри цепочки, я указал несколько вариантов, которые мне приходилось встречать. Выбираем один из них, какой будет присутствовать на вашем сайте. Текст ссылки на главную страницу — в этой ячейке пишем текст, который будет вести на главную страницу. Ранее я уже приводил примеры ( Главная страница, Home, Главная, адрес, название и т.д.). Остальные пункты оставляем как есть.

При желании можно выделить жирным шрифтом последнюю страницу ( как показано на скриншоте). Самый главный момент, если у вас есть рубрики, в том же окне настроек «Таксономия, которая будет показана в навигационной цепочке», нужно выбрать тип записи «Рубрика». Если не указать данный пункт, в ваших хлебных крошках не будут выводиться рубрики.

Хлебные крошки плагин yoast

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

к оглавлению ↑

Плагин BreadCrumb NavXT

Если вы не можете установить первый плагин от Yoast из-за своих личных причин, можно воспользоваться плагином BreadCrumb NavXT, который отвечает только за вывод на сайте wordpress. Так же само заходим в админку, «Плагины — Установить новый плагин».

В самих настройках ничего менять не нужно. Можно изменить тип разделителя на ваше усмотрение. Включить «Показывать текущую позицию в виде ссылки» если в этом есть необходимость. Убирать ссылку на главную страницу не нужно. Пройдитесь по всех вкладках для ознакомления на всякий случай, может с выходом новых версий появится что то новенькое.

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

Спасибо, что прочитали статью до конца, буду очень признателен за комментарий или репост через социальные сети. До скорого, с вами был Евгений Несмелов.

Похожие темы

Подпишись на обновления блога!Будь в курсе первым
4 комментария

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

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

4 комментария

по хронологии
по рейтингу сначала новые по хронологии

Супер, хлебные крошки без плагина работают. Сама не верю, просто перебрала много вариантов, этот рабочий.

Михаил Простов

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

Автор

Если стоит плагин Yoast, в нем есть хлебные крошки тоже.

Читайте ранее:
Оптимизация изображений
Оптимизация картинок для сайта онлайн. Рекомендации и плагины

Добрый день, в этой статье я покажу как происходит оптимизация картинок (изображений) для сайта онлайн. Оптимизация изображений процесс быстрый и не...

Закрыть