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

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

     d8888   Y88b   d88P            888       888 
    d8P888    Y88b d88P             888   o   888 
   d8P 888     Y88o88P              888  d8b  888 
  d8P  888      Y888P      .d8888b  888 d888b 888 
 d88   888      d888b     d88P"     888d88888b888 
 8888888888    d88888b    888       88888P Y88888 
       888    d88P Y88b   Y88b.     8888P   Y8888 
       888   d88P   Y88b   "Y8888P  888P     Y888
Зарегистрируйтесь для добавления материалов без проверки.