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

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

আপনার প্রথম ওয়ার্ডপ্রেস থিম

তার আগে চলুন ওয়ার্ডপ্রেস থিম ডিজাইন এর আরো কিছু বেসিক ব্যাপার স্যাপার জেনে নেই।

ওয়ার্ডপ্রেস থিমঃ

সাধারণত থিম বলতে একটা সাইটের পোশাককেই বোঝাতে পারি। একটা ঘরের মূল আসবাব পত্র  ঠিক রেখে আমরা ঘরটিকে যেমন বিভিন্নভাবে সাজাতে পারি। ঠিক তেমনি একটি সাইটের কন্টেট ঠিক রেখে আমরা সাইটটিকে থিম পাল্টানোর মাধ্যমে বিভিন্নভাবে সাজাতে পারি। অন্যান্য থিমে সাথে ওয়ার্ডপ্রেস থিমের পার্থক্য হল, এটি সর্বোচ্চ কার্যকর করার জন্য একটি নির্দিষ্ট নিয়ম মেনে তৈরি করতে হয়। নিয়ম বলতে আপাতত আমরা বলতে পারি যে আপনার এডমিন প্যানেলে সাথে মূল সাইটের সংযোগ সাধন। উদাহারণ স্বরুপ বলতে পারি যে আমরা গত পর্বে যে থিমটি তৈরি করেছিলাম সেটার সাইডবারের সাথে সাইটের ব্যাকএন্ডের কোন সংযোগ ছিল না। যার কারণে আপনারা কেউ ঐ থিমটি সাইটের জন্য একটিভ করে Appearance>widget এ ক্লিক করলে ইরর দেখাবে।

ওয়ার্ডপ্রেস থিম ফাইলঃ

থিম ফাইল হচ্ছে থিম সংশ্লিষ্ট ফাইল। মানে একটা থিম বানাতে আমাদের যে যে ফাইলগুলো লাগবে সেগুলোকে একত্রে থিম ফাইল বলা হয়। যে কোন সাধারণ থিম বানানোর জন্যা আমাদের তিনটা ফাইল হলেই চলে

  • index.html
  • style.css
  • Images ফোল্ডার।

কিন্তু একটা সাধারণ ওয়ার্ডপ্রেস থিমের জন্য আমাদের দরকার পরে style.css, Images ফোল্ডার ছাড়াও...

  • index.php
  • header.php [ থিমের শুরুটা এখান থেকেই করা হয়।]
  • footer.php [শেষটা করা হয় এখানে]
  • sidebar.php [সাইডবারের সকল কাজ এইখানে করা হয়]
  • functions.php [ থিমের সকল ফাংশন এইখানে ডিফাইন করে দেওয়া হয়]
  • single.php [ কোন একটা পোস্ট পড়তে চাইলে থিমটা কেমন হবে তার বর্ণনা তাঁকে এইখানে]
  • archives.php [ আর্কাইভ পেজের ডিজাইনটা কেমন হবে তা এখানেই বলা থাকে]
  • comments.php [ মন্তব্য করার জায়গাটা এইখানেই ডিফাইন করে দেয়া থাকে]

এই লিস্ট দেখে ভয় পাওয়ার কিছু নেই। কারণ সাধারণ থিমের ঐ index.html কে ভেঙ্গেই এই ফাইলগুলো বের করা হয়েছে। ধীরে ধীরে আমরা সবকিছুই জানব।

আজকে চলুন, গত পর্বের থিমটিকে আরেকটু উন্নত করার চেষ্টা করি।

প্রথমেই একটা functions.php নামের একটা ফাইল বানায়। এর মধ্যে নিচের কোডটুকু লিখি,


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

এরপর সেভ করে আমাদের মূল থিমের ফোল্ডারের মধ্যে রাখি।

তারপর, যেকোন একটি সাইডবার ফাইলে (sidebar-left.php অথবা sidebar-right.php)

<div id="sidebar-right">
এর পরে
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
এবং
</div>
এর আগে
<?php endif; ?> লিখি।

ধরুন, আমাদের থিমের sidebar-right.php ফাইলটি এডিট করছি তাহলে, নতুন কোডটা হবে এমন

<div id="sidebar-right">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
  <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>

এরপর সেভ করে এডমিন প্যানেল থেকে Widget এ ক্লিক করলে দেখবেন আপনার ডান পাশের সাইডবারে যে কোন উইডজেট যোগ করা যাচ্ছে।

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

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

Level 0

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

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


টিউনস


আরও টিউনস


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


টিউমেন্টস

Level 0

ধন্যবাদ। এইটার জন্যই অপেক্ষা করছিলাম

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

    @mahmud shuvro: ইনশাল্লাহ, শেষ তো হবেই। 🙂 শুধু সময়টা নিয়ে চিন্তাই আছি। :p ধন্যবাদ আপনাকে।

মাখন ভাই। মনে করছিলাম PHP টিউটোরিয়াল এর মতো হলো নাকি। এটা সবাই শুরু করে কিন্তু শেষ করার মত কাউকেই পাই নাই। যাই হোক অবশেষে টিউনাটা করলেন, এটা কোন ব্যাপার না । পরবর্তী টিউনটা একটু তারাতারি কইরেন …. অপেক্ষা করতে আর ভালো লাগেনা । ধন্যবাদ মাখন ভাই চালিয়ে যান সাথেই আছি………. ।

    @মেহেদী হাসান নিয়াজ: PHP টিউটোরিয়ালতো বন্ধ হয় নাই, মিঠু ভাই তো নিয়মিতই লিখছেন। আপনার একই রকম দুটো মন্তব্যের একটা মুছে দিলাম। ধন্যবাদ সাথে থাকার জন্য।

makhon vi amadar chara chola jaban na to…………..

    @Stranger Dinar: কই যাব? যেখানেই যায়। এই টিউটোরিয়াল শেষ করেই যাব। ধন্যবাদ আপনাকে।

ভাল জবাব নাই

ওরররররররেরররররররর বাই রেররর আপনাকে সুপার লাইক….
আপনি আমার মনের সার্চ ইঞ্জিনের ফলাফল বের করে দিয়েছেন। 🙂