এই আর্টিকেলে আমরা কিভাবে ওয়ার্ডপ্রেস এডিটরে কাস্টম বাটন যোগ করা যায় তা দেখব 🙂
আমরা শর্টকোড বানানো শিখে ফেললাম এখন আমরা শুধু [[RandomQuote]] লিখলেই আমাদের র্যান্ডম কোটেশন প্রিন্ট করে দেখায়, এখন ধরুন আমরা যদি ওয়ার্ডপ্রেস এডিটরে র্যান্ডম কোটেশন প্রিন্ট করার একটা বাটন যোগ করি যাতে ক্লিক করলে এডিটরে [[RandomQuote]] শর্টকোডটি বসে যাবে তাহলে কাজটা আরও মজার ও সহজ হবে 🙂
চলুন শুরু করা যাক ঃ
প্রথমে আমাদের থিমে editor-button নামে একটা ডাইরেক্টরি করি এবং একটা JavaScript ফাইল তৈরি করি, নাম দিই ধরুন my-editor-button.js এখন ওই ফাইলে একটা সেলফ ইনভোক ফাংশন লিখিঃ
|
1 2 3 4 5 |
;(function () { // এখানে আমাদের কোডগুলি লিখব })(); |
এবার TinyMCE এর একটা প্লাগিন বানাই ও প্লাগিন ম্যানাজার এ আমাদের প্লাগিনটা যোগ করে দিই, ডিক্লারেশন হবে এই রকমঃ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
;(function () { tinymce.create('tinymce.plugins.RandomQuote', { // এখানে আমাদের প্লাগিনের কোড গুলা থাকবে }); // প্লাগিন তৈরি শেষ // এবং প্লাগিন টা TinyMCE প্লাগিন ম্যানাজারে যোগ করে দিলাম tinymce.PluginManager.add('RandomQuoteButton', tinymce.plugins.RandomQuote); })(); |
প্লাগিনে আমরা ২ টা ফাংশন ব্যবহার করব একটা init আরেকটা getInfo।
init বা ইনিশিয়েট ফাংশন টা এই প্লাগিন টা লোড হবার সাথে সাথে রান করবে, এখানে আমরা ওই RandomQuoteButton এর বাটন নাম, টাইটেল, ইত্যাদি ডিফাইন করব এবং ওই বাটনে ক্লিক করলে কি হবে তা বলে দিব, আর getInfo তে প্লাগিন ডেভেলপার এর ইনফরমেশন থাকবে 🙂
init ফাংশনটাতে ২ টা প্যারামিটার থাকবে যা দিয়ে আমরা এডিটরের কিছু ডাটা ব্যবহার করতে পারব, চলুন কোড টা দেখিঃ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
init: function (ed, url) { /** এখানে ed হল বর্তমান এডিটর আর url হল এই প্লাগিন টা যে পাথ থেকে লোড হয়েছে ওই পাথ */ // বাটন ডিক্লেয়ার করলাম ed.addButton('addrandomquote', // বাটন আইডি { title: 'Add Random Quote', // বাটন টাইটেল, মাউস হভার করলে এটা দেখাবে cmd : 'addrandomquote', // বাটন কমান্ড, মানে ক্লিক করলে কোন কমান্ড এক্সিকিউট করবে image: url + '/images/add-random-quote.png' // বাটন ইমেজ যা এডিটরে দেখাবে। সাইজ ২০ পিক্সেল বাই ২০ পিক্সেল }); // ওই বাটনের কমান্ড টা লিখলাম ed.addCommand('addrandomquote', // এটা বাটনে cmd তে ডিফাইন করা আছে function () { ed.execCommand('mceInsertContent', 0, '[RandomQuoteButton]'); // এডিটরে [RandomQuoteButton] কোডটা ইনসার্ট করবে }); }, // init শেষ |
এবার getInfo তে নিজের নাম সাইট এড্রেস দিয়ে দিন ঃ
|
1 2 3 4 5 6 7 8 9 |
getInfo: function () { return { longname : 'Random Quote Button', author : 'আপনার নাম', authorurl: 'আপনার সাইট এড্রেস', infourl : 'ইনফরমেশন লিঙ্ক বা ডকুমেন্টেশন লিঙ্ক', version : "0.1" // এই প্লাগিনের ভার্সন }; } |
তো পুরা কোড টা হবে এমনঃ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
;(function () { tinymce.create('tinymce.plugins.RandomQuote', { init: function (ed, url) { /** এখানে ed হল বর্তমান এডিটর আর url হল এই প্লাগিন টা যে পাথ থেকে লোড হয়েছে ওই পাথ */ // বাটন ডিক্লেয়ার করলাম ed.addButton('addrandomquote', // বাটন আইডি { title: 'Add Random Quote', // বাটন টাইটেল, মাউস হভার করলে এটা দেখাবে cmd : 'addrandomquote', // বাটন কমান্ড, মানে ক্লিক করলে কোন কমান্ড এক্সিকিউট করবে image: url + '/images/add-random-quote.png' // বাটন ইমেজ যা এডিটরে দেখাবে }); // ওই বাটনের কমান্ড টা লিখলাম ed.addCommand('addrandomquote', // এটা cmd তে ডিফাইন করা আছে function () { ed.execCommand('mceInsertContent', 0, '[RandomQuoteButton]'); }); }, // init শেষ getInfo: function () { return { longname : 'Random Quote Button', author : 'আপনার নাম', authorurl: 'আপনার সাইট এড্রেস', infourl : 'ইনফরমেশন লিঙ্ক বা ডকুমেন্টেশন লিঙ্ক', version : "0.1" // এই প্লাগিনের ভার্সন }; } }); // এবং প্লাগিন টা TinyMCE ম্যানাজারে যোগ করে দিলাম tinymce.PluginManager.add('RandomQuoteButton', tinymce.plugins.RandomQuote); })(); |
এবার images নামে একটা ডাইরেক্টরি করে 20px বাই 20px এর একটা ইমেজ বা আইকন রাখুন যা আমাদের এডিটরে দেখাবে, এই প্লাগিন এর জাভাস্ক্রিপ্ট ফাইলটা যে ডাইরেক্টরিতে থাকবে ওই ডাইরেক্টরির মধ্যে images ডাইরেক্টরি টা হবে। যেমন আমাদের এই জাভাস্ক্রিপ্ট ফাইল টা editor-button ডাইরেক্টরি তে আছে তো ইমেজ টা হবে editor-button/images এ
এবার functions.php ফাইলে এই জাভাস্ক্রিপ্ট ফাইল ও বাটন ওয়ার্ডপ্রেসের এডিটরে দেখানর জন্যে রেজিস্টার করে দিতে হবে, তো প্রথমে আমরা জাভাস্ক্রিপ্ট ফাইল টা যোগ করিঃ
|
1 2 3 4 5 6 |
function prefix_add_mce_plugin_file($plugin_array) { // TinyMCE প্লাগিন নেম ও পাথ $plugin_array['RandomQuoteButton'] = get_template_directory_uri() . '/editor-button/my-editor-button.js'; return $plugin_array; } |
এবার বাটন টা যোগ করিঃ
|
1 2 3 4 |
function prefix_add_mce_button($buttons) { array_push( $buttons, 'addrandomquote' ); // প্লাগিন বাটন নেম return $buttons; } |
এবার ওয়ার্ডপ্রেস init হুকে জাভাস্ক্রিপ্ট ও বাটন টা যোগকরে দিই ঃ
|
1 2 3 4 5 6 |
add_action( 'init', 'prefix_tinymce_buttons' ); function prefix_tinymce_buttons() { add_filter("mce_external_plugins", "prefix_add_mce_plugin_file"); // প্লাগিন টা যোগ করলাম add_filter('mce_buttons', 'prefix_add_mce_button'); // বাটন টা যোগ করলাম } |
পুরা কোড হবে ঃ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_action( 'init', 'prefix_tinymce_buttons' ); function prefix_tinymce_buttons() { add_filter("mce_external_plugins", "prefix_add_mce_plugin_file"); // প্লাগিন টা যোগ করলাম add_filter('mce_buttons', 'prefix_add_mce_button'); // বাটন টা যোগ করলাম } function prefix_add_mce_plugin_file($plugin_array) { $plugin_array['RandomQuoteButton'] = get_template_directory_uri() . '/editor-button/my-editor-button.js'; return $plugin_array; } function prefix_add_mce_button($buttons) { array_push( $buttons, 'addrandomquote' ); // আমাদের বাটন addrandomquote TinyMCE এর অন্য বাটন গুলার সাথে যোগ করে দিলাম return $buttons; } |
আর আপনি যদি প্লাগিন হিসেবে ব্যবহার করতে চান তখন WordPress প্লাগিন ডেভেলপমেন্ট এর যেমনঃ
|
1 2 3 4 5 6 7 8 9 10 |
<?php /** * Plugin Name: Name Of The Plugin * Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates * Description: A brief description of the Plugin. * Version: The Plugin's Version Number, e.g.: 1.0 * Author: Name Of The Plugin Author * Author URI: http://URI_Of_The_Plugin_Author * License: A "Slug" license name e.g. GPL2 */ |
স্টেপ গুলো ফলো করে প্লাগিন বানিয়ে তৈরি করে ফেলতে পারেন শুধু মনে রাখতে হবে যে প্লাগিন ফাইল যোগ করার সময় get_template_directory_uri() এর স্থানে plugin_url ব্যবহার করতে হবে।
একসাথে অনেক গুলো বাটনের জন্যে আপনি একই জাভাস্ক্রিপ্ট ফাইলে বাটন ও কমান্ড লিখে দিলেই হয়ে যাবে আলাদা জাভাস্ক্রিপ্ট ফাইল বানানোর দরকার পরবে না, আর php ফাইলে বাটন টা পুশ করে দিলেই কেল্লাফতে 🙂