আপনি কি ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট এবং সিএসএস যথাযথভাবে যোগ করবেন কিভাবে তা জানতে চান? নতুন ওয়ার্ডপ্রেস ডেভলপাররা প্রায়ই প্লাগইন এবং থিমগুলিতে তাদের স্ক্রিপ্ট এবং স্টাইলশীট কোডগুলো সরাসরি লিখতে গিয়ে ভুল করেন। এই নিবন্ধে আমরা কিভাবে ওয়ার্ডপ্রেসে সঠিকভাবে জাভাস্ক্রিপ্ট এবং সিএসএস যোগ করা যায় তাই দেখাব। যারা ওয়ার্ডপ্রেস থিম এবং প্লাগইন ডেভেলপমেন্ট শিখতে চান তাদের জন্য খুব উপকারে আসবে।
ওয়ার্ডপ্রেসে স্ক্রিপ্ট এবং স্টাইলশীট এড করার সময় কমন ভুলঃ
অনেক নতুন ওয়ার্ডপ্রেস প্লাগইন এবং থিম ডেভেলপাররা তাদের প্লাগইন এবং থিমগুলিতে সরাসরি তাদের স্ক্রিপ্ট বা ইনলাইন সিএসএস যোগ করেন যেটা সঠিক পদ্ধতি নয়। আবার কেউ কেউ ভুলভাবে তাদের স্ক্রিপ্ট এবং স্টাইলশীট লোড করতে wp_head ফাংশন ব্যবহার করেন যা একেবারে ঠিক নয়।
যেমনঃ
<?phpadd_action('wp_head', 'wpb_bad_script');functionwpb_bad_script() {echo'jQuery goes here';}?>উপরের কোডটি সহজ বলে মনে হতে পারে, তবে এটি ওয়ার্ডপ্রেসে স্ক্রিপ্ট যোগ করার ভুল উপায় এবং এটি ভবিষ্যতে অন্যান্য স্ক্রিপ্টের সাথে কনফ্লিক্ট করে থাকে। যা সাইটটিকে সঠিকভাবে লোড হতে বাধাগ্রস্ত করে। উদাহরণস্বরূপ, যদি আপনি নিজে নিজে jQuery লোড করেন এবং আরেকটি প্লাগইন যদি jQuery লোড করে, তাহলে আপনি এই জাভাস্ক্রিপ্টটি দুইবার লোড করলেন। যদি এটি প্রতিটি পৃষ্ঠায় লোড হয়, তাহলে এটি ওয়ার্ডপ্রেসের গতি(স্পীড) এবং কর্মক্ষমতা(পারফরমেন্স) এর উপর খুবই নেগেটিভ প্রভাব ফেলবে। আবার যদি এ দুটি ভিন্ন সংস্করণ হয় তাহলে মারাত্মক ভাবে কনফ্লিক্ট করার সম্ভবনা রয়েছে। চলুন কিভাবে ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট এবং সিএসএস যথাযথভাবে যোগ করব তা শিখি ।
কেন
wp_enqueue_scripts ব্যাবহার করব ? ওয়ার্ডপ্রেস একটি শক্তিশালী ডেভেলপার কমিনিউটি। বর্তমান বিশ্বের অনেক ডেভলপারই ওয়ার্ডপ্রেস থিম এবং প্লাগইন ডেভেলপ করছে। তাই সবকিছু ঠিকঠাকভাবে কাজ করে কিনা তা নিশ্চিত করতে হবে এবং এক জন অন্যের উপর নির্ভরশীল না হয় সেদিকে লক্ষ্য রাখতে হবে। তাই জাভাস্ক্রিপ্ট এবং CSS স্টাইলশীটগুলি লোড করার জন্য ওয়ার্ডপ্রেস একটি এনকুইউ (
enqueue) সিস্টেম প্রদান করে। এখানে wp_enqueue_script এবং wp_enqueue_style ফাংশন ব্যবহার করে, আপনি ওয়ার্ডপ্রেসে বলে দিতে পারবেন কখন কোথায় ফাইলটি লোড হবে এবং এর নির্ভরশীলতাগুলি(dependencies) কি কি। এ পদ্ধতিতে ডেভেলপাররা যে জাভাস্ক্রিপ্ট লাইব্রেরিগুলি ব্যবহার করে সেগুলো আলাদা আলাদা লোড হবার পরিবর্তে ওয়ার্ডপ্রেস এর সাথে সাথে লোড হয় ।যার ফলে লোড টাইম অনেকাংশে হ্রাস করে এবং অন্যান্য থিম এবং প্লাগইনের সাথে কনফ্লিক্ট এড়াতে সহায়তা করে।
কিভাবে যথাযথভাবে
wp_enqueue_scripts ব্যাবহার করব ?ওয়ার্ডপ্রেসে যথাযথভাবে স্ক্রিপ্ট লোড করা খুবই সহজ। নীচে দেয়া কোডটি ওয়ার্ডপ্রেসে আপনার প্লাগইনের স্ক্রিপ্ট ফাইলে বা আপনার থিম এর functions.php ফাইলে লিখে বা পেস্ট করে দিলেই আপনার ফাইল সঠিকভাবে কাজ করবে।
<?phpfunction wpb_adding_scripts() {wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__),array('jquery'),'1.1', true);wp_enqueue_script('my_amazing_script');}add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> ব্যাখ্যা:
আমরা wp_register_script () এর মাধ্যমে আমাদের ফাংশনটি শুরু করেছি। এই ফাংশনটি ৫টি প্যরামিটার গ্রহন (accepts) করে।
- $handle- হ্যান্ডেল হলো আপনার স্ক্রিপ্টের নাম। যা এখানে আমরা “my_amazing_script” এই নামে লিখেছি ।
- $src- src হল আপনার স্ক্রিপ্টের অবস্থান বা URL। আমরা আমাদের প্লাগইনস ফোল্ডারের ভিতরে স্ক্রিপ্টের সঠিক URL পেতে plugins_url ফাংশন ব্যবহার করছি। এখন ওয়ার্ডপ্রেস প্লাগইনস ফোল্ডারে আমাদের ফাইলের নাম amazing_script.js যখনই খুঁজে পাবে তখনই এটি লোড করবে ।
- $deps- এখানে deps বলতে dependency বুঝানো হচ্ছে । যেহেতু আমাদের স্ক্রিপ্টটি jQuery ইউজ করেছে তাই আমরা dependency এরিয়ায় jQuery এড করেছি। ওয়ার্ডপ্রেস স্বয়ংক্রিয়ভাবে jQuery লোড করবে যদি এটি সাইটে ইতিমধ্যেই লোড করা না হয়ে থাকে ।
- $ver- এটি আমাদের স্ক্রিপ্টের ভার্সন সংখ্যা। এই প্যারামিটার প্রয়োজন হয় না।
- $in_footer- আমরা আমাদের স্ক্রিপ্টটি Footer এ লোড করতে চাই, সুতরাং এটির Value সেট করতে হবে True. আর যদি Header এ লোড করতে চাই তাহলে এর Value সেট করতে হবে False.
wp_register_script এর সব প্যারামিটারগুলো দেয়ার পরে, আমরা শুধুমাত্র wp_enqueue_script () এ স্ক্রিপ্টটি কল করতে পারি যার মাধ্যমে ফাইলটি লোড হয়।
শেষ ধাপে স্ক্রিপ্টটি লোড করার জন্য wp_enqueue_scripts ব্যবহার করেছি।
আপনি যদি আপনার থিম বা প্লাগইনটি যুক্ত করে থাকেন, তাহলে আপনি এই অ্যাকশন হুক স্থাপন করতে পারেন যেখানে স্ক্রিপ্টটি আসলেই দরকার। এটি আপনাকে আপনার প্লাগইনটির মেমরি প্যাডপ্রিন্টকে কমাতে সহায়তা করে।
ওয়ার্ডপ্রেসে সঠিকভাবে স্টাইল enqueue করা
নিচের স্ক্রিপ্টের মত আপনি আপনার স্টাইলশীটগুলো enqueue করতে পারেন।
<?phpfunctionwpb_adding_styles() {wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));wp_enqueue_style('my_stylesheet');}add_action( 'wp_enqueue_scripts', 'wpb_adding_styles'); ?>wp_enqueue_script এর পরিবর্তে, এখন আমরা আমাদের স্টাইলশীট যুক্ত করতে wp_enqueue_style ব্যবহার করছি।
খেয়াল করলে দেখবেন যে, আমরা স্টাইল এবং স্ক্রিপ্টের জন্য wp_enqueue_scripts অ্যাকশন হুক ব্যবহার করেছি। একই নাম সত্ত্বেও, এই ফাংশনটি দুটোর জন্যই কাজ করে।
আমরা plugins_url ফাংশন ব্যবহার করে স্ক্রিপ্ট বা স্টাইলের অবস্থান নির্দেশ করেছি যা আমরা enqueue করতে চেয়েছিলাম।
যাইহোক, যদি আপনি আপনার থিমের মধ্যে enqueue স্ক্রিপ্ট ফাংশন ব্যবহার করে থাকেন, তাহলে এর পরিবর্তে শুধু get_template_directory_uri () ব্যবহার করুন।
নীচের কোডটি দেখুন:
<?phpfunctionwpb_adding_scripts() {wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);wp_enqueue_script('my_amazing_script');} add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); ?>আশা করি এই লেখা থেকে আপনি কিভাবে সঠিকভাবে ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট এবং সিএসএস এড করবেন তা শিখতে পেরেছেন।
Md. Shah Jamal Sumon
As a Full Time Web Developer, WordPress & Laravel Specialist Since 2015.
Recommended To You
Riyadh Md Arefin
January 19, 2018 at 9:22 pmIt’s awesome brother.
Md. Shah Jamal Sumon
January 20, 2018 at 10:17 amThank you bro. For more update getting with us.