সিএসএস এবং জাভাস্ক্রিপ্ট ইনক্লুড করা

সারাংশ: এই অধ্যায়ে আমরা থিমের মধ্যে সিএসএস এবং জাভাস্ক্রিপ্ট কিভাবে ইনক্লুড করা যায় সেটা নিয়ে আলোচনা করবো।

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

ওয়ার্ডপ্রেসে স্ক্রিপ্ট এবং স্টাইল যুক্ত করা একটি বেশ সহজ প্রক্রিয়া। মূলত, আপনি এমন একটি ফাংশন তৈরি করবেন যা আপনার সমস্ত স্ক্রিপ্ট এবং স্টাইলকে এনকো করে দেবে। একটি স্ক্রিপ্ট বা স্টাইলশিট এনকো করার সময়, ওয়ার্ডপ্রেস আপনার ফাইল এবং এর যেকোনো নির্ভরতা (যেমন jQuery) খুঁজে পেতে একটি হ্যান্ডেল এবং পাথ তৈরি করে এবং তারপরে আপনি একটি হুক ব্যবহার করবেন যা আপনার স্ক্রিপ্ট এবং স্টাইলশিটগুলিকে সন্নিবেশ করবে।

স্ক্রিপ্ট এবং স্টাইল এনকিউ করা

থিমের ফাংশন.php ফাইলে এনকিউ করে আপনার থিমে স্ক্রিপ্ট এবং স্টাইল যোগ করার সঠিক উপায়। style.css ফাইলটি সকল থিমের জন্য প্রয়োজনীয়, তবে আপনার থিমের কার্যকারিতা বাড়ানোর জন্য অন্যান্য ফাইল যোগ করা প্রয়োজন হতে পারে।

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

মূল বিষয়গুলি হল:

• wp_enqueue_script(), wp_enqueue_style(), অথবা wp_enqueue_block_style ব্যবহার করে স্ক্রিপ্ট বা স্টাইল এনকিউ করুন।

স্টাইলশিট

আপনার CSS স্টাইলশিটগুলি আপনার থিমের উপস্থাপনাকে কাস্টমাইজ করতে ব্যবহৃত হয়। স্টাইলশিট হল সেই ফাইল যেখানে আপনার থিম সম্পর্কিত তথ্য সংরক্ষণ করা হয়। এই কারণে, style.css ফাইলটি প্রতিটি থিমের জন্য আবশ্যক।

header.php ফাইলে স্টাইলশিট লোড করার পরিবর্তে, আপনাকে wp_enqueue_style ব্যবহার করে এটি লোড করা উচিত। আপনার প্রধান স্টাইলশিট লোড করার জন্য, আপনি এটি functions.php এ এনকোয়ে করতে পারেন।

style.css এনকোয়ে করার জন্য:

wp_enqueue_style( 'style', get_stylesheet_uri() );

এটি “style” নামের একটি স্টাইলশীট খুঁজে লোড করবে।

স্টাইল এনকোয়ের জন্য মৌলিক ফাংশন হল:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

আপনি নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করতে পারেন:

• $handle হল স্টাইলশিটের নাম।
• $src হল স্টাইলশিটটির অবস্থান। বাকি প্যারামিটারগুলি অপশনাল।
• $deps নির্ধারণ করে যে এই স্টাইলশিট অন্য কোনো স্টাইলশিটের উপর নির্ভরশীল কি না। যদি এটি সেট করা থাকে, তবে এই স্টাইলশিটটি তখনই লোড হবে যখন এর নির্ভরশীল স্টাইলশিটটি প্রথমে লোড করা হবে।
• $ver ভার্সন নম্বর সেট করে।
• $media নির্দিষ্ট করে যে কোন ধরনের মিডিয়ায় এই স্টাইলশিটটি লোড করতে হবে, যেমন ‘all’, ‘screen’, ‘print’ বা ‘handheld’।

উদাহরণস্বরূপ, যদি আপনি আপনার থিমের মূল ডিরেক্টরিতে “CSS” নামক ফোল্ডারে “slider.css” নামক একটি স্টাইলশিট লোড করতে চান, তাহলে আপনি নিম্নলিখিত কোডটি ব্যবহার করবেন:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', false, '1.1', 'all');

ব্লক স্টাইলের জন্য CSS অন্তর্ভুক্ত করা

wp_enqueue_style() এর পাশাপাশি, আপনি ব্লকগুলির জন্য স্টাইল এনকোয় করার জন্য wp_enqueue_block_style() ব্যবহার করতে পারেন। wp_enqueue_block_style() এর জন্য WordPress ভার্সন 5.9 বা তার পরবর্তী ভার্সন প্রয়োজন।

ব্লক থিম তৈরির একটি গুরুত্বপূর্ণ অংশ হল কার্যকারিতা। wp_enqueue_block_style() এর সাথে, থিম কেবলমাত্র সিলেক্টেড ব্লকটি পেজে ব্যবহৃত হলে ব্লকটির জন্য CSS লোড করে।

অতিরিক্ত স্টাইলটি এডিটর এবং ফ্রন্টে লোড করা হয়, WordPress এবং Gutenberg প্লাগইন দ্বারা প্রদত্ত ব্লক স্টাইলের পরে। আপনি এই পদ্ধতিটি এমন ব্লক স্টাইল যুক্ত করতে ব্যবহার করতে পারেন যা আপনি theme.json এর মাধ্যমে যুক্ত করতে পারবেন না। উদাহরণস্বরূপ, মিডিয়া কুয়েরি।

এই কোড উদাহরণটি সর্বশেষ কমেন্ট ব্লকের তারিখের আকার এবং টেক্সট কালার পরিবর্তন করে। কারণ এটি একটি সময় HTML উপাদান যা অন্যান্য HTML উপাদানের মধ্যে নেস্ট করা আছে, theme.json ব্যবহার করে স্টাইল করা যাবে না।

প্রথমে, ব্লকের নাম সহ একটি নতুন CSS ফাইল তৈরি করুন: latest-comments.css। আপনি ফাইলটি কোথায় রাখবেন তা নির্ভর করে আপনি কীভাবে আপনার থিম ফাইলগুলি সংগঠিত করেন তার উপর। উদাহরণে, ফাইলটি assets/CSS/blocks ফোল্ডারের ভিতরে রাখা হয়েছে।

টাইম অ্যালিমেন্টের জন্য CSS ক্লাস হল wp-block-latest-comments__comment-date। প্রেফিক্স এবং ব্লকের নাম আংশিক দ্বারা অনুসরণ করা হয়, দুটি আন্ডারস্কোর দ্বারা বিচ্ছিন্ন।

আপনি কোডিং নির্দেশিকাগুলিতে ব্লক এডিটরের জন্য নামকরণের নিয়মাবলী সম্পর্কে আরও পড়তে পারেন।

টেক্সট কালার এবং ফন্টের আকার CSS কাস্টম ফিচারগুলির সাথে যুক্ত করা হয়েছে যা theme.json থেকে তৈরি করা হয়েছে:

.wp-block-latest-comments__comment-date {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}

এর পরে, থিমের সেটআপ ফাংশনের ভিতরে ব্লক স্টাইলটি এনকোয়ে করুন।

একাধিক ব্লক স্টাইল লোড করতে ব্লক নামটি একটি অ্যারের ভিতরে রাখা হয়। একটি foreach লুপ অ্যারের প্রতিটি ব্লকের মধ্য দিয়ে চলে এবং একটি হ্যান্ডেল, src (source), এবং পাথ আর্গুমেন্ট তৈরি করে। wp_enqueue_block_style() তারপর ব্লক নাম এবং আর্গুমেন্ট ব্যবহার করে ফাইলটি এনকোয়ে করে: wp_enqueue_block_style( “prefix/blockname”, $args );

কোড উদাহরণে,প্রেফিক্স হল “core” কারণ স্টাইলটি একটি কোর ব্লকের জন্য। যখন আপনি প্লাগইন থেকে ব্লক স্টাইল করেন, আপনাকে প্রেফিক্সটি সামঞ্জস্য করতে হবে।

function myfirsttheme_setup() {
	/*
	 * Load additional block styles.
	 */
	$styled_blocks = ['latest-comments'];
	foreach ( $styled_blocks as $block_name ) {
		$args = array(
			'handle' => "myfirsttheme-$block_name",
			'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
			$args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
		);
		wp_enqueue_block_style( "core/$block_name", $args );
	}
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

️ স্ক্রিপ্ট (সিএসএস এবং জাভাস্ক্রিপ্ট)

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

wp_enqueue_script স্টাইল enqueue করতে wp_enqueue_style এর মতো সিনট্যাক্স ব্যবহার করে।

আপনার স্ক্রিপ্ট এনকোয়ের করুন:

wp_enqueue_script( $handle, $src, $deps, $ver, $args );

• $handle হল স্ক্রিপ্টের নাম।
• $src স্ক্রিপ্টটি কোথায় অবস্থিত তা নির্ধারণ করে।
• $deps হল একটি অ্যারে যা আপনার নতুন স্ক্রিপ্ট যেকোনো স্ক্রিপ্টের উপর নির্ভর করে, যেমন jQuery পরিচালনা করতে পারে।
• $ver আপনাকে একটি সংস্করণ নম্বর তালিকাভুক্ত করতে দেয়।
• $args হল একটি আর্গুমেন্টের অ্যারে যা ফুটার প্রিন্টিং (in_footer কী-এর মাধ্যমে) এবং স্ক্রিপ্ট লোডিং কৌশল (strategy কী-এর মাধ্যমে) যেমন defer বা async সংজ্ঞায়িত করে। এটি WordPress 6.3 সংস্করণ থেকে $in_footer প্যারামিটারকে প্রতিস্থাপন/ওভারলোড করে।

আপনার enqueue ফাংশনটি দেখতে এইরকম হতে পারে:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true);

বিলম্বিত স্ক্রিপ্ট লোডিং

WordPress wp_register_script() এবং wp_enqueue_script() ফাংশনগুলির মাধ্যমে একটি স্ক্রিপ্ট লোডিং কৌশল নির্দিষ্ট করার জন্য সমর্থন প্রদান করে। এই সুবিধাটি WordPress 6.3 সংস্করণে নতুন $args অ্যারে প্যারামিটারের মাধ্যমে strategy কী ব্যবহার করে প্রদান করা হয়।

সমর্থিত কৌশলগুলি নিম্নরূপ:

defer: $args প্যারামিটারে ‘strategy’ => ‘defer’ অ্যারে কী-ভ্যালু জোড়া নির্দিষ্ট করে এই কৌশলটি ব্যবহার করা যায়। defer স্ক্রিপ্ট অ্যাট্রিবিউট ব্যবহার করে চিহ্নিত স্ক্রিপ্টগুলি শুধুমাত্র DOM ট্রি সম্পূর্ণরূপে লোড হওয়ার পরে (কিন্তু DOMContentLoaded এবং window load ইভেন্টগুলির আগে) কার্যকর করা হয়। ভিন্নধর্মী স্ক্রিপ্টগুলির বিপরীতে, ডিফার্ড স্ক্রিপ্টগুলি DOM-এ যুক্ত করা ক্রমানুসারে কার্যকর করা হয়।

async: $args প্যারামিটারে ‘strategy’ => ‘async’ অ্যারে কী-ভ্যালু জোড়া নির্দিষ্ট করে এই কৌশলটি ব্যবহার করা যায়। async স্ক্রিপ্ট অ্যাট্রিবিউট ব্যবহার করে চিহ্নিত স্ক্রিপ্টগুলি ব্রাউজার দ্বারা লোড হওয়ার সাথে সাথে কার্যকর করা হয়। ভিন্নধর্মী স্ক্রিপ্টগুলির কার্যকর করার জন্য নির্দিষ্ট কোনো ক্রম নেই। উদাহরণস্বরূপ, যদিও স্ক্রিপ্ট B DOM-এ স্ক্রিপ্ট A এর পরে যুক্ত করা হয়, তবুও স্ক্রিপ্ট B আগে কার্যকর হতে পারে, যদি এটি স্ক্রিপ্ট A এর লোডিং সম্পন্ন হওয়ার আগেই লোড হয়। এই ধরনের স্ক্রিপ্টগুলি DOM সম্পূর্ণরূপে তৈরি হওয়ার আগে বা DOMContentLoaded ইভেন্টের পরে কার্যকর হতে পারে।

নিম্নে স্ক্রিপ্ট রেজিস্টার করার সময় লোডিং কৌশল নির্দিষ্ট করার একটি উদাহরণ দেওয়া হল:

wp_register_script( 
    'foo', 
    '/path/to/foo.js', 
    array(), 
    '1.0.0', 
    array( 
        'strategy'  => 'defer',
    )
);

wp_enqueue_script() ব্যবহার করার সময়ও একই পদ্ধতি প্রযোজ্য।

বিলম্বিত স্ক্রিপ্ট লোডিং কৌশল নির্দিষ্ট করার সময়, স্ক্রিপ্টের ডিপেনড্যান্সি ট্রি (এর নির্ভরতা এবং/অথবা নির্ভরশীল) বিবেচনা করা হয় একটি “উপযুক্ত কৌশল” নির্ধারণের সময় যাতে এমন কৌশল প্রয়োগ না হয় যা একটি স্ক্রিপ্টের জন্য বৈধ কিন্তু অন্যদের জন্য ক্ষতিকর ট্রির মধ্যে কার্য সম্পাদনের একটি অনিচ্ছাকৃত বিশৃঙ্খলা সৃষ্টি করে। এই ধরনের যুক্তির ফলস্বরূপ, $args প্যারামিটারের মাধ্যমে আপনি যে পরিকল্পিত লোডিং কৌশলটি পাস করেন তা চূড়ান্ত (সিলেক্টেড) কৌশল নাও হতে পারে, তবে এটি কখনই পরিকল্পিত কৌশলের জন্য ক্ষতিকর (বা কঠোর) হবে না।

️কমেন্ট রিপ্লাই স্ক্রিপ্ট

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

ব্লক থিমগুলিতে, আপনি যখন একটি কমেন্ট ব্লক রাখেন তখন স্ক্রিপ্টটি অন্তর্ভুক্ত করা হয়। আপনাকে এটি ম্যানুয়ালি যুক্ত করার প্রয়োজন নেই।

ক্লাসিক থিমগুলিতে কমেন্ট রিপ্লাই অন্তর্ভুক্ত করার সঠিক উপায় হল শর্তসাপেক্ষ ট্যাগগুলি ব্যবহার করে পরীক্ষা করা যে নির্দিষ্ট শর্তগুলি বিদ্যমান কিনা, যাতে স্ক্রিপ্টটি অপ্রয়োজনীয়ভাবে লোড না হয়। উদাহরণস্বরূপ, আপনি শুধুমাত্র একক পোস্ট পেজগুলিতে is_singular ব্যবহার করে স্ক্রিপ্ট লোড করতে পারেন এবং নিশ্চিত করতে পারেন যে ইউজার দ্বারা “Enable threaded comments” সিলেক্ট করা হয়েছে। তাই আপনি নিম্নলিখিত মত একটি ফাংশন সেট আপ করতে পারেন:

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
	wp_enqueue_script( 'comment-reply' );
}

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

সকল এনকিউ ফাংশন একত্রিত করা

সব এনকিউ করা স্ক্রিপ্ট এবং স্টাইলকে সিঙ্গেল ফাংশনে একত্রিত করা সর্বোত্তম এবং তারপর wp_enqueue_scripts অ্যাকশন ব্যবহার করে সেগুলিকে কল করা উচিত। এই ফাংশন এবং অ্যাকশনটি প্রাইমারি সেটআপের (উপরে সম্পাদিত) নিচে কোথাও অবস্থিত হওয়া উচিত:

function add_theme_scripts() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );

	wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all' );

	wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

ওয়ার্ডপ্রেস দ্বারা অন্তর্ভুক্ত এবং রেজিস্টার্ড ডিফল্ট স্ক্রিপ্ট

ওয়ার্ডপ্রেস ডিফল্টভাবে অনেক জনপ্রিয় স্ক্রিপ্ট অন্তর্ভুক্ত করে যা সাধারণত ওয়েব ডেভেলপাররা ব্যবহার করে, সেইসাথে ওয়ার্ডপ্রেস নিজেই ব্যবহার করে এমন স্ক্রিপ্টগুলি। তাদের মধ্যে কিছু এই রেফারেন্স পৃষ্ঠায় তালিকাভুক্ত করা হয়েছে: