केवल विशिष्ट

Mia Chevalier

शुक्रवार, 27 सितंबर 2024 को 1:27:49 am

लक्षित वर्डप्रेस पेज पर जावास्क्रिप्ट लागू करना

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

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

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

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

आज्ञा	उपयोग का उदाहरण
is_page()	फ़ंक्शन के रूप में जाना जाता है is_page() सत्यापित करता है कि वर्तमान वर्डप्रेस पेज किसी दिए गए पेज आईडी, शीर्षक या स्लग से मेल खाता है या नहीं। यह गारंटी देने के लिए कि स्क्रिप्ट केवल एक विशिष्ट पृष्ठ पर ही लोड की जाती हैं, यह फ़ंक्शन आवश्यक है। उदाहरण के लिए, यदि (is_page(42)) {... }
wp_enqueue_script()	वर्डप्रेस का उपयोग करता है wp_enqueue_script() जावास्क्रिप्ट फ़ाइलें लोड करने की विधि। यह गारंटी देता है कि स्क्रिप्ट साइट के शीर्ष या पादलेख में लोड की गई हैं और उनकी निर्भरता के साथ सही ढंग से शामिल हैं। wp_enqueue_script('custom-js', 'https://example.com/code.js') इसका एक उदाहरण है।
add_action()	कस्टम फ़ंक्शंस को पूर्वनिर्धारित वर्डप्रेस ईवेंट, जैसे लोडिंग स्क्रिप्ट में हुक करने के लिए, का उपयोग करें add_action() तरीका। इससे जरूरत पड़ने पर स्क्रिप्ट को गतिशील रूप से सम्मिलित करना संभव हो जाता है। 'wp_enqueue_scripts', 'load_custom_js_on_special_page' ऐड क्रियाओं के दो उदाहरण हैं।');
add_shortcode()	वर्डप्रेस आपको इसका उपयोग करके एक नया शॉर्टकोड पंजीकृत करने की अनुमति देता है add_शॉर्टकोड() समारोह। यह आपको जावास्क्रिप्ट जैसी गतिशील सामग्री को सीधे पोस्ट संपादक में जोड़ने की अनुमति देता है। Add_shortcode('custom_js', 'add_js_via_shortcode') एक उदाहरण है।
$.getScript()	एक बार पेज लोड हो जाने पर, आप jQuery विधि का उपयोग कर सकते हैं $.getScript() बाहरी जावास्क्रिप्ट फ़ाइल को गतिशील रूप से लोड करने के लिए। URL या अन्य मानदंडों के आधार पर स्क्रिप्ट लोडिंग में सशर्त तर्क लागू करना इसके लिए एक मूल्यवान उपयोग है। उदाहरण के लिए, $.getScript('https://example.com/code.js')।
window.location.href	window.location.href property returns the full URL of the current page. It can be used to check for specific URL patterns, making it useful for conditionally loading JavaScript on certain pages. Example: if (window.location.href.indexOf('specific-page-slug') > संपत्ति वर्तमान पृष्ठ का पूरा यूआरएल लौटाती है। इसका उपयोग विशिष्ट यूआरएल पैटर्न की जांच करने के लिए किया जा सकता है, जिससे यह कुछ पृष्ठों पर जावास्क्रिप्ट को सशर्त रूप से लोड करने के लिए उपयोगी हो जाता है। उदाहरण: यदि (window.location.href.indexOf('special-page-slug') > -1) { ... }
get_header()	हेडर टेम्प्लेट फ़ाइल को वर्डप्रेस द्वारा लोड किया जाता है get_header() समारोह। जावास्क्रिप्ट कोड जोड़ने से पहले, इसका उपयोग कस्टम पेज टेम्प्लेट में किया जाता है ताकि यह सुनिश्चित किया जा सके कि संरचना उचित है। उदाहरण के लिए,
get_footer()	वर्डप्रेस फूटर टेम्प्लेट किसके द्वारा लोड किया गया है get_footer() फ़ंक्शन, जो यह सुनिश्चित करता है कि पेज आउटपुट में उचित रूप से डालने से पहले जावास्क्रिप्ट लोड किया गया है। उदाहरण के लिए,

विशिष्ट वर्डप्रेस पेजों पर जावास्क्रिप्ट की भूमिका को समझना

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

पहली विधि में सशर्त टैग का उपयोग किया जाता है फ़ंक्शन.php साथ में फ़ाइल करें wp_enqueue_script(). यह तकनीक एक बुनियादी वर्डप्रेस सुविधा का उपयोग करती है जो स्क्रिप्ट को इस तरह से जोड़ती है जो उचित निर्भरता प्रबंधन सुनिश्चित करती है और स्क्रिप्ट को पृष्ठ के उचित क्षेत्र में लोड करती है। के माध्यम से wp_enqueue_scripts एक्शन हुकिंग, जावास्क्रिप्ट फ़ंक्शन केवल तभी जोड़ा जाएगा जब वर्डप्रेस एक पेज को संसाधित करता है जो संतुष्ट करता है is_page() मांग। प्रभावी होने के अलावा, यह महत्वहीन साइटों पर व्यर्थ स्क्रिप्ट निष्पादन को रोकता है।

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

एक अन्य विधि उन पृष्ठों पर स्क्रिप्ट को गतिशील रूप से लोड करने के लिए एकदम सही है जिनके यूआरएल में विशिष्ट पैरामीटर हैं क्योंकि यह यूआरएल में विशेष पैटर्न देखने के लिए jQuery का उपयोग करता है। window.location.href और $.getScript() इस दृष्टिकोण का उपयोग यह पहचानने के लिए किया जाता है कि URL में कोई विशेष स्ट्रिंग शामिल है या नहीं और जावास्क्रिप्ट फ़ाइल को उचित रूप से लोड करें। यह दृष्टिकोण ई-कॉमर्स साइटों या अद्वितीय ट्रैकिंग कोड वाले लैंडिंग पृष्ठों जैसी स्थितियों के लिए अच्छा काम करता है, जहां यूआरएल संरचना के लिए स्क्रिप्ट के उपयोग की आवश्यकता होती है। ये तकनीकें सभी मॉड्यूलर, पुन: प्रयोज्य हैं, और यह सुनिश्चित करती हैं कि स्क्रिप्ट केवल जरूरत पड़ने पर ही लोड होती हैं, जो उपयोगकर्ता अनुभव और प्रदर्शन को बढ़ाती है।

सशर्त टैग का उपयोग करके एक विशिष्ट वर्डप्रेस पेज पर जावास्क्रिप्ट जोड़ना

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

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

शॉर्टकोड का उपयोग करके एक विशिष्ट वर्डप्रेस पेज पर जावास्क्रिप्ट चलाना

यह विधि आपको वर्डप्रेस शॉर्टकोड का उपयोग करके एक निश्चित पृष्ठ पर सशर्त रूप से जावास्क्रिप्ट जोड़कर स्क्रिप्ट का उपयोग करने की स्वतंत्रता देती है।

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

jQuery का उपयोग करके URL पैरामीटर्स के आधार पर जावास्क्रिप्ट लोड करना

यह तकनीक जावास्क्रिप्ट को सशर्त रूप से लोड करती है और एक निश्चित यूआरएल पैटर्न की पहचान करने के लिए jQuery का उपयोग करती है। गतिशील रूप से लक्षित पृष्ठों के लिए, यह आदर्श है।

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

टेम्प्लेट फ़ाइलों का उपयोग करके विशिष्ट पृष्ठों पर जावास्क्रिप्ट जोड़ना

जावास्क्रिप्ट को सीधे वर्डप्रेस पेज टेम्प्लेट फ़ाइल में जोड़कर, यह विधि यह बनाती है कि स्क्रिप्ट केवल उस विशिष्ट पेज पर लोड की जाती है।

// Inside page-specific template file (e.g., page-custom.php)
<?php get_header(); ?>
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
<?php get_footer(); ?>

वर्डप्रेस पेजों पर जावास्क्रिप्ट लोडिंग को अनुकूलित करना

विशेष वर्डप्रेस पृष्ठों पर जावास्क्रिप्ट का उपयोग करते समय स्क्रिप्ट कहाँ लोड की गई है यह एक महत्वपूर्ण विचार है। वर्डप्रेस डिफ़ॉल्ट रूप से स्क्रिप्ट को पेज में लोड करने की अनुमति देता है FOOTER या हैडर. प्रदर्शन कारणों से, आमतौर पर पाद लेख में स्क्रिप्ट लोड करने की अनुशंसा की जाती है, खासकर बाहरी संसाधनों का उपयोग करते समय। ऐसा इसलिए है ताकि उपयोगकर्ता पेज लोड होने तक जावास्क्रिप्ट निष्पादन को स्थगित करके तेजी से पेज लोड का आनंद ले सकें।

आप बदल सकते हैं wp_enqueue_script() किसी स्क्रिप्ट को पास करके पादलेख में लोड करने की विधि सत्य अंतिम पैरामीटर के रूप में. ऐसा करके, आप यह सुनिश्चित कर सकते हैं कि स्क्रिप्ट अंतिम बॉडी टैग और शेष पृष्ठ सामग्री से पहले लोड हो। क्योंकि कम महत्वपूर्ण स्क्रिप्ट में देरी होती है और अधिक महत्वपूर्ण संसाधनों को प्राथमिकता दी जाती है, यह तकनीक स्पष्ट लोड समय को कम करने में मदद करती है। हालाँकि यह अनुकूलन नौसिखियों के लिए उतना अच्छा नहीं लग सकता है, लेकिन इसका वर्डप्रेस साइट की गति और कार्यक्षमता पर बड़ा प्रभाव पड़ता है।

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

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

मैं यह कैसे सुनिश्चित कर सकता हूँ कि कोई स्क्रिप्ट केवल किसी विशेष पृष्ठ पर ही खुले?
पेज आईडी या स्लग के आधार पर स्क्रिप्ट को सशर्त रूप से लोड करने के लिए, इसका उपयोग करें is_page() में कार्य करें functions.php आपके विषय की फ़ाइल.
वर्डप्रेस में जावास्क्रिप्ट जोड़ने का सबसे अच्छा तरीका क्या है?
वर्डप्रेस में जावास्क्रिप्ट जोड़ने के लिए, wp_enqueue_script() फ़ंक्शन अनुशंसित तकनीक है. यह निर्भरता और स्क्रिप्ट प्रोसेसिंग के उचित प्रबंधन की गारंटी देता है।
क्या मैं पादलेख में जावास्क्रिप्ट लोड कर सकता हूँ?
हां, बेहतर प्रदर्शन के लिए स्क्रिप्ट को पादलेख में लोड करने के लिए, पास करें true के पांचवें तर्क के रूप में wp_enqueue_script().
मैं जावास्क्रिप्ट फ़ाइलों के लिए कैश बस्टिंग को कैसे संभालूँ?
यह सुनिश्चित करने के लिए कि नवीनतम संस्करण लोड किया गया है, संस्करण विकल्प का उपयोग करके स्क्रिप्ट के यूआरएल में एक संस्करण संख्या जोड़ें wp_enqueue_script().
क्या मैं जावास्क्रिप्ट जोड़ने के लिए शोर्टकोड का उपयोग कर सकता हूँ?
हाँ, आप उपयोग कर सकते हैं add_shortcode() एक शॉर्टकोड बनाने के लिए जो आपको किसी पेज या पोस्ट के विशेष क्षेत्रों में जावास्क्रिप्ट जोड़ने की अनुमति देगा।

वर्डप्रेस पेजों के लिए जावास्क्रिप्ट को अनुकूलित करने पर अंतिम विचार

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

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

वर्डप्रेस पेजों पर जावास्क्रिप्ट के लिए संदर्भ और स्रोत

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

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