Блог Vaden Pro

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

Темизация views в Drupal 7

Раздел: 

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

Темизация представлений

Создание представления

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

Создаём представление

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

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

Выбор шаблона для темизации

Перед началом темизации views на drupal 7 необходимо сначала определиться с шаблоном, который нам понадобится.

Для этого переходим в расширенные настройки представления, опускаемся вниз в группу настроек под названием “Other” и кликаем по ссылке «Информация», рядом с «Тема оформления».

Информация представлений

После нажатия на ссылку, перед нами откроется окно со всеми шаблонами относящиеся к этому представлению.

Сейчас нас интересуют шаблоны в разделе «Стиль вывода».

Стиль вывода

Шаблоны

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

Используемые шаблоны:

views-view-table.tpl.php — шаблон содержащит стандартный код и используется по умолчанию;

views-view-table--[машинное_имя_представления].tpl.php (views-view-table--temizaciya.tpl.php) — затронет все дисплеи внутри конкретного представления, у который стоит формат отображения «Таблица»;

views-view-table--[тип_представления].tpl.php (views-view-table--block.tpl.php)– затронет все представления созданные в виде блока и с форматом отображения «Таблица»;

views-view-table--[машинное_имя_представления] --[тип_представления].tpl.php (views-view-table--temizaciya--block.tpl.php) — затронет дисплеи созданные в виде блока внутри конкретного представления;

views-view-table--[машинное_имя_отображения].tpl.php (views-view-table--proba.tpl.php) — задействует отображение с машинным именем «proba»;

views-view-table--[машинное_имя_представления]--[машинное_имя_отображения].tpl.php (views-view-table--temizaciya--proba.tpl.php) — затронет отображение с машинным именем «proba» созданным в представлении «temizaciya»;

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

Например, если вам необходимо темизировать все отображения внутри одного представления вам не понадобиться для каждого настраивать свой шаблон, будет достаточно выбрать шаблон типа views-view-table--[машинное_имя_представления].tpl.php.

Создание и подключение шаблона

Чтобы подключить шаблон нам стоит создать файл внутри нашей темы с расширением tpl.php, а имя файла выбираем из списка шаблонов в зависимости от необходимой для нашего случая меры воздействия. В своём случае я буду темизировать конкретное отображение, по этому я задействую шаблон «views-view-table--temizaciya--proba.tpl.php»

Создание шаблона в теме

Теперь возвращаемся в представление и кликаем по ссылке «Стиль вывода»

Стиль вывода

Перед нами откроется окно со стандартным кодом шаблона.

Стандартный код

Копируем его и вставляем в новосозданный файл.

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

Пересканируем шаблоны

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

Шаблон подключен

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

На данном этапе наше представление выглядит следующим образом:

Внешний вид отображения

Начнем его темизацию.

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

Внутри файла сейчас содержится стандартный код таблицы, от которого мы смело можем избавляться. В нашем случае нам понадобится цикл foreach, а внутри него впишем dpm($value). Dpm нам поможет узнать, что передаёт представление на страницу.

Подготовка кода

Создаём удобную для нас конструкцию, а поля выводим при помощи функции print, что в них вставлять узнаем из dpm.

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

В конечном итоге мой код принял вид:

Общий вид кода

Убираем dpm из вывода, ведь больше нам не нужны не какие поля и смотрим, как оно выглядит на экране.

Представление без css

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

Пару строк кода и наше отображение приняло «человеческий» вид.

Темезированное представление с css

Подводя итоги

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

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

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