Gelişmiş menü temaları in Drupal 7

Web'de dolaştım ve özel menülerin nasıl teması gerektiği belli değil. Saatlere baktım ve baştan sona bir menü oluşturma ve çıktısını özelleştirme sürecini gösteren tek bir yazı bulamadım. Bu çok aşamalı bir süreç gibi görünüyor:

1. Drupal arayüzü üzerinden menüyü oluşturun.
2. template.phpÇıktıyı temalamak için dosyanızda bir tema işlevi oluşturun .
3. Değişken olarak ekleyerek bu menüyü bir şablon dosyasına (her nasılsa) maruz bırakın.
4. themeŞablon dosyasındaki menüdeki işlevi çağırın .

1 yapmak yeterince kolaydır, karşılaştığım problemler 2, 3 ve 4'tür. Varsayılan sayfa şablonuna baktığımda, değişkenin ana menüsünü ortaya çıkardığını görüyorum $main_menu. Sayfanın ilerleyen saatlerinde işlevi görebilirsiniz theme('links__system_main_menu', array('links' => $main_menu..., yani bir yerde uygun şekilde adlandırılmış bir tema işlevi arıyor ve çıktıyı oluşturmak için kullanıyor.

function theme_links__system_main_menu(&$variables) {...}Drupal'ın template.php dosyama yerleştirip yerleştirmediğimi biliyorum function theme_menu_links(&$variables) {...}.

Bilmediğim şey, Drupal'ın bu işlevle oluşturduğum özel menüyü nasıl bağladığı. Diyelim ki bir menü oluşturdum My Menu. Dosyamda aşağıdaki işlevi oluşturabilir ve template.phpo menünün çıktısını temayabilir miyim?function theme_links__system_my_menu(&$variables) {...}

Ayrıca, bu özel menüyü şablon dosyası için nasıl kullanılabilir hale getirir? Drupal $main_menudeğişkeni page.tpl.php dosyasına nasıl maruz bırakır?

Ben düşünüyorum ben burada özlüyorum anahtar bir şablon sayfasına benim özel menü temsil değişkeni gömmek nasıl etmektir. Çoğunlukla menüyü oluşturduktan sonra ne yapacağımı tamamen kaybettim.

Yardım için teşekkürler.

EDIT: Muhtemelen ne yaptığımı göndermek gerekir. Aşağıdaki BetaRide yorumuma <li>göre, menü öğelerinin öğelerine özelleştirilmiş HTML enjekte etmem gerekiyor . Özellikle Twitter Bootstrap simgeleri ekliyorum.

Drupal'ın menüleri uygulaması biraz özel, Her zaman olması gerektiği gibi çalışmıyor.

Ana Menü bağlantılarının sayfa şablonuna bir değişken olarak nasıl eklendiğine ilişkin template_preprocess_page () ' nin temel uygulamasına göz atabilirsiniz . API belgelerinde biraz detaya inmeniz gerekir, ancak theme_preprocess_page () uygulamasında çağırmak istediğiniz işlev, menüdeki bir dizi bağlantı döndürecek olan menu_navigation_links () işlevidir .

Drupal core's page.tpl.php dosyasının 106. satırına baktığımızda , ana menü bağlantılarının temada 'links__system_main_menu' kancasıyla theme ( ) işlevini çağırarak temanın nasıl olduğunu görebilirsiniz .

Teorik olarak, bu uygulama standart adlandırma kurallarına uyarak özel bir menü ile çoğaltılabilmelidir. Yani, template.php dosyasında şunlar olabilir:

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
}

ve page.tpl.php dosyasına şöyle bir şey eklersiniz:

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

Ancak, özel menüyü sayfa şablonunuza değişken olarak eklemek gerekli değildir. Özel menünün bloğunu Drupal yönetici arayüzü üzerinden kolayca istediğiniz bir bölgeye yerleştirebilirsiniz. Ayrıca, sitenin Ana Menü kaynağı ayarlarını değiştirerek, page.tpl.php'deki varsayılan $ main_menu değişkenini özel menünüzle etkili bir şekilde değiştirebilirsiniz.

DÜZENLEME: Sadece son hedefiniz için simgeler için menü öğelerine bazı özel html eklemek olmakla ilgili eklemenizi görüyorum. Bu simgeleri nasıl eklediğinize bağlı olarak, birkaç farklı Drupal modülü seçeneği vardır.

Menü Simgeleri - Menü öğesinin ayarları aracılığıyla bir görüntü yüklemenize olanak tanır ve görüntüyü menü öğesine arka plan olarak ekleyen otomatik olarak CSS (bir şablon aracılığıyla özelleştirilebilir) oluşturur.

Menü Nitelikleri - her menü öğesine yönetici ayarları aracılığıyla özel bir sınıf eklemenizi sağlar. Her menü öğesine benzersiz bir sınıf eklendiğinde, menü öğesine bir simge eklemek için CSS'yi kullanabilir veya menü öğesine ek HTML enjekte etmek için javascript kullanabilirsiniz.

Nice Menüler modülüne bakmak isteyebilirsiniz . Bununla ilgili bir alıntı (modülün proje sayfasından):

... açılır / sağ / sol genişletilebilir menüleri etkinleştirir. IE6 için minimum Javascript ile çoğu tarayıcı için sadece CSS kullanır. (Sürüm 2, Superfish jQuery eklentisini tüm tarayıcılar için JS'yi devre dışı bırakma seçeneğiyle kullanır ve yalnızca işleyebilen tarayıcılar için CSS'ye geri döner.)

Şu anda üç stil / tip menü mümkündür: yatay, menüler açılır; dikey, menüler sola uçar; dikey, menüler sağa uçar. Nice menülerini kullanan sitelerin bir listesini sunan bir el kitabı sayfası var .

Nice Menüler, normal blokların bir temaya yerleştirilebildiği her yere yerleştirilebilen mevcut herhangi bir site menüsüyle ilişkilendirilebilen bloklar oluşturur. Temalar için, sağlanan tema işlevlerini kullanarak bir menüyü doğrudan bir Güzel Menü olarak temalamak da mümkündür, böylece bir blok gerekli değildir. Birincil Bağlantılar menüsü için belirli bir tema işlevi kullanılabilir. Tema işlevleri ayrıca bir geliştiricinin yaptıklarından oluşan özel bir menü ağacından geçmesine izin verir (yani bir Drupal menüsü kullanmadan) Belgelerde tema işlevlerinin nasıl kullanılacağı hakkında daha fazla bilgi vardır .

Modül, temanın normal stil sayfasına geçersiz kılma CSS'sini ekleyerek veya bir Nice Menus CSS dosyası oluşturarak ve Nice Menüler'e bunu genel olarak kendi varsayılan olanından ziyade kullanmasını söyleyerek tamamen geçersiz kılınabilen basit, genel bir renk şemasına sahiptir. tema yapılandırması. Birlikte verilen README.txt dosyasında ve el kitabında birkaç CSS geçersiz kılma örneği verilmiştir .

Neyi özelleştirmek istediğinize bağlı olarak, yaklaşımınız çok fazla. Genellikle menüleri Drupal arayüzü üzerinden sizler için hazırladım. Attığım tema geliştirici modülü ve Firebug benim ihtiyaçlarına çimdik için üzerine yazmak zorunda whicht şablonlar, kancaları ve CSS direktiflerini öğrenmek için.

Tweaking yapmaya başlamadan önce kullandığınız temel temanın alt temasını oluşturmaya değer. Bu, temel temanızı güncellemenizi kolaylaştırır.

herhangi bir seviye 2 veya 3 veya daha fazlası için tüm menü öğelerine erişebilen akıllı bir kod

Bu kodu tpl dosyanızın içine yerleştirin boostrap js ve css son sürümlerini çağırmayı unutmayın:

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


           ?>

Bu kod, bazı özel css ile bootstrap kullanıyorum kendi kullanabilirsiniz css sınıfları için menü dönecektir

Bu kod zor bir işten sonra zaman kazandırabilir ve drupal 7.x üzerinde test edilmiştir ve ana menü için iyi çalışır Menüyü istediğiniz gibi değiştirebilirsiniz