drupal 7 темизация меню
Drupal 7 темизация меню
Как, вы наверное знаете, в Drupal 8 блоки тоже стали сущностями – я уже говорил, что это то, что действительно не хватало в 7й версии движка, т.е. мы можем создавать определённый тип блока со своими набором полей, что избавило нас от написания своих кастомных модулей, когда необходимо было реализовать дополнительное поле блока.
Основы синтаксиса Twig в Drupal 8
Думаю, многие из вас уже успели познакомиться с Drupal 8 и его многочисленными изменениями и наверняка уже знаете, что в основу новой ветки пришел и новый шаблонизатор, взамен PHPTemplate – Twig. Сегодня мы рассмотрим основы данного шаблонизатора, дабы в следующих уроках по созданию темы для Drupal 8, вы понимали его специфичный синтаксис.
Итак, начнем с базовых вещей:
Вставка комментария:
Подробнее о функциях theme_* в Drupal 7
Список функций, которые будет рассматривать:
Создаем кастомный формат отображения ноды
Иногда возникают ситуации, когда совершенно не хватает стандартных форматов отображения нод. По умолчанию нам доступны лишь несколько форматов:
Добавляем пункт «разделителя» в меню Drupal 7.
Иногда, при разработке структуры сайта, а точнее при его темизации необходимо модифицировать стандартное меню Drupal, а именно добавить некий «разделитель», который визуально бы делил пункты какого либо меню на логические разделы. Задача довольно простая, но почему-то вызывающая проблемы со стороны разработчиков. Что бы вы наглядно поняли о чем идет речь, то скриншот для вас ниже:
Выводим свои любые значения в таблицу корзины в ubercart 3
Продолжаем изучение темизации, а в частности такого модуля как ubercart, для тех кто не в курсе – это модуль электронной коммерции, который очень часто использовался в Drupal 6, и реже стал использоваться в Drupal 7, в силу сильного конкурента Commerce.
Темизации кнопки «удалить» на странице корзины в Ubercart 3.
Сегодня продолжаем изучение особенностей Drupal, а в частности поговорим о темизаци кнопки «удалить» на странице корзины в Ubercart. Задача довольно тривиальная, но которую приходится реализовывать если не постоянно, то очень часто. Итак, начнём с исходных данных:
Мы имеет, некий товар, который добавлен в корзину в Ubercart, по у молчанию он имеет следующий вид (используем как всегда Drupal 7 и стандартный шаблон Bartik)
Выводим аватар пользователя на страницу с применением стиля изображения.
Как вы понимаете, сегодня будем решать довольно тривиальную задачу, которая в последнее время становится все более актуальной, а именно будем выводить аватар пользователя (поле из профиля пользователя) на страницу сайта (шаблон page.tpl.php). По умолчанию, drupal предоставляет при регистрации загружать аватар и выбрать для него «стиль изображения», но на этом все его настройки и заканчиваются, а что делать если нам необходимо в профиле пользователя показать допустим изображение с размерами 200px на 200px, а на странице сайта допустим 30px на 30px? Естественно есть ряд решений:
Список переменных для создания field.tpl.php
Данный файл опять же относится к системе темизации Drupal, и как вы понимаете из названия предназначен он для изменения вывода полей. Что бы воспользоваться данным файлом необходимо скопировать его из
Для темизации меню Drupal 7 предоставлет два шаблона:
Шаблон menu_link.
Для изменения шаблона menu_link необходимо переопределить шаблон menu_link и создать новую реализацию шаблона menu_link.
Шаблон menu_tree.
Для изменения шаблона menu_tree необходимо переопределить шаблон menu_tree и создать новую реализацию шаблона menu_tree.
Расширение шаблона menu_link и шаблона menu_tree.
Для более гибкой темизации, на уровне шаблонов, Drupal 7 предоставляет возможность темизировать каждое меню отдельно:
В результате имеем следующий приоритет использования шаблонов для обёртки меню:
Для шаблона пункта меню Drupal 7 поступает аналогично:
Практическое занятие.
Создайте новое меню «Test Menu». Обратите внимание, что системное имя у нашего меню будет «test-menu«.
Добавьте несколько пунктов для меню:
Настраиваем вывод блоков с меню Navigation и меню «Test menu» в левую колонку:
В файле template.php, разрабатываемой темы добавляем реализацию хука hook_theme():
Добавляем реализации для шаблонов:
Ниже указан код который необходимо вставить в файл template.php:
Очищаем кэш тем.
В результате на главной странице имеем результат:
И собственно полученный HTML-код
Который мы сейчас и будем разбирать.
Разбор полученного кода.
На рисунке ниже выделены места шаблона и их место в полученном HTML-коде.
Создание темы
Темизация Drupal 7
Друпал обладает достаточной мощью и гибкостью для того, чтобы вы могли сделать тему любой сложности. Система даёт бесчисленные способы решения возникающих вопросов, но вы должны знать как Друпал работает с темами, чтобы быть в состоянии выбрать оптимальный вариант. Зная принципы создания тем, вы можете минимизировать свой код и облегчить последующее обслуживание.
Это не означает, что вы должны от и до выучить весь Друпал только для того, чтобы сделать свою тему. В этих главах будут рассмотрены вопросы касающиеся работы с оформлением и вы можете изучить только те из них, которые вам нужны. Некоторые документы рассчитаны на технически подготовленных пользователей, другие носят общий характер, но для понимания большинства вещей от вас потребуется знание:
Старайтесь при разработке темы придерживаться стандартов кодирования — это позволит сохранить чистоту кода темы. Перед созданием темы, вам нужно представлять цели и возможности сайта, для которых вы делаете тему. Зная определённые требования значительно легче разрабатывать новую тему, чем проектируя её, исходя из общих представлений.
Это руководство содержит информацию о работе с темами в Друпале 7. Стандартные темы и их шаблоны в Друпале 7 размещены в своих папках и подпапках общей папки themes, для дополнительных тем используется папка DRUPAL_ROOT/sites/all/themes.
Для изменения существующий темы, создайте в папке sites/all/themes папку для новой темы и скопируйте в неё все файлы той темы которую нужно изменить.
Когда создаётся новая тема, её системное название не должно совпадать с системным названием другого проекта, так как названия модулей и тем используются в названиях функций, а использование функций с одинаковыми названиями может вызвать конфликты.
Друпал 5 и более ранние версии в качестве системного названия использовали название папки темы, а не название файла.
Движок PHPTemplate
Стандартным движком тем в Друпале 7 является PHPTemplate. Он написан Adrian Rossouw и использует в качестве шаблонов файлы something.tpl.php, которые позволяют управлять функциями theme_something(). Документацию по функциям оформления можно найти в Drupal API. Каждый файл состоит из HTML-скелета с включением PHP-сниппетов, которые генерируют необходимую информацию.
Даже если вы не знаете PHP, то всё равно сможете создавать свои темы, так как в них используются простые сниппеты, которые можно просто скопировать в свои шаблоны из других тем.
Логика условий и предобработка данных (template.php)
Структура генерируемой страницы
Иллюстрация ниже показывает структуру страницы в Друпале и файлы, которые используются в типичной теме и подтеме.
Стандартные файлы темы
.info-файл: определение темы
.tpl.php-файлы: шаблоны выводимых данных
Воздержитесь от использования в этих файлах сложной логики. В большинстве случаев это должны быть только элементы HTML задающие скелет страницы и переменные PHP выводящие данные в этих элементах (используйте для предобработки файл template.php).
.css-файлы: стили оформления
.js-файлы: скрипты взаимодействия
Базовая темы и её подтемы
Друпал 5 и ранние версии требовали размещения подтемы внутри папки базовой темы. Сейчас это не так. Друпал 7 использует реестр тем, данные о темах берутся из него и подтема не обязательно должна располагаться в папке базовой темы.
Рекомендации по созданию темы
При создании темы и использовании темы, учитывайте следующие моменты:
Drupal Русскоязычное сообщество
Здравствуйте, очень нужен совет. Итак, задача заключается в том, чтобы используя D7 сделать меню картиками. Но прежде я расскажу что я делал.
1. Как я понимаю, для d6 есть модуль imagemenu, но для D7 его нет
2. Вариант с CSS сделать картику бекграундом мне не подходит
3. Костыли со вставкой в шаблон линка и обработка тем же css тоже не подходит
3. Пробовал создавать новый тип контента, в нём поле с картинкой, далее создать нужные ноды и далее views вывести картинки в блоке которые ссылаются на ноду (эмулируя тем самым меню), но и этот, на певый взгляд самый идеальный вариант, мне неподошёл.
Всё дело в том, что среди пунктов меню, должен быть пункт формы обратной связи, который включается встроенным в ядро модулем и по дизайну сайта, должен быть в одном ряду с остальными пунктами меню и выводится картинкой.
В идеале если б можно было при редактировании меню добавлять к нужным пунктам картики, а title скрывать, то проблема была бы решена, но такого модуля я ненашёл. Может быть кто то решал уже данную проблему?
Комментарии
Menu attributes не подойдет? Правда, он глючный какой-то — у меня он после создания материала сбрасывает класс у одного из пунктов меню, причем пункт выбирается рандомно)
Спасибо за совет, поставил menu_attributes, посмотрел, но мне это не подходит. Это очень хорошо подходит, чтобы придать пунктам меню разные стили офрмления. Можно конечно присвоить id или класс и использовать костыли с CSS, но мне нужно чтоб код генерировался с тегом img.
Вы бы sketch накидали к примеру https://moqups.com/ возможно вам и подсказал бы.
Тут 2 варианта либо переопределять menu_theme либо добиться эмитации меню через views (Что у вас не получилось)
Drupal Русскоязычное сообщество
Не так давно возникла необходимость темиции меню — нужно было добавить js tooltip с описанием для каждого пункта. Руководствовался данной темой (единственное, что удалось найти).
Суть способа. Создаем меню, создаем отдельный шаблон с именем block-menu-menu-name.tpl.php для блока этого меню, в который вставляем код следующего содержания:
В тоже время мы можем написать в файле темизации блока следующий код:
и получим стандартный вывод меню Drupal.
Тоесть получается, что содержимое блока уже было вычислено(был сделан запрос к базе, сформирован и темизирован HTML код меню). И после этого мы повторно делаем тоже самое, только по-своему.
Может конечно, я чего то не понимаю, но не проще ли создавать обычный блок, в котором напрямую вызывать код, описанный в первом примере, а блок меню просто не показывать ни в одном регионе, для того, чтобы его содержимое не вычислялось?
Поделитесь своими соображениями по данной теме.
Комментарии
Может конечно, я чего то не понимаю, но не проще ли создавать обычный блок, в котором напрямую вызывать код, описанный в первом примере, а блок меню просто не показывать ни в одном регионе, для того, чтобы его содержимое не вычислялось?
лучше я так думаю, делать темизацию через template.php, есть такие функции как theme_menu_item, theme_menu_item_link, theme_menu_tree
Спасибо за ответ. А можно поподробнее об этом? Есть примеры?
На развитие drupal.ru
Ваша финансовая помощь дает нам возможность оплачивать хостинг и поддерживать стабильную работу сайта. Благодарим за поддержку!