Adding Scripts When Needed – Enqueue Scripts WordPress

Enqueue Scripts WordPress – किसी Script को कहां Add किया जाए, इससे ज्यादा महत्वपूर्ण बात ये है कि इन्हें DataColumn Add किया जाए। क्योंकि केवल जरूरत होने पर ही यदि किसी Script को Add किया जाए, तो इससे Page Load Time कम हो जाता है, कम Bandwidth Use होता है, Page Rendering Time कम हो जाता है व किसी अन्‍य Plugin के Scripts के साथ Conflict होने की सम्भावना भी काफी कम हो जाती है।

इसलिए हम एक ऐसा Plugin Create कर सकते हैं, जो इस Important Task को Perform करता है और किसी Particular Script को Exactly उस समय Add करता है, जब उसकी जरूरत होती है। क्योंकि इस Section में हम इसी तथ्; को Discuss कर रहे हैं कि किसी Specific WordPress Page में JavaScript को किस प्रकार से Include किया जाए, इसलिए हमारा Script काफी Simple है, जो Alert() Boxes के माध्‍यम से इस बात को Indicate करता है कि कौनसी Script कब Load हो रही है।

Getting Location of Plugin Script

हमें कभी भी अपने Plugin के URL को Hardcode नहीं करना चाहिए। न ही Plugin से सम्बंधित सभी Resources को Plugin के Root Folder में ही Store करना चाहिए। बल्कि Script Files को js, Stylesheet Files को css, Images को image जैसे Sub-Folders में Store करते हुए अपने Plugin के Structure को Manageable रखना चाहिए और हम ये मान रहे हैं कि हमारा Current Plugin इसी Manageable Architecture में Structured है।

इस प्रकार से यदि हम हमारे Current Plugin के /js/ Sub-Directory में Exist myScript.js File को Locate करना चाहें, तो हम कुछ निम्नानुसार तरीके से Code लिखते हुए इस जरूरत को पूरा कर सकते हैं:

// Current plugin directory URL
$plugin_url = plugin_dir_url( __FILE__);

// Enqueue script
wp_enqueue_script( ‘myScript‘, $plugin_url . ‘js/myScript.js‘ );

इस Code Snippet को हम हमारे किसी भी Plugin में Reuse कर सकते हैं, क्योंकि इसमें हमने Hardcode URL Specify नहीं किया है, इसलिए Plugin User ने चाहे किसी भी तरह से Modified तरीके से ही WordPress को Install क्यों न किया हो या विभिन्न WordPress Directories को Rename ही क्यों न किया हो, सभी प्रकार के WordPress Installations के लिए ये Code हमेंशा Plugin Folder को ही Refer करेगा और Plugin Folder के Sub-Folders से ही विभिन्न प्रकार के Resources को Refer करेगा।

क्योंकि plugin_dir_url() API Function हमेंशा WordPress Installation के Plugin Folder का Path, Trailing Slash के साथ Return करता है, जिसके बाद अन्‍य String को Specify करके हम किसी Plugin Resource के पूरे URL को Represent कर सकते हैं, जैसाकि उपरोक्त Code Segment में किया गया है।

हमारे Current Plugin के JavaScript Path के लिए हम निम्नानुसार तरीके से एक Constant भी Define कर सकते हैं, जिसे पूरे Plugin के विभिन्न Codes के दौरान जरूरत के अनुसार Reuse किया जा सकता है:

define( ‘PLUGIN_JS_PATH’, plugin_dir_url( __FILE__) . ‘js’ );

Adding Scripts in Admin Pages

General Rule के अनुसार किसी भी Content के Page पर Print होने से पहले ही wp_enqueue_script() API Function को Call करके किसी Specific Script को Add कर लिया जाना चाहिए और इसके लिए हम विभिन्न प्रकार के Hooks व Techniques का प्रयोग करते हुए इस बात को तय कर सकते हैं कि किसी Script को हमें कहां Add करना है। किसी Plugin में हम हमारी जरूरत के अनुसार विभिन्न प्रकार के Pages पर किसी Specific Script को Add कर सकते हैं, जिनमें से कुछ निम्नानुसार हैं:

• सभी Admin Pages के लिए केवल एक Single Script
• Plugin के Settings Page के लिए केवल एक Single Script
• Users Menu के अन्तर्गत किसी अन्‍य Plugin द्वारा Generated Page के लिए केवल एक Single Script
• Edit Comments Page के लिए एक Single Script

चूंकि हम उपरोक्तानुसार Pages पर जिस Script को Add करना चाहते हैं, वह केवल Admin Area से ही सम्बंधित Script होती है, इसलिए इस प्रकार के Admin  Pages के लिए Add की जाने वाली Script को हम किसी भी ऐसे Hook के Response में Add कर सकते हैं, जो कि Admin Pages के Context में Trigger होता है। जैसे:

add_action( ‘admin_menu‘, ‘insertjs_add_page‘ );
function insertjs_add_page() {

अब इस Action के insertjs_add_page() Callback Function में हम अग्रानुसार चार Scripts को Add कर सकते हैं:

// 1. Add JS to all the admin pages
wp_enqueue_script( ‘insertjs_1‘, PLUGIN_JS_PATH. ‘/admin.js‘ );

इस Code द्वारा हमने एक ऐसी Script को Enqueued किया है, जो कि Admin Area के सभी Pages के लिए Load हो सकता है, फिर भले ही वह Admin Area WordPress User Interface द्वारा Create किया गया हो या फिर निम्नानुसार किसी Plugin द्वारा-

// 2. Add a page under Settings
$settings = add_options_page(
‘Insert JS‘,
            ‘Insert JS‘,
            ‘manage_options‘,
            ‘insertjs_settings‘,
            ‘insertjs_options_page‘
);

अब हम add_options_page() API Function द्वारा एक Menu Entry Add कर सकते हैं और इस Function Call द्वारा Return होने वाले मान को Use करते हुए इसे “load-$pagename” नाम के एक Special Hook के साथ Attach कर सकते हैं, जहां $pagename निम्नानुसार एक Variable Part होता है:

// Add JS to the plugin setting page only
add_action( ‘load-‘.$settings, ‘insertjs_add_settings_script‘ );

ये Action केवल तभी Execute होता है, जब Plugin का Settings Page Load होता है। अब हम निम्नानुसार एक और Plugin Page Create करते हुए एक अलग Hook को Use कर सकते हैं, जो केवल इसी Page पर एक Action को Fire करता है:

// 3. Add a page under Users
$users = add_users_page(
‘Insert JS‘,
        ‘Insert JS‘,
        ‘manage_options‘,
        ‘insertjs_users‘,
        ‘insertjs_users_page‘
);

// 4. Add JS to the users page, with a different hook
add_action( ‘admin_print_scripts-‘.$users, ‘insertjs_add_users_script‘ );

अब इन दोनों Admin Page Specific Actions को Define करने की जरूरत है, जिन्हें निम्नानुसार Define करते हुए Appropriate Script को Add किया जा सकता है:

// Add JS to the plugin’s settings page
function insertjs_add_settings_script() {
	wp_enqueue_script( 'insertjs_2', PLUGIN_JS_PATH.'/settings.js' );
}

// Add JS to the plugin’s users page, in the page footer for a change
function insertjs_add_users_script() {
	wp_enqueue_script( 'insertjs_3', PLUGIN_JS_PATH.'/users.js','', '', true);
}

अब हम एक अलग Script को एक Specific Core Admin Page जैसे कि Comment Page पर में Load कर सकते हैं और इस जरूरत को पूरा करने के लिए हम फिर से load-$pagename Hook को निम्नानुसार Use कर सकते हैं:

// Add JS to the Comments page
add_action( 'load-edit-comments.php', 'insertjs_on_comments' );

function insertjs_on_comments() {
	wp_enqueue_script( 'insertjs_4', PLUGIN_JS_PATH.'/comments.js' );
}

wp_enqueue_script() API Function के साथ Attached Specific Admin Hook को Use करके हमने इस बात को निश्चित कर दिया है कि हमारी Specified Script, Admin Area के केवल उसी Area में Load होगी, जहां उसकी जरूरत होगी।

इस प्रकार से जब हम कोई Plugin Create करते हैं, तब उपरोक्तानुसार Tricks का प्रयोग करते हुए इस बात को तय कर सकते हैं कि किस Specific Page के लिए हमें हमारे Plugin Related Script को WordPress Admin Area में कब Add करना है। साथ ही हम किसी Particular Page को भी Target कर सकते हैं। परिणामस्वरूप हमारी Script केवल उस Particular Page के लिए ही Add होती है किसी अन्‍य Admin Page पर नहीं।

Read more …

• Adding Scripts in Public Pages