वर्डप्रेस मेनू में जावास्क्रिप्ट जोड़ें

Question

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

<!-- BEGIN OLARK CHAT LINK -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
    Click here to chat!
</a>
<!-- END OLARK CHAT LINK -->

क्लाइंट उपयोगिता नेव बार में लिंक चाहता है, जिसे वर्डप्रेस डैशबोर्ड में वर्डप्रेस मेनू का उपयोग किया गया था। लेकिन जब मैं javascript:void(0);" onclick="olark('api.box.expand')WordPress डैशबोर्ड में URL बॉक्स में कॉपी और पेस्ट करता हूं , तो यह गायब हो जाता है और लिंक निष्क्रिय रहता है।

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

क्या किसी को भी यह करना आता है? मैं इसे एक प्लगइन का उपयोग किए बिना करना चाहूंगा।

Comments

आप उपयोगकर्ता इंटरफ़ेस के माध्यम से मेनू के लिए जावास्क्रिप्ट को जोड़ने के लिए सक्षम नहीं होना चाहिए, और तुम पर भरोसा नहीं किया जाना चाहिए onclickविशेषता जावास्क्रिप्ट निष्पादित करने के लिए

— टॉम जम्मू नॉवेल

क्यों नहीं? यह वह कोड है जो लाइव चैट कंपनी ने मुझे प्रदान किया है।

— mcography

यही कारण है कि यह यह करने के लिए सही तरीका है मतलब यह नहीं है, jQuerys देखो .click()घटना

— टॉम जम्मू नॉवेल

मैं यह कहने की कोशिश नहीं कर रहा था कि यह था। मैं सिर्फ यह पूछने की कोशिश कर रहा था कि मुझे कभी onclickविशेषता पर भरोसा क्यों नहीं करना चाहिए । मैं ऊपर देखूंगा .click()।

— मचोग्राफी

क्योंकि HTML एक दस्तावेज़ को परिभाषित करने के लिए है, उसी तरह एक ऑनक्लिक विशेषता जोड़ना उसी तरह से खराब है जैसे कि एक इनलाइन शैली टैग या विशेषता जोड़ना खराब है, यह उन्हें मिलाता है। क्यों यह बुरा है के लिए इस सवाल का देखें

— टॉम जम्मू नॉवेल

Answer 1

अच्छा है कि यह काम करता है। यदि यह एक ग्राहक के लिए है या यदि आप केवल एक क्लीनर कोड चाहते हैं, तो आप इसे @Tom J Nowell के रूप में सुझा सकते हैं।

एक कस्टम मेनू आइटम जोड़ें, इसे कहीं भी या कहीं भी लिंक करें। मेनू आइटम आईडी (प्रत्येक आइटम में एक है) का पता लगाएं, और फिर उस आईडी को jQuery के साथ लक्षित करें।

$("#menu-item-num").on("click", function(e){ 
      e.preventDefault();
      // olark code here
});

इस तरह, हर बार जब कोई उपयोगकर्ता menu-itemइस पर क्लिक करता है, तो ऊपर दी गई स्क्रिप्ट चालू हो जाएगी। आप फ़ंक्शन के माध्यम से jquery स्क्रिप्ट को जोड़ सकते हैं।

अपडेट करें:

1. सुनिश्चित करें कि आपका olark.js लोड हो रहा है। यदि आप इसे पाद लेख या शीर्ष लेख में जोड़ रहे हैं, तो अपने पृष्ठ का निरीक्षण करें और सुनिश्चित करें कि स्क्रिप्ट है। इसके अलावा, सुनिश्चित करें कि आपको ब्राउज़र के कंसोल में कोई त्रुटि नहीं मिल रही है।

2. तैयार दस्तावेज़ के साथ अपने जेएस लपेटें, ताकि स्क्रिप्ट सही समय पर निष्पादित हो:

   jQuery(document).ready(function($) {
     $("#menu-item-38872").on("click", function(e){
     e.preventDefault();
     olark('api.box.expand');
     });
   });

यह तथ्य कि लिंक लोड नहीं हो रहा है इसका मतलब है कि स्क्रिप्ट में कुछ गड़बड़ है या स्क्रिप्ट बिल्कुल लोड नहीं हो रही है।

Comments

आपके उत्तर के लिए धन्यवाद। मुझे जावास्क्रिप्ट के बारे में ज्यादा जानकारी नहीं है, तो क्या आप मुझे बता सकते हैं कि आपका समाधान बेहतर / क्लीनर क्यों है? बस समझने की कोशिश कर रहा हूं।

— मचोग्राफी

मैंने olark.js नाम से एक फ़ाइल बनाई और उसे एनकाउट किया, लेकिन लिंक अभी भी सिर्फ #(क्योंकि मैं इसे वर्डप्रेस डैशबोर्ड में सेट करता हूं) होता है। यह वही है जो मैंने olark.js में डाला है: $("#menu-item-38872").on("click", function(e){ e.preventDefault(); // olark code here olark('api.box.expand'); });मैं क्या गलत कर रहा हूं?

— मैकुलोग्राफी

आह हा! jQuery(document).ready(function($) {चाल किया! धन्यवाद, @gdaniel!

— मैकुलोग्राफी

खुशी है कि यह काम किया। स्क्रिप्ट को कंटेंट से अलग रखने का विचार है। इसलिए इसे इस तरह से करने का सुझाव दिया गया है।

— gdaniel

Answer 2

समाधान # 1 (आदर्श नहीं है, लेकिन यह काम करता है):

// Live Chat Utility Link
add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
function live_chat_utility_link ( $items, $args ) {
    if ( $args->theme_location == 'utility' ) {
        $items .= '<li><a href="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
    }
    return $items;
}

समाधान # 2 (आदर्श):

ऊपर की टिप्पणियों की मदद से, यहाँ समाधान है कि मेरे लिए काम किया है। मैंने olark.js नामक एक नई फ़ाइल बनाई और इस कोड को इसमें डाला:

jQuery(document).ready(function($) {
    $("#menu-item-38872").on("click", function(e){ 
          e.preventDefault();
          // olark code here
          olark('api.box.expand');
    });
});

फिर, मैंने स्क्रिप्ट को अपने कार्यों में शामिल किया। निम्न कोड के साथ:

function olark_script() {
    wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
    wp_enqueue_script( 'olark' );
}

add_action( 'wp_enqueue_scripts', 'olark_script' );

यदि यह काम नहीं करता है, तो सुनिश्चित करें कि आप अपनी स्क्रिप्ट को ठीक से समझ रहे हैं। मैं एक बाल विषय का उपयोग कर रहा हूं, इसलिए मुझे get_stylesheet_directory_uri()इसके बजाय उपयोग करना था get_template_directory_uri()।

Answer 3

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

एक विकल्प आपके मेनू-आइटम से #olark जैसे गैर-मौजूद एंकर से जुड़ने का हो सकता है। यह उपयोगकर्ता-इंटरफ़ेस का उपयोग करके सेट किया जा सकता है और विश्वसनीय एरो परिवेश है। तब आपकी अलग स्क्रिप्ट को हैश-चेंज (ब्राउज़र एड्रेस बार में) का निरीक्षण करना चाहिए और उसके अनुसार कार्य करना चाहिए।

एक साधारण कॉफी स्क्रिप्ट उदाहरण जो जावास्क्रिप्ट में संकलित करता है जो हैशचेंज को सुनता है:

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
#enable sharing the url
if location.hash then @showLogin()

@showLogin एक ऐसा फंक्शन है जो एक डायलॉग दिखाता है कि चलो अगर आप लॉगिन करते हैं तो हैश '#login' के बराबर है।

[संपादित करें] काफी मजेदार है, यदि आप मेनू आइटम पर क्लिक करते हैं तो पते में हैश नहीं बदलता है। यह अप्रत्याशित है और डिफ़ॉल्ट स्क्रिप्ट को रोकने वाली किसी अन्य स्क्रिप्ट के कारण हो सकता है। इसलिए मुझे एक लिंक पर क्लिक करने के जवाब में विंडो लोकेशन को बदलने के लिए एक और लाइन जोड़ना था:

# make sure the hash changes when a link in the menu is clicked (somehow, it doesn't in my case)
$('.menu-item a').click (event) =>
  window.location = $(event.currentTarget).attr 'href'

[/ संपादित करें]

Answer 4

आप इस का उपयोग फ़ंक्शन -php में जोड़-मेनू आइटम में स्क्रिप्ट जोड़ने के लिए कर सकते हैं

function add_nav_class($output) {
$output= preg_replace('/<a/', '<a id="join_club" onclick="awf_Form_.showForm(); return false;"', $output, -1);
return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

Comments

यह एक उचित समाधान नहीं है, यह पूरी तरह से मेनू को तोड़ देगा, क्योंकि सभी बटन प्रभावित होंगे, और यह वह नहीं करता है जो सवाल था।

— मिलान पेट्रोविच