কিভাবে ওয়ার্ডপ্রেস সঠিকভাবে জাভাস্ক্রিপ্ট প্রবর্তন করে?JS এবং CSS ফাইলের কাস্টম লোডিং

যেসব প্রোগ্রামার ওয়েবসাইট তৈরির জন্য ওয়ার্ডপ্রেস ব্যবহার করেন, তারা ওয়ার্ডপ্রেস প্লাগইন ডেভেলপ করার সময় বা ওয়ার্ডপ্রেস থিম কাস্টমাইজ করার সময় কিছু জাভাস্ক্রিপ্ট এবং সিএসএস স্ক্রিপ্ট রিসোর্সের সাহায্য নিয়ে থাকেন।

• সাধারণত, লোকেরা সরাসরি HTML এর জন্য লিঙ্ক, স্ক্রিপ্ট ট্যাগ ব্যবহার করে।
• প্রকৃতপক্ষে, ওয়ার্ডপ্রেসের অন্তর্নির্মিত অত্যাধুনিক ফাংশন এবং স্ক্রিপ্ট উল্লেখ করার পদ্ধতি রয়েছে।
• সুতরাং, ওয়ার্ডপ্রেসের অন্তর্নির্মিত পদ্ধতির রেফারেন্স ব্যবহার করা আরও পেশাদার এবং আরও এক্সটেনসিবল।

ত্রুটিপূর্ণ উদ্ধৃতি পদ্ধতি

দুটি সাধারণ উদ্ধৃতি পদ্ধতি আছে, এটি ঠিক আছে, এটি নিখুঁত বা যুক্তিসঙ্গত নয়।

পদ্ধতি ১: লিঙ্ক ট্যাগ ব্যবহার করে একটি CSS ফাইলকে রেফারেন্স করা

• স্ক্রিপ্ট ট্যাগ JS ফাইল প্রয়োগ.এখানে বিস্তারিত নয়।

পদ্ধতি ২: wp_head ফাংশন ব্যবহার করুন

• wp_head ফাংশনটি কিছু কাস্টম বা সিস্টেম-সংজ্ঞায়িত সামগ্রী আউটপুট করতে ব্যবহৃত হয়।
• আমরা মাঝে মাঝে এই ফাইলটি উল্লেখ করতে নিম্নলিখিত কোড ব্যবহার করি:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• সংশ্লিষ্ট ফাইলগুলিকে উল্লেখ করতে functions.php ফাইলে উপরের কোডটি অনুলিপি করুন।

ওয়ার্ডপ্রেস এনকিউ স্ক্রিপ্ট রিসোর্স মেকানিজম

আমরা সবাই জানি, ওয়ার্ডপ্রেসের অনেক প্লাগইন রয়েছে:

• প্রায় প্রতিটি প্লাগইন কিছু রিসোর্স ফাইল উল্লেখ করে।
• অনিবার্যভাবে, দুটি প্লাগইন দ্বারা উল্লেখ করা সংস্থানগুলির মধ্যে দ্বন্দ্ব থাকবে, যা অস্থির হয়ে উঠবে এবং কার্যকারিতা প্রভাবিত করতে পারে।

wp_enqueue_script ফাংশন ব্যবহার করুন

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

এছাড়াও, কিছু সাধারণভাবে ব্যবহৃত লাইব্রেরি যেমন jQuery, jQuery UI ইত্যাদি ওয়ার্ডপ্রেসে তৈরি করা হয়।

আমরা সরাসরি বিল্ট-ইন লাইব্রেরিতে কল করার জন্য wp_enqueue_script ফাংশন ব্যবহার করতে পারি, যা কোড এবং একটি পরিষ্কার স্পেসিফিকেশন সংরক্ষণ করে।

আপনি যদি এই ফাংশনটি আপনার নিজের JS এবং CSS ফাইলগুলিকে উল্লেখ করতে ব্যবহার করেন তবে আপনাকে ব্যবহার করতে হবে৷wp_register_scriptফাংশনটি একটি শনাক্তকারী (হ্যান্ডেল) নিবন্ধন করে এবং তারপর ব্যবহার করেwp_enqueue_scriptফাংশন এই পতাকা সংশ্লিষ্ট সম্পদ কল.

কিভাবে সঠিকভাবে ওয়ার্ডপ্রেসে JS এবং CSS ফাইল আমদানি করবেন?

ওয়ার্ডপ্রেস JS এবং CSS পদ্ধতির জন্য বুদ্ধিমান আমদানি পদ্ধতি প্রদান করে।

আপনি প্লাগইনে plugin.css ফাইল আমদানি করতে নিম্নলিখিত কোড ব্যবহার করতে পারেন ▼৷

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

উপরেরটি আইডেন্টিফায়ার প্লাগইন_স্টাইলশীট সহ একটি সংস্থান তৈরি করতে wp_register_script ফাংশন ব্যবহার করে।

তারপরে, এর সারিবদ্ধ অনুরোধগুলি এতে যোগ করুনwp_enqueue_scriptsকার্যক্রম চালু আছে।

যদিও ফাংশনের নামটি একটি স্ক্রিপ্ট, এটির সাথে রিসোর্স ফাইলের কোন সম্পর্ক নেই এবং এটি CSS এবং JS উভয়ের জন্যই বৈধ।

wp_register_script ফাংশনটি সত্যিই এত সহজ নয়, এতে পাঁচটি প্যারামিটার থাকতে পারে:

১) $handle: রিসোর্স শনাক্তকারী।

• 由wp_enqueue_scriptস্থানান্তর

২) $src: রিসোর্সটির অবস্থান।

• আপেক্ষিক বা পরম ঠিকানাগুলি ঠিকানাগুলি পেতে ওয়ার্ডপ্রেস বিল্ট-ইন ফাংশন ব্যবহার করে, ইত্যাদি।
• সাধারণপজিশনিংফাংশন আছেplugins_url,get_template_directory_uri等।

3) $deps: নির্ভরশীলতা।

• আপনি যদি jQuery প্লাগইনটি উল্লেখ করেন এবং নির্মাণের জন্য jQuery এর উপর নির্ভর করতে চান তবে আপনাকে jQuery পূরণ করতে হবে।
• নোট করুন যে এটি একটি অ্যারে হিসাবে পাস করা হয়েছে।

৪) $ver: রিসোর্সের সংস্করণ, ঐচ্ছিক।

5) $in_footer: এটি কি একদম নিচে রাখা উচিত?

• সাধারণত, JS ফাইলগুলিকে পৃষ্ঠার নীচে স্থাপন করা উচিত, আপনি এই প্যারামিটারটিকে True-এ সেট করতে পারেন, উপরের দিকে আউটপুট করতে এটিকে ফাঁকা বা False রাখতে পারেন।

আসুন আরও সম্পূর্ণ জাভাস্ক্রিপ্ট ফাইলের রেফারেন্স উদাহরণ ▼ দেখি

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

ওয়ার্ডপ্রেস থিম সম্পদ আমদানি করতে wp_enqueue_script ব্যবহার করে

ওয়ার্ডপ্রেস থিম বিকাশে প্রোগ্রামাররা ব্যবহার করেwp_enqueue_scriptসম্পদ আমদানি করুন।

• উপরের উদাহরণগুলি ওয়ার্ডপ্রেস প্লাগইন ডেভেলপমেন্টের জন্য রেফারেন্সড রিসোর্সের উদাহরণ।
• বিষয়ে উল্লেখ করা পদ্ধতি অনুরূপ।

মূল পার্থক্য হল থিমের অধীনে রিসোর্স ফাইলের ঠিকানা পেতে থিম ডিরেক্টরি পেতে সংশ্লিষ্ট ফাংশন ব্যবহার করা।

তুমি ব্যবহার করতে পারget_template_directory_uriবর্তমান থিম ডিরেক্টরি পেতে ফাংশন।

আপনি যদি একটি চাইল্ড থিম ব্যবহার করেন তবে আপনাকে ব্যবহার করতে হবেget_stylesheet_directory_uriসংশ্লিষ্ট সংস্থানগুলি পেতে ফাংশনটি মূল থিমের ডিরেক্টরি পায়।