शीर्ष स्तर मेनू आइटम लिंक कैसे नहीं बनाते हैं, लेकिन उप-मेनू जो लिंक किए गए हैं?

Question

मैं एक क्षैतिज मेनू बना रहा हूं और उस मेनू की कुछ प्रविष्टियों में ड्रॉपडाउन (उप-मेनू) होंगे, और कुछ नहीं होंगे। जिनके उप-मेनू हैं वे वास्तव में पृष्ठ नहीं हैं। वे केवल ड्रॉपडाउन के लिए मार्गदर्शक बनने के लिए हैं।

उदाहरण के लिए, क्षैतिज मेनू निम्नानुसार है:

घर | हमारे बारे में | उत्पाद | दिशा | संपर्क करें

और "उत्पादों" ली आइटम का अर्थ है कि इसके नीचे एक ऊर्ध्वाधर ड्रॉपडाउन सूची में 3 पृष्ठ जुड़े हुए हैं, इसलिए "उत्पाद" वास्तव में एक पृष्ठ का प्रतिनिधित्व नहीं करता है, मैं WP में ऐसा कैसे कर सकता हूं?

(मैं WP का उपयोग सीएमएस के रूप में करता हूं, स्थिर घर और अंदर के पृष्ठों के साथ। मैं अपने खुद के टेम्प्लेट का निर्माण करता हूं, सीएसएस में मेनू को स्टाइल करता हूं, फिर मेनू को फ़ंक्शन में पंजीकृत करता हूं। पीएं और उन्हें टेम्प्लेट में कॉल करें।) WP में आप प्रविष्टियां जोड़ते हैं। पृष्ठों की सूची के माध्यम से, या कस्टम लिंक द्वारा मेनू। लेकिन मैं नहीं चाहता कि "उत्पाद" जुड़े हों। अगर मैं कस्टम लिंक से लिंक नहीं जोड़ता तो यह मुझे मेनू में जोड़ने की अनुमति नहीं देगा।

क्या यह मेनू व्यवस्थापक के माध्यम से संभव है या क्या मुझे इसे किसी अन्य तरीके से देखना होगा?

हर प्रकार की सहायता के लिए आपका धन्यवाद!

Comments

heres समाधान शानदार काम करता है इसे चेक करें wordpress.org/support/topic/no-page-menu-item

आप js का उपयोग करके ऐसा कर सकते हैं। इस लेख का प्रयास करें। kvcodes.com/2014/07/…

— कवर्धा

URL बॉक्स में, इसे खाली छोड़ दें।

— AMY WANG

किसी ने भी WP_NAV_MENU_WALKER वर्ग का उल्लेख नहीं किया, आप अपना खुद का वॉकर लिख सकते हैं जो आप चाहते हैं।

— user3135691

Answer 1

मेरे पास कुछ विचार हैं:

1. कस्टम लिंक सेट करें #जिसमें कुछ भी वापस नहीं आएगा
2. आइटम में एक कस्टम वर्ग जोड़ें और फिर लिंक हटाने के लिए jQuery का उपयोग करें।
3. JQuery विधि के बराबर PHP का उपयोग करें
4. डिसेबल पैरेंट मेन्यू लिंक प्लगइन का उपयोग करें (या इसे अलग करें और अपना स्वयं का लिखें)

Comments

सुझाव और लिंक के लिए धन्यवाद! जैसा कि गैविन ने सुझाव दिया, एक कस्टम लिंक "वर्क्स" के लिए # का उपयोग करना; अन्य विकल्प बेहतर काम कर सकते हैं, हालांकि यह उतना आसान नहीं है। खैर, प्लगइन शायद आसान है, लेकिन मुझे प्लगइन्स का उपयोग करने से नफरत है अगर मैं एक ही चीज़ को अधिक सीधे पूरा कर सकता हूं। मुझे सबसे अच्छा तरीका तय करना होगा। एक बार फिर धन्यवाद!

— पीवीए

यदि आप स्पर्श उपकरणों में इसका उपयोग करने की योजना बनाते हैं, तो खाली का उपयोग करने से सावधान रहें href=""क्योंकि अधिकांश स्पर्शशील डिवाइस उपयोगकर्ता JS

— सिमोन

कड़ियाँ टूटती हैं। आप अपने उत्तर में इन विचारों में से कुछ काम करना चाह सकते हैं

— शिया

इसके अलावा, # 2 और # 3 का उल्लेख है wp_list_pages(), नहींwp_nav_menu()

— शिया

Answer 2

प्लगइन या कुछ भी बिना इसे करने का सबसे आसान तरीका वर्डप्रेस के "मेनू" फ़ंक्शन का उपयोग करना है। यहाँ वर्डप्रेस 4.8 के लिए निर्देश दिए गए हैं:

1. अपने वर्डप्रेस डैशबोर्ड से, "सूरत -> मेनू" पर जाएं
2. "मेनू संपादित करें" टैब में, "कस्टम लिंक" चुनें
3. URL के लिए, "#" (कोई उद्धरण नहीं) दर्ज करें
4. लिंक पाठ के लिए, अपने ड्रॉप-डाउन मेनू के शीर्ष स्तर के लिए अपना वांछित पाठ दर्ज करें
5. "मेनू में जोड़ें" बटन पर क्लिक करें
6. अपने मेनू में मेनू आइटम को उसके इच्छित स्थान पर खींचें
7. आपके द्वारा जोड़े गए मेनू आइटम के लिए, आइटम के दाईं ओर नीचे तीर पर क्लिक करें (यह आइटम के बाईं ओर "कस्टम लिंक" पढ़ेगा)
8. URL से "#" निकालें। यह - सभी ब्राउज़रों में - लिंक को सादे पाठ में बदल देगा।
9. "मेनू सहेजें" बटन पर क्लिक करें

Comments

उस टिप के लिए धन्यवाद। हालांकि, यह सही नहीं है कि जब आप माउसओवर करते हैं, तब भी लेबल "लिंक" की तरह दिखता है, लेकिन वे कहीं नहीं जाते हैं। तो यह एक चुटकी में काम कर सकता है।

— पीवीए

क्या आपने पूरी टिप्पणी पढ़ी? लिंक जोड़े जाने के बाद, लिंक के नाम से ड्रॉपडाउन तीर पर क्लिक करें, और URL टेक्स्टबॉक्स से "#" को हटा दें। यह, सभी ब्राउज़रों में, लिंक पर क्लिक करने योग्य नहीं होने का कारण होगा।

— गाविनआर

हां, धन्यवाद, मैंने पूरी टिप्पणी पढ़ी। मैं वापस गया और फिर से कोशिश की और अपनी समस्या का एहसास किया। जब मैं # छोड़ता हूं, तो शब्द नावबार में दिखाई देता है लेकिन "मृत लिंक" के रूप में। जब तक मैंने # शब्द को नावबार में प्रकट नहीं किया, जब तक कि मैं उस पर मंडराया नहीं और यह एक मंडराना स्थिति में प्रकट होता। इसलिए मैं मानता हूं कि मुझे सीएसएस को शब्द पर लागू करना होगा ताकि यह लिंक किए बिना दिखाई दे। मुझे यकीन नहीं है कि होवर राज्य क्यों दिखाता है ...

— पीवीए

यह अभी भी 4.9.5 में है, हालांकि मुझे यकीन नहीं है क्योंकि यह बग के लाभ से निपटने वाले हैक की तरह 'महसूस' करता है। यदि नहीं .. यह लोगों को बहुत सारे सिरदर्द से बचाने वाला है ... यह इस तरह की तरह है कि Wordpress "1 2 3 4 5 6" को एक मजबूत पासवर्ड मानता है ... फिर भी।

— ब्रोक्लेन्सवेब

FYI करें, यदि आप चरण 8 (जो भी अच्छे कारण के लिए) करते हैं, तो कस्टम लिंक पर होवर करने पर आपका कर्सर पॉइंटर नहीं होगा। उस स्थिति में, आप इसे पॉइंटर: कर्सर के साथ स्टाइल कर सकते हैं।

— मंगलएंडबैक

Answer 3

मैं जिस सरल विधि के साथ आया था वह लिंक URL मान के साथ एक कस्टम लिंक आइटम बनाना था #। यह उपयोगकर्ता को एक ही पृष्ठ पर एक खाली हैश में भेज रहा है, इसलिए मूल रूप से लिंक कहीं नहीं है।

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

मेनू में खाली हैश लिंक का उपयोग किया जाता है और hrefपूरी तरह से उस लिंक से विशेषता को हटाने के लिए यह पता लगाने के लिए समाधान को कोड के एक टुकड़े के साथ खाली हैश विधि को संयोजित करना है । एक विशेषता के aबिना एक तत्व प्लेसहोल्डर लिंक बनाने का सही HTML 5 तरीका है।href

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

Answer 4

यह मेरे लिए काम किया:

मैंने मेनू में सीएसएस क्लासेस को सक्रिय किया > स्क्रीन विकल्प> सीएसएस क्लासेस फिर मैंने मेनू तत्व दिया जिसे मैं क्लास ".nolink" को निष्क्रिय करना चाहता था और इस कोड को अपने कस्टम सीएसएस पैनल में जोड़ दिया:

.nolink {
   pointer-events: none;
   cursor: default;
}

Comments

यह ड्रॉपडाउन को भी मारता है।

— user385917

#लिंक लक्ष्य के रूप में उपयोग करना और फिर स्टाइल के उद्देश्यों के लिए एक कस्टम सीएसएस वर्ग को लागू करना, मेरी राय में कम से कम हैकी समाधान है। हालाँकि, सेटिंग pointer-events: noneमेरे लिए बहुत मायने नहीं रखती है, क्योंकि यह सब मेनू को तोड़ देगा। क्या आप उस विशेषता को निर्धारित करने के बारे में विस्तार से बता सकते हैं?

— user1438038

Answer 5

PHP दृष्टिकोण का उपयोग करते हुए मैंने इस कोड को functions.php में जोड़ा:

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

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

Answer 6

में: मैं इस तरह से हल header.php (अपने विषय के) मैं के लिए खोज:

'link_before'     => '',
'link_after'      => '',

और इसके साथ प्रतिस्थापित:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

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

आशा करता हूँ की ये काम करेगा :-)

Comments

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

— स्कॉट

Answer 7

जैसा कि यहां अन्य लोगों ने सुझाव दिया है कि आप अपने यूआरएल के रूप में # के साथ एक कस्टम लिंक मेनू आइटम बना सकते हैं। फिर मेनू में जोड़े जाने पर # मिटाएं। और अंत में, आप इस सरल regex का उपयोग उन लिंक से वास्तविक टैग को हटाने के लिए कर सकते हैं।

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);

Answer 8

यह क्लिक को हटा देगा (और आइटम को अनस्टाइल करेगा)। इस तरह, आपको अपने मेनू में कस्टम # लिंक का उपयोग नहीं करना है।

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );

Answer 9

सराहना करना एक पुराना धागा है, लेकिन वर्डप्रेस में लिंक होने के त्वरित और गंदे तरीके के लिए लिंक को निम्नानुसार बनाना है:

#_

हैशटैग के बाद अंडरस्कोर को नोटिस करें। इस तरह यदि आपका मेनू पृष्ठ को स्क्रॉल करता है (यानी फिक्स्ड), तो आपको उस पर क्लिक करने पर पृष्ठ के शीर्ष पर एक छलांग नहीं मिलती है और किसी भी प्लगइन्स / स्क्रिप्ट की आवश्यकता नहीं होती है।

Answer 10

मुझे लगता है कि मुझे खेल में देर हो गई है, लेकिन ये दो तरीके हैं जिनका मैं उपयोग करता हूं:

1) मूल मेनू आइटम को पहले उप-आइटम का डुप्लिकेट बनाएं, और उसका लेबल बदलें। उदाहरण के लिए, यदि "उत्पाद" के अंतर्गत पहला आइटम "उत्पाद 1" है, तो "उत्पाद 1" को मूल मेनू आइटम के रूप में उपयोग करें, फिर इसके लेबल को "उत्पाद" में बदलें। इस तरह, दोनों "उत्पाद" और "उत्पाद 1" पृष्ठ 1 उत्पाद का नेतृत्व करेंगे।

2) एक रीडायरेक्ट जोड़ें ताकि उत्पाद पृष्ठ उत्पाद 1 पर पुनर्निर्देशित हो जाए। इस विकल्प का लाभ यह है कि यह आपको पन्नों में एक श्रेणीबद्ध सूची बनाने के लिए एक रिक्त उत्पाद पृष्ठ बनाने की अनुमति देता है, लेकिन यदि कोई रिक्त उत्पादों पर जाने की कोशिश करता है पृष्ठ, उन्हें पुनर्निर्देशित किया जाएगा।

Answer 11

Appearance पर जाएं, फिर मेनू पर क्लिक करें। इस अनुभाग में मेनू संरचना के नीचे जाएं और पृष्ठ का विस्तार करने के लिए नीचे तीर पर क्लिक करें और आपको एक बॉक्स दिखाई देगा जो अक्षम लिंक कहता है। उस बॉक्स को चेक करें और सेव करें।

Comments

यह कार्यक्षमता कोर द्वारा प्रदान नहीं की गई है। शायद कोई थीम या प्लगइन इसे आपके सेटअप में जोड़ रहा है?

— डेव रोमसे

मैंने इसे पहले भी देखा है, काश मुझे पता होता कि कौन सा प्लगइन या थीम ऐसा करता।

— दावजरिया

Answer 12

1. # के लिए कस्टम लिंक सेट करें जो कुछ भी नहीं लौटेगा आइटम सूची

2. इस फ़िल्टर को जोड़ें:

   add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
   
   function wpse_remove_empty_links( $menu ) {
   
       return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
   
   }

3. सीएसएस को उसी शैली की तरह संपादित करने के लिए <a>, मत भूलना cursor: context-menu;।

Answer 13

"कस्टम लिंक" मेनू आइटम बनाएं और "जावास्क्रिप्ट:" जोड़ें; (बिना उद्धरण के) URL फ़ील्ड के लिए। "#" का उपयोग करने की तुलना में यह बेहतर तरीका है क्योंकि क्लिक करने पर यह आपके पृष्ठ को शीर्ष पर नहीं ले जाएगा।

Answer 14

1/2019 से लिखना, उचित HTML5 बनाने वाला समाधान निम्नलिखित कार्य करना है।

1. # पर सेट URL के साथ एक कस्टम लिंक जोड़ें, और जो भी नाम आप चाहें। दोनों क्षेत्रों की आवश्यकता है।
2. नए जोड़े गए कस्टम लिंक को संपादित करें ताकि URL खाली हो।
3. परिवर्तनों को सुरक्षित करें।

यह एक शीर्ष स्तर की नौसेना का उत्पादन करेगा <a>Menu</a>जो गैर-क्लिक करने योग्य लिंक का प्रतिनिधित्व करने का सही तरीका है।

Answer 15

आप <a>शुद्ध सीएसएस का उपयोग करके सभी प्रथम स्तर के मेनू आइटम के टैग पर घटनाओं को अक्षम कर सकते हैं । .main-menuआपके नामकरण के अनुसार कक्षा का दूसरा नाम हो सकता है।

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}

Answer 16

एक और सवाल पर बहुत आसान समाधान पाया जा सकता है:

व्यवस्थापक मेनू - उप-मेनू पृष्ठ पर (उप-मेनू दिखाए बिना) शीर्ष-स्तरीय मेनू को हाइलाइट करें

आस्केलन के उत्तर के लिए देखें। किसी भी preg_replaces या jquery को करने की आवश्यकता के बिना, पूरी तरह से काम करें।