Основы создания 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.

Комментарии

Аватар пользователя kalabro
kalabro

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

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

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

            .d8888b.   d8b  888      
d88P Y88b Y8P 888
Y88b. d88P 888
88888b. "Y88888" 888 888
888 "88b .d8P""Y8b. 888 888
888 888 888 888 888 888
888 d88P Y88b d88P 888 888
88888P" "Y8888P" 888 88888888
888
888
888
Зарегистрируйтесь для добавления материалов без проверки.