Enqueue Script – Dynamically in WordPress

Enqueue Script – JavaScript Files सामान्‍यत: Static .js Files होती हैं, लेकिन कभी-कभी हमें ऐसी जरूरत पडती है कि हम हमारे Static JavaScript Codes को Dynamically Generate करना चाहते हैं साथ ही हम ये भी चाहते हैं कि WordPress द्वारा Dynamically Generate होने वाले Plugin Paths या Option Values के JavaScript Codes के बारे में हमारी Static JavaScript File को भी पता हो।

इस जरूरत को पूरा करने के लिए सामान्‍यत: हम myScript.js.php प्रकार की एक Dynamic Script Create कर सकते हैं, जिसके अन्तर्गत PHP Codes द्वारा JavaScript Codes को Dynamically Generate किया जाता है। इस प्रकार की Scripts को WordPress Data से Aware करने के लिए सामान्‍य रूप से Use किए जाने वाले तरीके के अनुसार WordPress में निम्न Code लिखा जाता है:

wp_enqueue_script( ‘dynScript‘, $path.‘/myScript.js/php‘ );

जबकि myScript.js.php File में File की Starting निम्नानुसार Statement द्वारा की जाती है:

header(‘Content-type: application/javascript‘);
include( ‘../../../wp-load.php‘ );
?>

/* javascript (and PHP) code here */

लेकिन जब हम इस तरीके को Use करते हुए Dynamic JavaScript Codes Create करते हैं, तब हमें निम्नानुसार कई तरह की परेशानियों का सामना करना पडता है:

• wp-load.php या wp-config.php जैसी Files को खोजना काफी मुि”कल हो सकता है क्योंकि WordPress हमें ये सुविधा Provide करता है कि हम wp-content Directory को Non-Standard तरीके से Rename कर सकते हैं व अपने Web Server पर किसी Sub-Directory के अन्तर्गत भी Place कर सकते हैं और Web Server की Root Directory में भी Place कर सकते हैं। इस स्थिति में wp-load.php File का Appropriate Location पर प्राप्त न होने पर Fatal Error Trigger हो सकता है, जो पूरी WordPress Site/Blog की Normal Functioning को प्रभावित कर सकता है।
• जब हम wp-load.php File को किसी Script में Require या Include करते हैं, तो पूरा WordPress System फिर से Instantiate होता है, जिसका मतलब ये है कि Web Server पर हर Page Request के लिए हर Page दो बार Load होता है। यानी हर Page दो बार init होता है, WordPress के सभी Options की दो बार Memory में Reading होती है, हर Plugin दो बार Load होते हैं। आदि
• साथ ही अलग-अलग Web Server Configuration पर निर्भर करते हुए Browser .js.php Files को हमेंशा Cache करे, ऐसा भी जरूरी नहीं होता। जिसकी वजह से Current WordPress Site/Blog द्वारा ज्यादा Bandwidth Consume किया जाता है।

इस Solution के स्थान पर तुलनात्मक रूप से एक ज्यादा बेहतर Solution ये होता है कि .js.php जैसी एक File Crete करके उसमें Dynamically JavaScript Codes को Define करने के स्थान पर हम Dynamic JavaScript Create करने के लिए Query String Parameters भी Pass कर सकते हैं। जहां WordPress में हम निम्नानुसार Code का प्रयोग करते हुए Dynamic Script को Enqueue करते हैं:

// Get info the script needs
$var1 = get_option( ‘myplugin_var1‘ );
$var2 = get_home_url();

// Craft dynamic script query
$script = ‘script.js.php?var1=‘ . $var1 .  ‘&var2=‘ . $var2 ;
wp_enqueue_script( ‘dynScript‘, $path.‘/‘.$script );

जबकि अपनी myScript.js.php File में हम निम्नानुसार Code लिखते हुए Dynamic JavaScript Codes Create कर सकते हैं:

header(‘Content-type: application/javascript‘);

// Get variable
$var = isset( $_GET[‘var1‘] ? $_GET[‘var1‘] : ” );
$home = isset( $_GET[‘var2‘] ? $_GET[‘var2‘] : ” );
?>

/* javascript (and PHP) code here using $var and $home */

ये Solution पिछले Dynamic JavaScript Codes Create करने से सम्बंधित Solution की तुलना में ज्यादा बेहतर है, क्योंकि इस Solution में हम WordPress System को दुबारा Instantiate नहीं कर रहे हैं। लेकिन फिर भी इस तरीके में भी कुछ परेशानी है।

क्योंकि इस तरीके में हम Query String का प्रयोग कर रहे हैं, और सामान्‍यत: Query String वाले Resources को Web Browsers Cache नहीं करते। हालांकि यदि हम Admin Area के लिए Dynamically Generated JavaScript Codes Create कर रहे हों, तो उस स्थिति में ये कोई बहुत ज्यादा बडा Issue नहीं होता।

लेकिन यदि हमारा Dynamically Generated JavaScript, WordPress के Public Area के लिए हो, तो जहां बहुत सारे Different Users द्वारा काफी ज्यादा Page Hits होते हैं और उस स्थिति में Page के Cache न होने की स्थिति में काफी ज्यादा Bandwidth व Page Load Time बढ जाता है, जिससे Site की Performance प्रभावित होती है।

इस समस्या का Ideal Solution ये है कि Dynamic Variables को उन WordPress Pages में Inline Output किया जाए, जिन्हें JavaScript Codes की जरूरत होती है और उन सभी Pages के लिए एक पूरी तरह से Static Cacheable File को Enqueue किया जाए।

उदाहरण के लिए AJAX से सम्बंधित अगले Section में हम एक Plugin Create करेंगे, जिसमें हमें उस admin-ajax.php File के URL की जानकारी होना जरूरी होता है, जो हमारी AJAX Request को WordPress Environment के अन्तर्गत Handle करता है। इसके अन्तर्गत सबसे पहले हमें एक पूरी तरह से Static Script को निम्नानुसार Statement द्वारा Enqueue करना होता है:

// Enqueue the script
wp_enqueue_script( ‘myplugin‘, plugin_dir_url( __FILE__ ).‘js/script.js‘, );

फिर हमारी Script को जिन भी WordPress Data की जरूरत होती है, उन्हें निम्नानुसार एक Array में Collect किया जाता है:

$params = array(
‘option1‘ => get_option( ‘myplugin_option‘ ),
‘home‘ => get_home_url();
);

फिर अन्त में हम निम्नानुसार Statement द्वारा WordPress को ये बताते हैं कि हमारी Static Script को जहां कहीं भी Include किया जाता है, वहां से Just पहले सभी Inline Variables को Output करना है:

wp_localize_script( ‘myplugin‘, ‘myplugin_params‘, $params );

wp_localize_script() API Function को तीन Parameters की जरूरत होती है। पहला Parameter एक Script Handle होता है, जिसे इस API Function को Call करने से पहले wp_enqueue_script() या wp_register_script() API Functions द्वारा Register किया गया होता है। दूसरे Parameter के रूप में हमें एक Unique Name Specify करना होता है जबकि तीसरे Parameter के रूप में Strings का एक Array Specify करना होता है, जो कि Use होने से पहले एक Properly Escaped व Quoted JavaScript String में Convert हो जाता है।

इस तरह से अब यदि हम हमारे पिछले सारे Codes को एक साथ Specify करें, तो हमारा Code कुछ निम्नानुसार होता है:

// Enqueue the script
wp_enqueue_script( ‘myplugin‘, plugin_dir_url( __FILE__ ).‘js/script.js‘, );
$params = array(
‘option1‘ => get_option( ‘myplugin_option‘ ),
‘home‘ => get_home_url();
);

wp_localize_script( ‘myplugin‘, ‘myplugin_params‘, $params );

जैसे ही इस Code को Specify करके Run करते हैं, हमें Resultant Page के Source Code में निम्नानुसार Output प्राप्त होता है:

<script type=’text/javascript’>/* <![CDATA[ */var myplugin_params = {“option1″:””,”home”:”http:\/\/localhost\/wp”};/* ]]> */</script><script type=’text/javascript’ src=’http://localhost/wp/wp-content/plugins/user-api/js/myscript.js?ver=3.6′></script>

myscript.js में Specified सभी JavaScript Functions अब विभिन्न Dynamic Variables को आसानी से Access कर सकते हैं, जबकि हमारे उदाहरण के अनुसार कुल दो Dynamic Variables option1 व home को yplugin_params.option1 व myplugin_params.home द्वारा myscript.js JavaScript File में Use किया जा सकता है।

हालांकि wp_localize_script() API Function, Internationalization से सम्बंधित मालूम पडता है, लेकिन इस API Function का Internationalization से कोई सम्बंध नहीं है। बल्कि इस API Function को Use करने का फायदा ये होता है कि हम एक ऐसी Dynamic Script Create कर सकते हैं, जो कि पूरी तरह से Web Browser द्वारा Cacheable हो, लेकिन इसे Server द्वारा किसी भी तरह से Process करने की जरूरत न हो।

साथ ही Inline JavaScript पूरी तरह से wp_enqueue_script() API Function द्वारा Enqueued Script के साथ ही Bound रहता है और यदि हमें Main Script को Dequeue करना हो, तो उस स्थिति में कोई अनावश्‍यक Inline JavaScript भी नहीं बचता। यानी Inline JavaScript उसी स्थिति में Page पर Exist होता है, जबकि हम Main Script को wp_enqueue_script() API Function का प्रयोग करते हुए Load होने के लिए Queue करें।

इस wp_localize_script() API Function की विशेषता ये है कि इसके द्वारा Add होने वाला Inline JavaScript Code पूरी तरह से Escaped व Quoted होता है। साथ ही ये API Function CDATA Tags के माध्‍यम ये इस बात का ध्‍यान रखता है कि XHTML Validation किसी भी  तरह से Break न हो।