
আপনি কি ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট এবং সিএসএস যথাযথভাবে যোগ করবেন কিভাবে তা জানতে চান? নতুন ওয়ার্ডপ্রেস ডেভলপাররা প্রায়ই প্লাগইন এবং থিমগুলিতে তাদের স্ক্রিপ্ট এবং স্টাইলশীট কোডগুলো সরাসরি লিখতে গিয়ে ভুল করেন। এই নিবন্ধে আমরা কিভাবে ওয়ার্ডপ্রেসে সঠিকভাবে জাভাস্ক্রিপ্ট এবং সিএসএস যোগ করা যায় তাই দেখাব। যারা ওয়ার্ডপ্রেস থিম এবং প্লাগইন ডেভেলপমেন্ট শিখতে চান তাদের জন্য খুব উপকারে আসবে।
ওয়ার্ডপ্রেসে স্ক্রিপ্ট এবং স্টাইলশীট এড করার সময় কমন ভুলঃ
অনেক নতুন ওয়ার্ডপ্রেস প্লাগইন এবং থিম ডেভেলপাররা তাদের প্লাগইন এবং থিমগুলিতে সরাসরি তাদের স্ক্রিপ্ট বা ইনলাইন সিএসএস যোগ করেন যেটা সঠিক পদ্ধতি নয়। আবার কেউ কেউ ভুলভাবে তাদের স্ক্রিপ্ট এবং স্টাইলশীট লোড করতে wp_head ফাংশন ব্যবহার করেন যা একেবারে ঠিক নয়।
যেমনঃ
<?php
add_action(
'wp_head'
,
'wpb_bad_script'
);
function
wpb_bad_script() {
echo
'jQuery goes here'
;
}
?>
wp_enqueue_scripts
ব্যাবহার করব ?enqueue
) সিস্টেম প্রদান করে। এখানে wp_enqueue_script এবং wp_enqueue_style ফাংশন ব্যবহার করে, আপনি ওয়ার্ডপ্রেসে বলে দিতে পারবেন কখন কোথায় ফাইলটি লোড হবে এবং এর নির্ভরশীলতাগুলি(dependencies) কি কি। এ পদ্ধতিতে ডেভেলপাররা যে জাভাস্ক্রিপ্ট লাইব্রেরিগুলি ব্যবহার করে সেগুলো আলাদা আলাদা লোড হবার পরিবর্তে ওয়ার্ডপ্রেস এর সাথে সাথে লোড হয় ।wp_enqueue_scripts
ব্যাবহার করব ?<?php
function
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'
);
?>
- $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 ব্যবহার করেছি।
<?php
function
wpb_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'
);
?>
<?php
function
wpb_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.
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.