স্বাগতম ধারাবাহিক টিউটোরিয়ালের এই পর্বে। আজকে আমরা থিমের ফুটারে উইজেট লাগানোর ব্যবস্থা করব। গত পর্বে আমরা একটা সাইডবারকে কিভাবে উইজেট সংযুক্ত করার সুবিধা সংবলিত করা যায় তা দেখেছিলাম। কিন্তু আমাদের সাইডবারটি আগে থেকেই থিমের মধ্যে ছিল। তাই একটি নতুন সাইডবারকে কিভাবে প্রস্তুত করতে হয় তা হয়ত বুঝতে পারি নাই। আজকে আমরা পুরো কাজটা করব একসাথে। আগেই বলেছিলাম পূর্ণাঙ্গ একটা সাইডবার তৈরির সময় তিনটা ধাপ মাথায় রাখতে হয়। এগুলো হল,

• এক, সাইডবারটিকে ওয়ার্ডপ্রেসে রেজিষ্টার করা।
• দুই, সাইডবারটি ওয়ার্ডপ্রেস থিমের মধ্যে আনা।
• তিন, সাইডবারটির স্টাইল নির্ধারণ করা।

প্রথমেই বলে নেই আমরা থিমের ফুটারে একটা সাইডবার(বটমবার) বানাব। যেখানে তিনটা কলাম থাকবে। তিন কলামে তিনটা উইজেট লাগানো যাবে। 😛 নিচের ছবিটা দেখুন।

ছবিটার কালার কম্বিনেশন দেখে কারো মাথা ঘুরালে আমার কোন দোষ নাই। আমার রঙ বাছাই করার গুনটি নাই। 😛

চলুন এইবার শুরু করি।

সাইডবারটিকে ওয়ার্ডপ্রেসে রেজিষ্টার করাঃ

আগেই বলেছিলাম রেজিস্টার করার মানেই হল একটা নতুন ফাংশন তৈরি করা। আর ফাংশন তৈরি করা মানেই functions.php ফাইলটা এডিট করা। ফাংশন ফাইলে আমরা নতুন তিনটা সাইডবার রেজিষ্টার করব। ফুটারের তিনটা কলামের জন্য। নতুন কোড সহ পুরো functions.php হবে নিচের মত। নতুন কোডগুলোর ব্যাখ্যা দেয়া আছে।

<?php
 if ( function_exists('register_sidebar') )
 {
 register_sidebar(array(
 'name'=>'Left_Sidebar',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '<h4>',
 'after_title' => '</h4>',
 ));
 register_sidebar(array(
 'name'=>'Right_Sidebar',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '<h4>',
 'after_title' => '</h4>',
 ));
 // ফুটারের ফাংশন কোড শুরু এইখান থেকে
 //ফুটারের বাম পাশের সাইডবার

register_sidebar(array(  //নতুন সাইডবার রেজিষ্ট্রেশন।
 'name' => 'Footer_Left', // সাইডবারের নাম; ফুটারে বাম পাশে থাকবে এটি।
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '<h3>', //ফুটারের টাইটেল হেডিং ৩ সাইজের হবে
 'after_title' => '</h3>',
 ));
 //ফুটারের মাঝের সাইডবার
 register_sidebar(array( //নতুন সাইডবার রেজিষ্ট্রেশন।
 'name' => 'Footer_Center',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 //ফুটারের ডান পাশের সাইডবার
 register_sidebar(array(
 'name' => 'Footer_Right',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));

// ফুটারের ফাংশন কোড শেষ এইখান থেকে
 }
 ?>

ফাইলটি সেভ করি এইবার।

সাইডবারটি ওয়ার্ডপ্রেস থিমের মধ্যে আনাঃ

এই কাজটা আমরা দুইভাবে করতে পারি। প্রথমত, সরাসরি footer.php ফাইলটি এডিট করে। নতুবা, নতুন আরেকটি ফাইল বানিয়ে। যেহেতু আমরা এর আগে বাম সাইডবার আর ডান সাইডবারের জন্য দুটো আলাদা ফাইল বানিয়েছিলাম সেহেতু এইবারো নতুন একটি ফাইল বানাব। তবে নতুন ফাইল বানাতেই হবে এমন কোন কথা নাই। আমরা যতখুশি ফাইল বানাতে পারি, শুধু জায়গামত include করে নিলেই হবে। 😉 । footer-widget.php নামের নতুন একটি ফাইল বানায়। তার মধ্যে নিচের কোডটি লিখে সেভ করি। কোন কোডের মাহাত্ম্য কি তা কমেন্ট আকারেই দেয়া আছে।

<div id="footer-sidebar"> //ফুটার সাইডবার নামের একটা ডিভিশন তৈরি করা হল। এই নামটা একটু পরেই স্টাইল ফাইলে কাজে লাগবে।
 <div id="footer-sidebar_left"> // ফুটারে বাম পাশের জন্য একটা ডিভিশন। প্রতিটা ডিভিশনের নামই কাজে লাগে তাই সতর্ক থাকবেন।
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(Footer_Left) ) : ?> // রেজিষ্টার করা বাম ফুটার সাইডবারটিকে ডাকা হল। যদি শর্তের মাধ্যমে।
 <?php endif; ?> যদি শর্তটি শেষ করা হল।
 </div> // ফুটারে বাম পাশের ডিভিশনটি সমাপ্ত করা হল।
 // উপরের মত করে নিচে মাঝের আর ডানের ডিভিশন দুটো তৈরি করা হল।
 <div id="footer-sidebar_center">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(Footer_Center) ) : ?>
 <?php endif; ?>
 </div>

<div id="footer-sidebar_right">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(Footer_Right) ) : ?>
 <?php endif; ?>
 </div>

</div> //মূল ফুটারের ডিভিশনটি সমাপ্ত করা হল।

এইবার মূল footer.php তে অথবা index.php তে এই ফাইলটি include করে নিতে হবে। আমি footer.php ফাইলে

<hr>
 <?php get_footer('widget'); ?>

কোডের মাধ্যেমে সংযুক্ত করেছি। এইখানে <hr> কোডটি একটি অনুভূমিক(horizontal) লাইনের জন্য দেয়া হয়েছে। আর get_footer('widget') এই লাইনের কারণ হল আমি যে ফাইলটিকে Call করছি তার নাম footer-widget.php। ফাইলের নাম যদি my-name.php হত তাহলে উক্ত কোডটি হত get_my('name')। আশা করি,বুঝতে পেরেছেন।

সাইডবারটি স্টাইল নির্ধারণ করাঃ

এই পর্বে মূল থিমের কিছু রঙ পাল্টিয়েছি। যার কারণে নতুন কোডসহ পুরো style.css ফাইলের কোডটি নিচে তুলে ধরলাম। সাথে বর্ণনাও।

body {
text-align: center;
background-color:#660099
}

#wrapper {
display: block;
border: 1px #a2a2a2 solid;
width:90%;
margin:0px auto;
background-color:#C0D9D9
}

#header {
border: 2px #a2a2a2 solid;
}

#sidebar-left{
width: 20%;
float: left;
position: relative;
}
#content {
width: 60%;
float: right;
position: relative;
}
#sidebar-right{
width: 20%;
float: right;
position: relative;
}

#delimiter {
clear: both;
}


#footer-sidebar {
text-align:center;
display:block;
}

#footer-sidebar_left {
float: left;
width: 33%;
margin-left:5px;
margin-right:5px;
border: 1px #a2a2a2 solid;
background-color:#aadd44;
}

#footer-sidebar_center {
float: left;
width: 33%;
margin-right:5px;
border: 1px #a2a2a2 solid;
background-color:#aadd44;
}

#footer-sidebar_right {
float: left;
width: 32%;
border: 1px #a2a2a2 solid;
background-color:#aadd44;
}
#footer {
border: 2px #a2a2a2 solid;
}

.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

ব্যাস সব কাজ শেষ। এখন থিমটি একটিভ করে এডমিন প্যানেল থেকে Appearance>Widgets এ গেলে Footer_Left, Footer_Right, Footer_Center নামের তিনটি বার দেখতে পাবেন। যেখানে চাইলেই যেকোন উইজেট লাগাতে পারবেন। আজ এই পর্যন্তই। আশা করি সকলে বুঝতে পেরেছেন।

কোড ফাইলগুলো ডাউনলোড করে নিতে পারেন এইখান থেকেঃ http://www.mediafire.com/?ldwnrd64kvjqeae

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

সাথে থাকুন, শুরু যখন করেছি শেষ করেই ছাড়ব। পুরোটা আপনি না পান, আপনার ছেলে নিশ্চয়ই পাবে। 😉