ওয়ার্ডপ্রেসের জনপ্রিয় মেটাবক্স প্লাগিন CMB2 । কি না করা যায় CMB দিয়ে! পোস্ট, পেজে, ক্যাটাগরিতে বা ইউজারের মেটাবক্স থেকে শুরু করে প্রিমিয়াম থিমের অপশন পেজ — সবই তৈরি করা যায় CMB দিয়ে।
এক প্রোজেক্টে কাজ করতে গিয়ে custom পোস্টের মেটাবক্স হয়ে গেল ৪৮ টা! কিছু করার নেই, যেমন চাহিদা। কিন্তু ব্যবহারকারীর জন্য ভয়াবহ ব্যাপার। পেজ স্ক্রল করতে করতে দিন যায়। এদিকে মেটাবক্সগুলো ঠিকই type অনুযায়ী আলাদা বক্সে আছে। তখনই মাথায় এল মেটাবক্সগুলো Tabbed করার চিন্তা। অনেক প্রিমিয়াম থিমেও মেটাবক্স Tabbed আকারে দেখতে পাবেন। কিন্তু CMB2 তে tabbed মেটাবক্স করার builtin কোন উপায় নেই।
তাহলে কীভাবে করা যায়, সহজ উপায় কি?
ওয়ার্ডপ্রেসে কিছু builtin লাইব্রেরী আছে, এর মধ্যে অন্যতম jQuery-ui (https://jqueryui.com)। তো jQuery-ui এর ট্যাব তৈরির জন্য jquery-ui-tabs এই জাভাস্ক্রিপ্ট handle টা যে পেজে দরকার, সেখানে enqueue করেছি।
wp_enqueue_script('jquery-ui-tabs');Tab করার জন্য আমাদের HTML দরকার এই রকমঃ
প্রতিটি CMB2 মেটাবক্সে classes নামে একটি attribute যোগ করা যায়। এই attribute ব্যবহার করে Tab তৈরি করব। প্রতি মেটাবক্সে একটি unique আইডিও দরকার হয়।
$cmb = new_cmb2_box(array(
'id' => 'post_extra',
'title' => __('Extra Information', 'tmx'),
'object_types' => array('post'), // Post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true,
'classes' => 'tmx-tabbed'
));এবার একটা আলাদা javascript ফাইল নিয়ে, সেটাও যে পেজে tab দরকার শুধু সেখানে enqueue করলাম। কি আছে এই ফাইলে?
প্রতিটা মেটাবক্সের postbox ক্লাসসহ একটা করে parent আছে। tmx-tabbed ক্লাস দিয়ে বুঝব কোন কোন মেটাবক্সকে tabbed করতে চাই। এদের parent থেকে মেটাবক্সের id সংগ্রহ করব।
var tabs = $('.tmx-tabbed').parents('.postbox');tabs ভারিয়েবলে এখন অ্যারে আকারে postbox এর তথ্য আছে। সব মেটাবক্সের id নিয়ে একটা <ul> লিস্ট প্রিন্ট করব মেটাবক্সগুলোর শুরুতে। লিস্টটা string আকারে তৈরি করে মেটাবক্স container এর অন্য element গুলোর আগে prepend করে দিব।
tabs.each(function (index) {
var el = $(this)[0];
ids += '<li><a href="#'+el.id+'">'+$("#"+ el.id +" h2 span").text()+'</a></li>';
});মেটাবক্সের অবস্থান অনুযায়ী মূল মেটাবক্স container এর id হবে normal-sortables, side-sortables অথবা high-sortables । আমাদের ক্ষেত্রে এটা normal-sortables ।
$('#normal-sortables').prepend(ids).tabs();আর তাহলেই CMB2 মেটাবক্সগুলো tabbed হয়ে যাবে।
এবার css দিয়ে চাইলে লিস্টটা বামপাশে অথবা উপরে রেখে ডিজাইন করতে পারেন।
একই পেজে থাকা অন্য মেটাবক্স, যেগুলোতে tmx-tabbed ক্লাস ব্যবহার করা হয়নি, সেগুলো আগের মতই থাকবে, কোনটার সাথে দ্বন্দ্ব হবে না একদমই।
ভাল লেগে থাকলে শেয়ার করতে ভুলবেন না।
অনেক ধন্যবাদ।
লেখকঃ ওয়ার্ডপ্রেস বেদুঈন
