वर्डप्रेस में कस्टम जावास्क्रिप्ट कैसे जोड़ें (3 विधियाँ)

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

सौभाग्य से, आप अपने अनुभव के स्तर और आप जो हासिल करने की कोशिश कर रहे हैं, उसके आधार पर कुछ अलग रणनीतियों का उपयोग कर सकते हैं। एक बार जब आप सीख जाते हैं कि आपके विकल्प क्या हैं, तो आप कस्टम JavaScript समाधान चुनने में सक्षम होंगे जो आपके लिए सबसे उपयुक्त है।

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

1. Head & Footer Code प्लगइन का उपयोग करें (गैर-तकनीकी उपयोगकर्ताओं के लिए सबसे सरल विकल्प)
2. Functions.php फ़ाइल में कोड जोड़ें
3. हेडर में कोड जोड़ें (wp_enqueue_script फ़ंक्शन या wp_head हुक का उपयोग करना)

चलो कूदो!

1. हेड और फुटर कोड जैसे प्लगइन इंस्टॉल करें

एक प्लगइन का उपयोग करना आपकी वेबसाइट पर वर्डप्रेस कस्टम जावास्क्रिप्ट को जोड़ने का सबसे आसान तरीका है। उदाहरण के लिए, Head & Footer Code एक अच्छा टूल है:

यह मुफ्त प्लगइन आपको विभिन्न तरीकों से कोड डालने में सक्षम बनाता है। आप इसका उपयोग Facebook Pixel, Google Analytics, कस्टम CSS और अन्य के लिए कर सकते हैं।

आरंभ करने के लिए, नेविगेट करके अपनी साइट में प्लगइन जोड़ें प्लगइन्स → नया जोड़ें अपने व्यवस्थापक डैशबोर्ड से, फिर “हेड एंड फुटर कोड” की खोज करें।

एक बार जब आप पर क्लिक करें अब स्थापित करें और सक्रिय बटन पर जाकर आप प्लगइन की सेटिंग का पता लगा सकते हैं उपकरण → शीर्ष और पाद कोड. इस स्क्रीन पर हेडर, फुटर और बॉडी सेक्शन के लिए तीन बॉक्स हैं:

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

एक प्लगइन का उपयोग करने के पेशेवरों और विपक्ष

प्लगइन का उपयोग करने का मुख्य लाभ यह है कि यह एक शुरुआती-अनुकूल विकल्प है। आपको अपनी थीम की फ़ाइलों को संपादित करने के बारे में चिंता करने की आवश्यकता नहीं है। यदि आप अन्य प्रकार के कोड और कस्टम CSS को जोड़ने का एक सहज तरीका ढूंढ रहे हैं तो Head & Footer Code प्लगइन भी आपके काम आ सकता है।

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

2. अपने functions.php फ़ाइल का प्रयोग करें

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

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

इस विधि का उपयोग करना शामिल है IS_PAGE समारोह। आप अपने कस्टम जावास्क्रिप्ट को एक पोस्ट या पेज पर लागू करने के लिए सशर्त तर्क जोड़ सकते हैं।

आरंभ करने के लिए, अपना खोजें और खोलें कार्यों.php फ़ाइल, फिर निम्न कोड स्निपेट को कॉपी और पेस्ट करें:

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

यह कोड आपके हेडर में जावास्क्रिप्ट जोड़ देगा। इसे एक ही पोस्ट पर लागू करने के लिए, आप निम्न का उपयोग कर सकते हैं:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

ध्यान दें कि आपको प्रतिस्थापित करने की आवश्यकता होगी 3 उपरोक्त उदाहरण में पोस्ट आईडी नंबर के साथ जिसमें आप कोड जोड़ना चाहते हैं। उस नंबर का पता लगाने के लिए, अपने एडमिन डैशबोर्ड से पोस्ट पर नेविगेट करें और फिर पर क्लिक करें संपादन करना. ब्राउज़र बार के URL में, आईडी संख्या “पोस्ट =” के आगे की संख्या है:

आईडी संख्या बदलने के बाद अपनी फ़ाइल सहेजें और निर्दिष्ट क्षेत्र में अपना कस्टम JavaScript जोड़ें। आप एक ही वर्डप्रेस पेज के लिए भी यही प्रक्रिया दोहरा सकते हैं।

अपने functions.php फ़ाइल को संपादित करने के फायदे और नुकसान

अपने संपादन का एक फायदा कार्यों.php फ़ाइल यह है कि आपको कोई अन्य प्लगइन स्थापित करने की आवश्यकता नहीं है। आप इस तकनीक का उपयोग अपनी थीम और वर्डप्रेस दोनों में सुविधाओं और कार्यक्षमता को जोड़ने के लिए भी कर सकते हैं। उदाहरण के लिए, यह विधि जावास्क्रिप्ट को एक पोस्ट या पेज या सभी पेजों में सम्मिलित कर सकती है।

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

कस्टम वर्डप्रेस जावास्क्रिप्ट डालने का एक तरीका है <script> सीधे अपने में टैग करें हैडर.php फ़ाइल। हालाँकि, इस विधि की अनुशंसा नहीं की जाती है। यह वर्डप्रेस के लोडिंग क्रम में हस्तक्षेप कर सकता है और अन्य विषयों और प्लगइन्स के साथ विरोध का कारण बन सकता है।

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

आइए दोनों विकल्पों पर गौर करें…

wp_enqueue_script फ़ंक्शन का उपयोग करके अपने हेडर में JavaScript जोड़ें

सबसे पहले, आप अपनी कस्टम JavaScript फ़ाइल को अपने टेम्पलेट की निर्देशिका में अपलोड करना चाहेंगे। आप इसे फाइल ट्रांसफर प्रोटोकॉल (FTP) क्लाइंट या फाइल मैनेजर के जरिए कर सकते हैं।

अपनी साइट के टेम्प्लेट फ़ोल्डर में नेविगेट करें (wp_content → थीम्स → [yourtheme]). फिर, चयन करें डालना:

इस फ़ाइल का सटीक फ़ाइल पथ नोट करें। उदाहरण के लिए, यह कुछ ऐसा होना चाहिए “

अगला, अपना पता लगाएं और खोलें कार्यों.php फ़ाइल, फिर निम्न कोड स्निपेट को कॉपी और पेस्ट करें:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

टेम्प्लेट URL को अपने स्वयं के URL से बदलना सुनिश्चित करें। अंत में, अपनी फाइल को सेव करें।

Wp_head हुक का उपयोग करके कस्टम JavaScript जोड़ें

आप भी इस्तेमाल कर सकते हैं wp_head क्रिया हुक इनलाइन स्क्रिप्ट के माध्यम से अपने हेडर में कस्टम जावास्क्रिप्ट जोड़ने के लिए। दोबारा, यह विधि बेहतर नहीं है क्योंकि यह बहुत अधिक स्क्रिप्ट बना सकती है। हालाँकि, स्क्रिप्ट को सीधे अपने में सम्मिलित करने से बेहतर है हैडर.php फ़ाइल।

यह विधि, जिसे आप फ़ुटर के लिए भी उपयोग कर सकते हैं, आपकी साइट पर इनलाइन स्क्रिप्ट जोड़ने के लिए क्रिया हुक(ओं) का उपयोग करती है। जबकि wp_enqueue_script फ़ंक्शन कस्टम स्क्रिप्ट को कतारबद्ध करता है, the wp_head दृष्टिकोण आपके शीर्षलेख टेम्पलेट में स्क्रिप्ट को प्रिंट करता है (और पादलेख, यदि आप wp_footer अंकुश).

आरंभ करने के लिए, अपने पर नेविगेट करें कार्यों.php फ़ाइल, फिर निम्नलिखित को कॉपी और पेस्ट करें:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

ध्यान दें कि wp_head हुक केवल आपकी वेबसाइट के फ्रंट एंड पर सक्रिय होता है। इसका अर्थ है कि इस पद्धति का उपयोग करके आपके द्वारा जोड़ा गया कोई भी कस्टम JavaScript व्यवस्थापक या लॉगिन क्षेत्रों में प्रकट नहीं होगा। हालाँकि, यदि आप उन क्षेत्रों में जावास्क्रिप्ट जोड़ना चाहते हैं, तो आप इसका उपयोग कर सकते हैं admin_head और login_head कार्रवाई हुक, क्रमशः।

अपने हेडर में जावास्क्रिप्ट जोड़ने के फायदे और नुकसान

wp_enqueue_script डेवलपर्स के बीच फ़ंक्शन को प्राथमिकता दी जाती है क्योंकि यह उन विरोधों को रोकता है जो अन्य विकल्पों के साथ उत्पन्न हो सकते हैं, जैसे सीधे आपके हैडर.php फ़ाइल। इसके अलावा, इस पद्धति का उपयोग करने से कोई निर्भर स्क्रिप्ट नहीं बनती है।

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

वर्डप्रेस कस्टम जावास्क्रिप्ट के साथ आरंभ करें

जैसा कि हमने इस पोस्ट में चर्चा की, ऐसे तीन तरीके हैं जिनसे आप अपनी वेबसाइट पर वर्डप्रेस कस्टम जावास्क्रिप्ट जोड़ सकते हैं:

1. Head & Footer Code जैसे प्लगइन को इनस्टॉल करें।
2. अपना उपयोग करें कार्यों.php एक पृष्ठ या पोस्ट में कस्टम जावास्क्रिप्ट जोड़ने के लिए फ़ाइल।
3. या तो का उपयोग करके अपने हेडर में जावास्क्रिप्ट जोड़ें wp_enqueue_script समारोह या wp_head अंकुश।

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