WP Enqueue Script – jQuery Ajax WordPress Framework, AJAX Technology के लिए मूल रूप से jQuery Framework को No-Conflict Mode में Use करता है। इसलिए हम बडी ही आसानी से WordPress के Default jQuery Framework को अपने Plugin या Theme में Use कर सकते हैं अथवा अपनी जरूरत के अनुसार किसी अन्य JavaScript File को अपने Plugin या Theme के साथ Use करने हेतु उपयोग में ले सकते हैं।
जब हम WordPress के साथ JavaScript Codes को Use करना चाहते हैं, तब मूल रूप से हमें इस बात को समझना होता है कि WordPress द्वारा Dynamically Generate होने वाले Web Pages के साथ किस प्रकार से JavaScript Code को उपयोग में लिया जा सकता है और सबसे पहले हम इसी बात को समझेंगे।
Proper Way to Include Scripts in WordPress
जब हम हमारे Custom JavaScript Code को WordPress के साथ Use करना चाहते हैं, तो इस जरूरत को पूरा करने के लिए WordPress हमें wp_enqueue_script() नाम का API Function Provide करता है और जैसाकि हम नाम से ही समझ सकते हैं कि ये API Function हमारी Script को Required Scripts की Queue में Add करने का काम करता है।
wp_enqueue_script($handle, $src, $dependencies, $ver, $in_footer) API Function
इस API Function का मूल उद्देश्य किसी Script को WordPress के साथ Register करना होता है ताकि WordPress को इस Script को Page में Proper तरीके से Inject कर सके। ये API Function मूल रूप से 5 Parameters Accept करता है:
$handle Parameter
इस API Function का ये एक Compulsory रूप से Specify किया जाने वाला Parameter होता है। इस Parameter के रूप में हमें Lowercase String के रूप में उस Script का नाम Specify करना होता है, जिसे हम WordPress System के साथ Register करना चाहते हैं।
ये नाम या तो WordPress System द्वारा Automatically Provide किया जाता है या फिर हम हमारी जरूरत के अनुसार किसी Custom Name को भी Specify कर सकते हैं, जो कि हमारे Plugin/Theme के लिए Define की गई Script File के नाम को Represent करता है। इसलिए इस Parameter के रूप में Specify किया जाने वाला नाम Unique होना चाहिए।
$src Parameter
यदि इस Parameter को Specify किया जाता है, तो ये Parameter हमारी उस Script File के URL को Represent करता है, जिसे हम WordPress System के साथ Register करना चाहते हैं। WordPress System को इस Parameter की जरूरत उसी स्थिति में होती है, जबकि WordPress System, Newly Add की जाने वाली Script के बारे में पहले से न जानता हो।
हालांकि यदि WordPress System को Specified Script के बारे में पहले से जानकारी हो, तो WordPress System इस Parameter के रूप में Specified URL को पूरी तरह से Ignore कर देता है।
साथ ही Script का URL Specify करते समय कभी भी Hardcode URL Specify नहीं करना चाहिए। बल्कि Plugin के लिए plugins_url() जबकि Themes के लिए get_template_directory_uri() API Functions का प्रयोग करते हुए Specify करना चाहिए। जबकि Remote Scripts को Protocol-Agnostic URL जैसे कि “//otherdomain.com/JavaScript/script.js” के रूप में Specify करना चाहिए।
$dependencies Parameter
ये Parameter, Script Handles का एक Optional Array होता है, जिन्हें हम WordPress System के साथ Add व Load करना चाहते हैं। इस Parameter की भी जरूरत तभी होती है, जबकि WordPress, इस API Function के पहले Parameter के रूप में Specified Name वाली Add की जाने वाली Script के बारे में न जानता हो।
$ver Parameter
ये Parameter, Script के Current Version को एक String Format जैसे “1.1” या “1.2RC2” के रूप में Represent करता है। ये Parameter Specify करने का मतलब ये होता है कि WordPress हमेंशा Correct Version की Script को Client Browser में Fetch करेगा, फिर भले ही किसी भी प्रकार का Caching System क्यों न Use किया गया हो।
$in_footer Parameter
ये एक Optional Boolean Parameter होता है, इस बात को तय करता है कि Add होने वाली Script, Page के <head> Section में Inject होगी या Closing </body> Tag से पहले। Default रूप से इसका मान true होता है, जो इस बात को Represent करता है कि इस API Function का प्रयोग करके Add होने वाली Script हमेंशा Page के Footer में ही Add होगी।
जब हम WordPress के Query System का प्रयोग करते हुए किसी Script को WordPress System के साथ Register करते हैं, तो निम्नानुसार चार बातें तय हो जाती हैं:
- किसी एक ही Plugin को चाहे जितने भी Plugins समान रूप से Access करना चाहते हों, वह Script WordPress System के साथ केवल एक ही बार Register होता है।
- हम हमारी जरूरत के अनुसार इस बात को तय कर सकते हैं कि हमारी Script किस Particular Page पर Add होगी और किस पर नहीं।
- Dependencies Parameter को Specify करके हम इस बात को तय कर सकते हैं कि एक से ज्यादा Scripts को WordPress System के साथ Register किए जाने पर वे Scripts किस क्रम में WordPress System के साथ Register होंगी, फिर उन्हें Register करने के लिए wp_enqueue_script() API Function को विभिन्न Scripts के Register करने के लिए किस क्रम का पालन किया गया है, इस बात से कोई फर्क नहीं पडता।
- सभी Register होने वाली Scripts FORCE_SSL_ADMIN Constant Value के साथ Add होती हैं। इसलिए WordPress इन Scripts को https Protocol के लिए भी बिना किसी परेशानी या Additional Configuration के Add कर लेता है।
सामान्यत: हम wp_enqueue_script() API Function को Content के Web Browser में Send होने से पहले Execute होने वाले “init” या “template_redirect” Hooks के साथ Execute होने के लिए Hook करते हैं। ताकि इस Function के Call होने पर एक Proper <script> Element Resultant HTML Document में Insert हो सके। जैसे:
add_action( 'init', 'add_external_jquery' );
function add_external_jquery() {
wp_enqueue_script( $handle, $src, $dependencies, $ver, $in_footer );
}
Adding Core Script
WordPress Installation के साथ ही कुछ JavaScript Frameworks, Core Scripts के रूप में Install हो जाते हैं, जिन्हें हम हमारी जरूरत के अनुसार अपने Plugin/Theme में Use कर सकते हैं। इसलिए इस प्रकार की Scripts को Use करने के लिए हमें अलग से अपने Plugin में Hold करने की अथवा किसी External Resource का Path Specify करने की जरूरत नहीं होती।
उदाहरण के लिए WordPress Installation के साथ ही Prototype JavaScript Library व jQuery JavaScript Library Automatically Core Scripts के रूप में Exist रहती हैं, जिन्हें जरूरत के अनुसार निम्नानुसार Use किया जा सकता है:
add_action( 'init', 'add_core_scripts' );
// Add prototype.js which is bundled with WordPress
function add_core_scripts() {
wp_enqueue_script( 'prototype' );
}
हालांकि इस Code में Specified wp_enqueue_script() API Function में हमने किसी Script का Source Specify नहीं किया है। लेकिन फिर भी जब हम इस Plugin को Activate करते हैं तो अपनी WordPress Site/Blog के किसी भी Page के Source Code में निम्नानुसार <script> Code के माध्यम से एक नई Script Add हो जाती है:
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js?ver=1.7.1'> </script>
ऐसा इसीलिए होता है क्योंकि WordPress Installation के साथ ही कुछ Scripts, Core Scripts के रूप में Install हो जाती हैं। साथ ही हम देख सकते हैं कि Add होने वाली Script के साथ Version Number भी एक Query String की तरह Appended है, जो कि Current WordPress Installation के साथ Use होने वाली Script के Version को Represent करता है। WordPress के साथ ही Install होने वाले विभिन्न Scripts की Detailed Information प्राप्त करने के लिए हम WordPress Codex को उपयोग में ले सकते हैं।
Adding Custom Script
जब हम हमारा Plugin या Theme के लिए किसी Script को Create करते हैं, तो उस Custom Script को WordPress में Register करने के लिए भी हमें wp_enqueue_script() API Function को ही Use करना होता है। लेकिन क्योंकि WordPress को इस Custom Script के बारे में कोई जानकारी नहीं होती] इसलिए इस Custom Script के URL को इस API Function के दूसरे Parameter के रूप में Specify किया जाना जरूरी होता है। जैसे:
add_action( 'init', 'add_custom_scripts' );
// Add custom JavaScript
function add_custom_scripts() {
wp_enqueue_script( 'ordernow', 'https://www.bccfalna.com/ordernow.js' );
}
जब हम अपने wp_enqueue_script() API Function को उपरोक्तानुसार Modify करते हैं, तो उस स्थिति में निम्नानुसार तरीके से एक <script> Element हर WordPress Page/Post में Add हो जाता है:
<script type='text/javascript' src='https://www.bccfalna.com/ordernow.js?ver=3.6'></script>
हम देख सकते हैं कि हालांकि हमने हमारे Code में Custom Script के लिए किसी Version Information को Specify नहीं किया है। फिर भी Add होने वाले <script> Element के src Attribute के साथ Associated URL के साथ एक Version Number दिखाई दे रहा है।
ये Version Number वास्तव में हमारे Current WordPress Installation का Version Number है, जो उस स्थिति में Default रूप से हमारे Custom Script URL के साथ Add हो जाता है, जबकि हम स्वयं अपनी Script का Version Number Specify नहीं करते।
Adding Custom Script with Dependencies
जब हमारी Current Script किसी अन्य Script या Multiple Scripts की Functionalities पर Depend होती है, तब हमें wp_enqueue_script() API Function को तीसरे Parameter के साथ Specify करना जरूरी होता है। जैसे:
add_action( 'init', 'add_custom_scripts' );
// Add prototype.js which is bundled with WordPress
function add_custom_scripts() {
wp_enqueue_script(
'ordernow',
'https://www.bccfalna.com/ordernow.js',
array( 'jquery-ui-tabs', 'jquery-ui-draggable' )
);
}
इस Code में हमने तीसरे Parameter के रूप में उन Scripts को एक Array के रूप में Specify किया है, जिनमें Specified Functionalities की जरूरत हमें हमारे ordernow.js नाम की Script के Codes में पड सकती है और क्योंकि इस Array में हमने जिन Scripts के Handles को Specify किया है, वे WordPress के साथ ही Installed रहती हैं, इसलिए इन Core Scripts को अलग से WordPress के साथ Register करने की जरूरत नहीं है।
इस Single Line के Statement को Specify करने के बाद जब हम हमारे WordPress Page/Post के Source Codes को Check करते हैं, तो अब उसमें निम्नानुसार कुछ और <script> Elements Add हो जाते हैं:
<script type='text/javascript' src='http://localhost/wp/wp-includes/js/jquery/jquery.js?ver=1.9.2'></script> <script type='text/javascript' src='http://localhost/wp/wp-includes/js/jquery/ui.core.js?ver=1.9.2'></script> <script type='text/javascript' src='http://localhost/wp/wp-includes/js/jquery/ui.tabs.js?ver=1.9.2'></script> <script type='text/javascript' src='http://localhost/wp/wp-includes/js/jquery/ui.draggable.js?ver=1.9.2'></script> <script type='text/javascript' src='https://www.bccfalna.com/script2.js?ver=3.6'></script>
Adding Custom Script with Version Number
जब हम हमारी Current Script को किसी Specific Version Number के साथ WordPress System पर Register करना चाहते हैं, तो उस स्थिति में हमें wp_enqueue_script() API Function के चौथे Parameter को Specify करना भी जरूरी होता है। जैसे:
add_action( 'init', 'add_custom_scripts' );
// Add script with Version Number
function add_custom_scripts() {
wp_enqueue_script( 'ordernow', 'https://www.bccfalna.com/ordernow.js', '', '1.0' );
}
जब हम इस प्रकार से इस API Function को Use करते हैं, तो Resultant Web Page पर हमारी Script कुछ निम्नानुसार Add होती है:
<script type='text/javascript' src='https://www.bccfalna.com/ordernow.js?ver=1.0'></script>
Adding Script in Footer
जब हम हमारी किसी Script को Web Page के Footer में Place करना होता है, तब हम wp_enqueue_script() API Function के पांचवे Parameter को में true Specify कर सकते हैं, जो कि इस Parameter का Default मान भी होता है। लेकिन यदि हमें हमारी Script को Resultant Web Page के <head> Section में Add करना होता है, तब इस Parameter में हमें false Specify करना भी जरूरी होता है।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook Advance WordPress in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी है, तो निश्चित रूप से ये EBook भी आपके लिए काफी उपयोगी साबित होगी।
Advance WordPress in Hindi | Page: 835 | Format: PDF
