Розширене тематизація меню в Drupal 7


15

Я круїз по Інтернету, і зовсім не очевидно, як тематизувати власні меню. Я годинами шукав і не знайшов жодної публікації, яка б ілюструвала процес, від початку до кінця, створення меню та налаштування його результатів. Схоже, це багатоетапний процес:

  1. Створіть меню через інтерфейс Drupal.
  2. Створіть у вашому template.phpфайлі функцію теми для тематизації результатів.
  3. Розкрийте це меню файлом шаблону (якось), додавши його як змінну.
  4. Викличте themeфункцію в меню у файлі шаблонів.

1 досить легко зробити, проблеми, з якими я стикаюся, - це з 2, 3 та 4. Переглядаючи шаблон сторінки за замовчуванням, я бачу, що він відкриває головне меню в змінній $main_menu. Пізніше на сторінці ви можете побачити функцію theme('links__system_main_menu', array('links' => $main_menu..., а це означає, що вона шукає десь відповідну тематичну функцію і використовує її для отримання результатів.

Я знаю, якщо я розміщую function theme_links__system_main_menu(&$variables) {...}у своєму шаблоні.php файл Drupal буде використовувати цю функцію на відміну від function theme_menu_links(&$variables) {...}.

Чого я не знаю, це те, як Drupal пов'язує користувальницьке меню, яке я створив за допомогою цієї функції. Скажімо, наприклад, що я створив меню з назвою My Menu. Чи можу я створити наступну функцію у своєму template.phpфайлі та тематизувати вихід для цього меню?function theme_links__system_my_menu(&$variables) {...}

Крім того, як зробити це користувацьке меню доступним для файлу шаблону? Як Drupal виставляє $main_menuзмінну page.tpl.php?

Я думаю, що головне, що мені тут не вистачає, - це як вставити змінну, яка представляє моє користувацьке меню, на сторінку шаблону. Здебільшого, хоча я повністю розгубився з тим, що робити після створення меню.

Дякую за допомогу.

EDIT: Напевно, слід опублікувати те, що я роблю. Відповідно до мого коментаря до BetaRide нижче, мені потрібно ввести індивідуальний HTML в <li>елементи пунктів меню. Зокрема, я додаю піктограми Twitter Bootstrap.

Відповіді:


13

Реалізація меню Drupal дещо особлива, вона не завжди працює так, як здається.

Ви можете переглянути основну реалізацію template_preprocess_page () про те, як посилання на головне меню додаються як змінна до шаблону сторінки. Вам доведеться трохи детальніше ознайомитись з документами API, але функцією, яку ви хочете викликати у вашій реалізації topic_preprocess_page (), є menu_navigation_links () , яка поверне масив посилань у меню.

Подивившись на рядок 106 файлу page.tpl.php ядра Drupal , ви можете побачити, як посилання на головне меню тематизовані в шаблоні, зателефонувавши до функції topic ( ) з гачком 'links__system_main_menu'.

Теоретично ця реалізація повинна бути спроможна дублюватись із користувацьким меню, дотримуючись стандартних угод про іменування. Отже, у template.php ви можете мати:

function THEMENAME_preprocess_page(&$variables){
  $variables['custom_menu'] = menu_navigation_links('menu-custom-menu');
}

function THEMENAME_links__menu_custom_menu(&$variables){
 //custom theme function here
}

а в page.tpl.php ви б додали щось подібне:

<?php print theme('links__menu_custom_menu', array('links' => $custom_menu, 'attributes' => array('id' => 'custom-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Custom menu'))); ?>

Однак додавати нестандартне меню у вигляді змінної на шаблоні сторінки не потрібно. Ви можете легко розмістити блок спеціального меню в потрібний регіон через інтерфейс адміністратора Drupal. Також ви можете змінити налаштування сайту для джерела головного меню , фактично замінивши стандартну змінну $ main_menu у page.tpl.php своїм власним меню.

EDIT: Я просто бачу ваше доповнення щодо вашої кінцевої мети - просто додати деякі користувальницькі HTML в елементи меню для піктограм. Залежно від того, як ви додаєте ці піктограми, існує кілька різних варіантів модуля Drupal.

Піктограми меню - дозволяє завантажувати зображення через налаштування пункту меню і автоматично генерує CSS (налаштовується за допомогою шаблону), що додає зображення як фон у пункт меню.

Атрибути меню - дозволяє додавати спеціальний клас до кожного пункту меню через його налаштування в адміністраторі. Після додавання унікального класу до кожного пункту меню ви можете використовувати CSS, щоб додати піктограму до пункту меню, або використовувати javascript для введення додаткового HTML у пункт меню.


Це, здається, прекрасно відповідає на всі мої запитання. Це чудова відповідь. Я спробую це негайно.
Лестер Пібоді

1
Це спрацювало, але я сприйняв одностайну думку всіх, і я не використовував цей метод. Я використовував модуль «Атрибути меню», який ви запропонували та призначив унікальним ідентифікаторам певним пунктам меню, а потім застосував jQuery для введення HTML безпосередньо там, де мені це потрібно. Дякую за поради. +1
Лестер Пібоді

"Ви можете легко розмістити блок користувацького меню в потрібний регіон через інтерфейс адміністратора Drupal" ++. Я вважаю це рішення набагато простішим.
cdmo

1

Ви можете заглянути в модуль Nice Nice . Ось цитата про це (зі сторінки проекту модуля):

... вмикає меню, що розширюється / вправо / вліво. Він використовує лише CSS для більшості браузерів, з мінімальним Javascript для IE6. (Версія 2 використовує плагін Superfish jQuery для всіх браузерів, з можливістю вимкнути JS, і повертається до CSS лише для браузерів, які можуть ним працювати.)

Наразі можливі три стилі / типи меню: горизонтальний, меню вниз; вертикальний, меню літати ліворуч; вертикальний, меню літати праворуч. Існує сторінка підручника, яка пропонує список сайтів, які використовують приємні меню .

Nice Menus створює блоки, які можуть бути пов’язані з будь-яким наявним меню сайту, яке можна розмістити там, де звичайні блоки можуть бути розміщені в темі. Для тематичних груп також можна тематизувати меню як приємне меню безпосередньо за допомогою наданих тематичних функцій, тому блок не потрібен. Доступна певна функція теми для меню "Основні посилання". Функції теми також дозволяють розробнику переходити до власного дерева меню їх створення (тобто не використовувати меню Drupal.) Більше інформації про те, як використовувати функції теми в документації .

Модуль оснащений простою, загальною кольоровою схемою, яку можна повністю змінити, додавши CSS-код заміни до звичайного стилю стилю теми, або створивши CSS-файл Nice Menus і запропонував Nice Menus використовувати це, а не власне за замовчуванням через глобальну конфігурація теми. Кілька прикладів перегляду CSS наведено у включеному файлі README.txt та у посібнику .


Я не бачу, чому хтось проголосував цю відповідь. Завдяки меню Nice ви можете орієнтуватися на окремий пункт меню, оскільки він має власний клас. Тоді ви можете використовувати графіку як тло для цього окремого класу. Я робив це раніше на кількох великих проектах.
Стен Ашер

2
Я не проголосував за це, але скажу, що це не стосується суті запитань, які я задав, а саме - як копатись до ядра тематики Drupal для пунктів меню. Ось чому на ці питання ніколи не отримують повного відповіді, оскільки завжди є якийсь модуль, який кидає хтось. Мене не цікавлять модулі, я хочу зробити кодування шаблонів.
Лестер Пібоді

1
Я також не проголосував, але хочу додати те, що сказав Лестер. Коли ви пропонуєте модуль у своїй відповіді, ви також повинні пояснити, чому ви пропонуєте його та як його можна використовувати для вирішення питання ОП. Без цих деталей ваша відповідь може вважатися не дуже корисною і потенційно не може бути голосована. Я помилився і на своїх перших кількох відповідях.
sheena_d

0

Залежно від того, що ви хочете налаштувати, ваш підхід значно сипається. Зазвичай я створюю меню через інтерфейс Drupal, як ви запропонували. Я беру модуль розробника теми та Firebug, щоб дізнатися, які шаблони, гачки та директиви CSS мені доведеться перезаписати, щоб змінити його під мої потреби.

Варто розглянути можливість створення підтеми базової теми, яку ви використовуєте, щоб почати налаштування. Це значно полегшує оновлення базової теми.


Мені потрібно ввести індивідуальний HTML у елементи <li> елементів меню. Зокрема, я додаю піктограми Twitter Bootstrap.
Лестер Пібоді

0

ось розумний код, який може отримати доступ до всіх пунктів меню для будь-якого рівня 2 або 3 або більше

розмістіть цей код у файлі tpl, не забудьте зателефонувати за boostrap js та css останніми версіями:

<!-- menu -->  

        <?php 

          # get menu with all levels 
          menu_tree_all_data('main-menu');
          $menu = menu_build_tree('main-menu');


          # help function for listing submenus for each link     
          function sub_menu_links($var){
           $submenu ='<ul class="dropdown-menu">';

              foreach ($var as $sub) {

                $path = str_replace("<front>",'' ,$sub["link"]["link_path"]);

                 if(count($sub["below"]) > 0 ){
                      $submenu .= '<li class="dropdown-submenu" ><a href="javascript:void(0);" >'.$sub["link"]["link_title"].'</a>';
                      $submenu .=  sub_menu_links($sub["below"]);
                      $submenu .= '</li>'; 
                  }else{
                      $submenu .= '<li><a href="'.$path.'">'.$sub["link"]["link_title"].'</a>'; 
                      $submenu .= '</li>'; 
                   }

              }
            $submenu .= ' </ul>';

            return $submenu;

          }


          # help function for more than 2 levels
          function menu_links($menu){

             $links = '<ul class="nav navbar-nav">';
             foreach ($menu as $link) {

              if(count($link["below"]) > 0 ){ 

                $path = str_replace("<front>",'' ,$link["link"]["link_path"]);

                $links .=  '<li class="dropdown ">';
                $links .= '<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">'.$link["link"]["link_title"].'</a>';
                      /* print "<pre>";
                      var_dump( $link["below"]);
                       print "</pre>";*/
                $links .= sub_menu_links($link["below"]); 


                $links .= '</li>' ;

              }else{
                  $links .= '<li>';
                  $links .= '<a href="'.$path.'">'.$link["link"]["link_title"].'</a>'; 
                  $links .= '</li>' ;
              }



              } 
              $links .= '</ul>';
              return  $links ;
          } 


          print menu_links($menu);


           ?>

цей код поверне меню для класів css ви можете використовувати свій власний я використовую завантажувальний інструмент з деякими спеціальними css

цей код після важкої роботи, він може заощадити ваш час, і він перевірений на drupal 7.x і працює чудово для головного меню, ви можете змінити меню, як вам подобається

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.