केवळ एका विशिष्ट

Mia Chevalier

शुक्रवार, २७ सप्टेंबर, २०२४ रोजी २:०६:१६ म.पू.

लक्ष्यित वर्डप्रेस पृष्ठावर JavaScript लागू करणे

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

विशिष्ट पृष्ठ लक्ष्य करण्यासाठी वापरताना JavaScript फाइल सशर्त कशी लागू करावी हे समजून घेणे महत्वाचे आहे. JavaScript चे अनपेक्षित परिणाम होऊ शकतात आणि ते सर्वत्र वापरल्यास तुमच्या वेबसाइटचा वेग कमी होऊ शकतो. यामुळेच स्क्रिप्टला आवश्यक पानापर्यंत मर्यादित ठेवणे महत्त्वाचे आहे.

या लेखातील तुमचे वर्डप्रेस कॉन्फिगरेशन बदलण्याच्या प्रक्रियेतून आम्ही तुम्हाला मार्गदर्शन करू जेणेकरून JavaScript तुम्हाला आवश्यक असलेल्या पृष्ठांवरच लॉन्च होईल. नॉन-डेव्हलपर्सनाही उत्तर समजण्यासारखे आहे; हे मार्गदर्शक त्यांच्यासाठी आहे जे नुकतेच प्रारंभ करत आहेत.

तुम्ही हा धडा पूर्ण करल्यापर्यंत वर्डप्रेसमध्ये पृष्ठ-विशिष्ट स्क्रिप्ट हाताळण्यास तुम्हाला सोयीस्कर वाटले पाहिजे. तुमची JavaScript फक्त जिथे पाहिजे तिथे कार्यान्वित करते याची खात्री करण्यासाठी आवश्यक असलेल्या अचूक कोड आणि प्रक्रियेद्वारे आम्ही तुम्हाला मार्गदर्शन करू, तुमच्या वेबसाइटची कार्यक्षमता सुधारेल.

आज्ञा	वापराचे उदाहरण
is_page()	म्हणून ओळखले जाणारे कार्य is_page() वर्तमान वर्डप्रेस पृष्ठ दिलेल्या पृष्ठ आयडी, शीर्षक किंवा स्लगशी संबंधित आहे की नाही हे सत्यापित करते. स्क्रिप्ट्स केवळ एका विशिष्ट पृष्ठावर लोड केल्या जातात याची हमी देण्यासाठी, हे कार्य आवश्यक आहे. उदाहरणार्थ, जर (is_page(42)) {... }
wp_enqueue_script()	वर्डप्रेस वापरते wp_enqueue_script() JavaScript फाइल लोड करण्याची पद्धत. हे हमी देते की स्क्रिप्ट साइटच्या शीर्षस्थानी किंवा तळटीपमध्ये लोड केल्या गेल्या आहेत आणि त्यांच्या अवलंबनांसह योग्यरित्या समाविष्ट केल्या आहेत. wp_enqueue_script('custom-js', 'https://example.com/code.js') याचे उदाहरण आहे.
add_action()	सानुकूल फंक्शन्स पूर्वनिर्धारित वर्डप्रेस इव्हेंटमध्ये जोडण्यासाठी, जसे की लोडिंग स्क्रिप्ट, वापरा add_action() पद्धत हे आवश्यकतेनुसार गतिमानपणे स्क्रिप्ट घालणे शक्य करते. 'wp_enqueue_scripts', 'load_custom_js_on_specific_page' ॲड ॲक्शनची दोन उदाहरणे आहेत.');
add_shortcode()	वर्डप्रेस वापरून नवीन शॉर्टकोड नोंदणी करण्याची परवानगी देते add_shortcode() कार्य हे तुम्हाला डायनॅमिक सामग्री, जसे की JavaScript, थेट पोस्ट एडिटरमध्ये जोडण्याची परवानगी देते. Add_shortcode('custom_js', 'add_js_via_shortcode') हे एक उदाहरण आहे.
$.getScript()	एकदा पृष्ठ लोड झाल्यानंतर, तुम्ही jQuery पद्धत वापरू शकता $.getScript() बाह्य JavaScript फाइल डायनॅमिकरित्या लोड करण्यासाठी. 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') > मालमत्ता वर्तमान पृष्ठाची संपूर्ण URL देते. हे विशिष्ट URL पॅटर्न तपासण्यासाठी वापरले जाऊ शकते, जे काही विशिष्ट पृष्ठांवर JavaScript सशर्त लोड करण्यासाठी उपयुक्त बनवते. उदाहरण: जर (window.location.href.indexOf('specific-page-slug') > -1) { ... }
get_header()	शीर्षलेख टेम्पलेट फाइल वर्डप्रेस वापरून लोड केली जाते get_header() कार्य JavaScript कोड जोडण्यापूर्वी, रचना योग्य असल्याची खात्री करण्यासाठी ते सानुकूल पृष्ठ टेम्पलेट्समध्ये वापरले जाते. उदाहरणार्थ,
get_footer()	वर्डप्रेस फूटर टेम्पलेट द्वारे लोड केले आहे get_footer() फंक्शन, जे पृष्ठ आउटपुटमध्ये योग्यरित्या समाविष्ट करण्यापूर्वी JavaScript लोड केले असल्याचे सुनिश्चित करते. उदाहरणार्थ,

विशिष्ट वर्डप्रेस पृष्ठांवर JavaScript ची भूमिका समजून घेणे

स्क्रिप्ट थेट "हेड" विभागात ठेवण्याच्या पद्धतीमुळे जेव्हा तुम्हाला एक चालवण्याची आवश्यकता असेल तेव्हा ती प्रत्येक पृष्ठावर लोड होऊ शकते. JavaScript विशिष्ट वर्डप्रेस पृष्ठावर फाइल. वापरकर्ता अनुभव आणि कार्यक्षमतेच्या दृष्टीने, हे आदर्श नाही. मागील पर्याय स्क्रिप्टला फक्त निर्दिष्ट पृष्ठापर्यंत मर्यादित करून स्क्रिप्ट हाताळण्याचा अधिक प्रभावी मार्ग देतात. उदाहरणार्थ, आम्ही WordPress चा वापर करू शकतो is_page() वापरकर्ता त्याच्या आयडी किंवा स्लगवर आधारित विशिष्ट पृष्ठ पाहत आहे की नाही हे निर्धारित करण्यासाठी पद्धत. JavaScript फाइल फक्त आवश्यक असेल तेव्हाच लोड होते याची खात्री करण्यासाठी हे मुख्य तंत्र वापरले जाते.

पहिली पद्धत मध्ये कंडिशनल टॅग वापरते functions.php सह एकत्र फाइल करा wp_enqueue_script(). हे तंत्र मूलभूत वर्डप्रेस वैशिष्ट्याचा वापर करते जे स्क्रिप्ट अशा प्रकारे जोडते जे योग्य अवलंबित्व व्यवस्थापन सुनिश्चित करते आणि पृष्ठाच्या योग्य भागात स्क्रिप्ट लोड करते. च्या माध्यमातून wp_enqueue_scripts ॲक्शन हुकिंग, JavaScript फंक्शन तेव्हाच जोडले जाईल जेव्हा वर्डप्रेस एखाद्या पृष्ठावर प्रक्रिया करते जे is_page() आवश्यकता प्रभावी असण्याव्यतिरिक्त, हे क्षुल्लक साइट्सवर निरर्थक स्क्रिप्टची अंमलबजावणी थांबवते.

शॉर्टकोड वापरणे हा दुसऱ्या धोरणाचा भाग आहे. वर्डप्रेस शॉर्टकोड पृष्ठ किंवा पोस्टमध्ये डायनॅमिक सामग्री जोडणे सोपे करतात. add_shortcode() सानुकूल शॉर्टकोड तयार करण्यासाठी वापरला जाऊ शकतो, जो तुम्हाला आवश्यकतेनुसार सामग्री क्षेत्रात सशर्त स्क्रिप्ट घालण्याची परवानगी देईल. जर तुम्हाला वेबसाइट किंवा पोस्टच्या संपूर्ण पृष्ठाऐवजी विशिष्ट विभागांवर स्क्रिप्ट वापरायची असेल तर हे तुम्हाला अधिक पर्याय प्रदान करते. याव्यतिरिक्त, PHP फायलींमध्ये थेट बदल करण्यास अस्वस्थ असलेल्या लोकांसाठी हा अधिक सुलभ पर्याय आहे.

URL मध्ये विशिष्ट पॅरामीटर्स असलेल्या पृष्ठांवर डायनॅमिकली स्क्रिप्ट लोड करण्यासाठी दुसरी पद्धत योग्य आहे कारण ती URL मध्ये विशिष्ट पॅटर्न शोधण्यासाठी jQuery चा वापर करते. window.location.href आणि $.getScript() URL मध्ये विशिष्ट स्ट्रिंग समाविष्ट आहे की नाही हे ओळखण्यासाठी आणि JavaScript फाइल योग्यरित्या लोड करण्यासाठी या पद्धतीमध्ये वापरली जाते. हा दृष्टीकोन ई-कॉमर्स साइट्स किंवा अद्वितीय ट्रॅकिंग कोड असलेल्या लँडिंग पृष्ठांसारख्या परिस्थितींसाठी चांगला कार्य करतो जेथे URL संरचनेसाठी स्क्रिप्टचा वापर आवश्यक असतो. ही तंत्रे सर्व मॉड्युलर, पुन्हा वापरता येण्याजोग्या आहेत आणि स्क्रिप्ट फक्त आवश्यकतेनुसार लोड होतील याची खात्री करा, ज्यामुळे वापरकर्ता अनुभव आणि कार्यप्रदर्शन वाढते.

सशर्त टॅग वापरून विशिष्ट वर्डप्रेस पृष्ठावर JavaScript जोडणे

हा दृष्टिकोन वर्डप्रेसमध्ये PHP च्या अंगभूत कंडिशनल टॅगचा वापर करून फक्त निवडलेल्या पृष्ठावर JavaScript फाइल लोड करतो. हे तंत्र अतिशय वर्डप्रेस-अनुकूलित आहे.

// 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');

शॉर्टकोड वापरून विशिष्ट वर्डप्रेस पृष्ठावर JavaScript चालवणे

ही पद्धत तुम्हाला वर्डप्रेस शॉर्टकोड्स वापरून विशिष्ट पृष्ठावर JavaScript जोडून स्क्रिप्टचा वापर कुठे केला जातो यावर स्वातंत्र्य देते.

१

jQuery वापरून URL पॅरामीटर्सवर आधारित JavaScript लोड करत आहे

हे तंत्र JavaScript सशर्त लोड करते आणि विशिष्ट 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>

टेम्पलेट फाइल्स वापरून विशिष्ट पृष्ठांवर JavaScript जोडणे

वर्डप्रेस पृष्ठ टेम्पलेट फाइलमध्ये JavaScript जोडून, ही पद्धत स्क्रिप्ट केवळ त्या विशिष्ट पृष्ठावर लोड केली जाते.

// 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(); ?>

वर्डप्रेस पृष्ठांवर JavaScript लोडिंग ऑप्टिमाइझ करणे

विशिष्ट वर्डप्रेस पृष्ठांवर JavaScript वापरताना स्क्रिप्ट कुठे लोड केली जाते हे एक महत्त्वपूर्ण विचार आहे. वर्डप्रेस बाय डीफॉल्ट स्क्रिप्ट्सना पेजमध्ये लोड करण्याची परवानगी देते तळटीप किंवा शीर्षलेख. कार्यक्षमतेच्या कारणास्तव, स्क्रिप्ट तळटीपमध्ये लोड करण्याची शिफारस केली जाते, विशेषतः बाह्य संसाधने वापरताना. हे असे आहे की वापरकर्ते पृष्ठ लोडिंग पूर्ण होईपर्यंत JavaScript अंमलबजावणी पुढे ढकलून जलद पृष्ठ लोडचा आनंद घेऊ शकतात.

तुम्ही बदलू शकता wp_enqueue_script() पासिंग करून फूटरमध्ये स्क्रिप्ट लोड करण्याची पद्धत खरे अंतिम पॅरामीटर म्हणून. असे केल्याने, तुम्ही खात्री करू शकता की स्क्रिप्ट शेवटच्या बॉडी टॅगपूर्वी आणि उर्वरित पृष्ठ सामग्रीच्या आधी लोड होते. कारण कमी महत्त्वाच्या स्क्रिप्ट्सना विलंब होतो आणि अधिक महत्त्वपूर्ण संसाधनांना प्राधान्य दिले जाते, हे तंत्र स्पष्ट लोड वेळ कमी करण्यास मदत करते. जरी हे ऑप्टिमायझेशन नवशिक्यांना फारसे वाटत नसले तरी वर्डप्रेस साइटच्या गती आणि कार्यक्षमतेवर याचा मोठा प्रभाव पडतो.

कॅशे बस्टिंग आणि आवृत्ती नियंत्रण हे दोन इतर महत्त्वाचे घटक आहेत. वर्डप्रेस वापरण्यासाठी एक सोपी पद्धत प्रदान करते wp_enqueue_script() स्क्रिप्टमध्ये आवृत्ती क्रमांक जोडण्यासाठी फंक्शन. तुम्ही आवृत्ती युक्तिवाद जोडून वापरकर्ते त्यांच्या कॅशेमधून कालबाह्य JavaScript मिळवत नाहीत याची खात्री करू शकता. हे स्क्रिप्टची सर्वात अलीकडील आवृत्ती सतत लोड होत असल्याचे सुनिश्चित करते, जे स्क्रिप्ट विकसित करताना किंवा अपग्रेड करताना अत्यंत उपयुक्त आहे. ही प्रक्रिया स्क्रिप्ट संघर्षाची शक्यता कमी करते आणि वेबसाइटची कार्यक्षमता वाढवते.

वर्डप्रेस पृष्ठांवर JavaScript जोडण्याबद्दल सामान्य प्रश्न

स्क्रिप्ट फक्त एका विशिष्ट पानावर उघडेल याची खात्री मी कशी करू शकतो?
पृष्ठ आयडी किंवा स्लगवर आधारित स्क्रिप्ट सशर्त लोड करण्यासाठी, वापरा is_page() मध्ये कार्य १ तुमच्या थीमची फाइल.
वर्डप्रेसमध्ये JavaScript जोडण्याचा सर्वोत्तम मार्ग कोणता आहे?
वर्डप्रेसमध्ये जावास्क्रिप्ट जोडण्यासाठी, द wp_enqueue_script() फंक्शन हे शिफारस केलेले तंत्र आहे. हे अवलंबित्व आणि स्क्रिप्ट प्रक्रियेच्या योग्य व्यवस्थापनाची हमी देते.
मी फूटरमध्ये JavaScript लोड करू शकतो का?
होय, चांगल्या कामगिरीसाठी स्क्रिप्ट तळटीपमध्ये लोड करण्यासाठी, पास करा true च्या पाचव्या युक्तिवाद म्हणून wp_enqueue_script().
मी JavaScript फाइल्ससाठी कॅशे बस्टिंग कसे हाताळू?
सर्वात अलीकडील आवृत्ती लोड केली आहे याची खात्री करण्यासाठी, मधील आवृत्ती पर्याय वापरून स्क्रिप्टच्या URL मध्ये आवृत्ती क्रमांक जोडा wp_enqueue_script().
JavaScript जोडण्यासाठी मी शॉर्टकोड वापरू शकतो का?
होय, तुम्ही वापरू शकता add_shortcode() एक शॉर्टकोड तयार करण्यासाठी जो तुम्हाला पृष्ठ किंवा पोस्टच्या विशिष्ट भागात JavaScript जोडण्याची परवानगी देईल.

वर्डप्रेस पृष्ठांसाठी जावास्क्रिप्ट ऑप्टिमाइझ करण्याचे अंतिम विचार

तुमचा JavaScript कोड अधिक चांगल्या प्रकारे कार्यान्वित करेल आणि तुमच्या वेबसाइटवर वापरकर्ता अनुभव सुधारेल जर तो विशिष्ट पृष्ठावर लक्ष्यित असेल. जसे फंक्शन्स वापरून तुमची स्क्रिप्ट फक्त आवश्यक असेल तिथे लोड होईल is_page() आणि wp_enqueue_script(), जे तुमच्या वेबसाइटच्या इतर भागांसाठी लोड वेळा वेगवान करेल.

जर तुम्ही वर्डप्रेसमध्ये नवीन असाल आणि भरपूर कोड माहीत नसताना स्क्रिप्ट्स कार्यक्षमतेने व्यवस्थापित करू इच्छित असाल, तर तुमच्यासाठी या सर्वोत्तम पद्धती आहेत. लक्षात ठेवा की कोड अंमलबजावणीची व्याप्ती मर्यादित करून, विशिष्ट पृष्ठांवर JavaScript योग्यरित्या अंमलात आणल्याने कार्यक्षमतेव्यतिरिक्त सुरक्षा वाढते.

वर्डप्रेस पृष्ठांवर JavaScript साठी संदर्भ आणि स्रोत

वर्डप्रेसमध्ये स्क्रिप्ट्स कसे लावायचे यावरील तपशील अधिकृत वर्डप्रेस दस्तऐवजीकरणातून संदर्भित केले गेले. येथे अधिक जाणून घ्या वर्डप्रेस विकसक संदर्भ .
विशिष्ट पृष्ठांना लक्ष्य करण्यासाठी सशर्त टॅग वापरण्याबद्दलची माहिती वर्डप्रेस कोडेक्समधून प्राप्त केली गेली. येथे अधिकृत मार्गदर्शक पहा वर्डप्रेस सशर्त टॅग .
तळटीपमध्ये JavaScript लोड करण्यासाठी अतिरिक्त सर्वोत्तम पद्धती या लेखातून प्राप्त झाल्या आहेत: स्मॅशिंग मॅगझिन JavaScript ऑप्टिमायझेशन टिपा .

केवळ एका विशिष्ट वर्डप्रेस पृष्ठावर JavaScript कसे जोडावे