Что такое хлебные крошки на сайте wordpress
Что такое «хлебные крошки» для wordpress и зачем они нужны?
Читали ли вы сказку про Гензеля и Гретель? Хорошо, если да, тогда у вас не возникнет вопросов, от чего навигационную цепочку на сайте назвали « хлебными крошками ». Поясним, что в сказке дети разбрасывали хлебные крошки по земле, чтобы найти дорогу домой.
В блоге wordpress они выполняют примерно ту же функцию: с помощью данного скрипта посетитель легко сможет сориентироваться, где именно он находится, а кроме того, это нелишняя возможность перейти к главной странице сайта одним кликом.
Хлебные крошки для wordpress обычно располагаются под шапкой сайта и верхним меню в виде цепочки ссылок от главной до той страницы, на которой пользователь находится в данный момент.
Однако не только посетителям будет полезно размещение на сайте навигационной цепочки. Поисковые системы также получают очень важную для них информацию о структуре сайта, ускоряющую индексацию страниц.
Таким образом, плагин хлебных крошек для wordpress полезен не только посетителям, но и самому ресурсу.
Примеры плагинов для реализации хлебных крошек
Наиболее популярными навигационными плагинами wordpress являются:
Установка плагина Breadcrumb NavXT для WordPress
Установить и активировать Breadcrumb NavXT можно прямо из консоли администратора, введя его название в окне поиска пункта « Добавить новый » меню « Плагины ».
После активации в меню « Параметры » вы обнаружите новый пункт « Breadcrumb NavXT ». Кликните по нему и выставьте параметры так, как это показано ниже:
Далее выделите и скопируйте в буфер следующий код:
Его необходимо вставить в файл header.php активного шаблона. Этот же код в дальнейшем можно будет копировать и в любые другие шаблоны, которые вы, возможно, будете использовать для изменения внешнего вида вашего сайта.
Учтите, что необходимо правильно выбрать место вставки кода для того, чтобы внешний вид сайта не был испорчен. В итоге должно получиться примерно следующее:
Заметим, что данный плагин хлебных крошек для wordpress имеет значительно более гибкие настройки по сравнению со многими другими похожими решениями, поэтому и внешний вид навигации можно менять до неузнаваемости, редактируя таблицы стилей и место вставки кода.
Несколько изменить хлебные крошки для wordpress можно и непосредственно в настройках плагина. Так, тип разделителя можно поменять, изменив соответствующие настройки во вкладке « Основные ».
Также в настройках в случае необходимости скрывается отображение навигации текущей страницы, а можно напротив, отобразить её в виде ссылки.
Ищите хлебные крошки сами
В целом, если функционал рассмотренного плагина вас, как администратора сайта не удовлетворяет, то можно самостоятельно найти и протестировать массу других скриптов, благо, что поиск плагинов в консоли wordpress по запросу « Breadcrumb » (« хлебные крошки ») выдаёт около сотни результатов с описаниями и рейтингами, которые выставляют различным плагинам пользователи.
Итак, если ранее вы считали, что такой инструмент, как навигационная цепочка для сайта совершенно бесполезен, то надеемся, что ваше мнение кардинально изменилось.
Установка плагина для wordpress хлебные крошки позволяет пользователям ориентироваться в структуре сайта гораздо комфортнее.
Хлебные крошки для WordPress (breadcrumbs)
Вы наверняка уже знакомы с понятием «Хлебные крошки» в веб-разработке и возможно даже приходилось реализовывать эти самые «крошки» на WordPress.
Хлебные крошки (с англ. breadcrumbs) — это элемент навигации по сайту, выглядит как путь от главной страницы до текущей, на которой находится пользователь. Более логичное название — навигационная цепочка. Хлебные крошки называются так по ироничной аналогии со сказкой, в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склеванные лесными птицами.
Этот код я больше не поддерживаю, местами он работает не так как нужно. За стабильной и расширенной версией этого кода переходите по ссылке:
Выглядят «хлебные крошки» так:
«Хлебные крошки» наиболее рекомендуются сайтам со сложной структурой разделов (рубрик), ведь с ними гораздо легче и понятнее разобраться посетителю в каком разделе сайта он находится и если нужно, можно легко подняться на уровень выше и осмотреть ветку целиком.
Теперь, после короткого ликбеза, буду делиться очередной функцией для WordPress, реализовывающей всю цепочку от главной страницы до текущей на всех типах страниц, включая таксономии и произвольные типы записей.
Функция будет показывать «хлебные крошки» для страниц следующих типов:
Из особенностей, которые я не встретил в аналогичных функциях представленных в сети, стоит отметить правильный показ «хлебных крошек» для произвольных типов записей и произвольных таксономий, также в аналогах страница пагинации отображалась как, например, «Рубрика (страница 2)», а не «Рубрика > Страница 2», что, на мой взгляд, неправильно.
Для визуального восприятия, взгляните как выглядят «хлебные крошки» разных типов:
Также, я старался написать как можно менее прожорливый вариант функции.
Что касается плагина Breadcrumb NavXT, который повсеместно рекомендуется для вывода «хлебных крошек» — он мне не понравился из-за своей громоздкости. Моя функция не хуже, а в чем-то даже лучше: за счет функциональности, компактности и местами быстродействия!
Также функция поддерживает микроразметки: schema.org или RDF, смотрите параметр ‘markup’.
Функция «хлебных крошек» для WordPress
Вставлять этот код нужно в файл шаблона functions.php или непосредственно в тот файл где вызывается функция.
Вызывать функцию нужно в шаблоне, в том месте, где должны выводится крошки, так:
Если нужно поменять разделитель между ссылками, укажите первый параметр:
Примеры использование фильтров
#1 Установка параметров через фильтр
Измени дефолтные параметры через фильтр
Если установить параметры при вызове функции в третьем аргументе функции, то они перебьют параметры указанные в фильтре.
#3 Пример перевода крошек на английский
Эти примеры показывают как перевести крошки на нужный язык или просто изменить дефолтные значения:
Вариант 1
При вызове функции нужно указать строки локализации так:
Вариант 2
Далее, используйте вызов в шаблоне как обычно, крошки будут переведены на англ.:
Установки через хук имеют меньший приоритет, чем через вызов функции из варианта 1. Это значит, что если указать локализацию через хук, то потом через вызов можно перебить локализацию отдельных строк.
#3 Добавление произвольной ссылки в начало крошек
Допустим нам нужно добавить после пункта «Главная» ссылку на страницу 7, если в текущий момент мы находимся в категории 5 или в её дочерней категории (учитывается один уровень вложенности).
Для этого добавьте такой хук рядом с кодом крошек:
#4 Добавление еще таксономий в крошки
Другой вариант крошек
Этот вариант я стянул по ссылке, которую в комментариях дал Master. Весьма занимательное решение, потому и не удержался.
Условно, этот код подойдет не только к WordPress, а вообще к любому движку. Для WordPress он подойдет:
Допустим у нас УРЛ на статью имеет вид:
http://wptest.ru/рецепты/торт/готовим наполеон
тогда, мы получим цепочку крошек вида:
Главная » Рецепты » Торт » Готовим наполеон
Используется аналогично моей функции, только на экран выводить надо через echo:
Хлебные крошки (Breadcrumbs) для WordPress
А так же расскажу вам какие специальные плагины Breadcrumbs (хлебные крошки WordPress) существуют для этой цели. А для опытных пользователей есть возможность добавить хлебные крошки на сайт без плагина. И так, дамы и господа, читайте: Как сделать хлебные крошки в WordPress?
Как добавить хлебные крошки на сайт WP с плагином и без
Так как этот блог для новичков объясню сначала:
Что такое хлебные крошки?
Навигационная цепочка (навигационное меню, «хлебные крошки», англ. Breadcrumbs) — элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь (Википедия). Такую строчку вы можете наблюдать у на большинстве веб-сайтов над заголовком статьи. И у меня посмотрите. Примерно, вот так:
Хлебные крошки на сайте ВордПресс
Кто то считает, что хлебные крошки не обязательно устанавливать на сайт, а кто то наоборот.
Breadcrumbs чрезвычайно важная часть любого веб-сайта, она предоставляет вашим пользователям простой способ узнать их текущее местоположение на сайте.
На известных блогах Breadcrumbs присутствует, значит и нам не противопоказано. Установите хлебные крошки WordPress, для того, чтобы указывать посетителю позицию страницы в иерархии сайта.
Google и Яндекс подчеркивают важность хлебных крошек во всех своих документах и руководствах по SEO. Причина проста: трассы Breadcrumb состоят из слов, причем чаще всего из ключевых и им есть что предложить, как роботам поисковиков, так и пользователям.
«Хлебные крошки» с помощью функции плагина Yoast WordPress SEO
Приведенные ниже шаги являются временным решением, так как ручные изменения, внесенные в файлы тем, могут быть перезаписаны в будущих обновлениях тем. При обновление темы вам необходимо заново проделать данную операцию.
Настройки Хлебных крошек в Yoast SEO
Установите разделитель между пунктами, какой вы захотите. Напишите текст ссылки на главную страницу, можно написать название вашего блога или просто «Главная». Далее, в «хлебных крошках» установить таксономию для рубрики. Нажмите «Сохранить изменения». Не забудьте добавить код в нужное место вашего шаблона (темы).
Как добавить «хлебные крошки» (Breadcrumbs) в вашу тему
Хлебные крошки не появятся, пока вы не вставите небольшой код на свой сайт. Начните с копирования следующего кода:
Вставка кода в шаблон WP
Сохраняем файл и смотрим, что у нас получилось в итоге:
Хлебные крошки от Yoast SEO
Заголовок этой страницы, который будет выводиться в хлебных крошках
Вот, как то, так получится:
Свой заголовок для хлебных крошек в отдельной записи
Идём, далее. Если вы используете другой SEO плагин, не Yoast SEO, а например, Rank Math.
Включаем хлебные крошки в Rank Math SEO
Включить функцию хлебных крошек
Настраиваем и сохраняем изменение. Используйте следующий код в файлах шаблона вашей темы для отображения хлебных крошек:
Вставка кода хлебных крошек также как написано выше, для Yoast SEO.
Также добавить в ВорДпресс хлебные крошки можно с помощью специальных плагинов.
Хлебные крошки WordPress плагин Breadcrumb NavXT
Плагин для WordPress Breadcrumb NavXT
И снова нам понадобится редактировать файл Отдельная запись ( single.php ) и/или Отдельная страница ( page.php ). Можно использовать файл Заголовок ( header.php ). Берём код:
Открываем файл например, page.php и добавляем вывод хлебные крошки в нужном вам месте. Обычно надо выводить их над заголовком статьи.
Установка кода Breadcrumb NavXT на страницу сайта
Сохраняетесь. Открываем страницу блога и смотрим результат:
Навигационные ссылки на странице блога
Добавьте этот же код в файл Отдельная запись ( single.php, ) как показано для Yoast SEO. Хороший плагин? О, да! Не подходит? Да, без проблем.
Плагины хлебных крошек для WordPress
Ориентируйтесь по обновлениям. Обратите внимание на plugin SEO Breadcrumbs:
Плагин SEO Breadcrumbs (хлебные крошки) для WordPress
Плагин WordPress SEO Breadcrumbs
Плагин SEO Breadcrumbs WordPress полностью настраиваемый и отзывчивый. Он показывает хлебные крошки в сообщении, странице, пользовательских таксономиях, архивах, вложениях, ошибке 404, результатах поиска и многом другом.
Breadcrumbs WordPress позволяет использовать любые сочетания цветов, с различными эффектами для стилизации панировочных сухарей.
Вы можете выбрать стили панировочных сухарей, какие хотите. Если вы хотите реагировать на все устройства, рекомендуется использовать стиль по умолчанию. А если ваш веб-сайт подходит для настольных компьютеров используйте другие семь стилей, чтобы хлебные крошки выглядели привлекательно:
Выбор Breadcrumbs Style
Плагин также поддерживает спецификацию схемы для богатой разметки сниппетов, используемой Google и другими поисковыми системами для идентификации панировочных сухарей и использования их в результатах поиска.
Как добавить хлебные крошки WordPress без плагина
Этот хак (нашел за бугром) подойдет для тех, кто не пользуется плагином. Для вставки PHP кода лучше использовать дочерние темы или использовать специальный инструмент. Если тему не будите обновлять, то вставляйте код напрямую.
Обновите файл. Для вызова функции так же, как описано выше, в файлы single.php (одна запись); page.php (шаблон страницы); archive.php (архивы); search.php (результаты поиска) вставьте код:
Всё. Если понадобится задать стиль CSS для хлебных крошек (под дизайн вашей темы) заключите строчку в:
Откройте файл «Таблица стилей» ( style.css ) и в конце кода вставьте:
Настройте стиль под ваш дизайн блога/сайта.
В заключение
Хлебные крошки для сайта WordPress не являются обязательными, но позволяют улучшить его удобство. Повышение юзабилити всегда положительно сказывается на поведенческих факторах. В последнее время тенденция использовать хлебные крошки прочно закрепилась практически на всех типах ресурсов.
Благодаря микроразметке Breadcrumbs (навигационная цепочка) встраивается в выдачу Google. В Яндекс такой функции нет, но поисковик может самостоятельно подстроить структуру сайта под шаблон микроразметки.
На этом у меня все. До новых встреч. Удачи.
Хлебные крошки на сайте — что это и как они влияют на SEO
Хорошая навигация, крайне важна для сайта. И тут вам на помощь придут хлебные крошки. Давайте посмотрим, что это и как их использовать.
«Хлебные крошки» — это тип вторичной навигации сайта, которая показывает местоположение пользователя на веб-сайте или в веб-приложении.
Когда нужно использовать хлебные крошки?
На самом деле, далеко не всегда есть необходимость в использовании этого элемента навигации. Но давайте посмотрим, когда все-же нужно их использовать.
Используйте навигацию «хлебная крошки» для больших веб-сайтов и веб-сайтов, которые имеют иерархически организованные страницы. Отличным сценарием являются сайты электронной коммерции, в которых большое разнообразие продуктов сгруппировано в логические категории.
Вы не должны использовать хлебные крошки для одноуровневых веб-сайтов, которые не имеют логической иерархии или группировки. Отличный способ определить, выиграет ли веб-сайт от навигации по хлебным крошкам, — построить карту сайта или диаграмму, представляющую архитектуру навигации веб-сайта, а затем проанализировать, улучшат ли хлебные крошки возможность пользователя перемещаться внутри и между категориями.
Навигация в виде хлебных крошек должна рассматриваться исключительно как дополнительная функция и не должна заменять эффективные основные навигационные меню. Это удобная функция; вторичная навигационная схема, которая позволяет пользователям определять, где они находятся; и альтернативный способ навигации по вашему сайту.
Виды хлебных крошек
Существует три основных тип хлебных крошек. Давайте посмотрим на них поближе.
1.Основанные на местоположении.
Наверное, это самый узнаваемый вид хлебных крошек. Он показывает пользователю, где он находится в иерархии веб-сайта. Этот тип обычно используется для схем навигации, которые имеют несколько уровней (обычно более двух уровней). В приведенном ниже примере интернет магазина вы можете увидеть уровни в иеархии.
2.Основанные на атрибутах.
Показывают аттрибуты страницы. Например, на этом скриншоте показано, что мы находимся на странице с компьютерами с процессором Intel Core i7.
3.Основанные на истории.
Основанные на истории хлебные крошки предоставляют посетителю путь, по которому они прошли через сайт.
В основном это выглядит так: Главная> Предыдущая страница> Предыдущая страница> Предыдущая страница> Текущая страница.
Этот тип хлебных крошек непопулярен, так как его можно легко заменить кнопкой «Назад», которая обычно рекомендуется дизайнерами и экспертами по графическому интерфейсу.
Для чего нужны хлебные крошки
Как видите, крошки способны существенно улучшить ваш ресурс для посетителя и для поискового робота. Если вы надумали установить их на свой сайт, то сейчас я покажу, как сделать хлебные крошки в wordpress, а если у вас другой движок сайта, то обратитесь, пожалуйста, за помощью к Яндексу.
Как сделать хлебные крошки.
Если у вас сайт на WordPress, то самый простой путь, это использовать плагин. И один самых популярных SEO плагинов — Yoast, уже имеет этот фукционал.
Для включения хлебных крошек, зайдите в меню плагина Yoast, зайдите в Отображение в поисковой выдаче и перейдите на вкладку «Хлебные крошки».
Делаем хлебные крошки с помощью плагина Breadcrumb NavXT
Хлебные крошки в вордпресс также можно сделать с помощью специального плагина Breadcrumb NavXT. Например, я стараюсь не использовать много плагинов на своем блоге, потому что плагины нагружают блог, но на всякий случай покажу, как с помощью Breadcrumb NavXT сделать крошки. Возможно, этот вариант кому-то подойдет больше.
Для начала скачайте плагин по этой ссылке потом необходимо распаковать его и активировать. Если хотите произвести настройки плагина, то зайдите в Панель управления — Настройки — Breadcrumb NavXT.
Здесь я советую перейти на вкладку «основные» и поставить галочку напротив надписи: «Показывать текущую позицию в виде ссылки». Это позволит улучшить внутреннюю перелинковку. Для того чтобы в хлебных крошках отображалась ссылка на главную страницу, нужно вставить свой шаблон рядом с надписью «шаблон ссылки на главную». Я вставил вот такой код:
Вам нужно здесь изменить анкор и ссылку на главную страницу своего сайта:
Мы сделали все настройки, теперь нужно вставить еще один кусочек кода, для того, чтобы вывести крошки на сайт:
Ну и в таблице стилей я прописал точно такие стили, как и в предыдущем случаи:
Получилось вот так:
Ну а теперь, на этом все на сегодня. До встречи в следующих постах.
Очень жаль но у меня не один из способом не работает. Возможно что-то с шаблоном. Так и не смог разобраться, а шаблон менять не хочется.
Александр, дайте задание на фрилансе сделают
Попробую использовать Ваш код, потому как перегружать сайт еще одним плагином совсем не хочется. Спасибо за подробные объяснения
Всё, сделал себе эту функцию на блоге. Спасибо, Николай.
Здраствуйте, подскажите пожалуйста нужно ли ставить ссылку на главную страницу в конце статьи для продвижения, если в плагине хлебные крошки уже есть ссылка на главную страницу в статье?
Установить хлебные крошки на WordPress за 5 минут пошаговая инструкция
Breadcrumbs (английское название), указывают путь куда зашел пользователь на сайте, чтобы дать ему возможность вернуться и не забыть в каком разделе он сейчас находится.
Что такое и почему называются – хлебные крошки
Помните сказку про брата и сестру Дензель и Греттель, они шли, чтобы не потеряться сыпали на землю хлеб. Тут так же мы проставляем ссылки где сейчас находится человек и как ему вернутся.
Что даст добавление breadcrumbs
Есть несколько причин зачем их добавлять:
Единственный минус, что настроить их для новичка сложновато, но в статье мы разберем подробно все аспекты и проблемы.
Как сделать в YoastSEO
В плагине YoastSEO есть встроенный модуль добавления и управления хлебными крошками. Если используете другой инструмент сео оптимизации в WordPress, то пролистайте ниже.
Переходим в раздел Отображение в поисковой выдаче и находим Вкладку Хлебные крошки. Отмечу несколько моментов, на которые обращаем внимание.
После сохранения настроек, на блоге ничего не появиться, потому что система не знает, где показывать крошки в WordPress. С помощью функции указываем где отобразить BC.
Добавим его в шаблон записей, по умолчанию это документ single.php. Хочу добавить сразу после заголовка h1, вот здесь.
Побродив по single.php тега h1 я не нашел. Пришлось рыть глубже, нашел в папке templates-parts и в ней content-single, определил тег h1 и вставил php, представленный выше.
После обновления переходим в любой пост и смотрим, есть ли на экране результат. Не забываем включить в YoastSeo функцию хлебных крошек.
Для более презентабельного вида советую добавить CSS. Так же Yoast добавил в редактор записей WordPress свой блок для изменения названия в конце цепочки. Переходим в редактор и идем в меню Дополнительно.
Не забываем обновить, смотрим что получилось.
То есть название конечной надписи не совпадает с заголовком, что является преимуществом, и не дает переспама в статье. Так же Yoast поддерживает цепочки с поддрубриками, что является плюсом когда путь длинный.
Настроить плагином Breadcrumb
Открытием стал плагин Breadcrumb, простой и постоянно обновляющийся. Устанавливается стандартно из панели в поиске, в выдаче выглядит так.
После установки в панели появится одноименный пункт, заходим в него и заполняем поля.
Все пункты интуитивно понятны, настраиваем на вкладке Options, что должно отображаться, в style внешний вид, в shortcodes копируем и вставляем на блог. Для вставки в шаблон используем php, а для постов и страниц шорткод. Инструмент может вывести подрубрики у любых элементов.
Куда заливать знаем, разбирались в разделе про Yoast. Существует еще один это NavXT, вебмастера скажут, что это отличный вариант, но мне не понравился, потому что такая мелочь создается быстро и легко, а в настройках NavXT много мусора.
Создаем хлебные крошки без плагина
Отмечу что функция авторская от нашего руководителя Сергея Алейникова.
Далее прописываем вывод ссылок в шаблон, куда вставлять знаем. Видите в скобках знак / он задает разделитель между элементами пути, можно его менять на свой.
Для красоты добавим стили для оформления, предусмотрены три параметра:
Настраиваем по своему вкусу, если есть знания в CSS. Для примера дам свой вариант.
Вставляем в style.css, объясню что означает:
Так выглядят крошки визуально на страницах ресурса.
Чтобы понять весь процесс более наглядно, записал обучающее видео, смотрите и задавайте вопросы в комментариях.
Код для WooCommerce
WooCommerce позаботился о пользователях и сделал свои хлебные крошки. Для того чтобы их ввести в активном шаблоне используйте конфигурацию.
Записываем его в function.php в самый низ и сохраняем.
При успешном завершении операции WordPress покажет путь до товара, у меня вышло так. Прописываем CSS, как определить class написано ниже, оформляем под дизайн магазина.
Метод универсальный, потому что используем встроенные возможности в WooCommerce, на его же страницах. В дополнение приложу свое видео.
Хлебные крошки в BBpress
Знаменитый модуль BBPress для формирования форумов на WordPress, имеет свои хлебные крошки.
Рекомендую пользоваться данным вариантом, потому что он правильно выстраивает цепочку навигации разделов. Бывает что не отображается, причин может быть несколько:
Старайтесь использовать темплейты, сделанный специально под продукт, это касается всех дополнительных инструментов.
Как убрать хлебные крошки
Чтобы убрать хлебные крошки с WP достаточно понять откуда они загружаются. Что делаем в первую очередь:
Для последнего советую использовать инструмент разработчиков в Google Chrome, нажимаем правой кнопкой и выбираем Просмотреть код.
Откроется окно и в нем смотрим какой div оборачивает весь блок с ссылками.
Похожее ищем в теме, где именно не могу сказать, но советую в single, page, index – это самые распространенные места.
Часто разработчики добавляют хлебные крошки на главную страницу, нужно их убрать, потому что портят внешний вид и не несут полезной информации. В большинстве случаев за показ главной страницы отвечает index.php, посмотрите в нем, если нет, то ищите в остальных.
Но если ничего не помогает и удалить не удается, то остается один способ, это скрыть визуально, но в коде они останутся. Выше мы определили, что класс крошек называется breadcrumb-container. Соответственно в style.css активной темы вписываем:
Но метод временного использования, потом необходимо доработать и нормально удалить из темы.
На этом закончу, показал несколько методов установки хлебных крошек WordPress, каждый работает и сделает ресурс удобнее.