Drupal 7 में थीम आधारित उन्नत मेनू

Question

मैंने वेब के चारों ओर मंडराया है और यह बिल्कुल स्पष्ट नहीं है कि कस्टम मेनू को कैसे थीम दिया जाए। मैंने घंटों तक देखा है और एक भी पोस्ट नहीं पाया है जो प्रक्रिया को दिखाता है, शुरू से अंत तक, एक मेनू बनाने और इसके आउटपुट को अनुकूलित करने के लिए। ऐसा लगता है कि यह एक बहु-चरण प्रक्रिया है:

1. Drupal इंटरफ़ेस के माध्यम से मेनू बनाएँ।
2. template.phpआउटपुट को थीम देने के लिए अपनी फ़ाइल में थीम फ़ंक्शन बनाएं ।
3. एक चर के रूप में जोड़कर इस मेनू को एक टेम्पलेट फ़ाइल (किसी तरह) में बेनकाब करें।
4. themeटेम्प्लेट फ़ाइल में मेनू पर फ़ंक्शन को कॉल करें ।

1 करना काफी आसान है, जो समस्याएं मैं 2, 3 के साथ चला रहा हूं, और 4. डिफ़ॉल्ट पृष्ठ टेम्पलेट को देखते हुए, मैं देखता हूं कि यह चर में मुख्य मेनू को उजागर करता है $main_menu। बाद में पृष्ठ के नीचे आप फ़ंक्शन को देख सकते हैं theme('links__system_main_menu', array('links' => $main_menu..., जिसका अर्थ है कि यह उचित रूप से नामित थीम फ़ंक्शन की तलाश कर रहा है और इसका उपयोग आउटपुट उत्पन्न करने के लिए कर रहा है।

मुझे पता है कि अगर मैं function theme_links__system_main_menu(&$variables) {...}अपने टेम्पलेट में जगह करता हूं। पीएपी फ़ाइल ड्रुपल उस फ़ंक्शन का विरोध करेगी function theme_menu_links(&$variables) {...}।

मुझे नहीं पता कि Drupal उस फ़ंक्शन के साथ मेरे द्वारा बनाए गए कस्टम मेनू को कैसे लिंक करता है। उदाहरण के लिए मान लें कि मैंने एक मेनू बनाया है जिसे कहा जाता है My Menu। क्या मैं अपनी template.phpफ़ाइल में निम्न फ़ंक्शन बना सकता हूं और उस मेनू के आउटपुट को थीम कर सकता हूं ?function theme_links__system_my_menu(&$variables) {...}

इसके अलावा, कोई उस कस्टम मेनू को टेम्प्लेट फ़ाइल में कैसे उपलब्ध कराता है? Drupal कैसे $main_menuवैरिएबल को page.tpl.php में एक्सपोज करता है?

मुझे लगता है कि मुझे जो कुंजी याद आ रही है, वह यह है कि कैसे चर को एम्बेड करना है जो मेरे कस्टम मेनू को टेम्पलेट पेज में प्रदर्शित करता है। अधिकांश भाग के लिए हालांकि मैं पूरी तरह से खो गया हूं कि मेनू बनाने के बाद क्या करना है।

सहायता के लिए धन्यवाद।

संपादित करें: संभवतः मैं जो कर रहा हूं उसे पोस्ट करना चाहिए। नीचे BetaRide पर मेरी टिप्पणी के अनुसार, मुझे <li>मेनू आइटम के तत्वों में अनुकूलित HTML को इंजेक्ट करने की आवश्यकता है । विशेष रूप से, मैं ट्विटर बूटस्ट्रैप आइकन जोड़ रहा हूं।

Answer 1

ड्रुपल का मेनू का कार्यान्वयन थोड़ा विशेष है, यह हमेशा उस तरह से काम नहीं करता है जैसा लगता है कि इसे करना चाहिए।

आप मुख्य मेनू लिंक को पेज टेम्प्लेट के लिए एक चर के रूप में कैसे जोड़े जाने के लिए टेम्पलेट_प्रोप्रोसेस_पेज () के मुख्य कार्यान्वयन पर एक नज़र डाल सकते हैं । आप एपीआई डॉक्स में थोड़ा और ड्रिल-डाउन है, लेकिन समारोह आप theme_preprocess_page के अपने कार्यान्वयन में कॉल करना चाहते हैं () है menu_navigation_links () है, जो मेनू में लिंक की एक सरणी वापस आ जाएगी।

Drupal core की page.tpl.php फ़ाइल की लाइन 106 को देखते हुए, आप यह देख सकते हैं कि थीम ( ) फ़ंक्शन को 'links__system_main_menu' के हुक के साथ कॉल करके मुख्य मेनू लिंक कैसे थीम पर आधारित हैं ।

सैद्धांतिक रूप से, इस कार्यान्वयन को मानक नामकरण परंपराओं का पालन करके एक कस्टम मेनू के साथ दोहराया जा सकता है। तो, template.php में, आप कर सकते हैं:

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
}

और page.tpl.php में, आप कुछ इस तरह से जोड़ेंगे:

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

हालाँकि, कस्टम मेनू को आपके पेज टेम्प्लेट पर एक चर के रूप में जोड़ना आवश्यक नहीं है। आप ड्रुपल व्यवस्थापक इंटरफ़ेस के माध्यम से कस्टम मेनू के ब्लॉक को वांछित क्षेत्र में आसानी से रख सकते हैं। इसके अलावा, आप मुख्य मेनू स्रोत के लिए साइट की सेटिंग बदल सकते हैं , प्रभावी रूप से अपने कस्टम मेनू के साथ page.tpl.php में डिफ़ॉल्ट $ main_menu चर की जगह ले सकते हैं।

संपादित करें: मैं सिर्फ आपके अंतिम लक्ष्य के बारे में आपके जोड़ को देख रहा हूं कि आइकन के लिए मेनू आइटम में कुछ कस्टम HTML जोड़ें। आप इन आइकन को कैसे जोड़ रहे हैं, इसके आधार पर, कुछ अलग-अलग ड्रुपल मॉड्यूल विकल्प हैं।

मेनू आइकन - आपको मेनू आइटम की सेटिंग्स के माध्यम से एक छवि अपलोड करने की अनुमति देता है और स्वचालित रूप से सीएसएस (टेम्पलेट के माध्यम से अनुकूलन) उत्पन्न करता है जो मेनू आइटम पर एक पृष्ठभूमि के रूप में छवि को जोड़ता है।

मेनू विशेषताएँ - आपको व्यवस्थापक में इसकी सेटिंग्स के माध्यम से प्रत्येक मेनू आइटम में एक कस्टम वर्ग जोड़ने की अनुमति देता है। एक बार प्रत्येक मेनू आइटम में एक अद्वितीय वर्ग जोड़े जाने के बाद, आप मेनू आइटम में आइकन जोड़ने के लिए CSS का उपयोग कर सकते हैं या मेनू आइटम में अतिरिक्त HTML को इंजेक्ट करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

Comments

यह मेरे सभी सवालों का पूरी तरह से जवाब देता है। यह एक बेहतरीन जवाब है। मैं तुरंत यह कोशिश करूँगा।

— लेस्टर पीबॉडी

इसने काम किया, लेकिन मैंने सभी की एकमत राय को दिल से लिया और मैंने इस पद्धति का उपयोग नहीं किया। मैंने आपके द्वारा सुझाए गए मेनू Attributes मॉड्यूल का उपयोग किया और विशिष्ट मेनू आइटमों के लिए अनन्य ID असाइन किए, और फिर HTML को सीधे इंजेक्ट करने के लिए jQuery का उपयोग किया जहां मुझे इसकी आवश्यकता थी। सुझावों के लिए धन्यवाद। +1

— लेस्टर पीबॉडी

"आप ड्रुपल व्यवस्थापक इंटरफ़ेस के माध्यम से कस्टम मेनू के ब्लॉक को वांछित क्षेत्र में आसानी से रख सकते हैं" +। मुझे लगता है कि यह उपाय सरल है।

— cdmo

Answer 2

आप अच्छा मेनू मॉड्यूल देखना चाहते हैं । यहाँ इसके बारे में एक उद्धरण है (मॉड्यूल के परियोजना पृष्ठ से):

... ड्रॉप-डाउन / दाएं / बाएं विस्तार योग्य मेनू सक्षम करता है। यह IE6 के लिए न्यूनतम जावास्क्रिप्ट के साथ, अधिकांश ब्राउज़रों के लिए केवल CSS का उपयोग करता है। (संस्करण 2 JS को निष्क्रिय करने के विकल्प के साथ सभी ब्राउज़रों के लिए सुपरफ़िश jQuery प्लगइन का उपयोग करता है, और केवल उन ब्राउज़र के लिए CSS पर वापस आता है जो इसे संभाल सकते हैं।)

वर्तमान में तीन शैलियों / प्रकार के मेनू संभव हैं: क्षैतिज, मेनू नीचे गिरते हैं; ऊर्ध्वाधर, मेनू बाईं ओर उड़ते हैं; ऊर्ध्वाधर, मेनू दाईं ओर उड़ते हैं। एक हैंडबुक पेज है जो उन साइटों की सूची प्रदान करता है जो नीस मेनू का उपयोग करते हैं ।

नाइस मेनुस ऐसे ब्लॉक बनाता है जो किसी भी मौजूदा साइट मेनू के साथ जुड़ा हो सकता है जो कि सामान्य ब्लॉक को एक थीम में रखा जा सकता है। थीम्स के लिए, एक मेनू को सीधे विषय मेनू का उपयोग करके प्रदान करना भी संभव है, बशर्ते कि ब्लॉक आवश्यक नहीं है। प्राथमिक लिंक मेनू के लिए एक विशिष्ट थीम फ़ंक्शन उपलब्ध है। थीम फ़ंक्शन भी एक डेवलपर को उनके बनाने के कस्टम मेनू ट्री में पास करने की अनुमति देता है (अर्थात एक ड्रुपल मेनू का उपयोग नहीं कर रहा है।) प्रलेखन में थीम कार्यों का उपयोग करने के तरीके के बारे में अधिक जानकारी है ।

मॉड्यूल एक सरल, सामान्य रंग योजना के साथ आता है जिसे या तो ओवरराइड सीएसएस को विषय की सामान्य स्टाइलशीट में जोड़कर या एक अच्छा मेनू सीएसएस फ़ाइल बनाकर और अच्छा मेनू के उपयोग करने के लिए कहा जा सकता है जो वैश्विक डिफ़ॉल्ट माध्यम से अपने स्वयं के डिफ़ॉल्ट रूप से उपयोग किया जा सकता है। विषय विन्यास। शामिल README.txt फ़ाइल और हैंडबुक में कई सीएसएस ओवरराइड उदाहरण दिए गए हैं ।

Comments

मैं नहीं देखता कि किसी ने इस जवाब को वोट क्यों दिया। नीस मेनस के साथ, आप एक व्यक्तिगत मेनू आइटम को लक्षित कर सकते हैं क्योंकि इसकी अपनी कक्षा है। फिर आप उस व्यक्तिगत वर्ग के लिए पृष्ठभूमि के रूप में एक ग्राफिक का उपयोग कर सकते हैं। मैंने इसे पहले कुछ प्रमुख परियोजनाओं पर किया है।

— स्टेन एशर

मैंने इसे वोट नहीं दिया, लेकिन मैं कहूंगा कि यह मेरे द्वारा पूछे गए सवाल (ओं) के दिल को संबोधित नहीं करता है, जो कि मेनू आइटम के लिए ड्रुपल थीम के मूल में खुदाई करना है। यही कारण है कि इन सवालों का कभी भी पूरी तरह से जवाब नहीं मिलता है, क्योंकि हमेशा कुछ मॉड्यूल होता है जो किसी का नाम छोड़ देता है। मुझे मॉड्यूल की परवाह नहीं है, मैं टेम्पलेट कोडिंग करना चाहता हूं।

— लेस्टर पीबॉडी

मैंने वोट या तो कम नहीं किया, लेकिन लेस्टर ने जो कहा, उसे जोड़ना चाहते हैं। जब आप अपने उत्तर में एक मॉड्यूल का सुझाव देते हैं तो आपको यह भी बताना चाहिए कि आप इसे क्यों सुझा रहे हैं और इसका उपयोग ओपी के मुद्दे को हल करने के लिए कैसे किया जा सकता है। उन विवरणों के बिना, आपके उत्तर को बहुत मददगार के रूप में देखा जा सकता है और संभावित रूप से नीचे मतदान किया जा सकता है। मैंने अपने पहले कुछ उत्तरों पर भी यही गलती की।

— sheena_d

Answer 3

जो आप अनुकूलित करना चाहते हैं, उसके आधार पर आपका दृष्टिकोण बहुत अधिक है। आमतौर पर मैं ड्रुपल इंटरफ़ेस के माध्यम से मेनू बनाता हूं, जैसा आपने सहा। मैं ले विषय डेवलपर मॉड्यूल और Firebug whicht टेम्पलेट्स, हुक और सीएसएस निर्देशों मैं अपने आवश्यकताओं के यह बदलाव करने को ओवरराइट करना पता लगाने के लिए।

यह आधार विषय बनाने के लिए विचार करने योग्य है कि आप जो प्रयोग कर रहे हैं वह आपके लिए ट्विक करना शुरू कर रहा है। इससे आपके आधार थीम को अपडेट करना बहुत आसान हो जाता है।

Comments

मुझे मेनू आइटम के <li> तत्वों में अनुकूलित HTML इंजेक्षन करने की आवश्यकता है। विशेष रूप से, मैं ट्विटर बूटस्ट्रैप आइकन जोड़ रहा हूं।

— लेस्टर पीबॉडी

Answer 4

यहां एक स्मार्ट कोड है जो किसी भी स्तर 2 या 3 या अधिक के लिए सभी मेनू आइटम तक पहुंच सकता है

इस कोड को अपनी tpl फ़ाइल के अंदर रखें, बूस्ट जर्स और पिछले संस्करणों को कॉल करने के लिए मत भूलना:

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


           ?>

यह कोड उन सीएसएस कक्षाओं के लिए मेनू को लौटाएगा जो आप कुछ कस्टम सीएसएस के साथ बूटस्ट्रैप का उपयोग करके अपने स्वयं के उपयोग कर सकते हैं

यह कोड एक कड़ी मेहनत के बाद है जो आपके समय को बचा सकता है और इसे ड्रुपल 7.x पर परीक्षण किया गया है और मुख्य-मेनू के लिए ठीक काम करता है आप अपनी पसंद के अनुसार मेनू को बदल सकते हैं