Menu nâng cao theo chủ đề trong Drupal 7

Tôi đã bay trên web và không rõ ràng làm thế nào để chủ đề các menu tùy chỉnh. Tôi đã tìm kiếm hàng giờ và không tìm thấy một bài đăng nào minh họa quá trình, từ đầu đến cuối, tạo một menu và tùy chỉnh đầu ra của nó. Có vẻ như đây là một quá trình gồm nhiều giai đoạn:

1. Tạo menu thông qua giao diện Drupal.
2. Tạo một chức năng chủ đề trong template.phptập tin của bạn để chủ đề đầu ra.
3. Đưa menu này vào một tệp mẫu (bằng cách nào đó) bằng cách thêm nó dưới dạng một biến.
4. Gọi themehàm trên menu trong tệp mẫu.

1 là đủ dễ để làm, các vấn đề tôi gặp phải là với 2, 3 và 4. Nhìn vào mẫu trang mặc định, tôi thấy rằng nó hiển thị menu chính trong biến $main_menu. Sau đó, bạn có thể thấy chức năng này theme('links__system_main_menu', array('links' => $main_menu..., có nghĩa là nó đang tìm kiếm một chức năng chủ đề được đặt tên thích hợp ở đâu đó và sử dụng nó để tạo đầu ra.

Tôi biết nếu tôi đặt function theme_links__system_main_menu(&$variables) {...}trong tệp template.php của mình thì Drupal sẽ sử dụng chức năng đó chứ không phải function theme_menu_links(&$variables) {...}.

Điều tôi không biết là làm thế nào Drupal liên kết menu tùy chỉnh mà tôi đã tạo với chức năng đó. Ví dụ, giả sử tôi đã tạo một menu có tên My Menu. Tôi có thể tạo chức năng sau trong template.phptệp của mình và tạo chủ đề đầu ra cho menu đó không?function theme_links__system_my_menu(&$variables) {...}

Ngoài ra, làm thế nào để làm cho menu tùy chỉnh có sẵn cho một tệp mẫu? Làm thế nào để Drupal hiển thị $main_menubiến cho page.tpl.php?

Tôi nghĩ rằng chìa khóa tôi thiếu ở đây là cách nhúng biến đại diện cho menu tùy chỉnh của tôi vào trang mẫu. Đối với hầu hết các phần mặc dù tôi hoàn toàn không biết phải làm gì sau khi đã tạo menu.

Cảm ơn đã giúp đỡ.

EDIT: Có lẽ nên đăng những gì tôi đang làm. Theo nhận xét của tôi về BetaRide bên dưới, tôi cần đưa HTML tùy chỉnh vào các <li>thành phần của các mục menu. Cụ thể, tôi đang thêm các biểu tượng Twitter Bootstrap.

Việc thực hiện các menu của Drupal hơi đặc biệt, Nó không phải lúc nào cũng hoạt động theo cách nó có vẻ như vậy.

Bạn có thể xem triển khai cốt lõi của template_pre process_page () để biết cách các liên kết Menu chính được thêm dưới dạng một biến vào mẫu trang. Bạn phải đi sâu một chút vào các tài liệu API, nhưng chức năng bạn muốn gọi khi triển khai theme_pre process_page () là menu_navlation_links () , sẽ trả về một mảng các liên kết trong menu.

Nhìn vào dòng 106 của tệp page.tpl.php của Drupal core , bạn có thể thấy các liên kết menu chính được theo chủ đề trong mẫu bằng cách gọi hàm theme ( ) với một móc nối 'links__system_main_menu'.

Về mặt lý thuyết, việc triển khai này sẽ có thể được nhân đôi với một menu tùy chỉnh bằng cách tuân theo các quy ước đặt tên tiêu chuẩn. Vì vậy, trong template.php, bạn có thể có:

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
}

và trong page.tpl.php, bạn sẽ thêm một cái gì đó như thế này:

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

Tuy nhiên, việc thêm menu tùy chỉnh dưới dạng một biến trên mẫu trang của bạn là không cần thiết. Bạn có thể dễ dàng đặt khối menu tùy chỉnh vào một vùng mong muốn thông qua giao diện quản trị Drupal. Ngoài ra, bạn có thể thay đổi cài đặt của trang web cho nguồn Menu chính , thay thế hiệu quả biến $ main_menu mặc định trong page.tpl.php bằng menu tùy chỉnh của bạn.

EDIT: Tôi chỉ thấy sự bổ sung của bạn về mục tiêu cuối cùng của bạn là chỉ cần thêm một số html tùy chỉnh vào các mục menu cho các biểu tượng. Tùy thuộc vào cách bạn thêm các biểu tượng này, có một vài tùy chọn mô-đun Drupal khác nhau.

Biểu tượng Menu - cho phép bạn tải lên hình ảnh thông qua cài đặt của mục Menu và tự động tạo CSS (có thể tùy chỉnh qua mẫu) để thêm hình ảnh làm nền trên mục menu.

Thuộc tính menu - cho phép bạn thêm một lớp tùy chỉnh cho từng mục menu thông qua cài đặt của nó trong quản trị viên. Khi một lớp duy nhất được thêm vào từng mục menu, bạn có thể sử dụng CSS để thêm biểu tượng vào mục menu hoặc sử dụng javascript để thêm HTML bổ sung vào mục menu.

Bạn có thể muốn xem xét mô-đun Nice Menus . Đây là một trích dẫn về nó (từ trang dự án của mô-đun):

... cho phép menu thả xuống / phải / trái có thể mở rộng. Nó chỉ sử dụng CSS cho hầu hết các trình duyệt, với Javascript tối thiểu cho IE6. (Phiên bản 2 sử dụng plugin Superfish jQuery cho tất cả các trình duyệt, với tùy chọn tắt JS và quay lại chỉ CSS cho các trình duyệt có thể xử lý nó.)

Hiện tại có ba kiểu / loại menu: ngang, menu thả xuống; dọc, menu bay sang trái; dọc, menu bay sang phải. Có một trang sổ tay cung cấp danh sách các trang web sử dụng menu Nice .

Nice Menus tạo các khối có thể được liên kết với bất kỳ menu trang web hiện có nào có thể được đặt ở bất cứ nơi nào có thể đặt các khối bình thường trong một chủ đề. Đối với người dùng, bạn cũng có thể chủ đề một menu dưới dạng Menu Nice bằng cách sử dụng các chức năng chủ đề được cung cấp để không cần thiết phải chặn. Một chức năng chủ đề cụ thể cho menu Liên kết chính có sẵn. Các chức năng chủ đề cũng cho phép nhà phát triển chuyển vào cây menu tùy chỉnh của họ (nghĩa là không sử dụng menu Drupal.) Có nhiều thông tin hơn về cách sử dụng các chức năng chủ đề trong tài liệu .

Mô-đun đi kèm với bảng phối màu đơn giản, chung chung, có thể được ghi đè hoàn toàn bằng cách thêm CSS ghi đè vào biểu định kiểu thông thường của chủ đề hoặc bằng cách tạo tệp CSS Nice Menus và bảo Nice Menus sử dụng thay vì mặc định của nó thông qua toàn cầu cấu hình chủ đề. Một số ví dụ ghi đè CSS được cung cấp trong tệp README.txt kèm theo và trong sổ tay .

Tùy thuộc vào những gì bạn muốn tùy chỉnh, cách tiếp cận của bạn rất nhiều để lượn sóng. Thông thường tôi tạo menu thông qua giao diện Drupal khi bạn sugested. Tôi lấy mô-đun nhà phát triển chủ đề và Fireorms để tìm ra các mẫu, móc và chỉ thị CSS mà tôi phải ghi đè lên để điều chỉnh nó theo nhu cầu của mình.

Bạn nên cân nhắc việc tạo một chủ đề phụ của chủ đề cơ bản mà bạn đang sử dụng cho đến khi bạn bắt đầu điều chỉnh. Điều này làm cho nó dễ dàng hơn để cập nhật chủ đề cơ sở của bạn.

đây là một mã thông minh có thể truy cập vào tất cả các mục menu cho bất kỳ cấp 2 hoặc 3 trở lên

đặt mã này trong tệp tpl của bạn đừng quên gọi boostrap js và css phiên bản cuối:

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


           ?>

mã này sẽ trả về menu cho các lớp css mà bạn có thể sử dụng tôi đang sử dụng bootstrap với một số css tùy chỉnh

mã này là sau khi làm việc chăm chỉ, nó có thể tiết kiệm thời gian của bạn và nó đã được thử nghiệm trên drupal 7.x và hoạt động tốt cho menu chính, bạn có thể thay đổi menu theo ý muốn