Tema menu lanjutan di Drupal 7

Saya sudah menjelajahi web dan sama sekali tidak jelas bagaimana tema menu kustom. Saya telah mencari selama berjam-jam dan belum menemukan satu posting pun yang menggambarkan proses, dari awal hingga selesai, membuat menu dan menyesuaikan hasilnya. Sepertinya ini adalah proses multi-tahap:

1. Buat menu melalui antarmuka Drupal.
2. Buat fungsi tema di template.phpfile Anda untuk tema output.
3. Paparkan menu ini ke file template (entah bagaimana) dengan menambahkannya sebagai variabel.
4. Panggil themefungsi pada menu di file templat.

1 cukup mudah untuk dilakukan, masalah yang saya hadapi adalah dengan 2, 3, dan 4. Melihat template halaman default, saya melihat bahwa ia mengekspos menu utama dalam variabel $main_menu. Kemudian di bawah halaman Anda dapat melihat fungsi theme('links__system_main_menu', array('links' => $main_menu..., yang berarti sedang mencari fungsi tema yang tepat di suatu tempat dan menggunakannya untuk menghasilkan output.

Saya tahu jika saya menempatkan function theme_links__system_main_menu(&$variables) {...}file template.php saya, Drupal akan menggunakan fungsi itu sebagai lawan function theme_menu_links(&$variables) {...}.

Yang tidak saya ketahui adalah bagaimana Drupal menautkan menu khusus yang saya buat dengan fungsi itu. Katakanlah misalnya saya membuat menu bernama My Menu. Bisakah saya membuat fungsi berikut dalam template.phpfile saya dan tema output untuk menu itu?function theme_links__system_my_menu(&$variables) {...}

Juga, bagaimana cara membuat menu khusus tersedia untuk file template? Bagaimana cara Drupal mengekspos $main_menuvariabel ke page.tpl.php?

Saya pikir kunci yang saya lewatkan di sini adalah bagaimana menanamkan variabel yang mewakili menu khusus saya ke halaman templat. Namun sebagian besar saya benar-benar bingung dengan apa yang harus dilakukan setelah membuat menu.

Terima kasih untuk bantuannya.

EDIT: Mungkin harus memposting apa yang saya lakukan. Per komentar saya untuk BetaRide di bawah ini, saya perlu menyuntikkan HTML khusus ke dalam <li>elemen - elemen menu. Secara khusus, saya menambahkan ikon Bootstrap Twitter.

Implementasi menu Drupal sedikit istimewa, tidak selalu bekerja seperti seharusnya.

Anda dapat melihat implementasi inti dari template_preprocess_page () untuk bagaimana tautan Menu Utama ditambahkan sebagai variabel ke templat halaman. Anda harus menelusuri sedikit di API API, tetapi fungsi yang ingin Anda panggil dalam implementasi theme_preprocess_page () Anda adalah menu_navigation_links () , yang akan mengembalikan array tautan dalam menu.

Melihat baris 106 dari file page.tpl.php core Drupal , Anda dapat melihat bagaimana tautan menu utama bertema dalam templat dengan memanggil fungsi theme ( ) dengan kait 'links__system_main_menu'.

Secara teoritis, implementasi ini harus dapat diduplikasi dengan menu kustom dengan mengikuti konvensi penamaan standar. Jadi, di template.php, Anda dapat memiliki:

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
}

dan di page.tpl.php, Anda akan menambahkan sesuatu seperti ini:

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

Namun, menambahkan menu khusus sebagai variabel pada templat halaman Anda tidak perlu. Anda dapat dengan mudah menempatkan blok menu kustom ke wilayah yang diinginkan melalui antarmuka admin Drupal. Anda juga dapat mengubah pengaturan situs untuk sumber Menu Utama , secara efektif mengganti variabel $ main_menu default di page.tpl.php dengan menu khusus Anda.

EDIT: Saya hanya melihat tambahan Anda tentang tujuan akhir Anda untuk hanya menambahkan beberapa html kustom ke item menu untuk ikon. Tergantung pada bagaimana Anda menambahkan ikon-ikon ini, ada beberapa opsi modul Drupal yang berbeda.

Ikon Menu - memungkinkan Anda untuk mengunggah gambar melalui pengaturan item Menu dan secara otomatis menghasilkan CSS (dapat disesuaikan melalui templat) yang menambahkan gambar sebagai latar belakang pada item menu.

Menu Attributes - memungkinkan Anda untuk menambahkan kelas khusus ke setiap item menu melalui pengaturannya di admin. Setelah kelas unik ditambahkan ke setiap item menu, Anda bisa menggunakan CSS untuk menambahkan ikon ke item menu atau menggunakan javascript untuk menyuntikkan HTML tambahan ke item menu.

Anda mungkin ingin melihat modul Nice Menus . Berikut ini adalah kutipan tentang hal itu (dari halaman proyek modul):

... mengaktifkan menu yang dapat diperluas drop-down / kanan / kiri. Hanya menggunakan CSS untuk sebagian besar browser, dengan Javascript minimal untuk IE6. (Versi 2 menggunakan plugin Superfish jQuery untuk semua browser, dengan opsi untuk menonaktifkan JS, dan kembali ke CSS-only untuk browser yang dapat menanganinya.)

Tiga gaya / jenis menu saat ini dimungkinkan: horisontal, menu drop down; vertikal, menu terbang ke kiri; vertikal, menu terbang ke kanan. Ada halaman buku pegangan yang menyediakan daftar situs yang menggunakan menu Nice .

Menu Bagus membuat blok yang dapat dikaitkan dengan menu situs yang ada yang dapat ditempatkan di mana pun blok normal dapat ditempatkan dalam sebuah tema. Untuk tema, Anda juga dapat memilih tema menu sebagai Menu Bagus secara langsung dengan menggunakan fungsi tema yang disediakan sehingga tidak perlu ada blok. Fungsi tema khusus untuk menu Tautan Utama tersedia. Fungsi tema juga memungkinkan pengembang untuk meneruskan di pohon menu kustom pembuatan mereka (yaitu tidak menggunakan menu Drupal.) Ada informasi lebih lanjut tentang cara menggunakan fungsi tema dalam dokumentasi .

Modul ini dilengkapi dengan skema warna generik sederhana yang dapat sepenuhnya ditimpa dengan menambahkan CSS override ke stylesheet normal tema atau dengan membuat file Nice Menus CSS dan memberitahu Nice Menus untuk menggunakannya daripada menggunakan default sendiri melalui global. konfigurasi tema. Beberapa contoh CSS override disediakan dalam file README.txt yang disertakan dan dalam buku pegangan .

Bergantung pada apa yang ingin Anda sesuaikan, pendekatan Anda sangat sulit. Biasanya saya membuat menu melalui antarmuka Drupal saat Anda menyarankan. Saya mengambil modul pengembang tema dan Firebug untuk mencari tahu templat mana, kait dan arahan CSS yang harus saya timpa untuk menyesuaikannya dengan kebutuhan saya.

Sebaiknya pertimbangkan membuat sub tema dari tema dasar yang Anda gunakan sebelum Anda mulai mengubah. Ini membuatnya lebih mudah untuk memperbarui tema dasar Anda.

di sini adalah kode pintar yang dapat mengakses semua item menu untuk level 2 atau 3 atau lebih

letakkan kode ini di dalam file tpl Anda jangan lupa untuk memanggil boostrap js dan css versi terakhir:

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


           ?>

kode ini akan mengembalikan menu untuk kelas css Anda dapat menggunakan Anda sendiri saya menggunakan bootstrap dengan beberapa custom css

kode ini setelah kerja keras dapat menghemat waktu Anda dan itu diuji pada drupal 7.x dan berfungsi dengan baik untuk menu utama Anda dapat mengubah menu yang Anda inginkan