Tema menu lanjutan di Drupal 7


15

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.

Jawaban:


13

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.


Ini sepertinya menjawab semua pertanyaan saya dengan sempurna. Ini jawaban yang bagus. Saya akan segera mencoba ini.
Lester Peabody

1
Itu berhasil, tapi saya mengambil hati semua orang dengan hati dan saya tidak menggunakan metode ini. Saya menggunakan modul Menu Atribut yang Anda sarankan dan menetapkan ID unik untuk item menu tertentu, dan kemudian menggunakan jQuery untuk menyuntikkan HTML secara langsung ke tempat yang saya inginkan. Terima kasih atas tipsnya. +1
Lester Peabody

"Anda dapat dengan mudah menempatkan blok menu kustom ke wilayah yang diinginkan melalui antarmuka admin Drupal" ++. Saya menemukan solusi ini lebih sederhana.
cdmo

1

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 .


Saya tidak mengerti mengapa seseorang memilih jawaban ini. Dengan Nice Menu, Anda dapat menargetkan item menu tersendiri karena memiliki kelasnya sendiri. Kemudian Anda dapat menggunakan grafik sebagai latar belakang untuk kelas individu itu. Saya telah melakukannya sebelumnya pada beberapa proyek besar.
Stan Ascher

2
Saya tidak memilihnya, tetapi saya akan mengatakan bahwa ini tidak menjawab inti dari pertanyaan yang saya ajukan, yaitu bagaimana menggali inti dari tema Drupal untuk item menu. Inilah sebabnya mengapa pertanyaan-pertanyaan ini tidak pernah dijawab sepenuhnya, karena selalu ada beberapa modul yang dijatuhkan seseorang. Saya tidak peduli tentang modul, saya ingin melakukan pengkodean template.
Lester Peabody

1
Saya juga tidak memilih, tetapi ingin menambahkan apa yang dikatakan Lester. Ketika Anda menyarankan sebuah modul dalam jawaban Anda, Anda juga harus menjelaskan mengapa Anda menyarankannya dan bagaimana modul itu dapat digunakan untuk menyelesaikan masalah OP. Tanpa perincian itu, jawaban Anda dapat dianggap tidak terlalu membantu dan berpotensi tidak dapat dipilih. Saya membuat kesalahan itu pada beberapa jawaban pertama saya di sini juga.
sheena_d

0

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.


Saya perlu menyuntikkan HTML khusus ke elemen <li> dari item menu. Secara khusus, saya menambahkan ikon Bootstrap Twitter.
Lester Peabody

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.