wp_nav_menu पर कस्टम HTML कैसे जोड़ें?

Question

मैं वर्डप्रेस से परिचित हूं और वर्डप्रेस मेनू सिस्टम का उपयोग कर रहा हूं। लेकिन मैं wp_nav_menu() पर कस्टम HTML जोड़ने का एक तरीका ढूंढ रहा हूं।

सूचना कैसे उत्पादों अंतर्गत ड्रॉप डाउन मेनू एक छवि और एक लिंक होता है:

मैं इस तरह एक मेनू बनाने के लिए कोशिश कर रहा हूँ। मैं इसे फिर से बनाना चाहता हूं। मैंने कुछ प्लगइन्स देखे हैं, लेकिन इसे कोड करेंगे।

मुझे छवि और लिंक को कड़ी कोडिंग करने में कोई दिक्कत नहीं है, लेकिन मैं मेनू प्रबंधित करने के लिए वर्डप्रेस का उपयोग करने की लचीलापन रखना चाहता हूं।

Answer 1

वैसे भी वर्डप्रेस मेनू पृष्ठों के माध्यम से वस्तुओं को प्रदर्शित करने के लिए जाता है, वॉकर ऑब्जेक्ट का उपयोग कर रहा है। इस मामले में इस वस्तु के लिए विशिष्ट वर्ग को Walker_Nav_Menu कहा जाता है। आप इसे wp-includes\nav-menu-template.php में पा सकते हैं।

Walker_Nav_Menu एक बहुत ही सरल वर्ग है। आप देख सकते हैं कि लिंक और मेन्यू स्ट्रक्चर कैसे बनाए जाते हैं। कार्य start_el और end_el मेनू-आइटम बनाने के लिए उपयोग किए जाते हैं। कार्य start_lvl और end_lvl घोंसले मेनू के लिए हैं। इस दृष्टिकोण में हम मुख्य रूप से start_el और end_el का उपयोग करेंगे।

में अपने functions.php, एक वर्ग बनाने के माता पिता वर्ग के लिए बहुत समान तरीकों के साथ Walker_Nav_Menu विस्तार करने के लिए:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { 
    function start_el (&$output, $item, $depth = 0, $args = array(), $id = 0) { 
    // Copy all the start_el code from source, and modify 
    } 

    function end_el(&$output, $item, $depth = 0, $args = array()) { 
    // Copy all the end_el code from source, and modify 
    } 
} 

उन कार्यों में, $item अपने मेनू आइटम, जिसके साथ आप अनुसार अतिरिक्त सामग्री को क्वेरी कर सकता है यदि आप चाहते हैं तो मौजूदा मेनू-आइटम पर। ध्यान दें कि मैंने start_lvl और end_lvl शामिल नहीं किया था, लेकिन इससे कोई फर्क नहीं पड़ता, क्योंकि आपकी कक्षा स्वचालित रूप से अभिभावक वर्ग विधियों का उत्तराधिकारी हो जाएगी, अगर ओवरराइट नहीं किया गया है।

फिर, अपने विषय फाइलों में, आप wp_nav_menu इस तरह कॉल कर सकते हैं: ताकि आप संशोधित कर सकते हैं क्या कोड उत्पादन होता है

wp_nav_menu(array(
    'theme_location' => 'main', 
    'container' => false, 
    'menu_id' => 'nav', 
    'depth' => 1, 
    // This one is the important part: 
    'walker' => new Custom_Walker_Nav_Menu 
)); 

वर्डप्रेस, अपने कस्टम वर्ग और कार्यों का प्रयोग करेंगे।