Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Widgets
Code

ওয়ার্ডপ্রেসের বিভিন্ন এপিআই ব্যবহার করে আপনার নিজের ওইজেট তৈরি করুন:প্রারম্ভ

by
Difficulty:IntermediateLength:LongLanguages:

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

Final product image
What You'll Be Creating

‌ওয়ার্ডপ্রেস সাইটে মালিকরা ওইজেট দ্বারা কিছু নিয়ন্ত্রন এবং বিভিন্ন সুযোগ-সুবিধা নিতে পারে। এই পর্বে আমরা ওইজেটস এপিআই এবং অন্যান্য এপিআই ব্যবহার করে নিজের হাতে একটি ওইজেট তৈরি করব।

এই টিউটোরিয়াল সিরিজে নিম্নোক্ত টিউটোরিয়ালগুলো দেখানো হবে:

  1. সূচনা
  2. পোস্ট সম্পর্কিত পোস্ট ওইজেট (রিলেটেড পোস্ট ওইজেট)
  3. লগিন ওইজেট
  4. বারবার করা প্রশ্নের ওইজেট (ফ্রিকোয়েন্টলি আসক্‌ড কোয়েশ্চেন ওইজেট)
  5. গুগল এনালাইটিক্স ব্যবহার করে অত্যধিক জনপ্রিয় পোস্ট ওইজেট
  6. গুগল ম্যাপস ব্যবহার করে ঠিকানা ওইজেট
  7. উপসংহার

এই টিউটোরিয়ালে একটি সাধারণ টেক্সট ওইজেট তৈরি করে আমি আপনাকে ওয়ার্ডপ্রেস ওইজেট এপিআই সম্পর্কে ধারণা দেব। আমরা বিভিন্ন ফাংশন ব্যবচ্ছেদ ও পরীক্ষা করবো যা এইসব উইজেট তৈরি করতে ব্যবহৃত হয়েছে, তাহলে খুব সহজেই বুঝতে পারবো কিভাবে ওয়ার্ডপ্রেস উইজেট সাধারনতঃ কাজ করে থাকে। 

এই উইজেটটি এমন একটি ভিত্তি যার উপর ভর করে আমরা পরবর্তী অংশে অন্যান্য উইজেট তৈরি করবো।

ওয়ার্ডপ্রেস উইজেট

ওয়ার্ডপ্রেস উইজেট আপনার সাইডবারে বা আপনার থিমের widgetized এলাকাসমূহে বিষয়বস্তু এবং বৈশিষ্ট্য যোগ করে। উইজেটগুলো এমনভাবে ডিজাইন করা হয়েছে যেগুলো সহজ ও ব্যবহারযোগ্য উপায়ে ওয়ার্ডপ্রেস থিমকে নকশা এবং গঠনগত নিয়ামক দেয়, যা একজন ব্যবহারকারী কোডিং না জানলেও ব্যবহার করতে পারে।  

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

উইজেট ক্লাস পরীক্ষণ

একটি ওয়ার্ডপ্রেস উইজেট তৈরি করার সহজতম উপায় হচ্ছে WP_Widget ক্লাস তৈরি করা।  এই পদ্ধতিতে আপনি বিল্ট-ইন পদ্ধতি ব্যবহার করে উইজেট আপডেট করতে পারেন, উইজেট প্রদর্শন করতে পারেন এবং উইজেটের জন্য একটি এডমিন ইন্টারফেস তৈরি করতে পারেন।

কিভাবে উইজেট কাজ করে তা সম্পূর্ণরূপে বুঝতে, আমরা একটি খালি উইজেট তৈরি ও পরীক্ষা করবো। আমরা তারপর প্রতিটি ফাংশন সংজ্ঞায়িত করবো, যা উইজেট তৈরি করে এবং একটি সফল উইজেট তৈরি করতে কাজ করবো।

আমাদের উইজেটের সংজ্ঞা



ফাংশনগুলো সবিস্তারে

চলুন, তাহলে প্রতিটি ফাংশন সবিস্তারে দেখা যাকঃ

__construct()

এই ফাংশনটি ওয়ার্ডপ্রেসে উইজেট নিবন্ধিত করে।

widget()

এই ফাংশনটি উইজেটকে ফ্রন্ট-এন্ড বা সম্মুখে প্রদর্শন করে। এটা উইজেটের বিষয়বস্তু উৎপাদনও করে থাকে।

update()

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

  1. $new_instance – সংরক্ষন করার জন্য যেই মানগুলো নির্ধারণ করা হয়ে থাকে।  এই মানগুলো form() মেথডের মাধ্যমে ফরম তৈরির জন্য ব্যবহার করা হয়।
  2. $old_instance – ডাটাবেইজ থেকে পূর্বের মান উদ্ধার করে থাকে।

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

form()

form() মেথড / ফাংশন ব্যাক এন্ড উইজেট ফর্ম সংজ্ঞায়িত করতে ব্যবহৃত হয় – যেটা আপনি ড্যাশবোর্ডের উইজেট প্যানেলে দেখতে পাবেন। এটা ব্যবহারকারীকে উইজেটের জন্য টাইটেল এবং অন্যান্য অপশনও সেটআপ করার অনুমতি দিয়ে থাকে।

এই ফাংশনটি নিন্মবর্ণিত পরামিতিগুলোও ব্যবহার করে থাকে:

  • $instance – পূর্বেই ডাটাবেইজ থেকে যেসব মান সংরক্ষন করা হয়েছে, তার জন্য।

আমাদের উইজেট তৈরি

আমাদের উইজেট তৈরি করতে, আমরা নিন্মবর্ণিত ধাপগুলো অনুসরণ করতে পারি:

  • আমরা কি তৈরি করছি তা নির্ধারণ করা
  • ওয়ার্ডপ্রেসের মাধ্যমে উইজেট নিবন্ধন করা। 
  • back-end ফরম তৈরি করা।
  • ডাটাবেইজে মান সংরক্ষন করা।
  • front-end-এ কিভাবে দেখাবে তা নির্ধারণ করা।
  • উইজেট নিবন্ধন করা।

আমরা কি তৈরি করছি?

পূর্বের উল্লেখ অনুযায়ী, আমরা একটি সাধারণ টেক্সট উইজেট তৈরি করতে যাচ্ছি, যা একজন ব্যবহারকারীকে টাইটেল এবং টেক্সট প্রবেশ করাতে দিবে, যা অতঃপর তাদের ওয়েবসাইটের যেখানে উইজেট স্থাপন করবে সেখানে দেখা যাবে।

উইজেট রচয়িতা

উইজেট রচয়িতা প্যারেণ্ট ক্লাস পুনরায় লিপিবদ্ধ করে, আমাদের উইজেটটিকে আরম্ভ করতে সক্ষম তুলে। (সাধারণ WP_Widget class দ্বারা)।  



উপরের কোডে দেখবো, কিভাবে আমরা WP_Widget ক্লাস রচনার ফাংশন কল করবো এবং নীচের যুক্তির মাধ্যমে পার করবো:

  • Base ID - উইজেটের জন্য একটি অনন্য শনাক্তকারী। অবশ্যই ছোট হাতের অক্ষরে হতে হবে। যদি উইজেটের কোনও অংশ খালি থাকে, এক্ষেত্রে class name ব্যবহৃত হবে। 
  • Name - এটা হচ্ছে কনফিগারেশন পেইজে (ড্যাশবোর্ডে) প্রদর্শন করার জন্য উইজেটের নাম।
  • এবং একটি (ঐচ্ছিক) অ্যারে যেটি ক্লাসনেম এবং বর্ণনা ধারণকারী। বিবরণটি কনফিগারেশন পৃষ্ঠায় (ওয়ার্ডপ্রেস ড্যাশবোর্ডে) দেখানো হয়।

Back-end ফরম তৈরি করা

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

Our widgets back-end configuration form

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



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

এখানে আমাদের চূড়ান্ত কোডটি দেয়া হলো:



উপরের কোডটি ডেটাবেস থেকে দুইটি ভেরিয়েবলের জন্য পূর্বে সংরক্ষিত মানগুলি উপলব্ধি করে এবং নির্ধারণ করে – ভেরিয়েবল দুটি হচ্ছে $title এবং $message। আমরা এবার ফিরতি মান এনকোড করতে এবং কোড ভেঙ্গে যাওয়া এড়াতে esc_attr() ব্যবহার করবো। তারপর $title এট্রিবিউটটি টেক্সট ফিল্ডের মানের এট্রিবিউটের জায়গায় echo করবো এবং $message টি টেক্সট এড়িয়া ফিল্ডের বিষয়বস্তু হিসেবে echo করবো।

উপরের কোডে, আপনি নিশ্চয়ই দুটি নতুন পদ্ধতি দেখতে পাচ্ছেন যা সম্ভবত আপনার কাছে একেবারেই নতুন – get_field_id() এবং get_field_name()।

  • get_field_id() – ক্ষেত্রের নামটি একটি যুক্তি হিসাবে গ্রহণ করে এবং form() এর ক্ষেত্রে ব্যবহার করার জন্য আইডি এট্রিবিউট বা বৈশিষ্ট্য সমূহ তৈরি করে। এটি নিশ্চিত করে যে ফিরতি ক্ষেত্রের আইডিটি অনন্য।
  • get_field_name() – ক্ষেত্রের নামটি একটি যুক্তি হিসেবে গ্রহন করে এবং form() এর ক্ষেত্রে ব্যবহারের জন্য নামের বৈশিষ্ট্যাবলী বা এট্রিবিউটস তৈরি করে। এটি নিশ্চিত করে যে ফিরতি ক্ষেত্রের নামটি অনন্য।

লেবেল ট্যাগের for এট্রিবিউটের মাধ্যমে উপাদান বা এলিমেণ্টগুলোর আইডি ভ্যালু echo করা হয়েছে।

widefat ক্লাস ব্যবহার করা হয়েছে এটা নিশ্চিত করতে যেন, আপনার উইজেটের ক্ষেত্রগুলো দেখতে ওয়ার্ডপ্রেস ড্যাশবোর্ডের অন্যান্য ক্ষেত্রের মতই হয়।


আমাদের উইজেট আপডেট করা (অপশনসমূহ)

আমাদের উইজেট আপডেট করার জন্য, আমরা আপডেট পদ্ধতিতে উপযুক্ত কোড লিখব। এটা হচ্ছে আমাদের কোড:


উপরের ফাংশনটি দুটি পরামিতি নিয়ে গঠিত – $new_instance এবং $old_instance

  • $new_instance হল নতুন সেটিংস সহ একটি অ্যারে (দৃষ্টান্তস্বরূপ এই উইজেটের জন্য) যেটাতে ব্যবহারকারী ব্যাকেন্ড ফরমের মাধ্যমে প্রবেশ করতে পারবে, ঠিক যেভাবে আমরা ফরম() ফাংশনে এটাকে নির্ধারণ করেছি।
  • $old_settings হচ্ছে একটি অ্যারে যা পুরাতন সেটিংস ধারন করে। এটা হচ্ছে সেই ভ্যালু বা মান যা বর্তমানে ডাটাবেসে সংরক্ষিত আছে।

update() ফাংশন সেটিংসের এমন একটি অ্যারে নিয়ে আসে যা সংরক্ষন করতে বলে অথবা সংরক্ষন করা বাদ দিতে বলে।

উপরের কোডে আমরা, $old_instance কে $instance ভ্যারিয়েবলে বরাদ্দ করেছি এবং এর টাইটেল ও বার্তার মানটি $new_instance দ্বারা বদলে দিয়েছি। নতুন এবং আপডেটেড অ্যারে ফেরত দিয়ে, আমরা কার্যকরভাবে আমাদের উইজেট সেটিংস আপডেট করতে পারি।

strip_tags() ফাংশন যেকোনো স্ট্রিং থেকে HTML এবং PHP ট্যাগ মুছে দেয়, যদি তা এই ফাংশনের মধ্য দিয়ে চালিত হয়। আমরা এই ফাংশনটি ব্যবহার করেছি একটি পরিস্থিতি এড়ানোর জন্য যেখানে আপনার থিম ব্যবহারকারীরা ব্যাক-এন্ড ফর্মের মাধ্যমে প্রবেশ করা ট্যাগগুলিকে বন্ধ করতে ব্যর্থ হয়, ফলে আপনার সাইট ভেঙ্গে (সঠিকভাবে উপস্থাপিত না করা) যেতে পারে।

Front-End সংজ্ঞায়িত করা

widget() ফাংশনটি উইজেটটি fron-end-এ প্রদর্শনের জন্য দায়িত্বশীল। এটা দুটো পরামিতি ব্যবহার করে – $args এবং $instance

$args হচ্ছে এমন একটি অ্যারে যা register_sidebar() ফাংশন দ্বারা চালিত হয় যখন আমরা sidebar/widgetised এরিয়া নির্ধারণ করে থাকি, যেখানে উইজেটটিকে রাখা হয়। এটা আপনার functions.php ফাইলে পাওয়া যাবে। নীচে register_sidebar() ঘোষণার একটি উদাহরণ দেয়া হলো:

Sample register_widget declaration

এই অ্যারেটি উইজেট এবং উইজেট টাইটেলের ওপেনিং ও ক্লোজিং ট্যাগের সংজ্ঞা ধারন করেছে।

$instance হচ্ছে একটি অ্যারে যা কোন উইজেটের জন্য বিশেষ দৃষ্টান্তস্বরূপ কোনও সেটিংস ধারন করে থাকে। এই সেটিংস ডাটাবেস থেকে উদ্ধার করা হয়েছে।

আমরা নীচের চূড়ান্ত উইজেট কোডটিতে উপরে উল্লিখিত ট্যাগ ব্যবহার করেছি:


উপরোক্ত কোডের মাধ্যমে, আমরা অবশেষে আমাদের উইজেটের ফ্রন্ট-এন্ডের কোডটি পেতে পারি। আমাদের উইজেট কেবল একটি শিরোনাম এবং কিছু বার্তা(টেক্সট) আউটপুট করে থাকে। এই কোডটি ঠিক এটাই করে এবং functions.php র বর্ণনা অনুযায়ী ওপেনিং ও ক্লোজিং ট্যাগের মাধ্যমে উইজেট ও উইজেট টাইটেলকে ঘিরে রাখে, এবং এটা শুধুমাত্র নির্দিষ্ট উইজেট এরিয়ার জন্য, যেমন সাইডবার। যেখানে উইজেটটি রাখা হবে।

আমরা extract() ফাংশনটি নতুন প্রবর্তন করেছি যার সাথে কেউ কেউ হয়তোবা পরিচিত নাও হতে পারে। এই ফাংশনটি একটি অ্যাসোসিয়েটিভ অ্যারে নেয় এবং এটার কীগুলোকে ভেরিয়েবল হিসাবে ফেরত দেয়। এটা $args['before_widget'] এর পরিবর্তে $before_widget echo করার অনুমতি দেয় যা আমাদের কোডটি কিছুটা সহজ করে দেয়। 

ওয়েবসাইটে চূড়ান্ত আউটপুট দেখতে এটার মতই কিছু একটা হবে:

Our text widget on an actual site

উইজেট নিবন্ধীকরণ

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

চূড়ান্ত কোড

আমাদের উইজেটের ব্যবহারকারীদের জন্য জিনিসগুলি সহজ করার জন্য, আমরা ওয়ার্ডপ্রেস কোডটি ওয়ার্ডপ্রেস প্লাগইনে রূপান্তর করতে যাচ্ছি যাতে এটি ইনস্টল করা সহজ হয়।

এটি একটি একক ফাইলে, সিরিজ জুড়ে আমরা যে সমস্ত কোড তৈরি করব তা রাখতে আমাদেরকে সক্ষম করবে।

এটা হচ্ছে চূড়ান্ত কোড:


পরিশিষ্ট

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

এই টিউটোরিয়ালের উদ্দেশ্য হচ্ছে Widgets API সম্পর্কে পুঙ্খানুপুঙ্খ ভূমিকা প্রদান এবং একটি বেইজ উইজেট তৈরি করা, যা থেকে এই সিরিজের অন্যান্য উইজেটও তৈরি করা যায়।

সিরিজের পরবর্তী অংশে, আমরা একটি পোস্ট সম্পর্কিত উইজেট তৈরি করতে যাচ্ছি। এরইমধ্যে, নীচের ফর্মটিতে কোন প্রশ্ন বা মন্তব্য বিনা দ্বিধায় করতে পারেন।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.