Пошаговое руководство по разработке пользовательских тем в Drupal 7

  1. Структура тематической папки
  2. Обзор тематических файлов>
  3. ... и вот как мы это делаем
  4. Шаг I: Создание файла .info
  5. Шаг II: Создание файла page.tpl
  6. Шаг III: Создание style.css
  7. Шаг IV: добавление JavaScript
  8. Расширенные темы

Тема Drupal - это набор файлов, который обеспечивает уровень представления для веб-сайта Drupal. По моему мнению, пользовательский интерфейс и пользовательский интерфейс в сочетании с тематикой так же важны, как и архитектура бэкэнда. Это не означает только написание файлов style.css со случайными HTML-разметками. Вы можете легко создать основную тему для своего веб-сайта, так как все, что вам нужно, это файл .info и файл css. Файлы могут быть добавлены в тему в зависимости от ваших требований, чтобы иметь лучший контроль при выполнении того, что вы хотите, чтобы ваш конечный пользователь увидел.

Здесь я делюсь своим первым опытом создания темы Drupal, которая, я надеюсь, будет полезна для начинающих веб-разработчиков.

Структура тематической папки

Первое, о чем вам следует знать, - это структура папок в Drupal 7. Основные темы, поставляемые с установкой Drupal, помещаются в каталог тем корневой папки. Желательно разместить все дополнительные темы в каталоге sites / all / themes . В то же время рекомендуется помещать все загруженные темы, называемые темами, в отдельную папку, которая называется вместе с пользовательскими темами, в папку, называемую пользовательскими.

Вот как будет выглядеть типичная структура папок:

.. .. сайты .. все… .themes… ... contrib …… ..bluemarine …… ..omega… ... custom …… ..blue …… ..blue_admin

Основное изобразительное представление темы Бартика.

Источник: https://www.drupal.org/node/171194

Обзор тематических файлов>

Файлы, связанные с созданием темы, представляют собой смесь «одного» текстового файла (то есть файла .info), сценария PHP, файла Javascript и файла каскадных таблиц стилей, т.е. файла CSS.

Из всех этих файлов вам нужен файл .info, который сообщает Drupal о вашей теме. Хотя также необходим файл CSS, без которого тема будет выглядеть как куча черного текста и изображений, добавленных на веб-страницу. Все остальные файлы должны сделать тему более привлекательной и настроить пользовательский интерфейс в соответствии с палитрой. Ниже приведен список файлов, которые может содержать тема:

  • .info - Обязательный файл, который предоставляет информацию о теме.
  • html.tpl.php - отображает основную структуру html одной страницы Drupal.
  • page.tpl.php - основной шаблон, который определяет содержание на большинстве страниц.
  • style.css - файл CSS, который устанавливает правила CSS для шаблона.
  • node.tpl.php - Этот файл определяет содержимое узлов.
  • block.tpl.php - определяет содержимое в блоках.
  • comment.tpl.php - определяет содержание в комментариях.
  • template.php - его можно использовать для хранения препроцессоров для генерации переменных до их слияния с разметкой внутри файлов .tpl.php.
  • theme-settings.php - вы можете изменить всю форму настроек темы.
  • logo.png - Ваш логотип, если вы его используете.
  • screenshot.png - это скриншот вашей темы, который используется в панели администратора и в настройках учетной записи пользователя, если вы включили более одной темы, чтобы посетители могли выбирать, какую тему они хотят использовать.

... и вот как мы это делаем

Теперь, когда у вас есть представление о файлах, давайте начнем с создания основной темы с пользовательскими областями, ползунком CSS3 и выпадающим меню суперфиши. Я собираюсь провести вас через процесс шаг за шагом, основываясь на том, как я это сделал в первый раз.

Шаг I: Создание файла .info

Файл .info представляет собой статический текстовый файл, в котором вы можете предоставить информацию о теме и указать CSS и javascript, которые вы хотели бы включить. Вы также можете указать функции и параметры переключения, хотя это совершенно необязательно. Вот как будет выглядеть файл .info:

name = Blue description = A Custom Drupal 7 Theme core = 7.x region [header] = Области заголовка [banner] = Области баннера [content] = Области содержимого [sidebar] = Области боковой панели [footer] = Нижний колонтитул

Вы можете заметить, что нужны только имя и ядро, а все остальное необязательно. Итак, создайте текстовый файл, введите вышеуказанные строки и сохраните как YOUR_THEME_NAME.info. Теперь ваша тема появится под списком тем. Включите и установите значение по умолчанию для использования темы.

Давайте посмотрим на макет темы.

Давайте посмотрим на макет темы

PS: вы не получите точно такой же результат, так как вы не применили CSS к регионам.

Шаг II: Создание файла page.tpl

page.tpl - все о том, как будет выглядеть страница друпала, где и как вы хотите отобразить содержимое и регионы.

Вот как вы это начали:

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

Шаг III: Создание style.css

name = Blue description = A Drupal 7 Тема для тренировочного ядра = 7.x таблицы стилей [все] [] = области css / style.css [заголовок] = области заголовка [баннер] = области баннера [содержимое] = области содержимого [боковая панель] = Боковые панели [нижний колонтитул] = нижний колонтитул

Чтобы добавить файл CSS в вашу тему, вы должны включить строку

таблицы стилей [все] [] = css / style.css.

Вы должны убедиться, что указали правильный путь. Вы можете делать стилизацию своей темы в соответствии с вашим дизайном. Вот как я написал свой CSS:

Шаг IV: добавление JavaScript

name = Blue description = A Drupal 7 Тема для практики core = 7.x таблицы стилей [все] [] = сценарии css / style.css [] = регионы js / theme.js [заголовок] = регионы заголовков [баннер] = регионы баннеров [содержимое] = области содержимого [боковая панель] = области боковой панели [нижний колонтитул] = нижний колонтитул

scripts [] = js / theme.js

Вы должны использовать Javascript и CSS для правильной работы вашего выпадающего меню. Есть несколько плагинов Javascript на выбор. Для своей темы я выбрал плагин Superfish JS. Вы можете реализовать библиотеку js двумя способами, один из них - добавить библиотеку js из сети в

Я выбрал второй вариант, чтобы я мог работать над своей темой, даже когда я не в сети. Но добавление скрипта само по себе не сделает этого, нужно добавить и CSS:

Вот скриншот темы:

Отказ от ответственности: Bloogy - это не название темы, потому что мне не понравилось название темы, которое я создаю «Blue», и очень неохотно меняло название везде.

Расширенные темы

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

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