Расширенное меню в Drupal 7


15

Я путешествовал по сети, и совершенно не очевидно, как оформить пользовательские меню. Я часами искал и не нашел ни одного поста, который иллюстрирует процесс от начала до конца создания меню и настройки его вывода. Кажется, это многоступенчатый процесс:

  1. Создайте меню через интерфейс Drupal.
  2. Создайте функцию theme в вашем 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) {...}в свой файл template.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?

Я думаю, что ключ, который мне здесь не хватает, - это как встроить переменную, которая представляет мое пользовательское меню, в страницу шаблона. По большей части, хотя я полностью потерян с тем, что делать после создания меню.

Спасибо за помощь.

РЕДАКТИРОВАТЬ: Вероятно, следует опубликовать то, что я делаю. В соответствии с моим комментарием к BetaRide ниже, мне нужно добавить настраиваемый HTML в <li>элементы пунктов меню. В частности, я добавляю иконки Twitter Bootstrap.

Ответы:


13

Реализация меню в Drupal немного особенная, она не всегда работает так, как кажется.

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

Взглянув на строку 106 файла page.tpl.php ядра Drupal , вы можете увидеть, как ссылки главного меню тематизируются в шаблоне, вызвав функцию theme ( ) с помощью ловушки '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 на ваше собственное меню.

РЕДАКТИРОВАТЬ: Я просто вижу ваше добавление о конечной цели, состоящей в том, чтобы просто добавить несколько пользовательских HTML в пункты меню для значков. В зависимости от того, как вы добавляете эти значки, есть несколько различных опций модуля Drupal.

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

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


Кажется, это идеально отвечает на все мои вопросы. Это отличный ответ. Я попробую это немедленно.
Лестер Пибоди

1
Это сработало, но я принял единодушное мнение каждого и не использовал этот метод. Я использовал модуль «Атрибуты меню», который вы предлагали, и назначал уникальные идентификаторы конкретным пунктам меню, а затем использовал jQuery для непосредственного внедрения HTML-кода туда, где он мне нужен. Спасибо за советы. +1
Лестер Пибоди

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

1

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

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

В настоящее время возможны три стиля / типа меню: горизонтальное, выпадающее меню; вертикальное, меню летит влево; вертикальное, меню летит вправо. На странице справочника представлен список сайтов, которые используют меню Nice .

Nice Menus создает блоки, которые могут быть связаны с любым существующим меню сайта, которое может быть размещено везде, где обычные блоки могут быть размещены в теме. Для любителей также возможно оформить меню как «Хорошее меню» напрямую, используя предоставленные функции темы, поэтому блок не требуется. Доступна специальная функция темы для меню «Основные ссылки». Функции темы также позволяют разработчику передавать пользовательское дерево меню их создания (то есть, не используя меню Drupal.) Более подробная информация о том, как использовать функции темы, приведена в документации .

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


Я не понимаю, почему кто-то проголосовал за этот ответ. С помощью Nice Menus вы можете выбрать отдельный пункт меню, поскольку он имеет свой собственный класс. Затем вы можете использовать графику в качестве фона для этого отдельного класса. Я делал это раньше на нескольких крупных проектах.
Стэн Ашер

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.