Как сделать тему на друпал
Как сделать тему на друпал
Темы Drupal позволяют менять облик и эмоциональную составляющую вашего сайта. Сегодня Тим Миллвуд объяснит, как создать тему, которая будет выглядеть по-разному на экранах различных размеров.
Прежде всего, хочу сказать, что не являюсь дизайнером или экспертом CSS – и не планирую им становиться. Но Drupal я знаю достаточно хорошо и хочу показать вам, как легко начать пользоваться темами Drupal и совмещать их с медиа-запросами. В сообществе Drupal в последнее время часто обсуждаются проблемы его интеграции с технологиями, подобными HTML5, CSS3 и медиа-запросам. И Джейк Строн и Джон Элбин Уилкинс обсуждали использование динамического дизайна во время своих выступлений на DrupalCon в Лондоне.
Всё, что вам нужно, для того, чтобы начать работать с темами Drupal, это info-файл с описанием вашей темы и CSS. Всё остальное Drupal сделает за вас. Впрочем, если вы хотите отредактировать HTML или даже сам контент, вы вольны сделать это – и данная статья расскажет вам с чего начать.
Info-файлы
Первый шаг – это написание info-файла. Этот файл хранит всю информацию, необходимую Drupal для того, чтобы знать, чем ваша тема является и как ее использовать. Он содержит несколько необходимых элементов и много других настроек.
Пример выше может быть добавлен в файл под названием 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.
Не нравится 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 сайта, если объем контента достаточно велик. Предположим, мы решили сделать очень простой пейджер с ссылками на предыдущую и последующую страницу, без указателя их номеров. Мы бы сделали вот что:
Это код можно добавить в файл 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.
Создание темы оформления для Drupal
Несмотря на то, что CMS Drupal довольно популярная система для создания веб-приложений, для неё практически нет качественных свободных тем оформления. В лучшем случае это довольно красивые темы, которые трудно настроить так, чтобы она выглядела уникально. Точнее, это вполне возможно, но это почти равносильно тому, что создать новую тему. Именно поэтому разработчики Drupal используют свободные и качественные базовые темы, на основе которых можно довольно быстро создать совершенно уникальное и потрясающе выглядящее оформление сайта. Именно такой способ и будет рассмотрен в данной статье.
С чего начать?
Любой веб-дизайнер или веб-разработчик со временем обзаводится какими-то шаблонами и заготовками. Использование которых экономит кучу времени при реализации новых, оригинальных проектов. В случае с вёрсткой тем оформления это может быть готовый набор шаблонов, не имеющих оформления, но хорошо адаптированных для отображения элементов дизайна на разных разрешениях экрана. С автоматически показывающимися и скрывающимися регионами, блоками и т. д.
Для Drupal существует достаточное количество таких тем для разработки. Самой популярной является тема Zen, которая доступна для загрузки по адресу http://www.drupal.org/project/zen. Вообще, правильно её называть не темой оформления (поскольку никакого оформления она не имеет), а базовым набором (Starter Kit), который имеет универсальный адаптивный HTML-каркас. Этот каркас изначально построен на спецификации HTML5, поддерживает работу на мобильных устройствах и абсолютно «резиновый» для корректного отображения на экранах с различным разрешением. Не будет большим секретом, что профессиональные веб-разработчики Drupal для создания шедевров используют именно базовый набор Zen.
Что для этого нужно?
Тема Zen доступна для Drupal версий 7 и 8, хотя для последней пока в виде альфа-выпуска. В данной статье будет рассмотрен вариант для Drupal 7 при обязательном наличии утилиты Drush. Она понадобится для автоматической генерации собственного стартового набора новой темы на основе темы Zen. Это можно выполнить вручную, но это неоправданно долго и нудно. Разумнее воспользоваться Drush. Общий порядок действий следующий:
Последний пункт в данной статье рассматриваться не будет, поскольку это отдельная и специфическая тема.
Создание стартового набора новой темы
Теперь нужно скачать стартовый набор Zen:
Путь указан относительно каталога
Теперь можно сгенерировать и собственный начальный набор для новой темы. Он будет иметь все необходимые Drupal файлы шаблонов с «резиновым» и полностью адаптивным каркасом, а также главный CSS-файл, в который будут компилироваться стили CSS при создании оформления новой темы:
Как видно, с помощью ключей «—path» и «—description» были заданы путь установки (в каталог custom), а также краткое описание новой темы оформления. Параметр my_theme задаёт машинное имя темы в Drupal, по которому система её (тему) идентифицирует. А параметр «My Theme» это название темы.
Подключение темы
Далее, используя панель администрирования Drupal, в разделе «Оформление» (по адресу http://drupal-site/admin/appearance) нужно включить новую тему «My Theme» по-умолчанию:
Без дополнительных блоков и элементов интерфейса данная тема выглядит так:
С дополнительными блоками, добавленными во вторую боковую (справа) панель HTML-каркаса:
Для разрешений экранов мобильных устройств все блоки и дополнительные элементы «съезжают» друг под другом, выстраиваясь в одну колонку:
При этом никаким оформлением новая тема «My Theme» как видно, не обладает. Далее, уникальный внешний вид для неё предстоит создать. Сначала нарисовать дизайн в качестве макета. Затем реализовать его с помощью CSS и, возможно, косметических правок HTML-каркаса в файлах шаблонов.
Установка и использование дополнительных инструментов
Набор Zen (как и сгенерированные на его основе новые темы) поддерживает работу с фронтенд-окружением Gulp.js. Это позволяет выполнять многие, свойственные для фронтент-разработчика рутинные задачи автоматически. Те, кто тесно знаком с веб-дизайном понимают, о чём идёт речь. Поэтому нет необходимости останавливаться на этом подробно.
Для начала нужно установить фреймворк Node.js и его пакетный менеджер npm. В Ubuntu 18.04 соответствующие пакеты доступны в стандартном репозитории:
Автоматически, как зависимость, будет предложено установить пакет nodejs.
Для организации фронтенд-окружения Gulp для новой темы «My Theme» в её каталоге /sites/all/themes/custom/my_theme существует файл package.json. Для установки всех требуемых пакетов нужно выполнить в этом каталоге команду:
Будут загружены все необходимые для работы Gulp модули в подкаталог node_modules. Теперь, для выполнения команд и заданий Gulp необходимо глобально установить интерпретатор gulp-cli, используя пакетный менеджер npm:
Глобальная установка удобна, чтобы не делать этого для каждой разрабатываемой темы. Далее, в каталоге с темой my_theme в конфигурационном файле gulpfile.js нужно задать URL, используемый виртуальным хостом, при помощи опции options.drupalURL:
Теперь можно выполнять задачи по-умолчанию для новой темы «My Theme» используя команду:
Нужно заметить, что задач для Gilp, сформированных по-умолчанию полностью хватает, чтобы задать любое оформление для темы. Сами же стили компилируются в результате выполнения задач Gulp в файл /my_theme/styles.css и его не нужно редактировать вручную. Сами же стили задаются в соответствующих файлах *.scss в подкаталоге /sass темы оформления. А файлы шаблонов — в подкаталоге /templates. Эти шаблоны можно создавать «с нуля» самостоятельно или скопировать готовые из аналогичного каталога родительской темы Zen:
Если оставить подкаталог templates новой темы «My Theme» пустым, то по-умолчанию будут подключены файлы шаблонов из родительской темы Zen, на основе которой она была сгенерирована. Это очень важный момент, нельзя упустить его из виду.
Например, для задания бордюров для блоков новой темы нужно в файле sass/components/box/_box.scss раскомментировать блок кода:
Далее нужно выполнить команду gulp и просмотреть результат в веб-браузере, обновив страницу:
Заключение
В заключение очень важно отметить, что в данном случае для разработки тем для Drupal используется метаязык Sass. Разработанный на основе CSS. Основное предназначение Sass – сократить использование повторяющегося кода разработчиком и возложить его генерацию на специализированные утилиты, такие как Gulp. Таким образом, создание тем оформления предложенным в данной статье способом тесно связано со знанием и умением применения метаязыка Sass.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Создание своего шаблона для Drupal 7 на конкретном примере. Часть 1.
Для начала нам необходимы исходные данные, а именно свёрстанный (HTML и CSS) шаблон. В просторах интернета их достаточно много. Я же вам предлагаю взять мои исходники, которые будут использоваться в примерах, скачать его можно вот отсюда, а выглядеть он будет вот так:
Как мы видим, структура совершенно простая. Давайте откроем папку с исходными файлами и посмотрим из чего состоит наш с вами дизайн:
Набор файлов скуден честно говоря, внутри находится индексный файл ( index.html), стили ( style.css), и папка с картинками ( images). Теперь приступим к созданию, для начала нам нужно создать папку с названием вашего шаблона (название берём из головы) в директории вашего сайта, я назову его « modeldrupal», а именно идём по пути
Внутри папки создаём файл
В этом файле у вас будет храниться вся необходимая информация о данном шаблоне, которая необходима для Drupal.
И пишем вот такую структуру:
Полный список доступных значений для info файла можно прочитать вот здесь. Для того что бы данный шаблон появился в админке вашего сайта, наличие данного файла будет достаточно, давайте посмотрим, переходим в раздел оформление:
И видим, что для полного отображения нам не хватает скриншота темы, поэтому сделаем скриншот свёрстанного дизайна и поместим его в корень нашего с вами шаблона, название ему необходимо дать как:
Расширение файла может мыть как « png» так и « jpg», в моём случае это – png. Обновляем страницу и смотрим что у нас из этого получилось:
Как мы видим, для него так же доступна опция « Включить и установить по умолчанию» я вам не советую этого делать, так как это приведёт лишь к белой странице. Теперь нам необходимо создать каркас нашего шаблона, который формирует index.html и повешенные на него стили, для этого копируем папку с картинками, index.html и style.css в корень нашего шаблона, на деле должно выглядеть вот так:
Если вы читали мои предыдущие статьи по темизации, то вы наверняка знаете, что за каркас страницы в Drupal 7 отвечает файл
Поэтому, переименуем файл index.html в page.tpl.php. И теперь, если мы активируем наш шаблон в админке и поставим его по умолчанию, то вывод любой странице на сайте будет именно такой как в нашем дизайне. Давайте посмотрим как выглядит сайт после выше перечисленных манипуляций:
Видим, что не подгрузились изображения, произошло это из за того, что у нас поменялись URLы до них, давайте их перепишем, что бы наш шаблон соответствовал оригиналу, открываем файл
И в начало URL каждого изображения подставляем вот такую конструкцию, изображений у нас всего 4
Сохраняем и смотрим, какие изменения произошли у нас на сайте:
Видим, что у нас выводится именно тот дизайн который нам необходим. В следующей части мы продолжим работу над созданием нашего шаблона.
Блог Vaden Pro
Как создать свою тему на Drupal 7?
Итак, пройдя предыдущие главы курса, мы уже Знаем что такое Drupal, основные его составляющие части, как они работают и теперь хотим чтобы после того, как мы собрали необходимый нам функционал сайта, все это еще и смотрелось так, как нам необходимо.
Взять и оформить все при помощи CSS то достаточно просто, но что делать если для оформления необходимо доработать html код страниц сайта, а для любого нормального проекта это необходимо, да и вообще создать свою структуру сайта, с удобными нам регионами вывода материалов и блоков? Вот этим вопросам и будет посвящена данная глава курса.
Как создать тему?
Для того, чтобы Ваша тема появилась в админке и стала доступной для подключение достаточно просто создать папку с ее названием в соответствующей директории (напоминаю, пользовательские темы должны лежать в папке ваш_сайт/sites/all/themes) и в нее положить файл с расширением .info.
Это обязательный минимум. Кроме него в теме должны присутствовать:
В целом этого минимума достаточно для темизации почти любого сайта. Далее разберем содержимое, назначение файлов и структуру темы подробнее.
Синтаксис
Его название должно точно соответствовать названию папки в которой он расположен, потому что это и есть системное имя темы.
В его имени можно использовать английские буквы нижнего регистра и знаки подеркивания.
Для примера я создам тему с названием mytheme. Выглядеть это будет следующим образом:
Содержимое
В минималной комплектации его содержимое будет выглядеть следующим образом:
Это значит следующее:
Пара слов о создании регионов для темы. Предположим у нас есть типичный сайт со следующей структурой:
Соответственно мы хотим, чтобы у нас была возможность выводить блоки сайта в этих регионах, вот этой строкой в файле .info:
Кроме вышеперечисленного минимума в файл инфо еще можно добавить:
Также для работы с темой нам минимально понадобится настроить под себя шаблоны страницы, остальные файлы tpl.php подключим по ходу дальнейшей темизации сайта, описанной в следующих уроках.
Для удобства работы в дальнейшем создадим папку templates внутри нашей темы, в которой и будут храниться все наши файлы tpl.php.
html.tpl.php
Можно просто в нашей папке создать файл с таким названием и установить ему кодировку UTF-8 без BOM, но лучше взять исходник из ядра, для этого переходим из корня сайта modules/system, там находим и копируем файл html.tpl.php, после вставляем его в соответствующую папку нашей темы, открываем и вносим нужные нам правки:
Также именно в этом шаблоне мы получаем доступ к тегу head всего сайта. К примеру, если нам нужно в кучную добавить кнопки социальных сетей на страницы сайта, именно тут мы можем добавить их код в тег head.
page.tpl.php
Аналогично предыдущему шаблону можно скопировать с modules/system/page.tpl.php, а можно просто копировать и переназвать шаблон html.tpl.php, потому что в отличие от html в page мы уже будем делать первую верстку нашей страницы, а значит код нам лучше написать в ручную (пара слов о том, как правильно создавать структуру страницы на html 5):
Разберем чуть подробнее код:
Для того, чтобы вывести в шаблон страницы конкретный регион темы используется строка:
Аналогично выводим все остальные регионы.
И ставим проверку на php, чтобы в случае, когда у нас в конкретном регионе нету содержимого (как сейчас, когда тема только создана и все блоки в ней отключены):
Откуда берем условие мы уже и так разобрали, все что внутри этого тега не будет выведено на страницу если в регионе [‘header’] нет ни одного блока. Ну и получили итог:
Проделали это со всеми регионами примера и добавили в вывод на страницу:
Итак, поздравляю, скелет нашей новой темы мы уже создали. Кому-то этого даже может хватить, ведь размещая в своих произвольных регионах с нужной разметкой блоки друпал мы можем уже достаточно гибко оперировать структурой страницы.
template.php
Также обязательный для создания файл. Копируем любой из наших уже созданных файлов tpl.php, удаляем из него код, переименовываем и ложим этот файл в корень темы. Открываем, ставим в начале файла открытый тег (поскольку в нем будет только php код) и давайте для начала добавим в него код, который убирает системную ссылку на drupal.org из вывода на страницу. Теперь содержимое template.php выглядит так:
style.css
А значит просто создаем папку css в которую и положим наш файл style.css.
Подводя итоги
На этом создание скелета нашей будущей темы можно считать законченным. Дальше будет идти работа уже по оформлению конкретных отдельных частей сайта.
Для удобства сразу добавим в нашу тему пока пустые папки:
Теперь структура темы выглядит следующим образом: