• Необходимые навыки: HTML, CSS, PHP
• Требования: установленная Drupal 7
• Продолжительность: 1 час +
• Скачать исходники

Темы Drupal позволяют менять облик и эмоциональную составляющую вашего сайта. Сегодня Тим Миллвуд объяснит, как создать тему, которая будет выглядеть по-разному на экранах различных размеров.

Эта статья впервые появилась в 221-ом выпуске журнала .net – всемирно известного издания для веб-дизайнеров и разработчиков.

Прежде всего, хочу сказать, что не являюсь дизайнером или экспертом CSS – и не планирую им становиться. Но Drupal я знаю достаточно хорошо и хочу показать вам, как легко начать пользоваться темами Drupal и совмещать их с медиа-запросами. В сообществе Drupal в последнее время часто обсуждаются проблемы его интеграции с технологиями, подобными HTML5, CSS3 и медиа-запросам. И Джейк Строн и Джон Элбин Уилкинс обсуждали использование динамического дизайна во время своих выступлений на DrupalCon в Лондоне.

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

Всё, что вам нужно, для того, чтобы начать работать с темами Drupal, это info-файл с описанием вашей темы и CSS. Всё остальное Drupal сделает за вас. Впрочем, если вы хотите отредактировать HTML или даже сам контент, вы вольны сделать это – и данная статья расскажет вам с чего начать. 

Info-файлы

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

name = Responsive 
description = An example of using Media Queries in Drupal7 
core = 7.x 
stylesheets[all][] = css/reset.css 
stylesheets[all][] = css/main.css 
stylesheets[(min-width: 480px)][] = css/480.css 
stylesheets[(min-width: 768px)][] = css/768.css 
stylesheets[(min-width: 1024px)][] = css/1024.css 
stylesheets[(min-width: 1280px)][] = css/1280.css

Пример выше может быть добавлен в файл под названием responsive.info. Этот файл нужен для перехода к папке responsive, которая по умолчанию находится в директории sites/all/themes папки с установленным Drupal 7.

Первые несколько строчек в объяснениях не нуждаются: name отвечает за название вашей темы; description содержит ее описание; а core – версия Drupal, для которой ваша тема написана. В нашем случае мы используем Drupal 7, но версию обозначаем как 7.x.

Название темы и ее описание будут видны на странице тем в интерфейсе Drupal.

Следующие несколько строчек представляют собой таблицы стилей, которые Drupal должен загрузить в качестве составляющих вашей темы. Таблицы стилей декларируются как псевдо-PHP массивы. Первый ключ массива является медиа-элементами тега стиля, генерируемого Drupal. Этот ключ может содержать любой медиа-запрос или тег HTML-стиля медиа-элемента, который вы хотите использовать в своей теме, будь то шрифт или графика. Второй ключ массива оставляется пустым, дабы было возможно применение нескольких таблиц стилей к одному медиа типу. Для этих таблиц стилей я использовал метод Энди Кларка «320 и больше», заключающийся в разработке первоначального дизайна для мобильных устройств и последующей доработке его до полного формата.

Такой подход помогает вам сфокусироваться на том, какие из элементов и функций можно добавить на экран при его увеличении, а не на том, от чего бы избавиться при его уменьшении. Первые две таблицы стилей предназначены для всех медиа-типов. Reset.css включает функцию CSS reset – в нашем случае (и в примерах файлов) это образец, созданный Эриком Майером, но вы вольны использовать свой собственный.

В Main.css начинается «настоящая» CSS. Файл содержит по умолчанию все CSS используемые при каждой из возможных разверток, плюс разметку для сайта при просмотре его на экране с шириной менее 480 пикселей. Это идеальное место для добавления портретных стилей под смартфоны.

Последние четыре строки файла info определяют ваши CSS файлы с помощью медиа-запросов. Они настроены так, чтобы переключать CSS в режим 480 пикселей – ширину горизонтальной развертки iPhone.

768 пикселей, размер iPad в портретной развертке:

1 024 пикселя, горизонтальная развертка iPad:

И наконец, 1 280 пикселей, размер под браузер настольного PC:

Вы можете продолжить и создать CSS файлы, определенные в info. Путь к файлам, указанный в нашем примере, ведет по умолчанию в директорию CSS. Так что вам нужно создать каталог под названием css в папке sites/all/themes/responsive, а затем сгенерировать сами CSS файлы, используя имена, заданные в файле info.

Скопируйте код CSS reset Эрика Майера (или другой, по вашему вкусу) и поместите его в reset.css. После этого начинайте формировать дизайн сайта, добавляя свои CSS в main.css. Drupal уже сгенерировал для вас весь HTML, так что можете задействовать опцию тем «Responsive», чтобы взглянуть на полученный код и голый макет сайта.

Не нравится HTML сгенерированный Drupal? Ну, это не страшно – вы можете легко внести изменения. Поищите в 219-ом выпуске статью «Упрощаем и улучшаем свой HTML-код», в которой Йен Симмонс рассказывает о том, как корректировать сгенерированный Drupal HTML код, добавляя своему сайту возможности HTML5.

Файлы шаблонов

В Drupal есть множество шаблонов. Они поставляются в базовом наборе Drupal, а также идут с большинством дополнительных модулей, именно они управляют HTML. Их легко найти, все они оканчиваются расширением tpl.php. Любой из этих шаблонов может быть использован в вашей теме, вам достаточно лишь добавить файл с тем же именем. Например, если вы хотите переопределить HTML для узлов своего сайта, вы просто копируете node.tpl.php из модуля node и добавляете его в sites/all/themes/responsive.

Для создания страницы обычно требуется несколько файлов шаблонов. Первым является html.tpl.php. Он включает в себя все, что находится за пределами тела HTML документа. Следом идет page.tpl.php, затрагивающий всё в пределах тела документа. Эти два файлы используются для всех страниц. Остальные зависят от конструкции вашего сайта. Если у вас есть блоки, для них вам понадобится block.tpl.php. Предпочитаете ноды, в полном или усеченном виде – вам нужен node.tpl.php. Если же вы захотите реализовать в своем сайте такие сложные модули как панели, вам понадобится целый набор шаблонов для каждого из элементов, генерируемых этим модулем.

Файлы шаблонов определяют контент, который им необходимо демонстрировать, с помощью PHP переменных, использованных в них. Drupal присваивает значения этим переменным с помощью функций тем, поддерживаемых базовой программой и модулями. Переопределять эти функции также легко, как и файлы шаблонов. Первым шагом будет генерирование файла template.php в пределах sites/all/themes/responsive. В этот файл PHP шаблона вы можете добавить любую из функций тем, заменив первое слово в ее названии на название темы, в нашем случае на «responsive». В качестве примера, взглянем на переопределение функции темы, используемой для генерирования пейджера навигации. Этот элемент будет часто встречаться на страницах вашего Drupal сайта, если объем контента достаточно велик. Предположим, мы решили сделать очень простой пейджер с ссылками на предыдущую и последующую страницу, без указателя их номеров. Мы бы сделали вот что:

 (isset($tags[1]) ? 
$tags[1] : t('< previous')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));
    $li_next = theme('pager_next', array('text' => (isset($tags[3]) ? $tags[3] : t('next >')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));
    if ($pager_total[$element] > 1) { 
      if ($li_previous) {
        $items[] = array( 
         'class' => array('pager-previous'), 
         'data' => $li_previous,
         );
       } 
       if ($li_next) {
          $items[] = array( 
           'class' => array('pager-next'),
           'data' => $li_next,
            );
         }
         return '
' . t('Pages') . '
' . theme('item_ list', array(
            'items' => $items,
            'attributes' => array('class' => array('pager')), 
          ));
     }
  }

Это код можно добавить в файл template.php нашей темы. Он переопределяет функцию theme_pager в пределах pager.inc ядра Drupal. Функция называется responsive_pager. В шаблоне Drupal мы видим ее со словом “theme” в имени функции измененным на имя темы при переопределении ее в template.php. Оригинальная функция темы может быть скопирована, а затем изменена в случае необходимости. В нашем примере мы изменили стандартный пейджер навигации для страниц вида «в начало, предыдущая, 1, 2, 3, 4, 5, следующая, в конец»  на «предыдущая, следующая». Она также использует весь стандартный код Drupal для генерирования кнопок пейджера, но удаляет всю ненужную логику. Функция может быть легко изменена так, чтобы заставить пейджер работать, как вам хочется.

JavaScript и jQuery

Зачастую требуется слегка преобразить сайт с помощью JavaScript и, что чаще бывает, jQuery. Drupal поставляется с jQuery, так что вы можете пользоваться им в своей теме. Файлы JavaScript можно присоединять к теме через info-файл, также как CSS.

scripts[] = sparkle.js

Эту строку можно добавить в responsive.info, чтобы подключать файл sparkle.js при загрузке темы. Для JavaScript Drupal использует систему «Behaviors» для создания единого последовательного механизма присоединения JavaScript при загрузке страницы и добавлении нового контента. В качестве примера работы, добавим немного jQuery анимации на главную страницу сайта.

(function ($) { 
   Drupal.behaviors.responsiveAnimation = {
     attach: function (context, settings) { 
      $('h1#site-name', context)
       .hover(function(){ 
         $(this)
         .animate({
           'margin-left': '10px'
          }, 
          'slow');
        });
      }
    }
   }(jQuery));

Код, приведенный выше, может быть добавлен в файл sparkle.js нашей темы – он добавляет анимационный эффект при наведении мыши на имя сайта. Здесь следует помнить одну вещь: при внесении изменений в info-файл они не вступят в силу до повторной активации темы – так что вам нужно перейти на страницу выбора внешнего вида и снова выбрать ее, прежде чем sparkle.js начнет работать. Код начинает работать с привязки jQuery к символу $ – во избежание конфликтов это не происходит автоматически. После этого функция хранится как свойство Drupal.behaviors и присвоенное ей имя соответствует теме и ее функционалу. Всё остальное не отличается от того, что вы видели при работе со стандартным jQuery.

Если курсор мыши оказывается над h1#site-name, медленная анимация добавляет 10 пикселей отступа слева от названия сайта. По адресу drupal.org/node/171213 вы найдете много хорошей документации, освещающей использование JavaScript и jQuery при создании сайтов на Drupal. С ее помощью вы научитесь гораздо лучше понимать, как они работают и как могут быть использованы.

Мы коснулись создания тем на Drupal лишь поверхностно, документация раскрывает этот вопрос намного глубже. Чтобы лучше понять то, о чем мы говорили сегодня, скачайте файлы примеров. Также тему, описанную в этой статье, я загрузил на millwoodonline.com. Загляните туда, чтобы увидеть, как она работает с контентом настоящего сайта.

Оригинал статьи: http://www.netmagazine.com/tutorials/create-responsive-drupal-theme