Помощь начинающим веб
разработчикам

Создание своего шаблона для Drupal 7 на конкретном примере. Часть 1.

05.10.2012

Сегодня хочу затронуть такую тему как создание собственного шаблона для 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)

Profile picture for user Anton
Роман
17.04.2014

А где об этом можно почитать? или в какую сторону копать в гугле.

Profile picture for user pantey
pantey
18.04.2014
Profile picture for user Anton
Roman
18.04.2014

Большое Вам спасибо!

Profile picture for user Anton
Ирина
26.04.2014

Огромное спасибо за урок! Я только начала изучать друпал, поэтому у меня вопрос, подскажите пожалуйста, а как активировать этот шаблон в самом друпал? В меню оформление?

Profile picture for user pantey
pantey
26.04.2014

В меню оформление, выбираете вашу и тему и кликаете по ссылке "Включить и установить по умолчанию". В принципе все. Только на первом этапе, я бы вам не советовал этого делать.

Profile picture for user Anton
Денис
24.09.2014

Что-то у меня не выходит((( скачал ваш пример сайта, переименовал Index.html в page.tpl.php, подключил шаблон, а там пустая страница со стандартными надписями...

Profile picture for user Anton
Денис
24.09.2014

сделал тоже самое на хостинге, все получилось, а на денвере не выходило

Profile picture for user Anton
user
05.11.2014

исчезла админ меню после установки темы ? что делать?

Profile picture for user Anton
админ
02.12.2014

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

Profile picture for user Anton
Алексей
14.01.2015

Что-то не вышло у меня в соответствии с инструкцией. После создания папки и загрузки файла .info в админке пишет: Эта версия не совместима с Drupal 7.x и должна быть заменена.

Profile picture for user humpa
humpa
22.01.2015

Отличный шаблон. Только как изменить ширину?
.container {
width: 940px;
margin: 0px auto;
}
Если увеличиваю ширину здесь, то всё едет если смотреть в chrome на android. Долго мучился, решил спросить!

Profile picture for user Anton
Алекс
23.01.2015

Красава! Всё детально разжевал! Респект!

Profile picture for user Anton
Makc
01.02.2015

Следует отметить что кодировка файла название_темы.info должна быть UTF-8 без BOM, с этим я долго намучился, вписав в инфо-файл символы кириллицы и поставив кодировку UTF-8, вылазили ошибки вроде Notice: Undefined index: name in block_help() (line 69...

Profile picture for user Anton
Артем
23.06.2015

Здравствуйте, пишу свою тему и не могу понять почему нужно писать вот это - ? Ведь в других темах достаточно написать примерно так - ../img/bg/jpg и все будет работать! ((

Profile picture for user Anton
Артем
23.06.2015

Ой! вот эту функцию -

Profile picture for user Anton
Макс
07.10.2015

То есть,как я понял делаю свой сайт на html и css и потом делаю манипуляции с файлами типо info и папками шаблон готов?

Profile picture for user pantey
pantey
07.10.2015

манипуляция с файлами - это только часть создания вашей темы

Profile picture for user Anton
Сергей
13.11.2015

Спасибо вам большое, статья-настоящая находка! У меня вопрос, остальные стили в шаблон? Импортировать их в style?

Profile picture for user Anton
Сергей
14.11.2015

Еще такой вопрос, если у меня в стиле добавлена картинка, которая повторяется по x для тега

, я могу ее оттуда как-то активировать?

Profile picture for user Anton
Иван
15.02.2016

Урок хороший... было бы еще восхитительно если вмести со статьями шло видео видео с процессом работы.

Profile picture for user Anton
Фил
21.06.2016

Спасибо! И за коменты тоже всем благодарен - они оказались полезными..

Profile picture for user Anton
leonrom
25.03.2018

Спасибо за интересные уроки!

А не подскажете,- где копать, чтобы сделать такой же выдвигающийся (при скроллинге) заголовок, как на Ваших страницах?

Profile picture for user Anton
MartinRen
23.04.2018

Hi All im noob here. Good article! Thx! Thx!

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии