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

Урок 2. Хлебные крошки

Дата публикации: 05-09-2013

От автора: в этом уроке мы продолжим с вами создание каталога товаров и займемся созданием так называемых хлебных крошек.

Хлебные крошки – это навигационная цепочка, представляющая собой путь от текущего элемента до «корня». Это весьма полезная вещь, как для рядового пользователя, так и для поисковиков.

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

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

Все уроки курса:

Комментарии (16)

спасибо большое за урок
вот если бы был еще открытый урок про капчу с картинками то вообще было бы супер

Как может серверный код зависеть от браузера?

Спасибо Андрей за данный урок. Благодаря Вам узнал как не выполнять лишних итераций в циклах.
А это уже первый шаг к оптимизации тех или иных веб приложений и не только.
Вы делаете очень хорошее дело, спасибо Вам.
P.S
Как то прочитал Ваше высказывание, правда дословно не помню, но суть была в том что Вы записываете уроки их скачивают, но не комментируют продукт.
Я со все ответственностью заявляю Вам что если бы Ваши уроки были не интересны или содержали бы массу ненужной информации, тогда бы точно писали бы и возмущались.
Вывод я надеюсь Вы уже сделали. А я еще раз Ва Благодарю за труд и стремление сделать веб — индустрию доступней к восприятию для начинающих и не только веб — мастеров.
Успехов и до новых встреч!

Здравствуйте, Андрей! Подскажите пожалуйста, а как возможно сделать «хлебные крошки» на Codeigniter? Если у меня url строка имеет такой вид: localhost/mysite.ru/pages/catalog/elementi_arredi/dekor. Я не могу понять откуда мне взять id и title! На сайте есть меню двумерной вложенности. На первом уровне товары, например брелки для автомобилей, а на втором, например, брелок для драндулета, брелок для тачки и т.п. Данные для этого меню беру из 2х таблиц. Потом для выделения активных пунктов меню в цикле проверяю соответствие. Тут всё понятно. Ну как сделать эти «крошки» не совсем…. Нашёл решения на форумах, например, здесь: loco.ru/materials/38-codeigniter-breadcrumbs. Всё сделал так, но в итоге у меня, когда должно показываться 3 уровня, показывается только 2, причём латиницей, т.е. название берётся из url.

Вы по ID выбранной категории получаете родителя текущей категории,
а как по ID выбранной категории получить дочерние категории?
Подскажите пожалуйста

У нас есть курсы, в которых используется ООП. Курс по PHP ООП, курс Корпоративный сайт под ключ и др. В уроках по Каталогу товаров ООП не используется. Не используется, потому как не вижу для данного проекта причин использовать ООП: проект прекрасно пишется, функционирует и расширяется и без этого. Ну и не все хотят использовать ООП, кто-то привык использовать процедурный подход, поэтом данный курс в первую очередь для этой аудитории. Если Вы не приемлите такой подход, тогда для Вас озвученные выше курсы.

А как с СЕО будут работать хлебные крошки? не будет ли ошибок или же может наоборот, какие то плюшки?

А какие могут быть ошибки? Хлебные крошки — это дополнительная перелинковка в плане SEO. Для пользователя — это плюс в юзабилити.

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

Количество уроков: 71

Продолжительность курса: 37:59:21

Автор: Андрей Кудлай

Описание курса: Представляем Вашему вниманию курс по созданию каталога товаров с помощью PHP, MySQL и jQuery. Это огромный по объему курс, в котором не просто решается какая-то конкретная задача, но в котором практически в режиме онлайн мы будем создавать собственный движок с нуля. Написанный в курсе по созданию каталога товаров с помощью PHP, MySQL и jQuery движок, можно будет использовать как для каталога, так и для любого другого сайта: визитка, интернет-магазин, корпоративный сайт, блог.

Все права защищены © 2021
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Источник

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

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

Хлебные крошки выполняют ряд важных функций:

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

Микроразметка осуществляется путем добавления специальных HTML-тегов, которые сообщают поисковым роботам к какому типу контента относится элемент.

Поддерживаемые Google форматы микроразметки:

Пример микроразметки хлебных крошек в формате Microdata для страницы «Кружки», которая имеет навигационную цепочку из ссылок “Главная > Каталог > Столовая > Чай и кофе”:

itemscope itemtype=http://schema.org/BreadcrumbList говорит о том, что элемент относится к хлебным крошкам и состоит из цепочки связанных веб страниц.

Далее каждому элементу навигации добавляем следующие атрибуты:

Существует известная проблема в том, что валидатор микроразметки выдает предупреждение, когда в коде нет атрибута itemprop=”item” у последнего элемента хлебной крошки. Это возникает из-за отсутствия у элемента ссылки.

Но это не мешает поисковой системе Google корректно выстраивать цепочку ссылок в сниппете.

Если же вас смущает это предупреждение, то можно не размечать последний элемент (как у нас в примере), либо же использовать другие способы микроразметки.

Ждите новые заметки в блоге или ищите на нашем сайте.

Поколение ЕГЭ. «Гензель и Гретель» братьев Гримм

Да, сказки как-то пропустил, сразу на книжки без картинок перешел, кстати, рекомендую.

У меня был томик без картинок. Так что рекомендую)

Комментарий удален по просьбе пользователя

Редактору понравилась статья

Это вся статья? Ожидал большего.

согласен, главное ссылку впендюрить)

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

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

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

Как раз у вас в разделе ссылка последняя ведет на раздел в котором находишься 😂

Так только в категориях и это правильно, так как человек может быть не на первой странице, пример:
https://avtogsm.ru/telephone-smartfone-c549.html?offset=40

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

Бедолаги, их еще и в гугле наверное забанили.

Не стоит считать что нет людей слабо разбирающихся в данной тематике))0)

Ждём продолжения! Расскажите, пожалуйста про метатеги

Ребят расскажите, а картинка в снипете тоже втыкается через микроразметку?

Картинка в сниппете не добавляется через микрозраметку. Она может лишь автоматически использоваться индексирующим роботом.
Официальный ответ от Яндекса по этому вопросу находится здесь: https://yandex.ru/blog/platon/snippety-populyarnoe (раздел “6. Как настроить картинку в сниппете”).

О спасибо за ответ!

Spirit of Innovation провёл в воздухе около 15 минут.

Источник

Как сделать хлебные крошки на сайте 🍞 [Полное руководство + бонус]

В статье:

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

Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.

Что такое хлебные крошки на сайте и как они выглядят

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

Товарная страница citilink.ru

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

Выдача Google

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

Каким сайтам нужны хлебные крошки и чем они полезны в SEO

Польза разметки «Breadcrumbs»:

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

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

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

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

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

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

Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.

Советы для создания правильных хлебных крошек

На главной крошки не нужны.

Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.

Главная и товарная страницы petshop.ru

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

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

Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:

Страница товара

Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.

Cтраница товара

Привычное место для хлебных крошек — верхняя часть страницы.

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

Новость на seroundtable.com

Замените первую ссылку на ключ или бренд.

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

Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Пиломатериалы > Брус».

Как настроить разметку BreadcrumbList на сайте

Яндекс формирует крошки по своему алгоритму. Для Google настроить разметку можно вручную с помощью разметки Schema.org.

Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa.

Пример разметки «BreadcrumbList» через Microdata:

Типичная ошибка разметки хлебных крошек

Пользователи часто сталкиваются с ошибкой «Отсутствует поле “id”». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.

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

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

Проверить внедрение микроразметки можно с помощью инструментов от ПС: инструмента Google и валидатора Яндекса.

В обновленной версии Google Search Console внедрили отчет «Breadcrumbs», в русской версии он называется «Строки навигации» и находится в категории «Улучшения». Отчет показывает ошибки, связанные с отображением микроразметки в выдаче Google.

Отчет в Google Search Console

Плагины разметки для разных CMS

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

WordPress

Код разметки хлебных крошек нужно поместить в файлы:

показать крошки везде — в файл header.php;

для всех записей — в файл single.php;

для статистических страниц — в файл page.php;

для всех рубрик — в файл category.php.

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

Joomla

Добавить хлебные крошки в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления > Расширения > Менеджер модулей.

Настройка модуля

Настройте модуль под свой сайт и укажите:

позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);

название главной страницы;

разделитель текста для элементов навигации (обычно «/»).

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

Opencart

Хлебные крошки для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.

Webasyst

К этому движку для интернет-магазинов есть два платных плагина — «Навигация в хлебных крошках» и «Динамические хлебные крошки» с простыми настройками.

Настройка плагина

1С Битрикс

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

Moguta

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

Установка плагина

Проверьте правильность настройки с помощью валидатора Яндекса или Google.

Бонус: фишка для повышения CTR в выдаче с помощью хлебных крошек

Один из способов выделить сниппет — добавить эмодзи. Сниппет с яркими элементами может с большей вероятностью привлечь внимание пользователей. На отношение поисковых систем к сайту они не влияют.

Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом 100.ks.ua: чтобы сделать сниппет в выдаче заметнее, он добавил пару тематических эмодзи в описание и хлебные крошки.

Сниппет сайта в выдаче

После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.

График с CTR сниппета Рост CTR сниппета

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

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

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

Эмодзи не отображается

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

Выбор эмодзи для автомобильной тематики

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

Красные маркеры

С эмодзи важно не переборщить, такой сниппет выглядит пестрым и перегруженным:

Перебор элементов

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

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

Источник

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

Доброго времени суток 🙂

Сегодня мы поговорим о том, как сделать «хлебные крошки» на PHP своими руками.

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

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

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

Сразу хочу сказать, что это не то, о чём подумало большинство людей, не связанных с веб-программированием 🙂

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

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

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

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

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

Ухх… вот это я завернул 🙂 Даже самому стало слегка не по себе от своих заумностей 🙂

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

Так выглядит навигационная цепочка на данном сайте. А вот так выглядят «хлебные крошки» крупнейшего Интернет-магазина России OZON:

Как видите, несмотря на различие в назначении ресурсов, навигационные меню у нас одинаковы.

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

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

Кстати, «хлебные крошки» также играют немаловажную роль в SEO-оптимизации сайтов, т.к. помогают роботам поисковых систем более эффективно индексировать содержимое сайта благодаря ссылкам на категории, из которых «крошки» и состоят.

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

Кроме сайтов, данный элемент навигации существует также и в операционных системах (Windows, начиная с Vista), а также в различных файловых менеджерах (всем известный Total Commander, например, который позаимствовал эту фичу у Windows Vista Explorer).

Вот так, например, выглядят «хлебные крошки» в Windows 7:

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

Поскольку данный проект посвящён веб-разработке, о «хлебных крошках» мы будем говорить только с точки зрения их применения на сайтах. Поэтому, если вдруг где-то вы увидите небольшие нестыковки с их спецификой использования внутри ОС и прочих программных продуктов, просьба не судить строго.

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

Я сам, когда первый раз услышал данное определение, никак не мог понять, что же мне хотят сказать? О каких ещё крошках мне рассказывают? Даже малейшего предположения не возникло 🙂

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

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

Так что либо создатель термина «хлебные крошки» посчитал его более благозвучным (на английском звучит как «breadcrumbs»), либо он обладал весьма своеобразным чувством юмора 🙂

Нам же остаётся только принимать это как факт.

Кому нужны хлебные крошки на сайте?

Как следует из материала выше – всем веб-мастерам, у которых на сайте больше 2 уровней вложенности (раздел/статья или категория/товар), и кто не безразличен к позициям своего творения в поисковой выдаче.

При этом совершенно не важно, какой у вас тип сайта. Также не важна платформа.

На чём бы ни был разработан ваш сайт – на WordPress, Joomla, ModX, OpenCart, на базе различных фреймворков (Yii, Laravel, Symfony, Zend) или вообще на «чистых» языках – всем вам без «хлебных крошек» не обойтись.

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

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

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

С этой целью я решил рассмотреть пример создания «хлебных крошек» на PHP, т.к. на сегодня это самый распространённый бэкэнд-язык веб-программирования.

Поэтому рассмотренный пример и подойдёт для большинства, а не для всех сайтов, ведь помимо PHP никто не мешает вам писать сайты на Java, Python, Ruby и прочих языках бэкэнда.

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

Вот к нему-то мы наконец и переходим.

Создание «хлебных крошек» на PHP — алгоритм

Итак, как говорилось раньше, «хлебные крошки» — это совокупность ссылок на предшествующие страницы, которые, в большинстве своём, являются родительскими категориями текущей страницы.

Как правило, указание категорий содержится в самом url текущей страницы. Рассмотрим на примере данного сайта.

Данный url страницы со статьёй состоит из нескольких частей, разделённых слэшами («/»):

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

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

Итак, составим алгоритм формирования «хлебных крошек»:

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

Единственный нюанс – принципы формирования url на различных площадках отличаются, но об этом мы поговорим при реализации нашего алгоритма формирования «хлебных крошек» на языке PHP.

Делаем «хлебные крошки» на PHP – постановка задачи

Итак, мы наконец добрались до самого интересного 🙂

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

В моём примере у сайта будет url «site.corp»

Структура нашего сайта будет следующая:

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

Как раз в блоке с заголовком страницы мы и будем выводить наши «хлебные крошки».

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

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

Итак, начальные данные мы описали.

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

Теперь, непосредственно сам код.

Сразу хочу оговориться, что наш код «хлебных крошек» будет состоять из двух частей: формирования массива с названиями элементов и их url, а также кода вывода полученной структуры на странице сайта.

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

Только не размещайте его в шаблоне сайта – файле, содержащем html-код его страниц, т.к. это крайне нежелательно с точки зрения чистоты кода.

Формирования массива «хлебных крошек» на PHP

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

Текущий url будет доступен по индексу REQUEST_URI:

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

Создаём пустой массив, в который будем заносить информацию о названиях элементов «хлебных крошек» и их url:

Следующий шаг алгоритма – это формирование ссылок и названий элементов. Для этого перебираем части текущего url в цикле, внутри которого создаём массив для url предыдущих элементов.

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

В итоге, получился следующий код:

Теперь заполним массив url-ов. Для этого добавим в наш цикл ещё один цикл, который будет выполняться для каждого текущего элемента url текущей страницы:

Для части url текущей страницы, которая соответствует идентификатору этой же страницы мы url формировать не будем.

Поэтому добавляем во внутренний цикл следующий код:

Здесь, как видите, на основании url страницы мы прописываем название соответствующему элементу «хлебных крошек».

Да, прописывать для каждого элемента название вручную – не самый хороший вариант. Для небольших сайтов, где ограниченный порядок вложенности страниц (те же самые сайты-визитки или Интернет-магазины с 3-4 категориями) данный вариант будет терпимым.

А вот для ресурсов, где порядок вложенности задаётся динамически, т.е. для большинства крупных Интернет-проектов, такое формирование названий элементов «хлебных крошек» будет неприемлемым. Для них используются другие методы, о которых я расскажу немного позже.

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

Осталось теперь только вывести его в шаблоне.

Вывод «хлебных крошек» в шаблоне

Итак, для вывода в шаблоне PHP-массив с «хлебными крошками» сначала нужно передать в HTML-шаблон. Универсальный способ описан в статье по ссылке, однако, в большинстве фреймворков и CMS есть свои механизмы, которые подробно описаны в их документациях.

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

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

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

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

Как видите, мы выводим все элементы массива с «хлебными крошками» в виде ссылок, задав в качестве url значение элемента массива с индексом ‘url’, а текст – из значения с индексом‘text’.

Смотрим в браузере, что же у нас в итоге получилось:

Неплохо, однако последний элемент, соответствующий текущей странице, также оформился в виде ссылки на текущую страницу, хотя у него значение ‘url’ пустое.

С точки зрения SEO, ссылка на странице, ведущая на саму себя, это не есть хорошо, поэтому элемент с пустым ‘url’ оформим в виде обычного текста (собственно говоря, мы его пустым и делали).

Для этого вставим в наш цикл следующую проверку:

Теперь наши «хлебные крошки» приобрели требуемый вид:

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

Как сделать «хлебные крошки» на PHP – итоговый код

В результате, код, формирующий массив с элементами «хлебных крошек» у нас принял такой вид:

Всё, что вам осталось для настройки данного кода на своём сайте – это прописать названия ваших страниц, принимая в качестве их идентификаторов соответствующие части текущего url.

Вообще, справедливости ради, стоит отметить, что рассмотренный нами способ хорошо подойдёт только для небольших сайтов с фиксированным количеством страниц либо для ресурсов, придерживающихся концепции ЧПУ (человеко-понятный url).

ЧПУ-сайты подойдут по той причине, что у них url страниц формируется по принципам, на которых базировался наш алгоритм – все элементы иерархии указываются в url текущей страницы.

Например, к таковым смело можно отнести популярную CMS WordPress, в которой ЧПУ идёт «из коробки».

К плюсам движков относится ещё и хранение информации о страницах в базе данных сайта, т.е. при формировании «хлебных крошек» не будет необходимости прописывать название элемента в зависимости от его url, как мы это делали в нашем примере.

Достаточно будет всего лишь достать название из БД.

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

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

Такой подход очень распространён в не-ЧПУ платформах, а также в проектах, где формирование текущего url происходит не добавлением родительских категорий в url, а иными способами.

К примеру, рассмотрим «коробочный» способ формирования url страниц в популярной CMS для Интернет-магазинов OpenCart:

Как видите, url не ЧПУ, т.е. в нём не присутствует никаких понятных человеку названий, только идентификаторы категории и товара, по которым можно уже достать из БД информацию о соответствующих страницах, предварительно произведя парсинг url с целью их извлечения.

Но, если в этом случае парсинг url ещё хоть как-то может быть оправдан, то в случае с OZON данные действия будут пустой тратой времени и сил, т.к. в url-е страниц нет никаких ссылок на родительские элементы:

Тут url, кстати, тоже не ЧПУ, поэтому единственный способ получения родительских элементов – это прямые запросы в БД с целью формирования «хлебных крошек», с которыми у OZON, несмотря на все особенности url, всё ОК 🙂

Вывод же полученного массива «хлебных крошек» в шаблоне для всех платформ будет одинаковым и осуществляться с помощью следующего итогового кода:

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

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

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

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

На этом на сегодня всё. Жду ваших отзывов.

До новых встреч и удачи вам в сайтостроении 🙂

P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

И с друзьями не забудьте поделиться 😉

Источник