хлебных крошек на php

Хлебные крошки в WordPress с помощью php-скрипта

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

Этот вариант хлебных крошек мне показался симпатичным. Посмотрите пример:хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

Установка на сайт

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

Итак, для реализации элемента навигации нам понадобятся только лишь файлы style.css и single.php.

1. Открываем файл style.css вашей активной темы во встроенном редакторе WordPress или через файловый менеджер и вставляем данный код:

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

Одна из возможных замен в коде — это название Главной страницы. А для «гурманов» есть предложение вставить изображения красивых стрелочек вместо невзрачного символа перехода ( » ). Скачайте файлы стрелочек в Сети и сделайте в коде обычную вставку изображения:

В таком разе крошки могут выглядеть так:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

На этом у меня всё. Тема исчерпана.
Удачи Вам! Пока. Ваш Л.М.

Источник

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

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

Поделиться этим постом

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

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

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

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

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

Хлебные крошки рекомендуется внедрять сайтам с уровнем вложенности страниц больше двух.

2. Виды хлебных крошек

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

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

3. Как хлебные крошки влияют на SEO

В продвижении SEO хлебные крошки играют важную роль:

4. Что нужно знать при создании хлебных крошек

В процессе внедрения навигационной цепочки на сайт важно учесть несколько правил:

Используйте популярный словарь разметки — Schema.org. Его поддерживают все поисковые системы. В WordPress для создания микроразметки хлебных крошек добавьте участок кода в нижнюю часть раздела functions.php. Пример кода:

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

Google рекомендует использовать форматы Microdata, RDF и JSON-LD для создания хлебных крошек. Пример кода Microdata с использованием словаря schema.org:

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

Быстрый способ создать хлебные крошки — подключить плагин CMS. Для WordPress используйте популярные плагины Breadcrumb NavXT или SEO Yoast. Рассмотрим пример с Breadcrumb. Для отображения навигационной цепочки нужно скачать плагин и добавить код в header.php, если хлебные крошки нужны на каждой странице. Пример кода:

Редактируйте настройки отображения цепочки в соответствующем разделе плагина:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

После сохранения настроек хлебные крошки появятся на сайте:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

В Joomla подключение хлебных крошек доступно в разделе «Менеджер модулей» панели управления:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

Настройка навигационной цепочки также возможна и вручуную. Пропишите код и добавьте его в место будущего отображения хлебных крошек в HTML. Если они нужны на всех страницах — добавьте код в раздел header.php либо добавьте в раздел functions.php. Пример:

Подводим итоги

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

Источник

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

Сегодня вашему вниманию представляю гостевой пост автора блога DisSeo.ru, который расскажет о таком понятии, как хлебные крошки на сайте. Этот элемент решает несколько очень важных задач для сайта. Во-первых, хлебные крошки на сайте улучшают навигацию для посетителей, а во-вторых заботятся о правильной внутренней перелинковке. По своей сути, хлебные крошки на сайте — это дополнительный элемент навигации, который отображает ваше местоположение в структуре WordPress блога.

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

Как уже ранее я упоминал, хлебные крошки :

Для добавления к нашему сайту хлебных крошек мы рассмотрим 2 варианта:

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

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

Для того, чтобы установить плагин Breadcrumb NavXT, его первым дело нужно скачать и активировать. Для этого находим его по названию в каталоге WordPress (поиск плагинов в администраторской панели WordPress), нажимаем “установить”, после чего тычем в ссылку “активировать” под названием «Breadcrumb NavXT».

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

Я установил данный код в файл Single.php (Одна запись), точно так же, как показано на изображении ниже:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

А этот php-код для плагина, добавляющий стили Breadcrumb NavXT, я установил в файл style.css, для того чтобы хлебные крошки на сайте отражались в нужном стиле (шрифт, стиль написания), в зависимости от вашего дизайна параметры стилей можно отредактировать:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

На WordPress хлебные крошки будут отображаться вот таким образом:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

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

Так как плагин Breadcrumb NavXT буржуйский, то в нем нужно прописать настройки на русском языке, чтобы хлебные крошки на сайте отражались правильно. Для этого в административной панели WordPress блога пройдите во вкладку «Параметры» и найдите строку «Breadcrumb NavXT». Сделайте в настройках следующие действия:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

Настроенный Breadcrumb NavXT будет отображен на блоге следующим образом:

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

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

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

И пропишите в нем следующий php-код:

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

Далее придаем нужный нам стиль, прописывая его в файле style.css

А на этом я закончу на сегодня разговор о хлебных крошках на сайте и о плагине Breadcrumb NavXT.

Источник

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

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на phpДоброго времени суток 🙂

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

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

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

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

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

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

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

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

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

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

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

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

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

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

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

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

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

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

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

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

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

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

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

хлебных крошек на php. Смотреть фото хлебных крошек на php. Смотреть картинку хлебных крошек на php. Картинка про хлебных крошек на php. Фото хлебных крошек на php

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

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

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

Так что либо создатель термина «хлебные крошки» посчитал его более благозвучным (на английском звучит как «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
Главная страницаsite.corp/
О насsite.corp/about
Услугиsite.corp/services
Блогsite.corp/blog
Контактыsite.corp/contacts

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

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

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

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

Название страницыUrl
Наши работыsite.corp/services/portfolio
Ценыsite.corp/services/prices

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

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

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

Сразу хочу оговориться, что наш код «хлебных крошек» будет состоять из двух частей: формирования массива с названиями элементов и их 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’.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *