Способы темизации страниц в Drupal

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

Для темизации Drupal можно использовать как модули, так и вручную создавать файлы шаблонов, которые будут применяться в том или ином случае. Например можно создать шаблон для ноды определённого типа. Предположим что есть нода, которая содержит дополнительные поля. Наша задача упорядочить их. Давайте создадим новый тип ноды, назовём его «Анкета». Добавим к неё наше поле «Пол» ,поле «Имя» и прикрепим 3 изображения.

Я создал все нужные нам поля. Теперь создадим ноду этого типа.

После создания ноды она выглядит примерно так.

Давайте изменим порядок вывода полей, выстроим фото в ряд и вообще более красочно оформим данную страницу.

Для создания шаблона ноды следует создать файл с именем node--<имя типа ноды>.tpl.php и поместить его в папку текущей темы. В папке темы также может быть папка templates – можно поместить в неё. В нашем примере будем её и использовать.

Создадим файл node--anketa.tpl.php .Содержимое файла возьмём из файла node.tpl.php , расположенном в папке modules/node или в папке templates текущей темы.

Добавим в этот файл произвольный html код, чтобы удостовериться, что мы всё делаем правильно.

Очистим кэш друпала и обновим ноду в браузере.

Как видите – всё успешно вывелось. Идём дальше.

В массиве $content находится весь контент ноды – все его поля, авторство и т.д.

Функция render превращает этот массив в конечный html код. Но ничто не мешает нам вывести всю информацию о массиве $content. Выведем её функцией debug.

Напишем debug($content); в файле шаблона для просмотра всех переменных ноды.

Перед началом работы определимся какой вид нам нужен. Давайте возьмём за макет такое расположение информации на странице.

Дату создания анкеты, авторство и комментарии скроем. Можно использовать как блочную, так и табличную верстку.

Создадим каркас – расположим дивы и зададим им стили.

Наши стили будем писать в новом файле. Создадим его в папке темы в подпапке css.

Подключить его можно двумя способами:

  1. Подключим функцией drupal_add_css. Вызовем эту функцию в файле template.php, передав ей в качестве аргумента путь к файлу стилей.
  2. Добавить строчку в info файле темы.

Используем второй способ.

Чистим кэш и проверяем исходный код страницы.

Я назвал файл my_styles.css

Ошибок допущено не было и файл успешно подтянулся.

Основной контент у нас не резиновый.

Дадим под каждое фото 33% ширины основного блока контента.

66% под содержимое ноды и по 33% для имени и пола.

В tpl файле шаблона будем работать в диве с классом content.

Создадим такою верстку.

  1. <div class="user-all-photo">
  2. <div class="user-one-photo">
  3. </div>
  4. <div class="user-one-photo">
  5. </div>
  6. <div class="user-one-photo">
  7. </div>
  8. </div>
  9.  
  10. <div class="user-data">
  11.  
  12. </div>
  13.  
  14. <div class="user-ank">
  15. <div class="user-name">
  16. </div>
  17. <div class="user-sex">
  18. </div>
  19. </div>

Я создал минимальное количество блоков и стилей. Данный этап полностью на вашу фантазию и умения.

И написал следующие стили.

  1. .user-all-photo{
  2. width:100%;
  3. }
  4. .user-all-photo .user-one-photo{
  5. width:33%;
  6. float:left;
  7. }
  8. .user-data{
  9. width:66%;
  10. float:left;
  11. }
  12. .user-ank{
  13. width:33%;
  14. float:left;
  15. }

Помещаем стили в my_styles.css и верстку в node--anketa.tpl.php

Для отображения картинок используем стиль отображения medium, он уже есть в системе. Применяем его в настройках отображения поля.

Теперь в node--anketa.tpl.php в див изображений поместим такой код.

  1. <div class="user-all-photo">
  2. <div class="user-one-photo">
  3. <? print render($content['field_photo'][0]);?>
  4. </?></div>
  5. <div class="user-one-photo">
  6. <? print render($content['field_photo'][1]);?>
  7. </?></div>
  8. <div class="user-one-photo">
  9. <? print render($content['field_photo'][2]);?>
  10. </?></div>
  11. </div>

Проверяем.

Изображения успешно вывелись.

Аналогично функцией render выводим остальной контент.

  1. <div class="user-data">
  2. <? print render($content['body']);?>
  3. </?></div>
  4.  
  5. <div class="user-ank">
  6. <div class="user-name">
  7. <? print render($content['field_name']);?>
  8. </?></div>
  9. <div class="user-sex">
  10. <? print render($content['field_sex']);?>
  11. </?></div>
  12. </div>

Теперь нода выглядит как на нашем макете. Комментарии и авторство нам не нужно – удаляем или закомментируем строки print render($content['comments']); и print $submitted;

Всё бы ничего, но превью ноды будет неказистым. Из-за того, что ширина блока с классом user-data имеет ширину 66%.

Для определения того, что мы видим в браузере – тизер или полностью ноду в файле шаблона ноды есть переменная $teaser. Если она равна 1 – значит перед нами тизер ноды. Напишем в шаблоне простое условие.

То есть для тизера выводим только текст ноды, а для просмотра – всю нашу верстку. Данный момент также на ваше усмотрение. Вместо текста можно вывести фото и имя, например.

Другие элементы сайта темизируются подобным образом. Они имеют шаблоны с интуитивно понятным именем, оканчивающимся на .tpl.php

В этих шаблонах обычно задокументированы все доступные в них переменные. Теперь вы понимаете по какому принципу можно темизировать шаблон.


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

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

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

    Добрый вечер. А, можно вопрос не совсем в тему, скажите, а как можно создать выпадающие меню не использую модулей, а полностью самому, программно?

    Ответить

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

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

      Ответить

  2. Гость 2015/03/22

    Спасибо за публикацию. Есть ли подобный материал как вывести программно содержимое массива $content файла page.tpl.php но для drupal 6?

    Ответить

    1. Админ 2015/03/23

      А где именно хотите выводить?
      Можете попробовать так:

      1. $node = node_load(123);
      2. $node_view = node_view($node);
      3. print $node_view;

      Ответить

      1. Гость 2015/03/23

        Я уже решил свой вопрос. Там проблема была в том что надо было не Page.tpl.php темизировать а node.tpl.php.

        Сейчас пытаюсь в шестой версии темизировать блок созданный через views. Очень трудно найти материалы толковые. Поставьте пожалуйста подписку на комменты еле еле нашел ваш сайт что бы посмотреть ваш ответ.

        Ответить

        1. Админ 2015/03/24

          http://php-include.ru/stati/temizatsiya-shablona-views - там объяснено как использовать шаблоны вьюса.
          Да, подписка у меня была, но потом что-то убрал её. Верну.

          Ответить

  3. Гость 2014/03/20

    Сделал всё по инструкции! Получилось! затем вспомнил что не добавил ещё несколько полей. Добавил вывод в тпл и стили в ксс но вновь-добавленные поля не отображаются. Кеш разумеется чистил.. В чём может быть проблема?

    Ответить

    1. Админ 2014/03/24

      А эти поля в материале заполнены?
      Поставьте модуль devel и напишите в шаблоне dpm($content); - и сразу будет ясно какое данные есть на странице и как из выдёргивать.

      Ответить

  4. Гость 2014/01/29

    спасибо большое - во многом помогло!!!!!
    только, единственно, удалось добиться реального вывода контента по полям не через переменную $content, а через $node:
    $node->field_descript[0]['view']
    А вот дальше обнаружился затык: в админке все выводится, как и было задумано. А выходишь, становишься неавторизованным сторонним юзером - все пропадает!!!!!
    Может кто подскажет идею, где искать недоступность темплейта ноды для anonymous user? Что нужно разрешить такому юзеру? Или тут вообще не в разрешениях дело? Друпал-6.

    Ответить

    1. Админ 2014/01/31

      Применимость шаблонов никогда не зависела от пользователя. Я на 90% уверен что дело в кэше. Попробуйте отключить кэш, очистить его и посмотреть - будет ли всё корректно работать под анонимом.
      Потом включить обратно.

      Ответить

      1. Гость 2014/01/31

        ага, спасибо, с кэшем уже поигралась как раз.
        Убедилась, что темплейт ноды подцепляется (принтов и дивов понаставила), а проблема в том, что переменная $node не видна, не опознается под анонимом...
        Никакие функции имятемы_препроцесс_нода() некуда не вписывала. Может в этом проблема?

        Ответить

        1. Админ 2014/01/31

          Может материал не опубликован? Или аноним не имеет права просматривать этот тип материала?

          Ответить

          1. Гость 2014/01/31

            как раз проверяла, что опубликовано!
            А вот с правами просмотра... стыдно конечно - но именно здесь и крылась засада! ))))))))) Спасибо огромное!!!!!!!!!!!!!!!!!!

            Ответить

            1. Админ 2014/02/05

              Друпал он такой)))

              Ответить

  5. Гость 2013/11/22

    Отличная статья, спасибо.

    Ответить

  6. Гость 2013/10/11

    А если фотографий не три, а 23. Как их выстроить по 5 фотографий в ряд?

    Ответить

    1. Админ 2013/10/12

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

      1. $i=0;
      2. while($i<count($content['field_photo'])){
      3. print render($content['field_photo'][$i]);
      4. $i++;
      5. if ($i%5 == 0) {
      6. print '<hr />';
      7. }
      8. }

      Ну и css`ом картинки в ряд выставляй, свойством float:left;

      Ответить

  7. Гость 2013/07/23

    > Давайте создадим новый тип ноды, назовём его «Анкета».
    > Создадим файл node--anketa.tpl.php
    Можно пояснить как Вы связали нод с файлом? Имена-то у них разные.

    Ответить

    1. Админ 2013/07/24

      Дело в том, что все многие сущности в друпале имеют человекопонятные и машинные имена.
      Вот создали вы тип материала, скажем, "Агентство".
      Затем откройте страницу создания материала этого типа.
      В урле будет что-то типа /node/add/agentstvo - последний аргумент и будет машинным именем. И шаблон будет иметь имя node--agentstvo.tpl.php
      В шестой версии друпала машинное имя надо задавать вручную, а семерка сама транслитерирует человекопонятное имя в машинное.

      Ответить

      1. Гость 2013/07/24

        Спасибо! Упустил этот факт.

        Ответить

  8. Гость 2013/04/18

    Спасибо! Очень помогло разобраться с темизацией.

    Ответить

  9. Гость 2013/01/27

    спс

    Ответить

  10. Гость 2012/07/27

    Почему то блогеров никогда не интересует, как будет код выглядеть. Учат выводить информацию, а о том что HTML код страшный получается из за рендера не думают.

    Ответить

    1. Админ 2012/07/28

      Страшный конечный html код в браузере?Ничего он не страшный.Несколько вложенных дивов-это не страх вовсе,и очень удобно при темизации через CSS.

      Ответить

  11. Гость 2012/07/14

    Один вопрос возник: а разве не должно быть так:

    Ответить

    1. Админ 2012/07/14

      Любой php код должен открываться так

      1. <?php
      и закрываться так
      1. ?>

      Но если в настройках php(в php.ini) включена директива short_open_tag - то открывать php код можно и просто кавычкой
      1. <?

      А
      1. print
      - это обычная функция в php, и располагаться она должна между открывающими и закрывающими кавычками.

      Ответить

      1. Гость 2012/07/16

        Спасибо! Теперь всё понял.

        Ответить

        1. Админ 2012/07/16

          Пожалуйста! Обращайтесь,если что)))

          Ответить

  12. Гость 2012/07/14

    Спасибо! Как раз то, что давно искал. Очень полезная информация для новичков в Drupal

    Ответить

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

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

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