Создание своей темы в Drupal

Опубликовано 2012.04.15 в разделе Drupal

Создать тему с нуля можно. Но это очень большая и трудоёмкая задача. Поступать так стоит лишь в том случае, когда вам нужны какие-то специфичные потребности, что-то уникальное.

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

Однако создать каркас темы, которая будет работать можно достаточно быстро. Для этого нам потребуется создать папку темы, info файл темы(как в модуле), и несколько шаблонов.

Давайте назовём тему my_theme.Папку с темой помещаем в sites/all/themes.

В файле my_theme.info пишем.

  1. name = my_theme
  2. description = Моя первая тема
  3. core = 7.x
  4.  
  5. regions[content] = Content
  6. regions[sidebar_first] = Sidebar First
  7. regions[footer] = Footer
  8.  
  9. stylesheets[all][] = css/style.css

Таким образом, мы определим 3 региона и подключим 1 файл со стилями.

Далее создаем папки css и templates.

Теперь делаем шаблон страницы и ноды. Из курса темизации вы должны помнить, как они называются.

Создаем шаблон страницы. Называем его page.tpl.php

  1. <div id="page_wrapper">
  2. <header id="header" > <!-- Шапка сайта -->
  3. <?php if ($site_name || $site_slogan || $logo): ?>
  4. <!-- если задано имя сайта, слоган или лого выводим блок заголовков -->
  5. <hgroup>
  6. <?php if ($logo): ?> <!-- Если задан логотип - выводим логотип -->
  7. <a title="<?php print t('Home'); ?>" rel="home" href="<?php print $front_page; ?>">
  8. <img src="<?php print $logo; ? />" alt="<?php print t('Home'); ?>"/></?php></?php></a>
  9. <?php endif; ?>
  10. <?php if ($site_name): ?> <!-- Если заданно имя сайта - выводим -->
  11. <h1><a title="<?php print t('Home'); ?>" rel="home" href="<?php print $front_page; ?>">
  12. <?php print $site_name; ?></?php></?php></a></h1>
  13. <?php endif; ?>
  14. <?php if ($site_slogan): ?> <!-- Если задан слоган сайта - выводим -->
  15. <h2><?php print $site_slogan; ?></?php></h2>
  16. <?php endif; ?>
  17. </?php></?php></?php></?php></?php></?php></hgroup>
  18. <?php endif; ?>
  19. </?php></?php></header>
  20. <aside id="left_column"> <!-- Левая колонка c регионом sidebar_first -->
  21. <?php print render($page['sidebar_first']); ?>
  22. </?php></aside>
  23. <div id="article_wrapper" > <!--Правая колонка-->
  24. <?php print $breadcrumb; /* Выводим "Выводим "хлебные крошки" */ ?>
  25. <?php print $messages; /* Выводим сообщения системы */ ?>
  26. <!-- Заголовок с суффиксом и преффиксом -->
  27. <?php print render($title_suffix); ?>
  28. <?php if($title): ?> <h1><?php print $title; ?></?php></h1><?php endif; ?>
  29. <?php print render($title_suffix); ?>
  30. <?php print render($tabs); /* Выводим табы */ ?>
  31. <?php print render($page['content']); /* Выводим регион "контент" */ ?>
  32. </?php></?php></?php></?php></?php></?php></?php></?php></div>
  33. <footer> <!-- подвал сайта с регионом footer -->
  34. <?php print render($page['footer']); ?>
  35. </?php></footer>
  36. </div>

О том, какие переменные можно использовать – можно посмотреть в файле  modules/system/page.tpl.php

Аналогично создаем node.tpl.php

  1. <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  2. <?php print render($title_prefix); ?>
  3. <?php if (!$page): ?>
  4. <h2<?php print $title_attributes; ?> class="node_title">
  5. <a href="<?php print $node_url; ?>"><?php print $title; ?></?php></a>
  6.  
  7. <?php endif; ?>
  8. <?php print render($title_suffix); ?>
  9. <?php if($display_submitted || !empty($content['field_tags'])): ?>
  10. <div class="meta_wrapper">
  11. <?php if ($display_submitted): ?>
  12. <span class="meta" role="contentinfo">
  13. <?php print $submitted; ?>
  14. </?php></span>
  15. <?php endif; ?>
  16. <?php if (!empty($content['field_tags'])): ?>
  17. <?php print render($content['field_tags']); ?>
  18. <?php endif; ?>
  19. </?php></?php></?php></?php></?php></div>
  20. <?php endif; ?>
  21. <article <?php print $content_attributes; ?>>
  22. <?php
  23. hide($content['comments']);
  24. hide($content['links']);
  25. hide($content['field_tags']);
  26. print render($content);
  27. ?>
  28. </?php></article>
  29. <div>
  30. <?php print render($content['links']); ?>
  31. </?php></div>
  32. <?php if ($content['comments'] && $page): ?>
  33. <section class="comments">
  34. <?php print render($content['comments']); ?>
  35. </?php></section>
  36. <?php endif; ?>
  37. </?php></?php></?php></?php></?php></?php></h2<?php></?php></?php></?php></?php></div>

И block.tpl.php

  1. <div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
  2.  
  3. <?php print render($title_prefix); ?>
  4. <?php if ($block->subject): ?>
  5. <h2<?php print $title_attributes; ?>><?php print $block->subject ?>
  6. <?php endif;?>
  7. <?php print render($title_suffix); ?>
  8.  
  9. <div class="content"<?php print $content_attributes; ?>>
  10. <?php print $content ?>
  11. </?php></div>
  12. </?php></?php></?php></h2<?php></?php></?php></?php></?php></div>

 

Файлы block.tpl.php, page.tpl.php и node.tpl.php кладем в подпапку templates нашей темы.

Выглядеть это будет так.

Также можно посмотреть шаблоны в других папках системных модулей и применить в своей теме. Главное – после каждого перекрытия системного шаблона необходимо очистить кэш друпала.

И в папке css создаем файл style.css следующего содержания.

  1. #page_wrapper{
  2. margin: 0 auto;
  3. width:800px;
  4. }
  5. width:100%;
  6. background: #87d69e;
  7. }
  8. #left_column{
  9. float:left;
  10. width:200px;
  11. background: #d4b354;
  12. }
  13. #article_wrapper{
  14. margin-left:220px;
  15. padding:0 10px;
  16. }
  17. article {
  18. margin-right:25px;
  19. margin-left: 5px;
  20. }
  21. nav{
  22. text-align:center;
  23. margin: 10px;
  24. border-bottom: 1px solid #3399CC;
  25. }
  26. ul.main-menu{
  27. list-style-type: none;
  28. font-size: 30px;
  29. margin:0;
  30. padding:0;
  31. text-transform:lowercase;
  32. }
  33. ul.main-menu li{
  34. display: inline-block;
  35. margin:0;
  36. padding:0;
  37. }
  38. ul.main-menu li a{
  39. display:block;
  40. margin:0;
  41. padding:5px;
  42. text-decoration:underline;
  43. }
  44. ul.main-menu li a:hover{
  45. color: #3399CC;
  46. }
  47. ul.main-menu li a.active:hover{
  48. color:#444;
  49. }
  50. .breadcrumb {
  51. padding: 5px;
  52. margin:0;
  53. font-size: 8pt;
  54. font-style: italic;
  55. }
  56. .page_title{
  57. color: #01637E;
  58. }
  59. .node_title a{
  60. display:block;
  61. margin-right:25px;
  62. padding:5px 5px 0 10px;
  63. color: #01637E;
  64. background: rgba(102,153,204, 0.5);
  65. border-radius:8px;
  66. -webkit-border-radius:8px;
  67. -moz-border-radius:8px;
  68. -khtml-border-radius:8px;
  69. }
  70. .node_title a:hover{
  71. background: rgba(102,153,204, 0.9);
  72. }
  73. .field-type-taxonomy-term-reference {
  74. border-left: solid 1px #3399CC;
  75. display: inline;
  76. margin-left: 3px;
  77. padding: 0 0 0 3px;
  78. }
  79. ul.links li a{
  80. padding: 2px 4px;
  81. display:inline-block;
  82. font-size:10pt;
  83. background: rgba(102,153,204, 0.5);
  84. border-radius:4px;
  85. -webkit-border-radius:4px;
  86. -moz-border-radius:4px;
  87. -khtml-border-radius:4px;
  88. }

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

И напоследок поместим в папку темы логотип,  он должен называться logo.png .Размеры произвольны. Я взял уже готовый рисунок.

Теперь папка темы выглядит следующим образом.

Заходим в настройки тем, выбираем нашу тему и смотри что получилось.

Как видите – тема успешно работает. Стили, блоки и регионы есть. Но для того, чтобы тема была вменяемой – придется потратить на неё большое количество времени .


17 Комментариев

Оставить комментарий

  1. Гость 2016/11/19

    Здравствуйте!
    Везде встречаю выражение "в файле темы template.php реализуется логика темы". Не совсем понятно какая именно. В этом файле доступные стандартные объекты Друпал, например нода? В нем можно реализовать код, реализуемый в модуле, или сниппете? Или там есть какие-то особые правила реализации?

    Ответить

    1. Админ 2016/11/21

      Добрый день.
      В этом файле можно препроцессить страницы, ноды, хлебные крошки, филды и всё что касается темизации.
      Нода - это глобальная переменная и по-идее она доступна во всех файлах, нужно лишь в начале функции написать global $node; Если не получится - то смотреть в $vars, например:

      1. //В template.php, вместо template имя функции
      2. function template_preprocess_node(&$variables) {
      3. $node = $variables['node'];
      4. }

      Нет, функционал лучше надо писать в модулях. Некоторые вещи можно конечно реализовать как в теме, так и в модулях, но как правило всё пишут в модулях.

      Ответить

  2. Гость 2016/11/06

    Здравствуйте!
    Не знаю как правильно сформулировать вопрос, но попробую ....
    Можно ли в друпал 7 получить объект ноды вне файлов шаблонов темы? Т.е. например при обращении к урл node/1 подключались JS и CSS файлы (т.е. шаблон html.tpl.php таки придется задействовать) формировались объекты node, user и т.д. , но далее ничего не выводилось, т.е. белый экран.
    Для чего это нужно?... . Ну например чтобы навесить какой нибудь frontend интерфейс, используя в качестве backend_a друпал.

    Ответить

    1. Админ 2016/11/08

      Добрый день.
      Если только для этого - можете убрать всю лишнюю вёрстку из html.tpl.php в папке темы.
      А вообще, если полностью фронтенд отделить от друпала, то:
      1) Создаёте на сервере 2 папки - в одной друпал, во второй фронт(любой фреймворк, к примеру)
      2) Создаёте 2 хоста backend.site.com - смотрит на друпал и site.com - на фронт.
      3) бекенд закрываете базовой авторизацией и сидите там под админом, пользуетесь админкой друпала
      4) Фронту говорите в каких таблицах что лежит.

      Таким образом фронт работает чисто на read-only БД друпала.
      Данный блог, кстати, работает именно так. Админка на друпал, а фронт на Laravel

      Ответить

      1. Гость 2016/11/09

        Благодарю!
        Очень ценная для меня информация.

        Ответить

  3. Гость 2013/03/29

    Drupal - это такая штука, которую надо упорно, долго и нстойчиво ковырять, если хотите что-то понять. У меня на изучение админки ушло 8 месяцев. Сейчас принялся за темизацию. Надеюсь разобраться, готовлюсь к кровопролитному и упорному сражению. На zvirec.com есть видеокурсы, там что-то можно понять, тут тоже неплохо автор излагает, есть хоть какая-то система. Вот так, склеивая по кусочкам, можно разобраться.

    Ответить

  4. Гость 2012/12/25

    Выдал ошибочку
    Parse error: syntax error, unexpected T_IF in /Applications/XAMPP/xamppfiles/htdocs/mebel/sites/all/themes/mebel4u/templates/page.tpl.php on line 22:

    Ответить

    1. Админ 2012/12/26

      А что у вас в строках 20-24 ?

      Ответить

  5. Гость 2012/05/09

    Убрал version = 7.13, почистил кэш, но ничего не дало. Всё так же осталось.
    Так с Вами можно через скайп связатся или это исключено?
    Со мной не нужно сидеть и создавать мою тему. Я хотел бы научится этому сам. Мне нужно просто обьяснить, что я не так делаю и почему возникают ошибки.
    Уроков по этому делу много в инете, но читать и смотреть это одно, а когда возникают проблемы, то спросить не у кого. В этом то вся беда.

    Ответить

  6. Гость 2012/05/09

    Ну а что может быть в инфофайле, там вроди ничего сложного.

    name = immobilien
    description = immobilien
    version = 7.13
    core = 7.x
    engine = phptemplate

    stylesheets[all][] = css/immobilien.css
    scripts[] = js/script.js

    regions[help] = Help
    regions
    regions[header] = Header
    regions[header_line] = Header Line
    regions[navi_language] = Navigation Language
    regions[navi_menu] = Navigation Menu
    regions[content] = Content
    regions[content_search] = Content Search
    regions[footer] = Footer

    По моему тут всё в порядке.
    Если Вас не затруднит, можно было бы с Вами лично связатся для решения проблемы, через скайп например. Ну если конечно Вы знаете как помочь.

    Ответить

    1. Гость 2013/04/19

      У тебя ошибка - не закрыт один regions, который после Help. Решение проблемы с Notice: Undefined index: name... - в кодировке файла .info, исправляется перекодированием в ANSI (в notepad++, например)

      Ответить

    2. Админ 2012/05/09

      Попробуй убрать version = 7.13
      А так тут сложно что-то сказать..нужно полностью смотреть тему.. И в процессе её создания всегда смотреть что получается и на каких этапах валятся ошибки.
      Проще готовую тему переделать под себя.

      Ответить

  7. Гость 2012/05/08

    Ну можно конечно.
    Сообщение об ошибке
    • Notice: Undefined index: name в функции system_sort_modules_by_info_name() (строка 925 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_sort_modules_by_info_name() (строка 925 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_sort_modules_by_info_name() (строка 925 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_sort_modules_by_info_name() (строка 925 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_sort_modules_by_info_name() (строка 925 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Warning: uasort() [function.uasort]: Array was modified by the user comparison function в функции system_themes_page() (строка 131 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_themes_page() (строка 140 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_themes_page() (строка 158 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_themes_page() (строка 159 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции system_themes_page() (строка 182 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).
    • Notice: Undefined index: name в функции theme_system_themes_page() (строка 2708 в файле Z:\home\3immobilien.de\www\modules\system\system.admin.inc).

    И ещё после очистке кэша выдаёт несколько.

    Сообщение об ошибке
    • Notice: Undefined index: name в функции block_menu() (строка 146 в файле Z:\home\3immobilien.de\www\modules\block\block.module).
    • Notice: Undefined index: name в функции block_menu() (строка 165 в файле Z:\home\3immobilien.de\www\modules\block\block.module).
    • Notice: Undefined index: name в функции system_menu() (строка 647 в файле Z:\home\3immobilien.de\www\modules\system\system.module).

    Ответить

    1. Гость 2013/04/19

      Решение отписал выше в ответе на предыдущее сообщение, проблема в кодировке .info

      Ответить

    2. Админ 2012/05/09

      Возможно в info файле темы есть ошибки.Чтото с блоками и меню. Так сразу не скажешь..

      Ответить

  8. Админ 2012/05/08

    А что за ошибки? Можно скрин?

    Ответить

  9. Гость 2012/05/08

    Здравствуйте!
    Прочитал Вашу статью, ещё предварительно посмотрел видеоуроки по созданию собственной темы, после чего попытался создать свою на Базе Zen.
    Не могу понять, толи я чтото не так делаю, толи не хватает чего-то. Тема то вывелась и показывает, но вместе с ней появляются куча ошибок (((
    Помогите пожалуста разобратся в чём дело.

    Ответить

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте стопку книг