Основы создания Panel Layouts с пользовательскими настройками

Всем привет! Сегодня небольшая заметка о том, как создавать Panel Layouts с возможностью предоставления пользовательских настроек. Как подключить Panel Layout, какие необходимы для этого файлы - все в этой заметке.

Для начала, разумеется, необходимо поставить модуль Panels. Далее в .info-файле вашей темы необходимо указать путь, где будут храниться ваши кастомные Panel Layouts:

  1. plugins[panels][layouts] = panels/layouts

В папке с вашей темой в директории panels/layouts создаем Layout, например в моем случае tavria_global. Стандартный Panel Layout состоит, как правило, из следующих файлов:

  • tavria_global.inc - файл описывающий все основные параметры Layout'а: регионы, название, настройки и т.д;
  • tavria-global.tpl.php - шаблон вывода Layout'а;
  • tavria_global.css - стили;
  • tavria_global.admin.css - стили для административных страниц;
  • tavria_global.png - иконка вашего Layout'а.

Настройки и конфигурация Panel Layout

Вся конфигурация вашего Layout'а находится в вашем .inc-файле:

  1. <?php
  2.  
  3. /**
  4.  * @file
  5.  * Global Site layout.
  6.  */
  7.  
  8. // Plugin definition
  9. $plugin = array(
  10.   'title' => t('Tavria Global'),
  11.   'category' => t('Tavria'),
  12.   'icon' => 'tavria_global.png',
  13.   'theme' => 'tavria_global',
  14.   'css' => 'tavria_global.css',
  15.   'admin css' => 'tavria_global.admin.css',
  16.   'regions' => array(
  17.     'header_logo' => t('Header Logo'),
  18.     'header_menu' => t('Header Menu'),
  19.     'site_content' => t('Content'),
  20.     'site_sidebar' => t('Site Sidebar'),
  21.     'footer_menu' => t('Footer Menu'),
  22.     'footer_logo' => t('Footer Logo'),
  23.     'footer_text' => t('Footer Text'),
  24.     'footer_counters' => t('Footer Counters'),
  25.   ),
  26.   'settings form'    => 'tavria_global_panel_layout_settings',
  27. );
  28.  
  29. /**
  30.  * Дополнительные настройки для layout'а.
  31.  */
  32. function tavria_global_panel_layout_settings($display, $layout, $layout_settings) {
  33.  
  34.   $form = array();
  35.  
  36.   $form['tavria'] = array(
  37.     '#type' => 'fieldset',
  38.     '#title' => t('Tavria Panel Settings'),
  39.     '#collapsible' => TRUE,
  40.     '#collapsed' => TRUE,
  41.   );
  42.  
  43.   $form['tavria']['default_page_layout'] = array(
  44.     '#type' => 'checkbox',
  45.     '#title' => t('Check it to add sidebar (for default pages).'),
  46.     '#default_value' => isset($layout_settings['tavria']['default_page_layout']) ? $layout_settings['tavria']['default_page_layout'] : 0,
  47.   );
  48.  
  49.   return $form;
  50. }

На самом деле мне пришлось не один час потратить, чтобы разобраться, как предоставить пользовательские настройки для кастомного Panel Layout, т.к. никакой структурированной информации я в то время не нашел. Пришлось активно использовать отладчик PHP-кода и смекалку. В итоге нашел, что через ключ массива 'settings form' можно на административной странице шаблона расположить форму с настройками, в которую можно напихать всякого из Drupal Forms API. Выглядит это на деле примерно вот так:

Форма настроек для Panel Layout

Шаблон .tpl.php для Panel Layout

Ну а вот пример шаблона используемого Layout'а, в котором опять же отражено, как использовать данные из формы настроек через переменную $settings:

  1. <?php
  2. /**
  3.  * @file
  4.  * Template for Site Global panel.
  5.  */
  6. ?>
  7.  
  8. <div id="page-wrapper">
  9.   <div id="page" class="clearfix">
  10.     <div id="header">
  11.  
  12.       <?php if (!empty($content['header_logo'])): ?>
  13.       <div class="header-logo">
  14.         <?php print $content['header_logo']; ?>
  15.       </div>
  16.       <?php endif; ?>
  17.  
  18.       <?php if (!empty($content['header_menu'])): ?>
  19.       <div class="header-menu">
  20.         <?php print $content['header_menu']; ?>
  21.       </div>
  22.       <?php endif; ?>
  23.  
  24.     </div>
  25.  
  26.     <div id="main">
  27.  
  28.       <?php if(!empty($settings['tavria']['default_page_layout'])): ?>
  29.       <div class="main-default-pages-wrapper clearfix">
  30.         <div class="main-content-wrapper">
  31.       <?php endif; ?>
  32.  
  33.       <?php if ($content['site_content']): ?>
  34.         <?php print $content['site_content']; ?>
  35.       <?php endif; ?>
  36.  
  37.       <?php if(!empty($settings['tavria']['default_page_layout'])): ?>
  38.         </div>
  39.  
  40.         <?php if ($content['site_sidebar']): ?>
  41.         <div class="sidebar-content-wrapper">
  42.           <?php print $content['site_sidebar']; ?>
  43.         </div>
  44.         <?php endif; ?>
  45.  
  46.       </div>
  47.       <?php endif; ?>
  48.  
  49.     </div>
  50.   </div>
  51.   <div class="page-end"></div>
  52. </div>
  53.  
  54. <div id="footer-wrapper">
  55.   <div id="footer">
  56.  
  57.     <?php if (!empty($content['footer_menu'])): ?>
  58.     <div class="footer-menu">
  59.       <?php print $content['footer_menu']; ?>
  60.     </div>
  61.     <?php endif; ?>
  62.  
  63.     <div class="footer-bottom clearfix">
  64.  
  65.       <?php if (!empty($content['footer_logo'])): ?>
  66.       <div class="footer-logo footer-element">
  67.         <?php print $content['footer_logo']; ?>
  68.       </div>
  69.       <?php endif; ?>
  70.  
  71.       <?php if (!empty($content['footer_text'])): ?>
  72.       <div class="footer-text footer-element">
  73.         <?php print $content['footer_text']; ?>
  74.       </div>
  75.       <?php endif; ?>
  76.  
  77.       <?php if (!empty($content['footer_counters'])): ?>
  78.       <div class="footer-counters footer-element">
  79.         <?php print $content['footer_counters']; ?>
  80.       </div>
  81.       <?php endif; ?>
  82.  
  83.     </div>
  84.  
  85.   </div>
  86. </div>

Файлы стилей для Layout'а

На первый взгляд может показаться странным, что используется аж целых 2 CSS-файла: tavria_global.admin.css и tavria_global.css. Но после того, как вы сверстаете страницы сайта с этим Layout'ом и откроете страницу администрирования - все станет на свои места. Стили из tavria_global.admin.css накладываются поверх стилей tavria_global.css, чтобы имелась возможность сделать и страницу администрирования Panel Pane'ами стильной и юзабельной.

Вот такой небольшой наглядный пример создания и использования пользовательских Panel Layouts.

Добавлено: 29.01.2014
Метки: 
Заметки

Комментарии

Аватар пользователя kalabro
  • ответить
kalabro
4 февраля 2014, 16:56

При включении опции «Check it to add sidebar (for default pages)» лэйаут с этого скриншота обновится и можно будет что-то добавлять в регион site_sidebar?

Аватар пользователя angarsky
  • ответить
angarsky
4 февраля 2014, 17:59
Да, после включения чекбокса и на странице администрирования, и на самой странице сайта будет выводится регион site_sidebar. Это пример с рабочего проекта. Через похожие настройки на другом проекте приходилось даже управлять стилями - удобно и быстро в рамках больших проектов.

Добавить комментарий

              d8b  888           d8888  
              Y8P  888          d8P888  
                   888         d8P 888  
  .d88888    8888  88888b.    d8P  888  
 d88" 888    "888  888 "88b  d88   888  
 888  888     888  888  888  8888888888 
 Y88b 888     888  888  888        888  
  "Y88888     888  888  888        888  
      888     888                       
      888    d88P                       
      888  888P"
Зарегистрируйтесь для добавления материалов без проверки.