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

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

আমরা শর্টকোড বানানো শিখে ফেললাম এখন আমরা শুধু [[RandomQuote]] লিখলেই  আমাদের র‍্যান্ডম কোটেশন প্রিন্ট করে দেখায়, এখন ধরুন আমরা যদি ওয়ার্ডপ্রেস এডিটরে র‍্যান্ডম কোটেশন প্রিন্ট করার একটা বাটন যোগ করি যাতে ক্লিক করলে এডিটরে [[RandomQuote]] শর্টকোডটি  বসে যাবে তাহলে কাজটা আরও মজার ও সহজ হবে 🙂

চলুন শুরু করা যাক ঃ

প্রথমে আমাদের থিমে editor-button নামে একটা ডাইরেক্টরি করি এবং একটা JavaScript ফাইল তৈরি করি, নাম দিই ধরুন my-editor-button.js এখন ওই ফাইলে একটা সেলফ ইনভোক ফাংশন লিখিঃ

এবার TinyMCE এর একটা প্লাগিন বানাই ও প্লাগিন ম্যানাজার এ আমাদের প্লাগিনটা যোগ করে দিই, ডিক্লারেশন হবে এই রকমঃ

প্লাগিনে আমরা ২ টা ফাংশন ব্যবহার করব একটা init আরেকটা getInfo।

init বা ইনিশিয়েট ফাংশন টা এই প্লাগিন টা লোড হবার সাথে সাথে রান করবে, এখানে আমরা ওই  RandomQuoteButton এর বাটন নাম, টাইটেল, ইত্যাদি ডিফাইন করব এবং ওই বাটনে ক্লিক করলে কি হবে তা বলে দিব, আর getInfo তে প্লাগিন ডেভেলপার এর ইনফরমেশন থাকবে 🙂

init ফাংশনটাতে ২ টা প্যারামিটার থাকবে যা দিয়ে আমরা এডিটরের কিছু ডাটা ব্যবহার করতে পারব, চলুন কোড টা দেখিঃ

এবার getInfo তে নিজের নাম সাইট এড্রেস দিয়ে দিন ঃ

তো পুরা কোড টা হবে এমনঃ

এবার images নামে একটা ডাইরেক্টরি করে 20px বাই  20px  এর একটা ইমেজ বা আইকন রাখুন যা আমাদের এডিটরে দেখাবে, এই প্লাগিন এর জাভাস্ক্রিপ্ট ফাইলটা যে ডাইরেক্টরিতে থাকবে ওই ডাইরেক্টরির মধ্যে images ডাইরেক্টরি টা হবে। যেমন আমাদের এই জাভাস্ক্রিপ্ট ফাইল টা editor-button ডাইরেক্টরি তে আছে তো ইমেজ টা হবে editor-button/images এ

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

এবার বাটন টা যোগ করিঃ

এবার ওয়ার্ডপ্রেস init হুকে জাভাস্ক্রিপ্ট ও বাটন টা যোগকরে দিই ঃ

পুরা কোড হবে ঃ

স্যাম্পল ফাইল ডাউনলোড করে নিন

আর আপনি যদি প্লাগিন হিসেবে ব্যবহার  করতে চান তখন WordPress প্লাগিন ডেভেলপমেন্ট এর যেমনঃ

স্টেপ গুলো ফলো করে প্লাগিন বানিয়ে তৈরি করে ফেলতে পারেন শুধু মনে রাখতে হবে যে প্লাগিন ফাইল যোগ করার সময় get_template_directory_uri() এর স্থানে plugin_url ব্যবহার করতে হবে।

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

3 thoughts on “ওয়ার্ডপ্রেস এডিটরে কাস্টম বাটন যোগ করা”

Leave a Reply

Your email address will not be published. Required fields are marked *