wp_nav_menu (), कैसे बदलें <li> वर्ग?

Question

मैं अपनी वेबसाइट के लिए एक मेनू बना रहा हूं। स्थैतिक इस तरह दिख रहा है:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

मैं यह समझने में सक्षम हूं कि <ul>टैग को कैसे अनुकूलित किया जाए , स्वचालित <div>टैग से छुटकारा पाने के लिए । लेकिन अब, मैं सीएसएस के माध्यम से विशिष्ट व्यवहार को नियंत्रित <li>करने के लिए अलग-अलग classनाम निर्दिष्ट करने में सक्षम होने के लिए टैग को अनुकूलित करना चाहता हूं । जब मैं wp_nav_menu()आउटपुट का उपयोग करता हूं तो निम्न प्रकार है:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

मैं से छुटकारा पाने के लिए चाहते हैं idमें <li>टैग और बदल classपेज मैं के लिए लिंक चाहते हैं उसका नाम प्रतिबिंबित करने के लिए। मूल रूप से मैं इस पोस्ट में कोड के 1 स्निपेट के समान उत्पादन करना चाहता हूं।

मैं ऐसा क्यों कर रहा हूं, इसका कारण यह है कि मैं उन कस्टम चित्रों का उपयोग करता हूं जो मेरे सीएसएस द्वारा सादे पाठ द्वारा नियंत्रित की जाती हैं।

क्या यह संभव है? इस समस्या को दूर करने के लिए मुझे किस रणनीति का उपयोग करना चाहिए?

Comments

यहाँ आप ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links

— Rameez SOOMRO

Answer 1

एक कस्टम वॉकर का उपयोग करें , आपको जो कुछ भी ज़रूरत नहीं है उसे हटा दें और अपनी कक्षाएं जोड़ें। यहां एक वॉकर है जिसका उपयोग मैं क्लीन मार्कअप के साथ एक सूची प्राप्त करने के लिए करता हूं : T5_Nav_Menu_Walker_Simple ।

आपका 'nav_menu_css_class'या फ़िल्टर भी कर सकता है 'wp_nav_menu_items'। लेकिन एक वाकर वर्ग को समझना और मेरी राय में नियंत्रित करना आसान है।

Comments

धन्यवाद टोस्चो, मुझे अभी पता चला है कि Wordpress (3.3) के नए संस्करण में हम अपनी समस्या को हल करने के लिए कस्टम मेनू फ़िर प्रत्येक मेनू आइटम को जोड़ सकते हैं। मैंने आपको मेरे द्वारा सुझाई गई स्क्रिप्ट (T5_Nav_Menu_Walker_Simple) की कोशिश की, जो हर चीज को छीनती है <li>, हम उन तत्वों को कैसे नियंत्रित कर सकते हैं जिन्हें हम रखना चाहते हैं?

— ईसाई धर्म

@ क्रिसियन आप आवश्यकतानुसार वॉकर बदल सकते हैं, यह सिर्फ एक बहुत ही मूल उदाहरण है। यह देखने के लिए कि कौन सी जानकारी उपलब्ध है, print_r( $item, TRUE )प्रत्येक में एक जोड़ें li। फिर तय करें कि इसके साथ क्या करना है। :)

— FUXIA

इसने मुझे सही दिशा में इंगित किया, जो मुझे चाहिए था वह था wp_nav_menu , लेकिन मुझे अपने विशेष उपयोग के मामले में काम करने के लिए ' कंटेनर_क्लास ' पैरामीटर को बदलने की जरूरत थी, जहां मैंने कुछ शर्त पर मुख्य मेनू को दूसरे के लिए स्वैप किया, लेकिन जरूरत थी वर्ग सीएसएस के लिए अनुरूप होना चाहिए।

— डी। दान

Answer 2

उपस्थिति> मेनू पर जाएं - इच्छित मेनू का चयन करें - शीर्ष दाईं ओर "स्क्रीन विकल्प" पर जाएं, "सीएसएस कक्षाएं" चुनें - प्रत्येक मेनू आइटम में एक वर्ग जोड़ें ..

Answer 3

<li>कक्षा को nav-linkबूटस्ट्रैप 4.3 के रूप में सेट करने की आवश्यकता है:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

आप idउस ऐरे में विशेषता को भी अनसेट कर सकते हैं ।

Answer 4

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

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

मैंने इसका उपयोग मेनू में पूर्व-नामित छवियों को जोड़ने के लिए भी किया है - थोड़ा परतदार, लेकिन यह काम करता है।

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">