HomeBlogকিভাবে ওয়ার্ডপ্রেসে প্রোপারলি জাভা স্ক্রিপ্ট এবং স্টাইলশীট এড করা যায়?

কিভাবে ওয়ার্ডপ্রেসে প্রোপারলি জাভা স্ক্রিপ্ট এবং স্টাইলশীট এড করা যায়?

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

ওয়ার্ডপ্রেসে স্ক্রিপ্ট এবং স্টাইলশীট এড করার সময় কমন যে মিসটেকগুলো হয়ে থাকে-

অনেক বিগেইনার ওয়ার্ডপ্রেস থিম এবং প্লাগইন ডেভেলপাররা তাদের থিম এবং প্লাগইনে সরাসরি স্ক্রিপ্ট অথবা ইনলাইন সিএসএস এড করতে গিয়ে কিছু কমন ভুল করে।

ওয়ার্ডপ্রেসের wp_head function স্ক্রিপ্ট এবং স্টাইলশীট লোডের ক্ষেত্রেও কিছু মিসটেক করা হয়ে থাকে-

<?php add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'jQuery goes here'; } ?>

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

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

এছাড়া এই দুই ভিন্ন ভার্সন ওয়ার্ডপ্রেস কনফ্লিক্টের কারণ হতে পারে।

তাই চলুন দেখে নেয়া যাক,কিভাবে প্রোপারলি স্টাইলশীট এবং স্ক্রিপ্ট এড করতে হয়

ওয়ার্ডপ্রেসের স্ট্রং ডেভেলপার কমিউনিটি আছে। বিশ্বের বিভিন্ন প্রান্ত থেকে হাজার হাজার ডেভেলপার ওয়ার্ডপ্রেসের থিম এবং প্লাগইন ডেভেলপিং এর কাজ করছে!

সবকিছু ঠিকঠাক কাজ করছে এবং একটা আরেকটার গোলমাল করছে এটা নিশ্চিত হওয়ার জন্যে ওয়ার্ডপ্রেসের রয়েছে স্বতন্ত্র সিস্টেম। এই সিস্টেমে জাভা স্ক্রিপ্ট এবং সিএসএস স্টাইলশীট লোড হওয়ার জন্যে একটি প্রোগ্রামএবল ওয়ে রয়েছে।

wp_enqueue_script এবং wp_enqueue_style ফাংশন ইউস করার মাধ্যমে আপনি ওয়ার্ডপ্রেসকে নির্দেশ দেন কখন একটি ফাইল লোড হবে, কোথায় লোড হবে এবং এটা কিসের ওপর ডিপেন্ড করবে।

এছাড়া এড়া ডেভেলপারদের এলাও করব বিল্ডইন জাভা স্ক্রিপ্ট লাইব্রেরি ইউস করতে যার ফলে সেইম থার্ড পার্টি জাভা স্ক্রিপ্ট লোডের প্রয়োজন হয় না! এর ফলে পেজ লোড টাইম অনেক কমে যায় এবং অন্যান্য থিম এবং প্লাগইনের সাথে কনফ্লিক্ট হওয়া থেকেও বাঁচায়।

কিভাবে ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট এড করবেন?

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট লোড করানো খুবই সহজ বিষয়। নিচে একটি এক্সামফুল হিসেবে একটা কোড দেয়া হলো যা আপনার প্লাগইন ফাইল অথবা থিম functions.php ফাইলে পেস্ট করে প্রোপারলি জাভাস্ক্রিপ্ট লোড করাতে পারবেন।

?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' ); ?> 

ব্যাখ্যা:

wp_register_script() function. এর মাধ্যমে আমরা আমাদের স্ক্রিপ্টের রেজিস্ট্রেশন করেছি। এই ফাংশন ৫টি প্যারামিটার এক্সেপ্টস করে।

$handle: হ্যান্ডেল হচ্ছে আপনার জাভাস্ক্রিপ্টের ইউনিক নেইম। আমাদেরটার নাম “my_amazing_script”$src। src হচ্ছে আপনার স্ক্রিপ্টের লোকেশন। আমরা প্লাগইন ইউআরএল ফাংশন ব্যবহার করেছি, যাতে করে প্লাগইন ফোল্ডারের সঠিক ইউআরএল পায়।

একবার ওয়ার্ডপ্রেস এটা পেয়ে গেলে .$deps ফোল্ডারে তা amazing_script.js ফাইল নেইম খুজতে থাকবে। deps হচ্ছে ডিপেন্ডেন্সির জন্যে। যখন আমাদের স্ক্রিপ্ট এ jQuery ইউজ করা হবে তখন ডিপেন্ডেন্সি এরিয়াতে jQuery এড করে নিবো। ওয়ার্ডপ্রেস অটোমেটিক্যালি jQuery লোড করবে আর যদি তা না করে তাহলে বুঝে নিতে হবে এটা আগেই লোড হয়ে গেছে।

.$ver  হচ্ছে আমাদের স্ক্রিপ্টের ভার্সন নাম্বার।

$in_footer  আমরা ফুটারে স্ক্রিপ্ট রান করাতে চাই তাই আমাদের ট্রু ভেল্যু সেট করতে হবে।

inwp_register_script এ সকল প্যারামিটার প্রোভাইডের পর আমরা এই স্ক্রিপ্টকে wp_enqueue_script বলতে পারি যা সবকিছু রান করাবে।

এবং সর্বশেষে আমাদের স্ক্রিপ্ট লোড করার জন্যে wp_enqueue_scriptsaction hook ইউস করতে হবে। যদিও এটা এক্সামফুল কোড তবুও সবক্ষেত্রেই আমাদের রাইট ভেল্যু ইউস করতে হবে।

আপনি যদি আপনার থিম অথবা প্লাগইনে এই কোডটি এড করতে চান তাহলে স্ক্রিপ্টের প্রোপার জায়গায় এই একশন হুকটি ইউস করুন। এটা আপনার প্লাগইনের মেমোরি ফুটপ্রিন্ট ইউজ কমাবে।

অনেকেই অবাক হচ্ছেন, কেন আমরা প্রথমে স্ক্রিপ্ট রেজিস্ট্রেশন করে নিচ্ছি এবং তারপর কোড সারিবদ্ধ করছি! ওয়েল,এর ফলে অন্যান্য সাইট ওনাররা আপনার প্লাগইনের কোর কোড মোডিফাই ছাড়াই স্ক্রিপ্ট ডিরেজিস্ট্রার করতে পারবে।

প্রোপারলি ওয়ার্ডপ্রেসে স্টাইলশীট সাজান

জাভাস্ক্রিপ্টের মতই আপনি আপনার স্টাইলশীট সাজাতে পারেন। নিচের উদাহরণটি খেয়াল করুন-

<?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' ); ?>

স্টাইলশীট এড করতে আমরা এখন wp_enqueue_script এর পরিবর্তে wp_enqueue_style ইউস করবো।

খেয়াল করুন, আমরা স্টাইলশীট এবং স্ক্রিপ্ট দুই জায়গাতেই wp_enqueue_scripts action hook ইউস করেছি। এই ফাংশন উভয়ক্ষেত্রেই কাজ করে।

উপরের উদাহরণে আমরা স্ক্রিপ্ট অথবা স্টাইলের লোকেশন পয়েন্ট করার জন্যে প্লাগইন ইউআরএল ইউস করেছি।

এছাড়া আমরা যদি থিমের জন্যেও এই স্ক্রিপ্ট রান করাতে চাই তাহলে সিম্পলি

useget_template_directory_uri()instead. তে, এছাড়া চাইল্ড থিমে যদি এটা করতে চাই তাহলে useget_stylesheet_directory_uri().

নিচে এক্সামফুল কোড :

<?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' ); ?>

আশাকরি আর্টিকেলটি আপনাদের ওয়ার্ডপ্রেসে প্রোপারলি জাভা স্ক্রিপ্ট এবং স্টাইলশীট এড করতে হেল্প করবে।

আর এই আর্টিকেলটি ভালো লেগে থাকলে আমাদের ইউটিউব চ্যানেলটিও সাবস্ক্রাইব করে রাখতে পারেন

এছাড়া আমরা Host The Website টিম আমাদের ক্লায়েন্টের সার্ভার সংক্রান্ত সকল সমস্যার ২৪/হেল্প সাপোর্ট দিয়ে থাকি

আর যেকোন প্রয়োজনে যোগাযোগ করুন ০১৫২১২১০৩৪৮ নাম্বারে এবং ইমেইল করতে পারেন এখানে sales@hostthewebaite.com or support@hostthewebsite.com

ফাহাম তানভীর
ফাহাম তানভীরhttps://hostthewebsite.com/
সবারই কোনো না কোনো স্পেসিফিক বিষয়ে আগ্রহ থাকে আর আমার প্যাশনের জায়গাটা হচ্ছে হোস্টিং ম্যানেজমেন্ট নিয়ে এক্সপিরিমেন্ট করা। হোস্টিং নিয়ে কাজ করার চেয়ে আনন্দের কিছু হতে পারে না! আমি বেশ কিছু মাস ধরেই Host The Website এর সাথে আছি এর একমাত্র কারণ হচ্ছে, বাংলাদেশে সবচেয়ে গ্রোয়িং হোস্টিং প্রভাইডার এটি। এছাড়া এই হোস্টিং কোম্পানি আমার প্যাশনের জায়গাটাও ফুলফিল করছে।
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments