call javascript in wp functions.php

ধরে নেয়া যাক, আমাদের থিমের নাম rrf এবং এর ফাইল এবং ডিরেক্টরির গঠন নিচের মতঃ

rrf/

-index.php

-style.css

-js/

--bootstrap.min.js

-css/

--bootstrap.min.css

প্রথমেই জেনে নেয়া যাক কোন ফাংশন ব্যবহার করে স্ক্রিপ্টের নিবন্ধন করতে হয় এবং এটিতে কি কি তথ্য(আর্গুমেন্ট) দিতে হয়-

wp_register_script( "স্ক্রিপ্টের নাম", "বাসস্থান", "যাদের উপর নির্ভরশীল", "বয়স", "নিচে বসবেন?!" );

স্ক্রিপ্টের নামঃ $handle

ইংরেজি ছোট হাতের অক্ষরে খুব সুন্দর করে লিখতে হবে ☺

কামের সাথে যেন নামের মিল থাকে (চিনতে সুবিধা হবে পরবর্তীতে)। ভালো হয় বাপ-মায় যে নাম দিছে সেই নাম ব্যবহার করলেই, শুধু খেয়াল রাখতে হবে যেন ছোট অক্ষরে হয়।

যেমনঃ "bootstrapjs"

বাসস্থানঃ $source

বাসস্থান উল্লেখ করার জন্য ওয়ার্ডপ্রেসের কিছু ফাংশন আছে।

যেগুলো হলোঃ content_url(), bloginfo( 'template_url' ), get_template_directory_uri(), plugins_url();

যেমনঃ

    ‍‍get_template_directory_uri() . '/js/bootstrap.min.js'
    bloginfo( 'template_url' ) . '/js/bootstrap.min.js'
    content_url( '/rrf/js/bootstrap.min.js' )
    plugins_url( '/plugin-name/js/script-name.js' )

    ৪নং টা প্লাগিনের ক্ষেত্রে ব্যবহার করা হয় (আমি প্লাগিন ডেভলপমেন্টে ডক্টরেট কমপ্লিট করছি তাই কাউরে কিছু কমুনা এই বিষয়ে)

যাদের উপর নির্ভরশীলঃ $dependencies

আমরা সবাই তো আর আত্মনির্ভরশীল নই। যেমন আমার কথাই ধরেন আমি বাবার হোটেলে খাই, তো আমার কাছে আপনি জানতে চাইলে আমাকে তো বলতেই হবে। সেরকম ওয়ার্ডপ্রেস ও জানতে চায় আমরা যেই স্ক্রিপ্টটা যুক্ত করবো সেটা অন্য কোন স্ক্রিপ্ট এর উপর নির্ভরশীল কিনা। যদি নির্ভরশীল হয় তাহলে ওয়ার্ডপ্রেস নিশ্চিত করবে যার উপর নির্ভরশীল তাকে যুক্ত করা হয়েছে কিনা।

যেমনঃ

যারা ওয়েব ডেভলপমেন্টের কাজ করে তার সবাই কম বেশি জেকুয়েরি (jQuery) আর এর বিশাল প্লাগইনস ভান্ডার থেকে প্রয়োজন অনুযায়ী উপযুক্ত প্লাগইনটা ব্যবহার করে। আর জেকুয়েরির প্লাগইনস জেকুয়েরির উপর নির্ভরশীল হবেই, স্বভাবিক বিষয় এটা আবার বলার কিছু হলো ☺। তাই আমরা যখন ওয়ার্ডপ্রেসে কোনো জেকুয়েরি প্লাগইন যুক্ত করবো তখন ওয়ার্ডপ্রেসকে আমাদের বলে দিতে যে এটা জেকুয়েরির উপর নির্ভরশীল (ওয়ার্ডপ্রেস বোঝেনা !)।

যেভাবে বলতে হবেঃ

array( 'jquery' )

    এখানে খেয়াল রাখতে হবে জেকুয়েরি কিন্তু jQuery লিখলে কাজ করবে না jquery লিখতে হবে (ছোট অক্ষরে)।

যেকারণে অ্যারেঃ একটা স্ক্রিপ্ট ফাইল একাধিক স্ক্রিপ্ট ফাইলের উপর উপর নির্ভরশীল হতে পারে তাই।

বয়সঃ $version

ঐচ্ছিক বিষয় (মেয়েদের নাকি বয়স জিজ্ঞেস করতে নাই, এটা নাকি অভদ্রতা। তাই ঐচ্ছিক রাখছে ☺)।

তবে আপনার স্ক্রিপ্টের বয়স জানা থাকলে আপনি দিতে পারেন (বয়স শব্দটা ভার্সনের সাথে যায় না তবুও ধারাবাহিকতা ঠিক রাখতে ধরে নেন)।

নিচে বসবেনঃ $in_footer

হয় রুখে দাঁড়ান নয় ধুকে মরেন (আপনাকে হ্যাঁ/না উত্তর দিতে হবে)।

স্ক্রিপ্টের পূর্ব নির্ধারিত আসন সোফায়(হেডারে) তবে আপনার হাতে ক্ষমতা আছে চাইলেই গদি থেকে সরাই দিতে পারেন(পিপলস পাওয়ার) ☺ আর বসাই দিতে পারেন নিচে(ফুটারে)। শুধু লিখবেন হ্যাঁ (TRUE) তাতেই ফুটারে চলে যাবে আর না লিখলে হেডারে।

এখন তাহলে পূর্ণাঙ্গ একটা উদাহরণ দেখা যাক আমাদের কল্পিত থিম (rrf) অনুসারে-

wp_register_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '420', TRUE );

    bootstrap.min.js স্ক্রিপ্টটা আমি ফুটারের জন্য নিবন্ধন করেছি থিমের js ডিরেক্টরি থেকে।

নিবন্ধন তো শেষ এবার পেজে যুক্ত করার জন্য লাইনে দাঁড় করাই দিতে হবে। আর সেজন্য ব্যবহার করতে হবে-

wp_enqueue_script( "স্ক্রিপ্টের নাম" );

//সেই নাম ব্যবহার করতে হবে যেই নাম দিয়ে নিবন্ধন করা হয়েছে

চলুন তাহলে যেটার নিবন্ধন করেছি সেটাকে দাঁড় করিয়ে দেই-

wp_enqueue_script( 'bootstrapjs' );

এবার যুক্ত করার পালা Yahoo!

যুক্ত করা জন্য একটা এ্যাকশন হুক(কি? মামারে জিগান) ব্যবহার করা হয় আর ওটার নাম হল wp_enqueue_scripts

এখন শুরু থেকে শেষ পর্যন্ত প্রক্রিয়াটা দেখে নেয়া যাক-

add_action( 'wp_enqueue_scripts', 'rrf_add_scripts' );

//ফাংশন ডিক্লেয়ারের আগে পরে যেখানে ইচ্ছা লিখতে পারেন কোডেক্সে আগে দেখলাম তাই লিখে দিলাম (জ্ঞানীদের অনুসরণ)

function rrf_add_scripts() {

  wp_register_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '420', TRUE );

  wp_enqueue_script( 'bootstrapjs' );

}

সহায়ক লিঙ্কঃ

http://code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172

http://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins--wp-22509

http://codex.wordpress.org/Function_Reference/wp_register_script

http://codex.wordpress.org/Function_Reference/wp_enqueue_script