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

Создание своего шаблона для 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/

Сохраняем и смотрим, какие изменения произошли у нас на сайте:

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

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (71)

Profile picture for user Алексей
Андрей
23.02.2013

Я 3 дня маялся с этими шаблонами и совершенно случайно попал на вас сайт. Этот урок он просто чудесен и всё от и до мне разъяснил. Я не мог даже поставить шаблон, а тут создал его сам. Спасибо вам большое.

Profile picture for user Алексей
Алекс
04.03.2013

Человек три дня маялся...Счастливый. Я млять уже 9 месяц маюсь из них конкретно 2 ничем другим кроме темизации друпала не занимаюсь и только после этого урока начал что-то понимать.

Profile picture for user Алексей
:D
19.10.2013

Дебил, блять :D

Profile picture for user Алексей
:d
11.02.2014

аахах внатуре

Profile picture for user Алексей
Ололол
17.09.2014

лол)))))

Profile picture for user Алексей
Леонид
17.03.2013

Присоединяюсь к выше отписавшимся и благодарю автора за доступное и простое описание темизации. Большое спасибо!

Profile picture for user Алексей
Мария
18.03.2013

ВОТ! Именно то,что я так долго искала! А нашла абсолютно случайно))) Спасибо!

Profile picture for user Алексей
Jeremy
02.04.2013

Да. Я тоже примерно девять месяцев с Друпалом маюсь, только недавно боле-менее с адимнкой разобрался. Складывается впечатление, что автор действительно хочет чему-то научить, в отличие от интернет-"звезд" Друпала. Вы не находите? В связи с этим небольшое место Писания: "Отпускай хлеб свой по водам, потому что по прошествии многих дней опять найдешь его" (Библия, книга Экклезиаста 11:1) Автор, спасибо, что делишься знаниями, не лукавя, как остальные.

Profile picture for user Алексей
Айдос
09.04.2013

Просто супер.

Profile picture for user Алексей
Валентин
09.04.2013

И коменты заточены.. Имя и Электронка в одну строчку. Супер.
У вас дар учить людей, а следовательно и сайт для людей. Спасибо. А то многие программеры напыженные хапуги.

Profile picture for user Алексей
Михаил
15.05.2013

Мда... Все не так просто, как тут описано, ооооочень многое упущено я бы сказал самое основное. И как Вы собираетесь контент изменять ???

Profile picture for user pantey
pantey
15.05.2013

А что вы подразумеваете под "ИЗМЕНЯТЬ КОНТЕНТ"? Если вы про

node.tpl.php

то читайте продолжение этих уроков (все 4 части)

Profile picture for user Алексей
Костя
13.09.2013

Я вторую часть не могу найти

Profile picture for user Алексей
!! =)
27.04.2015

Добавьте ссылки в саму статью. В каждую из них

Profile picture for user Алексей
Михаил
15.05.2013

Опс. Сразу не посмотрел, вопрос снимаю.

Profile picture for user Алексей
Дмитрий
25.05.2013

спасибо автору столь замечательной статьи!Вы,судя по объему изложенного,особо не трудились,тем не менее,только что заменили мне целый список прочитанной литературы,где мне,как новичку,очень много было не понятно)Теперь,могу ряспоряжаться веб пространством своего сайта как мне угодно.Спасибо)
добавляю в закладочки)

Profile picture for user Алексей
Вася В.
22.07.2013

Спасибо! Начал знакомство с Drupal чуть больше года назад. Сейчас надо довольно усиленно в него вникать. По написанию шаблонов - оч важно для меня. Спасибо за материал. Очень доходчиво и лаконично.

Profile picture for user Алексей
Сергей
27.07.2013

Да автор малорик. ДОСТУПНО! СПАСИБО!

Profile picture for user Алексей
Лиса Алиса
04.08.2013

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

Profile picture for user pantey
pantey
05.08.2013

читайте остальные 3 уроки.

Profile picture for user Алексей
Виктор
06.08.2013

Как делать ссылки на картинки если ссылки в файле css?

Profile picture for user pantey
pantey
06.08.2013

прописать относительно файла Css, где сейчас находятся изображения.

Profile picture for user Алексей
Виктор
06.08.2013

Спасибо, а то уже заколебало. Но у меня вылазит черная область когда включаю свой шаблон http://s1.ipicture.ru/uploads/20130806/SA6xD3c5.jpg , что тут можно сделать?

Profile picture for user pantey
pantey
06.08.2013

ваши стили шаблона перекрыли базовые стили ядра, поэтому такой результат. Через firebug ищите в каком классе косяк и исправляйте.

Profile picture for user Алексей
Дмитрий
12.08.2013

Спасибо Вам огромное! Вы - Единственная в Интернете, кто смог рассказать, как сделать свой шаблон для Drupal! Низкий Вам поклон!

Profile picture for user Алексей
Миша
18.08.2013

Спасибо. Только у меня возник трабл, друпал закэшировал тему - настройки по умолчанию стояли. Пока не удалил кеш - изменения в теме не отображались.

Profile picture for user pantey
pantey
18.08.2013

так и должно быть!

Profile picture for user Алексей
Николай
28.08.2013

А не проще ли использовать переменную $directory?
Вот так:

/images/img02.jpg

Вместо:

/sites/all/themes/modaldrupal/images/img02.jpg

Оно ведь так правильней.

Profile picture for user pantey
pantey
28.08.2013

Ну если говорить о правильности, то правильно будет скорее вот так

<?php print base_path() . path_to_theme();?>/images/img02.jpg
Profile picture for user Алексей
Николай
28.08.2013

А в чем собственно разница переменная или функция?

Profile picture for user pantey
pantey
28.08.2013

в API именно мой вариант написан, а про $directory вот здесь можно почитать, говорят о какой-то не предсказуемой работе этой переменной.

Profile picture for user Алексей
Николай
28.08.2013

Спасибо. Теперь понятно.

Profile picture for user Алексей
Анна
03.09.2013

создаю свою подтему, не загружаются картинки которые идут тегом img, все что backgroundом загружается, пробовала дописать sites/all/themes/podtema -ничего не меняется. Firebug пробует загрузить этот адрес к картинке- http://localhost/drupal/node/localhost/drupal/sites/all/themes/podtema/public/images/header/logo.png он такой и должен быть, я думала что они должны загружатся относительно подтемы(podtema/public/images/header/logo.png)хелп плыз))))))

Profile picture for user pantey
pantey
03.09.2013

скидывайте код, как выводите!

Profile picture for user Алексей
Анна
03.09.2013

на panteymos@gmail.com отправила, спасибо

Profile picture for user Алексей
Дамир
21.10.2013

чувак спс те за классный блог, таких о друпале большая редкость,
давай поднимай его в поиске хотя бы оптимизируй главную...
например в title вместо "drupalfly.ru | Помощь начинающим веб разработчикам |"
"drupalfly.ru | Блог о Drupal, уроки, создание шаблонов, для начинающих вебмастеров."
Поставь мета-теги, если что пиши на мыло, помогу в вопросах SEO ;)

Profile picture for user Алексей
Дамир
21.10.2013

В уроке не помешало бы обозначить следующее:
размеры скриншота 294х219 пикселей
прописать в файлe modeldrupal.info: screenshot = 'screenshot.jpg'
/sites/all/themes/modaldrupal/ - здесь ошибка нужно написать modEldrupal через 'e'

Profile picture for user Алексей
олег
15.12.2013

всё сделал по уроку ! в итоге когда в админке нажал выход ! То теперь вообще не появляется даже форма куда вводить почту и пароль ! если пишу drupal/admin на вкладке браузера пишется что доступ запрещён. как исправить подскажите ??? причём 2 раза пробывал и два раза при нажатии на выход такая вот фигня случалась. может админку надо както подцепить к шаблону или почемму такое может быть ?

Profile picture for user Алексей
Виктор
06.01.2014

Напиши drupal/user и будет тебе счастье :)

Profile picture for user Алексей
Галина
02.01.2014

И видим, что для полного отображения нам не хватает скриншота темы, поэтому сделаем скриншот свёрстанного дизайна и поместим его в корень нашего с вами шаблона, название ему необходимо дать как:
1 screenshot.png
Извините, я новичок, мне непонятно какое действие подразумевается под фразой: сделаем скриншот свёрстанного дизайна? Как это должно выглядеть и как верстать дизайн и делать скриншот? Заранее спасибо!

Profile picture for user Алексей
олег
03.01.2014

просто открыть свёрстанный сайт и нажать prntscreen потом в паин вставить и соханить и сунуть в папку которая указана ! не понятно как подключить модуль админки то к новому шаблону ??? или ни у коо нет проблемы с тем что админка н отображается после установки по умолчанию нового шаблона ? 2 раа делал 2 раза не отображается !

Profile picture for user Алексей
Ma3xak
03.01.2014

Слушай
Вроде всё делал но отображается только контенет сайта на белом экране((

Profile picture for user Алексей
Roman
19.04.2014

у Вас трабл с папками

замените на ето

Profile picture for user Алексей
Виктор
06.01.2014

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

Profile picture for user Алексей
Денис
29.03.2014

У меня страница сверстана на bootstrap 3, после добавления в файл page.tpl.php моего кода html, некоторые элементы bootstrap перестали отображаться, а другие не корректно отображаются, как будто перестали работать правила css bootsrap.

Profile picture for user Алексей
Денис
29.03.2014

У меня страница сверстана на bootstrap 3, после добавления в файл page.tpl.php моего кода html, некоторые элементы bootstrap перестали отображаться, а другие не корректно отображаются, как будто перестали работать правила css bootsrap.

Profile picture for user Алексей
Василий
09.04.2014

Сайт великолепен!!!
Помня отличную прошлую версию, этот меня удивил продуманостью всех деталей! Респект автору!

Profile picture for user Алексей
Роман
16.04.2014

добрый день, замечательная подборка статей, я еще не дочитал до конца, но обязательно прочту. Я бы хотел спросить - есть ли возможность в Drupal применить для разных страниц различный дизайн? Ну например - есть главная страница у нее один дизайн, есть страница отражающая новость - именно отдельная страница - вот мне интересно может ли она отличаться от основного дизайна ...

Profile picture for user pantey
pantey
16.04.2014

да, конечно.

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

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