«

»

ওয়ার্ডপ্রেস থিম ডিজাইন [পর্ব-৫] :: আপনার প্রথম ওয়ার্ডপ্রেস থিম (৪)

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

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

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


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

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

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

আগেই বলেছিলাম রেজিস্টার করার মানেই হল একটা নতুন ফাংশন তৈরি করা। আর ফাংশন তৈরি করা মানেই 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 {
 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: 19%;
 float: left;
 }
 #content { // মূল কন্টেন্ট এর স্টাইল। যেখানে পোস্টগুলো সাজানো থাকে।
 width: 60%;
 border: 1px #a2a2a2 solid;
 float: left;
 }
 #sidebar-right{ //ডান সাইডবারের স্টাইল।
 width: 19%;
 float: right;
 }

#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 { // মূল থিমের ফুটার অংশের স্টাইল।
 clear:both;
 border: 2px #a2a2a2 solid;
 }

.title { //মূল থিমের টাইটেলের লেখার স্টাইল।
 font-size: 11pt;
 font-family: verdana;
 font-weight: bold;
 }

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

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

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


এ সম্পর্কিত আরো কিছু টুইট:

মন্তব্য দিনঃ

comments

About the author

মাখন

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

Permanent link to this article: http://techtweets.com.bd/tutorials/memaakn/13831

5 comments

Skip to comment form

  1. MNUWORLD

    অনেক সুন্দর…এবার তাইলে থিম বানানোর পরীক্ষা চালানো যায় :) ধন্যবাদ

    1. মাখন

      পরীক্ষা?? ভয় পাইলাম :(

  2. Rubel Orion

    বাহ বাহ! চালায়ে যান। ন চললে চাক্কা লাগায়ে চালায়ে যান! :)

    1. মাখন

      তেল নাই। তেল দেন। 😛

  3. tareq

    ভাই জান, নতুন পোস্ট এর অপেক্ষায় রইলাম।

মন্তব্য করুন