एलिमेंटर में कस्टम जावास्क्रिप्ट जोड़ें: पेज और एलिमेंट लेवल जेएस

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

प्रत्येक पृष्ठ के लिए एक समर्पित कोड स्थान

प्रत्येक पृष्ठ के लिए एक समर्पित कोड स्थान

एचटीएमएल विजेट में स्क्रिप्ट भरना बंद करें या उन्हें वैश्विक फ़ाइलों में बिखेरें यह एक्सटेंशन एक समर्पित कस्टम जेएस फ़ील्ड जोड़ता है Page Settings > Advanced tabकोई भी कोड जो आप यहां लिखते हैं वह केवल इस विशिष्ट पृष्ठ या पोस्ट पर चलता है यह एक-बंद स्क्रिप्ट, ए/बी परीक्षण ट्रैकिंग, या अद्वितीय इंटरैक्टिव तत्वों को संभालने का संगठित तरीका है।

  • साफ पृथक्करण: अपनी साइट-व्यापी कोड से अलग-अलग पृष्ठ-विशिष्ट स्क्रिप्ट रखें अन्य पृष्ठों को तोड़ने का कोई जोखिम नहीं।
  • आसान पहुंच: पेज सेटिंग्स में तुरंत अपना कोड ढूंढें, विजेट पैनल के माध्यम से कोई खुदाई नहीं।
  • अंतर्निहित सर्वोत्तम अभ्यास: फ़ील्ड स्वचालित रूप से संभालती है $(document).ready() आपके लिए, इसलिए आप सीधे अपना मूल तर्क लिख सकते हैं।

पृष्ठ-स्तर और तत्व-स्तर जावास्क्रिप्ट

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

  • नहीं <स्क्रिप्ट> टैग और कोई दस्तावेज़ तैयार रैपर: कोड में लिपटे है jQuery(document).ready तुम्हारे लिए, और $ काम करता है।
  • सामग्री लोड होने के बाद स्क्रिप्ट पेज पाद लेख में प्रिंट हो जाती हैं।
  • कोड लाइव पेज पर चलता है, एलिमेंट संपादक पूर्वावलोकन के अंदर नहीं, इसलिए सहेजने के बाद प्रकाशित पृष्ठ की जांच करें।
  • शब्द चयनकर्ता के प्रत्येक उदाहरण को तत्व-स्तरीय कोड में बदल दिया गया है उपयोग करें $('selector') बजाय document.querySelector वहाँ।

एलिमेंटर में कस्टम जावास्क्रिप्ट कैसे जोड़ें

ये चरण मानते हैं कि मास्टर एडॉन्स प्रो सक्रिय है और आपकी वर्डप्रेस भूमिका अनफ़िल्टर्ड HTML प्रकाशित कर सकती है, जिसे प्रशासक डिफ़ॉल्ट रूप से प्रकाशित कर सकते हैं।

  1. अपने डैशबोर्ड में, मास्टर ऐडऑन पर जाएं, एक्सटेंशन टैब खोलें, कस्टम जेएस चालू करें और सहेजें।
  2. एलिमेंट के साथ पेज को संपादित करें।
  3. पूरे पृष्ठ के लिए, पेज सेटिंग्स खोलें, फिर उन्नत, फिर कस्टम जेएस एक तत्व के लिए, इसे चुनें और इसके उन्नत टैब खोलें।
  4. <स्क्रिप्ट> टैग के बिना अपना कोड पेस्ट करें।
  5. पृष्ठ को अपडेट करें और लाइव यूआरएल पर इसका परीक्षण करें।

तीन एलिमेंटर कस्टम जेएस उदाहरण

इनमें से किसी को भी कस्टम जेएस फ़ील्ड में चिपकाएँ और अपने पेज से मेल खाने के लिए क्लास नाम बदलें।

१ स्क्रॉल करने के बाद हेडर में एक क्लास जोड़ें (पेज लेवल)

$(window).on('scroll', function () {
  $('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});

२ एक तत्व क्लिक किया जाता है जब एक वर्ग टॉगल (तत्व स्तर)

$('selector').on('click', function () {
  $(this).toggleClass('is-open');
});

3। एक बटन पर क्लिक करने पर Google Analytics ईवेंट भेजें (पेज स्तर)

$('.cta-button a').on('click', function () {
  if (typeof gtag === 'function') {
    gtag('event', 'cta_click', { location: 'pricing' });
  }
});

तुलना किए गए एलिमेंटर में जावास्क्रिप्ट जोड़ने के तरीके

तीन सामान्य मार्ग हैं सही एक इस बात पर निर्भर करता है कि स्क्रिप्ट को चलाने की आवश्यकता है यदि आपको एक तत्व के लिए स्कोप की गई शैलियों की भी आवश्यकता है, तो मुफ्त कस्टम सीएसएस एक्सटेंशन उसी तरह काम करता है।

एचटीएमएल विजेटएलिमेंटर प्रो कस्टम कोडमास्टर एडॉन्स कस्टम जेएस
योजनाफ्री एलिमेंटएलिमेंट प्रोमास्टर एडॉन्स प्रो
दायराविजेट जिस पृष्ठ पर बैठता हैसाइट-व्यापी, प्रदर्शन स्थितियों के साथएक पृष्ठ, या एक तत्व
जहाँ आप इसे लिखते हैंकैनवास पर एक विजेट के अंदरडैशबोर्ड में एक कस्टम कोड स्क्रीनपृष्ठ सेटिंग्स, या तत्व का उन्नत टैब
स्क्रिप्ट टैगजरूरतजरूरतजरूरत नहीं
एक तत्व को लक्षित करेंचयनकर्ता को स्वयं लिखेंचयनकर्ता को स्वयं लिखेंचयनकर्ता कीवर्ड का उपयोग करें

कस्टम जेएस के लिए अक्सर पूछे जाने वाले प्रश्न

कस्टम जेएस के बारे में उपयोगकर्ताओं द्वारा पूछे जाने वाले सबसे अधिक पूछे जाने वाले प्रश्नों को जानें और एक ही स्थान पर उत्तर खोजें।
HTML विजेट या मेरी थीम के फ़ंक्शंस।php के बजाय मुझे इसका उपयोग कब करना चाहिए?

एक पृष्ठ या एक तत्व से संबंधित स्क्रिप्ट के लिए इसका उपयोग करें, जैसे कैलकुलेटर, स्क्रॉल प्रभाव या क्लिक ईवेंट कोड के लिए जो हर पृष्ठ की आवश्यकता होती है, साइट-व्यापी विकल्प जैसे कि आपकी थीम या कोड स्निपेट्स प्लगइन एक बेहतर घर है एचटीएमएल विजेट भी काम करता है, लेकिन स्क्रिप्ट कैनवास पर बिखरे हुए समाप्त होते हैं और बाद में याद करना आसान होता है।

नहीं, कोड जोड़ा जाता है जैसा कि आप इसे लिखते हैं, इसलिए इसे छोटा और साफ रखें मास्टर एडॉन्स केवल उस तत्व के सीएसएस वर्ग के लिए तत्व-स्तरीय कोड में चयनकर्ता कीवर्ड को स्वैप कर रहा है।

यदि मैं टूटी जावास्क्रिप्ट लिखता हूं तो क्या होगा क्या यह मेरे पूरे पृष्ठ को तोड़ देगा?

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

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

टेम्पलेट व्यूअर
फेसबुक
ट्विटर
व्हाट्सएप
कॉपी लिंक
अभी खरीदें
कस्टम जेएस सरल चेतावनी
कस्टम जेएस सरल चेतावनी

ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन

कम समय में परिष्कृत वेबसाइट बनाएं।

एलिमेंटर के लिए मास्टर एडॉन्स ग्लासमोर्फिज्म एक्सटेंशन: ब्लर वैल्यू कंट्रोल के साथ फ्रॉस्टेड ग्लास कार्ड 20px पर सेट

ग्लासमोर्फिज्म

होम फ्री एलिमेंटर ग्लासमोर्फिज्म एक्सटेंशन: एक टॉगल में फ्रॉस्टेड ग्लास प्रभाव ग्लासमोर्फिज्म फ्रॉस्टेड है।।।
विवरण देखें
एलिमेंटर के लिए मास्टर एडॉन्स कंटेनर एक्स्ट्रा एक्सटेंशन: कंटेनर को अधिकतम चौड़ाई, अधिकतम ऊंचाई, न्यूनतम चौड़ाई और न्यूनतम ऊंचाई नियंत्रण के साथ 1400px अधिकतम चौड़ाई पर कैप किया गया है

कंटेनर अतिरिक्त

होम एलिमेंटर कंटेनर अधिकतम चौड़ाई और अधिकतम ऊंचाई नियंत्रण कंटेनर एक्स्ट्रा एक निःशुल्क मास्टर है।।।
विवरण देखें
एलिमेंटर के लिए मास्टर एडॉन्स पैटर्न एक्सटेंशन: पर्पल ग्रेडिएंट ग्रिड लेफ्ट स्टाइल के साथ हीरो, तीन और पैटर्न स्टाइल और इनेबल पैटर्न पैनल

पैटर्न

होम 70+ फ्री एलिमेंटर बैकग्राउंड पैटर्न पैटर्न एक मुफ्त मास्टर ऐडऑन एक्सटेंशन है जो जोड़ता है।।।
विवरण देखें
एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट

पोस्ट/पेज डुप्लीकेटर

होम डुप्लिकेट एलिमेंटर पेज और पोस्ट एक क्लिक में पोस्ट/पेज डुप्लिकेटर एक निःशुल्क मास्टर है।।।
विवरण देखें
एलिमेंट के लिए मास्टर ऐडऑन रीडिंग प्रोग्रेस बार एक्सटेंशन: गोपनीयता नीति पृष्ठ के शीर्ष पर नीली बार 42% भरी हुई है, सक्षम, स्थिति, ऊंचाई और रंग सेटिंग्स भरने के साथ

प्रगति बार पढ़ना

होम वर्डप्रेस में रीडिंग प्रोग्रेस बार जोड़ें (एलिमेंटर) रीडिंग प्रोग्रेस बार मुफ़्त है।।।
विवरण देखें