Drupal 101: Начало работы с темой Drupal 7

  1. Структура папок
  2. .Info файл
  3. Файлы шаблонов
  4. Теперь вы можете начать CSS-ING

Обновление: я наконец нашел время, чтобы написать это Drupal 8 Тематический пост после двух лет.

С Drupal 8 не за горами, может показаться странным, что я напишу пост о тематике Drupal 7, но я подумал, что Drupal 8 действительно станет мейнстримом. Кроме того, когда я пишу этот пост в Drupal 8 (скоро), мы можем провести однозначное сравнение того, что изменилось. Поверь мне, между ними много различий.

Тема как скин для вашего сайта. Тематика Drupal 7 может показаться сложной на первый взгляд. Если заглянуть в папку с темой, откроется куча папок с PHP-файлами, таблицами стилей и кто знает, что еще. Самый простой способ обернуть голову вокруг вещей - попытаться создать тему с нуля. Drupal.org имеет довольно хороший набор документации для Теминг Drupal 7 так что это должно быть вашей отправной точкой.

Структура папок

Все неосновные темы должны быть помещены в папку sites / all / themes. Начните с создания новой папки и назовите ее как хотите. Чтобы сделать все немного более организованным, создайте три подпапки, css, js и img, внутри вашей новой папки темы. Это похоже на любой другой HTML-проект, не так ли?

Годзилла / | | - css / | | - img / | `- JS /

.Info файл

Единственный необходимый файл для темы Drupal 7 - это файл .info. Этот файл содержит всю информацию, а также параметры конфигурации для вашей темы. Следует отметить, что название вашей темы не может содержать переносы, пробелы или знаки препинания. Это потому, что Drupal использует это имя в функциях PHP, поэтому применяются те же ограничения для пространств имен. Числа и подчеркивания приемлемы, хотя. Если вы назовете этот файл godzilla.info, то Drupal распознает вашу тему как godzilla . Каждый раз, когда вы вносите изменения в файл .info, вы также должны очищать кэш, чтобы увидеть изменения. В файле .info можно использовать тринадцать значений, но не все из них обязательны. Drupal будет использовать значения по умолчанию для тех, которые не определены Но есть пара других, которые мы также должны включить.

имя (обязательно)
Определяет удобочитаемую версию названия вашей темы. Это имя отображается на экране Администрирование> Внешний вид . Поскольку это служит меткой для вашей темы, вы можете использовать пробелы.

имя = Годзилла Рокс

описание
Необязательно, но рекомендуется иметь. Это краткое описание вашей темы, которое отображается под названием вашей темы на экране Администрирование> Внешний вид .

описание = настраиваемая тема на основе Годзиллы

ядро (обязательно)
Указывает, с какой основной версией Drupal тема совместима. Если это не соответствует версии установленного Drupal, тема будет отключена.

core = 7.x

таблицы стилей (обязательно)
Позволяет вам определить, какие таблицы стилей загружаются при включении вашей темы. Хотя в официальной документации это не помечено как обязательное, я бы посчитал таковым, потому что, если вы не заявите об этом, Drupal 7 по умолчанию не загружает ваши таблицы стилей. Он будет использовать Drupal style.css по умолчанию.

При необходимости вы можете указать таблицы стилей для разных типов медиа и медиазапросов. Хотя таблицы стилей могут быть размещены в подкаталогах, рекомендуется сохранять их только на одном уровне. Пути к файлам относятся к каталогу темы. Кроме того, порядок, в котором вы перечисляете здесь таблицы стилей, будет соответствовать порядку их загрузки в заголовок вашего HTML-документа.

таблицы стилей [все] [] = css / styles.css таблицы стилей [печать] [] = css / print.css таблицы стилей [screen and (max-width: 480px)] [] = css / mobile.css

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

scripts [] = js / scripts.js

районы
Необязательно и по умолчанию в списке ниже, если не указан. Регионы - это то, что отображается на экране Администрирование> Структура> Блоки . Если вы хотите определить свои собственные регионы, имейте в виду, что регионы [контент] = контент должен присутствовать. Использование стандартных имен Drupal для областей боковой панели позволяет Drupal добавлять классы боковой панели к тегу <body>. Вы можете сходить с ума с именами любых других пользовательских регионов, которые вы хотите.

регионов [заголовок] = области заголовка [выделено] = выделенные области [справка] = области справки [содержимое] = области содержимого [sidebar_first] = области левой боковой панели [sidebar_second] = области правой боковой панели [нижний колонтитул] = нижний колонтитул

Полный список всех опций, доступных для .info файла можно найти Вот , Пример файла .info будет выглядеть примерно так:

name = Godzilla - rox description = Настраиваемое ядро ​​темы на основе Godzilla = 7.x таблицы стилей [все] [] = сценарии css / styles.css [] = регионы js / scripts.js [заголовок] = регионы заголовков [контент] = Области содержимого [sidebar_first] = области левой боковой панели [sidebar_second] = области правой боковой панели [нижний колонтитул] = нижний колонтитул

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

Разметка вашего сайта контролируется файлами шаблонов, которые используют расширение .tpl.php. Drupal работает так, что, если вам не нужно что-то нестандартное, Drupal будет загружать шаблоны по умолчанию для генерации HTML-разметки для вашего сайта. Большинство модулей поставляется с собственным файлом tpl.php, который можно изменить, скопировав его и поместив в папку шаблонов в папке вашей темы. Помните, ребята, никогда не взламывайте ядро . На этом этапе ваша папка темы, вероятно, будет выглядеть примерно так:

Годзилла / | | - css / | | - godzilla.info | | - img / | | - JS / | `- шаблоны /

Движок тем по умолчанию для Drupal 7 PHPTemplate , написано Адриан Россоув , Хотя файлы шаблонов распознаются как PHP, на самом деле они представляют собой HTML-среду, которая использует операторы PHP и переменные для извлечения динамических данных из базы данных. Так что, если вы знакомы с HTML, все будет в порядке, не пугайтесь всего, что есть в &lt;? Php?>.

Я лично решил переопределить два файла шаблона для моей темы, html.tpl.php и page.tpl.php. Если коротко, то для того, чтобы выучить все это, я создал свою собственную начальную тему под названием Clarus и теперь используйте его, чтобы запустить все мои собственные темы Drupal 7.

Но в любом случае, как показывают их имена, файл html.tpl.php служит основой для всего HTML-документа, всего между тегами <html> и </ html>. Page.tpl.php контролирует разметку для содержимого в <body> вашей страницы. Опять же, вам не нужно переписывать какие-либо из этих файлов шаблонов, если вы не хотите, вы можете просто создавать темы с использованием CSS, но тогда вам придется следовать стандартной разметке Drupal.

Мой файл html.tpl.php относительно небольшой. Я переписал этот файл, потому что я хотел, чтобы моя тема использовала HTML5. Drupal предоставляет множество переменных, которые вы можете просто вызвать с помощью простого &lt;? Php print $ VARIABLE_NAME?>. Не нужно писать их вручную. Нажмите Вот для списка всех переменных, доступных для использования.

&lt;? php / ** * @file * Возвращает базовую HTML-структуру отдельной страницы Drupal. * * Полная документация для этого файла доступна онлайн. * @see https://drupal.org/node/1728208 * /?> <! DOCTYPE html> <! - [if lt IE 9]> <script src = "&lt;? = base_path (). path_to_theme (); ?> / js / html5shiv.js "> </ script> <! [endif] -> <html lang =" &lt;? php print $ language-> language;?> "dir =" &lt;? php print $ language- > dir;?> "&lt;? php print $ rdf_namespaces; ? >> <head> &lt;? php print $ head; ?> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <title> &lt;? php print $ head_title; ?> </ title> &lt;? php print $ styles; ?> &lt;? php print $ scripts; ?> </ head> <body class = "&lt;? php print $ classes;?>" &lt;? php print $ attribute;? >> <div id = "skip-link"> <a href = "# main-content "class =" element-invisible element-focusable "> &lt;? php print t ('Перейти к основному содержанию'); ?> </a> </ div> &lt;? php print $ page_top; ?> &lt;? php print $ page; ?> &lt;? php print $ page_bottom; ?> </ body> </ html>

Если вы посмотрите на строку 26 моего файла html.tpl.php, эта строка &lt;? Php print $ page; ?>, вызывает содержимое файла page.tpl.php. Как и в html.tpl.php, в этом файле также доступно много переменных для использования. С помощью этих переменных можно получить доступ к таким элементам, как имя сайта, логотип, главное меню, хлебные крошки и т. Д. Вы можете проверить полный список Вот , Для чего-то простого, вы можете начать с просто структуры страницы.

<header class = "site-header"> </ header> <div class = "wrapper"> <main class = "main" role = "main"> </ main> <aside class = "sidebar"> </ aside > </ div> <footer class = "site-footer"> </ footer>

Чтобы добавить контент на вашу страницу через интерфейс Blocks, нам нужно объявить регионы в файле page.tpl.php. Каждый регион идентифицируется по имени своего компьютера, которое определено в файле .info. Drupal использует то, что называется Рендеринг массивов выводить контент на вашу страницу. Это то, что все эти &lt;? Php print render ($ page ['REGION_NAME']); ?> Строки делают.

<header class = "site-header"> &lt;? php print render ($ page ['header']); ?> </ header> <div class = "wrapper"> <main class = "main" role = "main"> <a id="main-content"> </a> &lt;? php print render ($ page [ 'содержание']); ?> </ main> &lt;? php if ($ page ['sidebar_first']):?> <aside class = "sidebar"> &lt;? php print render ($ page ['sidebar_first']); ?> </ aside> &lt;? php endif; ?> </ div> &lt;? php if ($ page ['footer']):?> <footer class = "site-footer"> &lt;? php print render ($ page ['footer']); ?> </ aside> &lt;? php endif; ?>

Завершение разметки для отрисовки региона с помощью оператора if, например &lt;? Php if ($ page ['selected']):?> / * Ваш код здесь * / &lt;? Php endif; ?> позволяет нам проверять, есть ли в регионах какой-либо контент или нет, перед рендерингом этого региона. Например, если вы используете Drupal html.tpl.php по умолчанию и не размещаете никакого контента в выделенном регионе, то Drupal даже не будет отображать этот регион на вашей странице.

Преимущество использования регионов заключается в том, что пользователи могут манипулировать контентом непосредственно из интерфейса администратора. Если вы уверены, что элементы будут оставаться неизменными в течение длительного времени, вы можете жестко закодировать их в page.tpl.php. Обычно логотип сайта меняется не очень часто, и это может быть напечатано непосредственно в page.tpl.php.

<header class = "site-header"> &lt;? php if ($ logo):?> <a href="&lt;?php print $front_page; ?> "title =" &lt;? php print t ('Home'); ?> "rel =" home "id =" logo "> <img src =" &lt;? php print $ logo;?> "alt =" &lt;? php print t ('Home');?> "/> </ a> &lt;? php endif; ?> &lt;? php print render ($ page ['header']); ?> </ header> &lt;? php if ($ breadcrumb):?> <div class = "breadcrumb"> &lt;? php print $ breadcrumb; ?> </ div> &lt;? php endif; ?> &lt;? php print $ messages; ?> <div class = "wrapper"> <main class = "main" role = "main"> <a id="main-content"> </a> &lt;? php print render ($ page ['content'] ); ?> </ main> &lt;? php if ($ page ['sidebar_first']):?> <aside class = "sidebar"> &lt;? php print render ($ page ['sidebar_first']); ?> </ aside> &lt;? php endif; ?> </ div> &lt;? php if ($ page ['footer']):?> <footer class = "site-footer"> &lt;? php print render ($ page ['footer']); ?> </ aside> &lt;? php endif; ?>

Я добавил логотип сайта, на котором есть ссылка на главную страницу, а также сухари и сообщения. Обратите внимание, что некоторые переменные должны использовать render (), а некоторые просто выводятся напрямую. Если переменная является массивом, вам нужно использовать render (), если нет, &lt;? Php print $ VARIABLE_NAME?> Работает просто отлично. В случае сомнений вы всегда можете обратиться к файлу page.tpl.php по умолчанию в папке modules / system /, чтобы увидеть, как выглядит реализация по умолчанию.

Теперь вы можете начать CSS-ING

После того, как все решено, вы можете приступить к написанию ваших стилей. В зависимости от того, как вы настроили свой .info-файл, если вы указали, какие таблицы стилей и скрипты будет загружать ваша тема, написание вашей темы аналогично стилю любого другого HTML-сайта. Я собираюсь рассказать о своем рабочем процессе с использованием Sass и Gulp в другом посте, потому что люди, которые хотят писать простой ванильный CSS, абсолютно свободны в этом. Использование Sass, Gulp и других инструментов не является обязательным. Когда вы довольны своей темой, сделайте ее снимок экрана, назовите ее screenshot.png и поместите ее в корень папки вашей темы.

Я также готовлюсь написать сообщение о теме с Drupal 8. Мой инстинкт подсказывает мне, что Drupal 8 действительно не за горами, и я довольно воодушевлен всеми изменениями и улучшениями. CMI, Twig Templating, Symfony и множество других интересных вещей появятся на нашем пути. Это также означает, что нужно узнавать много нового, но это самое интересное, верно? Должен продолжать Drupal-ing.

Это похоже на любой другой HTML-проект, не так ли?
Так что, если вы знакомы с HTML, все будет в порядке, не пугайтесь всего, что есть в <?
Php?
5. Drupal предоставляет множество переменных, которые вы можете просто вызвать с помощью простого <?
Php print $ VARIABLE_NAME?
Lt;?
Org/node/1728208 * /?
Path_to_theme (); ?
Php print $ language-> language;?
Php print $ language- > dir;?