ওয়ার্ডপ্রেস থিম ডিজাইন [পর্ব-৪] :: দিন ৩

ওয়ার্ডপ্রেস থিম ডিজাইনের তৃতীয় দিনে আপনাদের সবাইকে স্বাগতম। এর আগের দুই দিন আমরা একটা নির্দিষ্ট থিম নিয়ে কাজ করেছিলাম। স্বাভাবিকভাবেই আজকে আরেকটু এগিয়ে যাব।
গতদিনে আমরা একটা সাইডবারকে এমনভাবে সেট করেছিলাম যাতে আমরা চাইলেই সেইখানে যেকোন উইজেট লাগাতে পারি। আজ আমরা দেখব কিভাবে ডানের সাইডবারটিকেও সেইভাবে সেট করতে হবে।
আমরা ওয়ার্ডপ্রেসে যখনই একটি নতুন সাইডবার বানাব তখনই তিনটা মূল ধাপ মেনে চলব।

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

আসুন, আমরা ধীরে ধীরে এগোয়,

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

সাইডবারটিকে ওয়ার্ডপ্রেসে রেজিষ্টার করা বলতে আসলে থিমের ব্যাকএন্ডের সাথে সংযোগসাধনকেই বুঝানো হয়। মনে রাখবেন, আমরা যদি থিমে এমন কোন ফাংশন যোগ করতে চাই, যা এডমিন প্যানেল থেকে নিয়ন্ত্রণ করা যাবে। তাহলে আমাদের অবশ্যই functions.php ফাইলটিতে যেতে হবে। কারণ, সব ফাংশন সংশোধন, সংযোজন, বিয়োজন  করার কারখানা হচ্ছে এই ফাইলটি। নামেই এর পরিচয় ;)।

গত পর্বেই আমরা প্রথম ফাংশন ফাইলটি নিয়ে কাজ করেছিলাম, যাতে শুধু নিচের তিনটা লাইন লিখা আছে।


<?php
if ( function_exists('register_sidebar') )
 register_sidebar();  ?>

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

<?php
if (function_exists('FUNCTION NAME')) {
FUNCTION_NAME(); }  ?>

সহজ ভাবে বললে এর অর্থ, যদি FUNCTION NAME নামের ফাংশনটির অস্তিত্ব থেকে থাকে তবে তাঁকে ব্যবহার করা। যেমন উপরে FUNCTION NAME এর জায়গায় আছে register_sidebar এর অর্থ register_sidebar নামের কোন ফাংশন থাকলে তবে register_sidebar(); এই কোডটি চালানো হবে। অর্থাৎ একটি সাইডবার সে রেজিস্টার্ড করেছে।[ register_sidebar ওয়ার্ডপ্রেস এর একটি বিল্ট-ইন ফাংশন।]

এখন যেহেতু আমরা নতুন আরেকটি সাইডবার বানাব সেহেতু 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>
',
));

তাহলে আমাদের পুরো কোডটি হবে এমন,

<?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>',
));
?>

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

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

সাইডবারটি ওয়ার্ডপ্রেস থিমের মধ্যে আনা বলতে সাইডবারটির জন্য মূল থিমে কিছুটা জায়গা বানানো। যেহেতু আমরা আগেই sidebar-left এবং sidebar-right নামের দুটো ফাইল বানিয়ে ফেলেছি তাই আমাদের নতুন করে কিছুই করতে হবে না। তবে দুটো ফাইলের মধ্যেই নতুন রেজিস্টারকৃত সাইডবারদুটো যুক্ত করে দিতে হবে। প্রথমেই,

বামের সাইডবারে আসি।

<div id="sidebar-left">
<?php
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Left_Sidebar') ) : ?>
<h2 class="sidebartitle"><?php _e('About Me'); ?></h2>
<center>
<img src="http://1.gravatar.com/avatar/b59886de1ff96987658d9afb0d0d503e?s=100&d=identicon&r=G" alt="" />

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

</center>

<?php endif; ?></div>

এরপর ডানের সাইডবার

<div id="sidebar-right">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right_Sidebar') ) : ?>
  <h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
  <ul class="list-cat">
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  </ul>

  <h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
    <ul class="list-archives">
      <?php wp_get_archives('type=monthly'); ?>
    </ul>
<?php endif; ?>
</div>

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

এই কাজটাও নতুন করে করতে হবে না। কারন, আমরা এর আগেই সাইডবারগুলোর স্টাইল নির্ধারন করে ফেলেছি।

আজ এই পর্যন্তই, আগামী পর্বে আমরা উপরে নিচেও সাইডবার বানাব উইজেট লাগানোর উদ্দেশ্যে। সে পর্যন্ত ভালো থাকবেন।
কোড ফাইলগুলো ডাউনলোড করে নিতে পারেন এইখান থেকেঃ http://www.mediafire.com/?llqyqyh7w6jgfgy

আমার অফলাইন সার্ভার আগে থেকেই কাজ করা বন্ধ করে দিয়েছে। এইবার অনলাইন সার্ভারও গেছে। 😛 তাই কোডগুলো চেক করতে পারলাম না। ভুল হওয়ার কথা নয়, তবুও যদি ভুল হয়েই যায়। তাহলে আমাকে অবশ্যিই জানাবেন। আমি ঠিক করে দেওয়ার চেষ্টা করব।

আপডেটঃ পোস্টটি প্রকাশ করতে গিয়ে কোডগুলো বারবার এলোমেলো হয়ে যাচ্ছে। কারণটা বুঝতে পারছি না। যা-ই হোক আপাতত মনে হয় ঠিক আছে। কোথাও কোন ভুল হলে আমাকে জানাবেন।

Level 0

আমি মাখন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 37 টি টিউন ও 961 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

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


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

খুবি ভালো হচ্ছে মাখন ভাই। সাথে আছি চালিয়ে যান। 🙂

Level 0

ভাই সুন৸র টিউন
চালিয়ে যান

    @Rubel: ধন্যবাদ। আপনার সুন্দরের দ এর রহস্যটা কি?

ভালো হচ্ছে। ধন্যবাদ তাড়াতাড়ি পোস্ট করার জন্য।।

    @mahmud shuvro: আপনাকেও ধন্যবাদ, পড়ার জন্য।

      Level 0

      @মাখন: vai help chai
      Accha vai akta help chai theme ar bapare
      akta theme a 5 ta post show kore ha tahole ami oi theme a kivabe 15 post show korate parbo?

ধন্যবাদ মাখন ভাই। উপরের মন্তব্যের সাথে সহ মত।

Level 0

Accha vai akta help chai theme ar bapare
akta theme a 5 ta post show kore ha tahole ami oi theme a kivabe 15 post show korate parbo?

    @biddut: ড্যাশবোর্ড থেকে Reading Settings এ গিয়ে Blog pages show at most এ ১৫ করে দিন। এছাড়া আপনি থিম এডিট করেও করতে পারেন। এই পদ্বতিতে না হলে বলবেন আমি বলে দিব। 😛

      Level 0

      @মাখন:
      ও মাখন vai অনেক দিন পর help এর উত্তর পেলাম
      THANK’s

ভালো হচ্ছে মিয়াভাই… দৌড়াইয়া যান, সাথেই আছি… 😛

Level 0

ANY ONE PLEASE HELP
Accha vai akta help chai theme ar bapare
akta theme a 5 ta post show kore ha tahole ami oi theme a kivabe 15 post show korate parbo?

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