Основы создания 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. Это пример с рабочего проекта. Через похожие настройки на другом проекте приходилось даже управлять стилями - удобно и быстро в рамках больших проектов.

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

  .d8888b.    d888              Y88b   d88P 
 d88P  Y88b  d8888               Y88b d88P  
        888    888                Y88o88P   
      .d88P    888    888  888     Y888P    
  .od888P"     888    `Y8bd8P'     d888b    
 d88P"         888      X88K      d88888b   
 888"          888    .d8""8b.   d88P Y88b  
 888888888   8888888  888  888  d88P   Y88b
Зарегистрируйтесь для добавления материалов без проверки.