ভেবেছিলাম আজকে ওয়ার্ডপ্রেস থিমের বেসিক নিয়ে বলব। কিন্তু হঠাৎ আমার এক বন্ধুর কথা মনে পড়ে গেল। তাই আজকের এই পর্বটা তাই একটু বিশেষভাবে সাজানোর চেষ্টা করেছি। তাঁকে উৎসর্গ করার জন্য। 😛
একটা সাধারণ ওয়ার্ডপ্রেস থিম মূলত ৪ ভাগে ভাগ থাকে। হেডার, কন্টেট, সাইডবার আর ফুটার। নিচের ছবিটা দেখুন।
এই ছবি দেখেই বুঝে যাওয়ার কথা কোথায় কি থাকে। তবু বলি, সাইডবারগুলোতে সাধারনত, ক্যাটাঘড়ি, বিভাগ সার্চবক্সসহ আরো নানা রকমের উইডজেট(Widget) থাকে। Header এ থাকে সাইটের নাম, স্লোগান, লোগো সহ অন্য কোন ব্যানার। Main body তে আপনার সর্বশেষ কয়েকটা পোস্ট থেকে নির্দিষ্ট সংখ্যক কিছু পোস্ট থাকে। আর আপনি যখন কোন পোস্ট পড়তে চান তখন ঐ পোস্টটি এই অঞ্চলে দেখায়। আপনি চাইলে এই পদ্বতিরও পরিবর্তন করতে পারবেন। আসলে ওয়ার্ডপ্রেস একটি ওপেন সোর্স প্লাটফর্ম হওয়ায় আপনি যে জায়গায় যেমনটি চান ঠিক তেমনই করতে পারবেন। এই জন্যে কিছু কোড লিখা ছাড়া আর কিছুই করতে হবে না আপনাকে। এই ছাড়া হাজার হাজার ফ্রী প্লাগিন তো আছেই।
যা-ই হোক আমরা উপরের ছবির মত একটি থিম বানাব আজকে। ভাল করে লক্ষ করুন কি কি আছে থিমটিতে। দুটি সাইডবার একটি বামপাশে আর একটি ডান পাশে। তাহলে দুটি পিএইচপি ফাইল বানাব এর জন্য। sidebar-left.php এবং sidebar-right.php। চাইলে একটাও বানাতে পারি, কিন্তু পরিচ্ছন্ন থাকলে সবার জন্য বুঝতে সুবিধা হবে। 😉 এরপর আছে উর্ধ্বতন(header) আর পাঠাতন(footer) এই দুটির জন্য দুটি ফাইল header.php আর footer.php। এবং এদের একসাথে যুক্ত করার জন্য index.php। ব্যাস, হয়ে গেল। আহা আহা আরেকটা ফাইল বানাতে হবে আমাদের style.css। থিম ডিজাইনে আসল কাজ এই style.css ফাইলের। নাম শুনেই এর কাজ বুঝে গেছেন নিশ্চয়ই। এর কাজ হল, আপনার থিম এর কন্টন্টগুলো বিভিন্ন স্টাইলে সাজানো। ধীরে ধীরে আমরা আরো বিস্তারিত জানতে পারব আশা করি। 😉
কি কি ফাইল থাকবে তা তো জানলেন, কিন্ত ফাইলের ভিতর কি থাকবে? হুম। চলুন দেখি,
১. header.php
<html> <head> <title>ওয়ার্ডপ্রেস থিম ডিজাইন</title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> </head> <body> <div id="wrapper"> <div id="header"> <h1>HEADER(উর্ধ্বতন)</h1> </div>
এইটা আপনার থিমের হেডার ফাইল। এখানে আপনার সাইটের নাম, লোগো, ব্যানার, স্লোগান। মেটা ট্যাগ, কি-ওয়ার্ড, সাইট ডেসক্রিপশন ইত্যাদি ইত্যাদি সংযুক্ত করতে পারবেন। তবে SEO এর জন্য এই অংশের গুরুত্ব অনেকখানি। আপাতত আমরা শুধু একটা ডিভিশন তৈরি করে একটা নাম দিয়ে দিয়েছি। 😛
২. footer.php
<div id="footer"> <h1>FOOTER(পাঠাতন)</h1> </div> </div> </body> </html>
ওখানে এটি আপনার থিমের সর্বশেষ অংশ। এইখানে আপনি সাইটের কপিরাইট স্বত্ব। থিমের ডিজাইনকারীর নাম, থিমের নাম, সাইটের নাম এমনকি প্রয়োজনে অন্যান্য উইডজেট বসানোর জন্য জায়গা বানাতে পারবেন। আপাতত আমরা শুধু এর নামটি বড় করে লিখে দিয়েছি।
৩. index.php
<?php get_header(); ?> <div id="main"> <?php get_sidebar('left'); ?> <?php get_sidebar('right'); ?> </div> <div id="content"> <h1>Main Area</h1></br><hr> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <h4>Posted on <?php the_time('F jS, Y') ?></h4> <p><?php the_content(__('(more...)')); ?></p> <hr> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> </div> <div id="delimiter"></div> <?php get_footer(); ?>
এটিই আপনার থিমের চুম্বক অংশ, এখানে <?php get_header(); ?>,<?php get_footer(); ?>,<?php get_sidebar('left'); ?>
<?php get_sidebar('right'); ?> লাইনগুলোর দিকে খেয়াল করুন। আমরা আলাদা আলাদাভাবে যে হেডার ফাইল, ফুটার ফাইল বানিয়েছি তা এখানে <?php get_...;?> স্টেটমেন্টের মাধ্যমে সংযুক্ত(call) করেছি।
তাছাড়া <?php if (have_posts()) : while (have_posts()) : the_post(); ?> স্টেটমেন্টে, একটি if function দিয়ে আপনার ব্লগের পোস্টগুলোকে (যদি থাকে) Call করা হয়েছে। এর পরের তিন লাইনে সেই পোস্টটা কিভাবে থাকবে তার বিবরনী রয়েছে।<?php endwhile; else: ?> এর পরে যদি পোস্ট না থাকে তাহল কি হবে তা বলা হয়েছে।
৪. sidebar-left
<div id="sidebar-left"> <h2 class="sidebartitle"><?php _e('About Me'); ?></h2> <center><img src="http://1.gravatar.com/avatar/b59886de1ff96987658d9afb0d0d503e?s=100&d=identicon&r=G"/> <p class="aboutme">আমি একটা ফাজিল। সবসময় ফাজলামো করতে ভালোবাসি। আর আমি প্রায় সবসময় হাসিখুশি থাকি। আমাদের সমাজে সবার এত বেশি দুঃখ যে কাওকে একটু হাসতে দেখলেই মনে করে তার মাথার স্ক্রু কয়েকটা পড়ে গেছে। আমি তাদের সাথে একমত, আমার শরীরের যে অংশ আমাকে হাসতে দেবে না, আমার তার দরকারও নাই।</p></center> </div>
এটা হল আমাদের প্রথম সাইডবার, যেখানে about me তথ্য দেয়া হয়েছে।<div id="sidebar-left"> এই কমান্ডের মাধ্যমে সাইডবারের ডিভিশনটির নাম দেয়া হয়েছে।
৫. sidebar-right
<div id="sidebar-right"> <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> </div>
অন্য সাইডবারটির কোড রয়েছে এখানে। এখানে <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> ও <?php wp_get_archives('type=monthly'); ?> এর মাধ্যমে আপনার ওয়ার্ডপ্রেস এর বিল্ট-ইন ক্যাটাঘরি আর আর্কাইভ ফাংশন দুটোকে Call করা হয়েছে।
৬.style.css
body { text-align: center; background-color:#660099 } #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; background-color:#ffffff } #header { border: 2px #a2a2a2 solid; } #sidebar-left{ width: 19%; border: 1px #a2a2a2 solid; float: left; position: relative; } #content { width: 60%; border: 2px #a2a2a2 solid; float: right; position: relative; } #sidebar-right{ width: 19%; border: 1px #a2a2a2 solid; float: right; position: relative; } #delimiter { clear: both; } #footer { border: 2px #a2a2a2 solid; } .title { font-size: 11pt; font-family: verdana; font-weight: bold; }
CSS সম্পর্কে আপনার যদি সাধারণ ধারণা থাকে তাহলে উপরের কোডটি আপনার বুঝতে অসুবিধা হওয়ার কথা নয়। লক্ষ্য করলে দেখবেন এর আগের পিএইচপি ফাইলগুলোতে আমরা বেশ কিছু ডিভিশনের নাম দিয়েছিলাম। এইখানে সেই নামগুলোকে সংগায়িত করা হয়েছে। যেমন #sidebar-right{...} এই কমান্ডে ডান সাইডবারের বর্নণা দেয়া হয়েছে। width: 19%; আপনার থিমের ১৯% জায়গা জুড়ে এর অবস্থান। border: 1px #a2a2a2 solid; এই প্যানেলের চারপাশে একটি ছাই রঙের ১ পিক্সেলের বর্ডার এর কথা বলা হয়েছে। float: right; আপনার থিমের ডান পাশে এই প্যানেলের অবস্থান। position: relative; থিমের অন্যান্য অংশের সাথে সঙ্গতিপূর্ণ।
এখন সবগুলো ফাইল একটা ফোল্ডার এ রাখুন। ফোল্ডারটির নাম দিন, আপনার থিমের নাম :P। এরপর এই ফোল্ডারটি আপনার ওয়ার্ডপ্রেস সাইটের .../wp-content/themes/ ফোল্ডারে রাখুন। এরপর সাইটের এডমিন প্যানেল থেকে থিমটি ইনষ্টল করুন আর এক্টিভেট করুন। এরপর আপনার সাইটটি রিফ্রেশ করুন। আর উপভোগ করুন আপনার প্রথম ওয়ার্ডপ্রেস থিম। প্রিভিউ দেখুন
কোড ফাইলগুলো ডাউনলোড করে নিতে পারেন এইখান থেকেঃ http://www.mediafire.com/?594qalw2s5tup88
আজ এই পর্যন্তই কেমন লাগল জানাতে ভুলবেন না কিন্তু। ও হ্যা, আমার সেই বন্ধুটির নাম শুনবেন না? তার নাম রুবেল অরিয়ন। আপনারা সবাই তার জন্য দোয়া করবেন। 😛
আমি মাখন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 1 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 37 টি টিউন ও 961 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমি একটা ফাজিল। সবসময় ফাজলামো করতে ভালোবাসি। আর আমি প্রায় সবসময় হাসিখুশি থাকি। আমাদের সমাজে সবার এত বেশি দুঃখ যে কাওকে একটু হাসতে দেখলেই মনে করে তার মাথার স্ক্রু কয়েকটা পড়ে গেছে। আমি তাদের সাথে একমত, আমার শরীরের যে অংশ আমাকে হাসতে দেবে না, আমার তার দরকারও নাই।
আছি