Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Настройка хлебных крошек в drupal 7. Модуль path breadcrumbs

Дата:19.08.15 в 20:08
Раздел: 

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

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

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

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

Подключение модуля

После установки, его необходимо активировать. Это можно сделать перейдя admin/modules, найти наш модуль. Перед нами откроется Path Breadcrumbs (собственно сам модуль) и Path Breadcrumbs UI (пользовательский интерфейс позволяющий его настроить), их нам и надо активировать для дальнейшей работы.

активация модуля

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

раздел хлебных крошек

Перейдя по ссылке мы попадём на страницу хлебных крошек.

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

Страница крошек

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

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

Перед нами откроется страница с настройками данного модуля, которые для удобства объединены в группы.

Первая группа называется «THEMING SETTINGS»( настройки темизации).

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

Следующее выплывающее меню «PER THEME SETTINGS» где можно выбрать тему, в которой будут использоваться наши крошки. Если это поле оставить не заполненным то они будут отображаться на теме установленной по умолчанию.

настройка тимизации

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

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

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

Настройка тимизации

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

Кэширование

Затем идёт группа под названием «настройки ссылки на главную страницу».

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

Главная

Заключительная группа настроек называется «Другие настройки»

В этих настройках мы моем выбрать метод очистки url. Задать максимальную длину одной цепочки в символах, разрешить или запретить преобразовывать HTML символы, а также разрешить вывод хлебных крошек на страницах с ошибками 403 и 404.

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

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

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

Создадим хлебные крошки для материалов типа Basic page. Для этого нажимаем на ссылку «Create new path breadcrumb»

Создание крошек

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

Первый экран настроек

И нажимаем кнопку «Продолжить»

В разделе путь можно задавать как подстановочные шаблоны так и конкретные адреса страниц

Вторым экраном является выбор аргумента. Для этого нам необходимо нажать на кнопку «Изменить»

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

Выбор аргумента

На следующем окне оставляем всё по умолчанию и нажимаем сохранить

После выбора аргумента нажимаем на кнопку продолжить и попадаем на третий экран настроек «Критерии»

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

Критерии

Перед нами откроется окно с типами материалов, в котором мы выбираем Basic page и нажимаем сохранить.

Тип материала

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

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

Так как у нас один критерий, то эти настройки не как не повлияют на дальнейшую работу.

Поэтому нажимаем «продолжить»

И мы попадаем на последний экран в котором мы и создадим наши хлебные крошки.

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

Перевод

А также сразу добавить первую ссылку, ведущую на главную страницу:

Главная

Добавление хлебных крошек

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

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

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

Таблица добавления

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

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

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

Для этого в столбце «link title» напишем «%node:title» этот шаблон выведет тайтл страницы, а «путь ссылки» подставим шаблон который будет формировать ссылку на текущую ноду «%node:url».

Затем добавим звено без ссылки воспользовавшись шаблоном модуля. Для этого в первом поле напишем !Page_title, а в поле ссылки .

И в конце добавим собственное звено под названием «Крошка» которая также не будет не куда вести. И нажмём кнопку «готово».

наполнение крошками

Теперь перейдём на саму страницу и посмотрим что у нас получилось

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

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

Теперь перейдём в редактирование этих хлебных крошек и уберём ненужные элементы. Для этого нам необходимо перейти admin/structure/path-breadcrumbs и нажать на кнопку «Правка»

Правка

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

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

Правка

Теперь добавим хлебные крошки для типа материала Articles.

Для этого переходим admin/structure/path-breadcrumbs

Добавление новых крошек

И в открывшимся окне нажимаем Create new path breadcrumb

Заполняем форму создания хлебных крошек

В контексте также привязываемся к «Материал: ID»

Выбор контекста

В аргументе выбираем «Материал: тип» и в открывшимся окне ставим галочку на «Article».

Тип материала

Первая ссылка будет на страницу новостей поэтому в графе «LINK TITLE» мы напишем «Новости», а в «ПУТЬ ССЫЛКИ» поставим ссылку «/novosti».

Первое звено

Наши статьи можно разделить по термину таксаномии, отобразим же это в нашей навигационной цепочке, а для этого мы воспользуемся шаблонами подстановки. Что бы в зависимости от выбраного нами теримина менялось и его название в «link title» подставляем шаблон %node:field-type-news:name

А для ссылки на этот терми %node:field-type-news:url

Ссылка на термин таксаномии в хлебных крошках

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

текущая страница в хлебных крошках

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

Общий вид хлебных крошек для статьи

Экспорт и импорт хлебных крошек

Рядом с кнопкой добавления хлебных крошек есть сыка на импорт уже существующих хлебных крошек

Импорт

Если на неё перейти, то откроется окно в котором нас попросят ввести код.

код крошек

Этот код можно взять зайдя на страницу admin/structure/path-breadcrumbs и открыть действия, которые можно совершить с уже существующими крошками

действия

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

Код для импорта

Итог

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

Оценок: 6 (средняя 3.7 из 5)

Оценка: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по Drupal (в открытом доступе)