Основы создания 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   .d8888b.    .d8888b.            
    Y8P  d88P  Y88b  d88P  Y88b           
         Y88b.       888    888           
   8888   "Y888b.    Y88b. d888   .d8888b 
   "888      "Y88b.   "Y888P888  d88P"    
    888        "888         888  888      
    888  Y88b  d88P  Y88b  d88P  Y88b.    
    888   "Y8888P"    "Y8888P"    "Y8888P 
    888                                   
   d88P                                   
 888P"
Зарегистрируйтесь для добавления материалов без проверки.