Zaawansowane menu tematyczne w Drupal 7

Podróżowałem po Internecie i wcale nie jest oczywiste, jak tworzyć własne menu. Szukałem godzin i nie znalazłem ani jednego postu, który ilustruje proces tworzenia menu i dostosowywania jego wyników od początku do końca. Wygląda na to, że jest to proces wieloetapowy:

1. Utwórz menu za pomocą interfejsu Drupal.
2. Utwórz funkcję motywu w template.phppliku, aby utworzyć motyw wyjściowy.
3. Naraż to menu na plik szablonu (jakoś), dodając go jako zmienną.
4. Wywołaj themefunkcję z menu w pliku szablonu.

1 jest łatwa do zrobienia, problemy, na które napotykam, dotyczą 2, 3 i 4. Patrząc na domyślny szablon strony, widzę, że odsłania główne menu w zmiennej $main_menu. W dalszej części strony możesz zobaczyć funkcję theme('links__system_main_menu', array('links' => $main_menu..., co oznacza, że ​​szuka gdzieś odpowiednio nazwanej funkcji motywu i używa jej do wygenerowania wyniku.

Wiem, że jeśli umieszczę function theme_links__system_main_menu(&$variables) {...}w pliku template.php, Drupal użyje tej funkcji w przeciwieństwie do function theme_menu_links(&$variables) {...}.

Nie wiem, jak Drupal łączy niestandardowe menu, które utworzyłem za pomocą tej funkcji. Powiedzmy na przykład, że stworzyłem menu o nazwie My Menu. Czy mogę utworzyć następującą funkcję w moim template.phppliku i utworzyć motyw wyjściowy dla tego menu?function theme_links__system_my_menu(&$variables) {...}

W jaki sposób można udostępnić to niestandardowe menu w pliku szablonu? W jaki sposób Drupal wystawia $main_menuzmienną na page.tpl.php?

Myślę, że kluczem, którego tu brakuje, jest sposób osadzenia zmiennej reprezentującej moje niestandardowe menu na stronie szablonu. W większości jednak jestem całkowicie zagubiony w tym, co robić po utworzeniu menu.

Dzięki za pomoc.

EDYCJA: Prawdopodobnie powinien opublikować to, co robię. Zgodnie z moim komentarzem do BetaRide poniżej, muszę wstrzyknąć dostosowany kod HTML do <li>elementów pozycji menu. W szczególności dodaję ikony Bootstrap na Twitterze.

Implementacja menu przez Drupala jest nieco wyjątkowa, nie zawsze działa tak, jak się wydaje.

Możesz rzucić okiem na podstawową implementację template_preprocess_page () na sposób dodawania linków Menu Głównego jako zmiennej do szablonu strony. Musisz nieco pogłębić dokumentację API, ale funkcją, którą chcesz wywołać w swojej implementacji theme_preprocess_page () jest menu_navigation_links () , która zwróci tablicę linków w menu.

Patrząc na wiersz 106 pliku page.tpl.php Drupal core , możesz zobaczyć, jak łącza do głównego menu są tematyczne w szablonie, wywołując funkcję theme ( ) z hakiem „links__system_main_menu”.

Teoretycznie implementacja ta powinna mieć możliwość powielania za pomocą niestandardowego menu zgodnie ze standardowymi konwencjami nazewnictwa. Zatem w template.php możesz mieć:

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
}

i w page.tpl.php, możesz dodać coś takiego:

<?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'))); ?>

Jednak dodanie niestandardowego menu jako zmiennej w szablonie strony nie jest konieczne. Możesz łatwo umieścić blok menu niestandardowego w wybranym regionie za pomocą interfejsu administratora Drupal. Możesz także zmienić ustawienia witryny dla źródła menu głównego , skutecznie zastępując domyślną zmienną $ main_menu w page.tpl.php niestandardowym menu.

EDYCJA: Właśnie widzę twój dodatek dotyczący twojego ostatecznego celu, jakim jest dodanie niestandardowego kodu HTML do pozycji menu dla ikon. W zależności od tego, jak dodajesz te ikony, istnieje kilka różnych opcji modułu Drupal.

Ikony menu - umożliwia przesłanie obrazu za pomocą ustawień elementu menu i automatycznie generuje CSS (konfigurowalny za pomocą szablonu), który dodaje obraz jako tło do elementu menu.

Atrybuty menu - pozwala dodać niestandardową klasę do każdej pozycji menu poprzez jej ustawienia w panelu administratora. Po dodaniu unikalnej klasy do każdego elementu menu możesz użyć CSS, aby dodać ikonę do elementu menu lub użyć javascript, aby wstrzyknąć dodatkowy HTML do elementu menu.

Możesz zajrzeć do modułu Nice Menus . Oto cytat na ten temat (ze strony projektu modułu):

... włącza rozwijane / prawe / lewe rozwijane menu. Używa tylko CSS dla większości przeglądarek, z minimalnym Javascriptem dla IE6. (Wersja 2 używa wtyczki Superfish jQuery dla wszystkich przeglądarek, z opcją wyłączenia JS, i wraca do CSS tylko dla przeglądarek, które mogą to obsłużyć.)

Obecnie możliwe są trzy style / typy menu: poziomy, menu rozwijane; pionowe, menu przechodzą w lewo; pionowe, menu przesuwają się w prawo. Istnieje strona podręcznika, która zawiera listę witryn korzystających z menu Nicea .

Ładne menu tworzy bloki, które mogą być powiązane z dowolnym istniejącym menu strony, które można umieścić wszędzie tam, gdzie normalne bloki mogą być umieszczone w motywie. W przypadku nich możliwe jest także bezpośrednie motywowanie menu jako ładne menu za pomocą dostarczonych funkcji motywu, dzięki czemu blok nie jest konieczny. Dostępna jest specjalna funkcja motywu dla menu Główne łącza. Funkcje motywu pozwalają również programistom na przejście do niestandardowego drzewa menu ich tworzenia (tj. Bez korzystania z menu Drupal). Więcej informacji na temat korzystania z funkcji motywu znajduje się w dokumentacji .

Moduł jest wyposażony w prosty, ogólny schemat kolorów, który można całkowicie zastąpić, dodając CSS zastępujący do normalnego arkusza stylów motywu lub tworząc plik CSS Nice Menus i informując Nice Menu, aby używał tego zamiast własnego domyślnego w globalnym konfiguracja motywu. Kilka przykładów zastąpienia CSS znajduje się w dołączonym pliku README.txt i podręczniku .

W zależności od tego, co chcesz dostosować, twoje podejście jest bardzo trudne. Zwykle tworzę menu poprzez interfejs Drupala, tak jak sugerowałeś. Biorę moduł programisty motywów i Firebuga, aby dowiedzieć się, które szablony, haki i dyrektywy CSS muszę zastąpić, aby dostosować je do moich potrzeb.

Warto rozważyć utworzenie podtematu podstawowego motywu, którego używasz, zanim zaczniesz dostosowywać. To znacznie ułatwia aktualizację podstawowego motywu.

tutaj jest inteligentny kod, który może uzyskać dostęp do wszystkich pozycji menu dla dowolnego poziomu 2 lub 3 lub więcej

umieść ten kod w pliku tpl Nie zapomnij wywołać boostrap js i css ostatnich wersji:

<!-- 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);


           ?>

ten kod zwróci menu dla klas css. Możesz użyć własnego. Używam bootstrap z jakimś niestandardowym css

ten kod jest po ciężkiej pracy, może zaoszczędzić czas i został przetestowany na Drupal 7.x i działa dobrze w menu głównym, możesz zmieniać menu, jak chcesz