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

Хлебные крошки (Breadcrumbs) для WordPress

Привет! Читатели блога WordPress Mania! Если у вас, друзья, на сайте не реализованы хлебные крошки — не беда. Вы сами можете установить навигационную цепочку (ссылки) при помощи данной инструкции. Выводить хлебные крошки на сайте ВордПресс нужно обязательно. И так, сегодня я покажу вам: как добавить хлебные крошки (Breadcrumbs) на сайт WordPress с помощью функции плагина Yoast WordPress SEO (надеюсь вы установили лучший многофункциональный SEO плагин).

А так же расскажу вам какие специальные плагины Breadcrumbs (хлебные крошки WordPress) существуют для этой цели. А для опытных пользователей есть возможность добавить хлебные крошки на сайт без плагина. И так, дамы и господа, читайте: Как сделать хлебные крошки в WordPress?

Так как этот блог для новичков объясню сначала:

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

Навигационная цепочка (навигационное меню, "хлебные крошки", англ. Breadcrumbs) — элемент навигации по веб-сайту, представляющий собой путь по сайту от его "корня" до текущей страницы, на которой находится пользователь (Википедия). Такую строчку вы можете наблюдать у на большинстве веб-сайтов над заголовком статьи. И у меня посмотрите. Примерно, вот так:

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

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

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

Google и Яндекс подчеркивают важность хлебных крошек во всех своих документах и руководствах по SEO. Причина проста: трассы Breadcrumb состоят из слов, причем чаще всего из ключевых и им есть что предложить, как роботам поисковиков, так и пользователям.

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

И так, Приступим.

"Хлебные крошки" с помощью функции плагина Yoast WordPress SEO

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

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

Yoast SEO предлагает функцию для получения навигационных ссылок на вашем сайте. Параметры хлебных крошек изначально не отображаются в Yoast для этого вам надо зайти в админпанели раздел SEO — "Отображение в поисковой выдаче " — вкладка "Хлебные крошки". После этого нужно включить хлебные крошки и настроить их:

Установите разделитель между пунктами, какой вы захотите. Напишите текст ссылки на главную страницу, можно написать название вашего блога или просто "Главная". Далее, в "хлебных крошках" установить таксономию для рубрики. Нажмите "Сохранить изменения". Не забудьте добавить код в нужное место вашего шаблона (темы).

Как добавить "хлебные крошки" (Breadcrumbs) в вашу тему

Хлебные крошки не появятся, пока вы не вставите небольшой код на свой сайт. Начните с копирования следующего кода:

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

В примере возьмём тему Twenty Eleven. Идем: Внешний вид — Редактор тем. Открываем файл single.php (одна запись) и вставляем код:

Сохраняем файл и смотрим, что у нас получилось в итоге:

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

Вот, как то, так получится:

Идём, далее. Если вы используете другой SEO плагин, не Yoast SEO, а например, Rank Math.

Включаем хлебные крошки в Rank Math SEO

Переходите Общие настройки — Хлебные крошки. Включение функции Breadcrumbs в SEO плагине Rank Math позволяет вам настроить хлебные крошки под ваши нужды:

Настраиваем и сохраняем изменение. Используйте следующий код в файлах шаблона вашей темы для отображения хлебных крошек:

Вставка кода хлебных крошек также как написано выше, для Yoast SEO.

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

Хлебные крошки WordPress плагин Breadcrumb NavXT

Самый популярный модуль на сегодняшний день — это Breadcrumb NavXT.

Breadcrumb NavXT — это плагин совместимый с WordPress версий 4.0 и выше. Он генерирует локальные цепочки для вашего блога/сайта на ВордПресс. Поскольку Breadcrumb NavXT последовательно отображает иерархию страниц, она поможет обеспечить преимущества SEO.

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

И снова нам понадобится редактировать файл Отдельная запись ( single.php ) и/или Отдельная страница ( page.php ). Можно использовать файл Заголовок ( header.php ). Берём код:

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

Сохраняетесь. Открываем страницу блога и смотрим результат:

Добавьте этот же код в файл Отдельная запись ( single.php, ) как показано для Yoast SEO. Хороший плагин? О, да! Не подходит? Да, без проблем.

Заходим Плагины — Добавить новый и в поле поиска по плагинам вбиваем ключевое слово Breadcrumb. Выбирайте, друзья:

Ориентируйтесь по обновлениям. Обратите внимание на plugin SEO Breadcrumbs:

Плагин SEO Breadcrumbs (хлебные крошки) для WordPress

SEO Breadcrumbs — это мощный и простой в использовании плагин, который может добавить пять различных навигаций по хлебным крошкам на ваш сайт WordPress.

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

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

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

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

Как добавить хлебные крошки WordPress без плагина

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

Открываем файл "Функции темы" ( functions.php ) и перед закрывающим тегом (в самом низу) ?> вставляем такой длинный код (не забудьте сделать резервную копию файла):

Обновите файл. Для вызова функции так же, как описано выше, в файлы single.php (одна запись); page.php (шаблон страницы); archive.php (архивы); search.php (результаты поиска) вставьте код:

Всё. Если понадобится задать стиль CSS для хлебных крошек (под дизайн вашей темы) заключите строчку в:

Откройте файл "Таблица стилей" ( style.css ) и в конце кода вставьте:

Настройте стиль под ваш дизайн блога/сайта.

В заключение

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

Благодаря микроразметке Breadcrumbs (навигационная цепочка) встраивается в выдачу Google. В Яндекс такой функции нет, но поисковик может самостоятельно подстроить структуру сайта под шаблон микроразметки.

Хлебные крошки для WordPress (breadcrumbs)

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

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

Этот код я больше не поддерживаю, местами он работает не так как нужно. За стабильной и расширенной версией этого кода переходите по ссылке:

• Функция «хлебных крошек» для WordPress
• Примеры использование фильтров
• Другой вариант крошек

Выглядят «хлебные крошки» так:

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

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

Функция будет показывать «хлебные крошки» для страниц следующих типов:

• Главная страница;
• Постоянная страница;
• Страница любого древовидного типа записи;
• Страница поста;
• Страница вложения (учитывается прикреплено вложение к записи или нет);
• Любой не древовидный тип записи (прикрепленный к любой таксономии, например, к стандартным "рубрикам");
• Страница рубрики;
• Страница меток;
• Страница таксономии (как древовидной, так и одноуровневой (метки));
• Страницы архивов по датам, авторам;
• Страница пагинации для всех типов где предусмотрена пагинация
  (отображается как: Главная » Рубрика » Страница 2,3,4).
• Поддерживает микроразметку. Инструменты для проверки: для Яндекса и для Google.

Из особенностей, которые я не встретил в аналогичных функциях представленных в сети, стоит отметить правильный показ "хлебных крошек" для произвольных типов записей и произвольных таксономий, также в аналогах страница пагинации отображалась как, например, "Рубрика (страница 2)", а не "Рубрика > Страница 2", что, на мой взгляд, неправильно.

Для визуального восприятия, взгляните как выглядят «хлебные крошки» разных типов:

Также, я старался написать как можно менее прожорливый вариант функции.

Что касается плагина Breadcrumb NavXT, который повсеместно рекомендуется для вывода «хлебных крошек» — он мне не понравился из-за своей громоздкости. Моя функция не хуже, а в чем-то даже лучше: за счет функциональности, компактности и местами быстродействия!

Также функция поддерживает микроразметки: schema.org или RDF, смотрите параметр ‘markup’.

Функция «хлебных крошек» для WordPress

Вставлять этот код нужно в файл шаблона functions.php или непосредственно в тот файл где вызывается функция.

Вызывать функцию нужно в шаблоне, в том месте, где должны выводится крошки, так:

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

Примеры использование фильтров

#1 Установка параметров через фильтр

Измени дефолтные параметры через фильтр

Если установить параметры при вызове функции в третьем аргументе функции, то они перебьют параметры указанные в фильтре.

#3 Пример перевода крошек на английский

Эти примеры показывают как перевести крошки на нужный язык или просто изменить дефолтные значения:

Вариант 1

При вызове функции нужно указать строки локализации так:

Вариант 2

C версии 1.9. Можно использовать хук kama_breadcrumbs_default_loc , чтобы для каждого вызова одно и тоже не указывать. Для этого рядом с исходным кодом крошек добавьте такой хук:

Далее, используйте вызов в шаблоне как обычно, крошки будут переведены на англ.:

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

#3 Добавление произвольной ссылки в начало крошек

Допустим нам нужно добавить после пункта "Главная" ссылку на страницу 7, если в текущий момент мы находимся в категории 5 или в её дочерней категории (учитывается один уровень вложенности).

Для этого добавьте такой хук рядом с кодом крошек:

#4 Добавление еще таксономий в крошки

По умолчанию в крошках обрабатывается только одна таксономи. Но иногда нужно несколько, для этого в версии 3.3 я вставил хуки: ‘attachment_tax_crumbs’ , ‘post_tax_crumbs’ , ‘term_tax_crumbs’ .

Допустим, у нас есть тип записи realty и 3 таксы для него: country , type_deal , type_realty . Нужно, чтобы у страницы записи в крошках отображались все таксы в указанном порядке. Также нужно, чтобы на каждой странице таксы указывались все предыдущие таксы и текущая в указанном порядке: country > type_deal > type_realty .

Другой вариант крошек

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

Условно, этот код подойдет не только к WordPress, а вообще к любому движку. Для WordPress он подойдет:

• во-первых, если включены ЧПУ;
• во-вторых, если в ссылках присутствуют названия категории;
• в-третьих, если названия статей и категорий в УРЛ пишутся в кириллице или это вообще англ. блог.

В других случаях будет работать, но, думаю, как-то не круто получится. Такие условия, потому что этот вариант разбирает ссылку на страницу (УРЛ) и по её элементам создает хлебные крошки. Ссылка разбивается разделителем / .

Допустим у нас УРЛ на статью имеет вид:
http://wptest.ru/рецепты/торт/готовим наполеон
тогда, мы получим цепочку крошек вида:
Главная » Рецепты » Торт » Готовим наполеон

Используется аналогично моей функции, только на экран выводить надо через echo:

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

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

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

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

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

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

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

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

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

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

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

Включаем Yoast

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

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

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

Отсутствие надписи

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

Прописываем хлебные крошки в WordPress

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

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

Проверка работы

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

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

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

Последняя ссылка

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

Отображение подрубрик

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

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

Альтернатива

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

Настройка Option

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

Shortcodes

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

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

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

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

Функция в function.php

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

Выводим на экран

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

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

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

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

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

Задаем оформление

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

Смотрим внешний вид

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

Код для WooCommerce

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

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

Работа Woo Visual Hook Guide

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

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

Вставка хука WooCommerce

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

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

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

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

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

BBpress

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

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

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

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

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

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

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

Инструмент разработчика

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

Узнаем class

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

Возможные файлы

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

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

Указываем display:none

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

Результат

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

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