Сегодня хочу затронуть такую тему как создание собственного шаблона для Drupal 7, на конкретном примере. Этому делу, будет посвящено несколько уроков, которые я думаю помогут вам разобраться в принципах построения своего шаблона. Для опытных пользователей данной системы, допил свёрстанного дизайна под Drupal не составляет особого труда, но вот для новичков – тема сложновата и усложняется она ещё и тем, что в рунете практически нет какого либо описания построения шаблона, - есть какие то обобщённые данные, я попытаюсь устранить данный пробел своими статьями. Итак приступим:
Для начала нам необходимы исходные данные, а именно свёрстанный (HTML и CSS) шаблон. В просторах интернета их достаточно много. Я же вам предлагаю взять мои исходники, которые будут использоваться в примерах, скачать его можно вот отсюда, а выглядеть он будет вот так:
Как мы видим, структура совершенно простая. Давайте откроем папку с исходными файлами и посмотрим из чего состоит наш с вами дизайн:
Набор файлов скуден честно говоря, внутри находится индексный файл (index.html), стили (style.css), и папка с картинками (images). Теперь приступим к созданию, для начала нам нужно создать папку с названием вашего шаблона (название берём из головы) в директории вашего сайта, я назову его «modeldrupal», а именно идём по пути
sites/all/themes/название_вашего_шаблона
Внутри папки создаём файл
Название_вашего_шаблона.info
В этом файле у вас будет храниться вся необходимая информация о данном шаблоне, которая необходима для Drupal.
И пишем вот такую структуру:
name = modelDrupal description = new themes for drupal modelDrupal package = Core version = VERSION core = 7.x stylesheets[all][] = style.css
Полный список доступных значений для info файла можно прочитать вот здесь. Для того что бы данный шаблон появился в админке вашего сайта, наличие данного файла будет достаточно, давайте посмотрим, переходим в раздел оформление:
И видим, что для полного отображения нам не хватает скриншота темы, поэтому сделаем скриншот свёрстанного дизайна и поместим его в корень нашего с вами шаблона, название ему необходимо дать как:
screenshot.png
Расширение файла может мыть как «png» так и «jpg», в моём случае это – png. Обновляем страницу и смотрим что у нас из этого получилось:
Как мы видим, для него так же доступна опция «Включить и установить по умолчанию» я вам не советую этого делать, так как это приведёт лишь к белой странице. Теперь нам необходимо создать каркас нашего шаблона, который формирует index.html и повешенные на него стили, для этого копируем папку с картинками, index.html и style.css в корень нашего шаблона, на деле должно выглядеть вот так:
Если вы читали мои предыдущие статьи по темизации, то вы наверняка знаете, что за каркас страницы в Drupal 7 отвечает файл
page.tpl.php
Поэтому, переименуем файл index.html в page.tpl.php. И теперь, если мы активируем наш шаблон в админке и поставим его по умолчанию, то вывод любой странице на сайте будет именно такой как в нашем дизайне. Давайте посмотрим как выглядит сайт после выше перечисленных манипуляций:
Видим, что не подгрузились изображения, произошло это из за того, что у нас поменялись URLы до них, давайте их перепишем, что бы наш шаблон соответствовал оригиналу, открываем файл
page.tpl.php
И в начало URL каждого изображения подставляем вот такую конструкцию, изображений у нас всего 4
/sites/all/themes/modaldrupal/
Сохраняем и смотрим, какие изменения произошли у нас на сайте:
Видим, что у нас выводится именно тот дизайн который нам необходим. В следующей части мы продолжим работу над созданием нашего шаблона.
Комментарии (73)
А где об этом можно почитать? или в какую сторону копать в гугле.
здесь
Большое Вам спасибо!
Огромное спасибо за урок! Я только начала изучать друпал, поэтому у меня вопрос, подскажите пожалуйста, а как активировать этот шаблон в самом друпал? В меню оформление?
В меню оформление, выбираете вашу и тему и кликаете по ссылке "Включить и установить по умолчанию". В принципе все. Только на первом этапе, я бы вам не советовал этого делать.
Что-то у меня не выходит((( скачал ваш пример сайта, переименовал Index.html в page.tpl.php, подключил шаблон, а там пустая страница со стандартными надписями...
сделал тоже самое на хостинге, все получилось, а на денвере не выходило
исчезла админ меню после установки темы ? что делать?
Совет такой небольшой, сложно увидеть список связанных уроков, было бы неплохо помимо похожих статей сделать ссылки на конкретные и связанные статьи, или эти же статьи добавить в похожие
Что-то не вышло у меня в соответствии с инструкцией. После создания папки и загрузки файла .info в админке пишет: Эта версия не совместима с Drupal 7.x и должна быть заменена.
Отличный шаблон. Только как изменить ширину?
.container {
width: 940px;
margin: 0px auto;
}
Если увеличиваю ширину здесь, то всё едет если смотреть в chrome на android. Долго мучился, решил спросить!
Красава! Всё детально разжевал! Респект!
Следует отметить что кодировка файла название_темы.info должна быть UTF-8 без BOM, с этим я долго намучился, вписав в инфо-файл символы кириллицы и поставив кодировку UTF-8, вылазили ошибки вроде Notice: Undefined index: name in block_help() (line 69...
Здравствуйте, пишу свою тему и не могу понять почему нужно писать вот это - ? Ведь в других темах достаточно написать примерно так - ../img/bg/jpg и все будет работать! ((
Ой! вот эту функцию -
То есть,как я понял делаю свой сайт на html и css и потом делаю манипуляции с файлами типо info и папками шаблон готов?
манипуляция с файлами - это только часть создания вашей темы
Спасибо вам большое, статья-настоящая находка! У меня вопрос, остальные стили в шаблон? Импортировать их в style?
Еще такой вопрос, если у меня в стиле добавлена картинка, которая повторяется по x для тега
Урок хороший... было бы еще восхитительно если вмести со статьями шло видео видео с процессом работы.
Спасибо! И за коменты тоже всем благодарен - они оказались полезными..
Спасибо за интересные уроки!
А не подскажете,- где копать, чтобы сделать такой же выдвигающийся (при скроллинге) заголовок, как на Ваших страницах?
Hi All im noob here. Good article! Thx! Thx!