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

प्रत्येक पृष्ठ के लिए एक समर्पित कोड स्थान
एचटीएमएल विजेट में स्क्रिप्ट भरना बंद करें या उन्हें वैश्विक फ़ाइलों में बिखेरें यह एक्सटेंशन एक समर्पित कस्टम जेएस फ़ील्ड जोड़ता है Page Settings > Advanced tabकोई भी कोड जो आप यहां लिखते हैं वह केवल इस विशिष्ट पृष्ठ या पोस्ट पर चलता है यह एक-बंद स्क्रिप्ट, ए/बी परीक्षण ट्रैकिंग, या अद्वितीय इंटरैक्टिव तत्वों को संभालने का संगठित तरीका है।
- साफ पृथक्करण: अपनी साइट-व्यापी कोड से अलग-अलग पृष्ठ-विशिष्ट स्क्रिप्ट रखें अन्य पृष्ठों को तोड़ने का कोई जोखिम नहीं।
- आसान पहुंच: पेज सेटिंग्स में तुरंत अपना कोड ढूंढें, विजेट पैनल के माध्यम से कोई खुदाई नहीं।
- अंतर्निहित सर्वोत्तम अभ्यास: फ़ील्ड स्वचालित रूप से संभालती है
$(document).ready()आपके लिए, इसलिए आप सीधे अपना मूल तर्क लिख सकते हैं।
पृष्ठ-स्तर और तत्व-स्तर जावास्क्रिप्ट
पृष्ठ-स्तर कोड पृष्ठ सेटिंग्स, उन्नत, कस्टम जेएस में रहता है, और केवल उस पृष्ठ पर चलता है तत्व-स्तर कोड किसी भी विजेट, कॉलम, अनुभाग या कंटेनर के उन्नत टैब में रहता है तत्व-स्तर कोड में, शब्द selector उस तत्व के सीएसएस वर्ग के लिए स्वैप किया गया है, इसलिए स्क्रिप्ट केवल उस तत्व को छूती है।
- नहीं <स्क्रिप्ट> टैग और कोई दस्तावेज़ तैयार रैपर: कोड में लिपटे है
jQuery(document).readyतुम्हारे लिए, और$काम करता है। - सामग्री लोड होने के बाद स्क्रिप्ट पेज पाद लेख में प्रिंट हो जाती हैं।
- कोड लाइव पेज पर चलता है, एलिमेंट संपादक पूर्वावलोकन के अंदर नहीं, इसलिए सहेजने के बाद प्रकाशित पृष्ठ की जांच करें।
- शब्द चयनकर्ता के प्रत्येक उदाहरण को तत्व-स्तरीय कोड में बदल दिया गया है उपयोग करें
$('selector')बजायdocument.querySelectorवहाँ।
एलिमेंटर में कस्टम जावास्क्रिप्ट कैसे जोड़ें
ये चरण मानते हैं कि मास्टर एडॉन्स प्रो सक्रिय है और आपकी वर्डप्रेस भूमिका अनफ़िल्टर्ड HTML प्रकाशित कर सकती है, जिसे प्रशासक डिफ़ॉल्ट रूप से प्रकाशित कर सकते हैं।
- अपने डैशबोर्ड में, मास्टर ऐडऑन पर जाएं, एक्सटेंशन टैब खोलें, कस्टम जेएस चालू करें और सहेजें।
- एलिमेंट के साथ पेज को संपादित करें।
- पूरे पृष्ठ के लिए, पेज सेटिंग्स खोलें, फिर उन्नत, फिर कस्टम जेएस एक तत्व के लिए, इसे चुनें और इसके उन्नत टैब खोलें।
- <स्क्रिप्ट> टैग के बिना अपना कोड पेस्ट करें।
- पृष्ठ को अपडेट करें और लाइव यूआरएल पर इसका परीक्षण करें।
तीन एलिमेंटर कस्टम जेएस उदाहरण
इनमें से किसी को भी कस्टम जेएस फ़ील्ड में चिपकाएँ और अपने पेज से मेल खाने के लिए क्लास नाम बदलें।
१ स्क्रॉल करने के बाद हेडर में एक क्लास जोड़ें (पेज लेवल)
$(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 के बजाय मुझे इसका उपयोग कब करना चाहिए?
एक पृष्ठ या एक तत्व से संबंधित स्क्रिप्ट के लिए इसका उपयोग करें, जैसे कैलकुलेटर, स्क्रॉल प्रभाव या क्लिक ईवेंट कोड के लिए जो हर पृष्ठ की आवश्यकता होती है, साइट-व्यापी विकल्प जैसे कि आपकी थीम या कोड स्निपेट्स प्लगइन एक बेहतर घर है एचटीएमएल विजेट भी काम करता है, लेकिन स्क्रिप्ट कैनवास पर बिखरे हुए समाप्त होते हैं और बाद में याद करना आसान होता है।
क्या कोड को छोटा किया गया है या प्रदर्शन के लिए अनुकूलित किया गया है?
नहीं, कोड जोड़ा जाता है जैसा कि आप इसे लिखते हैं, इसलिए इसे छोटा और साफ रखें मास्टर एडॉन्स केवल उस तत्व के सीएसएस वर्ग के लिए तत्व-स्तरीय कोड में चयनकर्ता कीवर्ड को स्वैप कर रहा है।
यदि मैं टूटी जावास्क्रिप्ट लिखता हूं तो क्या होगा क्या यह मेरे पूरे पृष्ठ को तोड़ देगा?
यह कर सकते हैं एक वाक्यविन्यास त्रुटि उस पृष्ठ पर अन्य स्क्रिप्ट को चलने से रोक सकती है पहले अपने ब्राउज़र कंसोल में कोड का परीक्षण करें, और यदि पृष्ठ मायने रखता है तो इसे स्टेजिंग साइट पर आज़माएं।
क्या मैं इसे डायनामिक डेटा या एलिमेंट के वेरिएबल्स के साथ उपयोग कर सकता हूँ?
सीधे, जेएस क्षेत्र के भीतर ही नहीं हालांकि, आप जावास्क्रिप्ट लिख सकते हैं जो पृष्ठ पर तत्वों के साथ बातचीत करता है जो गतिशील डेटा द्वारा आबादी में हैं उदाहरण के लिए, आप एक स्क्रिप्ट लिख सकते हैं जो गतिशील रूप से भरे हुए शीर्षक से पाठ को पढ़ता है आप उन तत्वों को लक्षित करने के लिए सामान्य जावास्क्रिप्ट चयनकर्ताओं का उपयोग करेंगे।

ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।

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

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

पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर

