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

Опубликовано 2012.04.15

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

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

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

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

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

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

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

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