ভেবেছিলাম আজকে ওয়ার্ডপ্রেস থিমের বেসিক নিয়ে বলব। কিন্তু হঠাৎ আমার এক বন্ধুর কথা মনে পড়ে গেল। তাই আজকের এই পর্বটা তাই একটু বিশেষভাবে সাজানোর চেষ্টা করেছি। তাঁকে উৎসর্গ করার জন্য। 😛
একটা সাধারণ ওয়ার্ডপ্রেস থিম মূলত ৪ ভাগে ভাগ থাকে। হেডার, কন্টেট, সাইডবার আর ফুটার। নিচের ছবিটা দেখুন।
এই ছবি দেখেই বুঝে যাওয়ার কথা কোথায় কি থাকে। তবু বলি, সাইডবারগুলোতে সাধারনত, ক্যাটাঘড়ি, বিভাগ সার্চবক্সসহ আরো নানা রকমের উইডজেট(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 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 37 টি টিউন ও 961 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমি একটা ফাজিল। সবসময় ফাজলামো করতে ভালোবাসি। আর আমি প্রায় সবসময় হাসিখুশি থাকি। আমাদের সমাজে সবার এত বেশি দুঃখ যে কাওকে একটু হাসতে দেখলেই মনে করে তার মাথার স্ক্রু কয়েকটা পড়ে গেছে। আমি তাদের সাথে একমত, আমার শরীরের যে অংশ আমাকে হাসতে দেবে না, আমার তার দরকারও নাই।
ধন্যবাদ আপনার সাথে থাকতে পেরে। যা দিয়েছেন তার জন্য ধন্যবাদ। দেখি ছেস্তা করে। http://www.netmagazine.com এর থিমটা ভাল লাগলো । এমন বানাতে পারব তো?
@billi ভাই: দারুন প্রশ্ন। এগুলো আমরা ধীরে ধীরে শিখব। তবু আপনার প্রশ্নের উত্তর হিসেবে সাইটের নাম আর বর্ণনার কথা বলতে পারি। সবগুলো বলতে গেলে এই টিউমেন্টটাই একটা পোস্ট হয়ে যাবে। 😛
<title> /*টাইটেল */ <?php global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' ); //ব্লগের নাম। $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; ///ব্লগের ডেসক্রিপশন ?></title>
আর আমি ভাই, গুগলটক ব্যবহার করি না। যা জিজ্ঞেস করার, এই খানেই কইরেন। আশা করি উত্তর দিতে পারব। 🙂
আপনি আপনার টিউনটা আমার বড় ভাইয়ের নামে উতসর্গ করসেন, আর তাতে খুশি হয়ে আমি আমার কমেন্টটা আপনারে উতসর্গ করলাম… 😛
@Rubel Oron: এইটা কিছু অইল? কোথায় একটা বিরাট ধন্যবাদ দিবেন, তা না আবার প্রতিবাদ জানাচ্ছে। যা-ই হোক জানালেন যখন জানলাম। ধন্যবাদ আপনাকে।
@অতিরিক্ত এক জন: এই থিমে? এই থিমে আপনি কোন উইডজেট লাগাতে পারবেন না। উপরে তো দূরে থাক, ডানে বামেও না। আমরা শুধু সাইডবারটা বসিয়েছি এই থিমে ঐটাকে ব্যাক এন্ডের সাথে সংযুক্ত করতে চাইলে নতুন লুপ আর ফাংশন বানাতে হইবেক।
আম তো leader. seiber kon ফাইল এ. আর css সম্পর্কে আমার কোনো ধারণা নেই . আমার নতুন ওয়ার্ড প্রেস
খুল্চি . দওয়া করে হেল্প মে.
ঠিকানা -http://bdsoftmela.wordpress.com/
@আশফাক আদিব: ভাই আমি তো আপনার কথায় ঠিকমত বুঝতে পারলাম না। 😛
যা-ই হোক আপনি যেহেতু ওয়ার্ডপ্রেস এ ব্লগিং শুরু করছেন। আপনার আপাতত Header, sidebar নিয়ে চিন্তা করার দরকার নাই। 😉
ধন্যবাদ সুন্দর টিউনের জন্য…
টিটি তে এটাই প্রথম মন্তব্য,আমি ওয়ার্ডপ্রেসের এডমিন প্যনেল থেকে তেরী করা মেনু তে কীভাবে সিএস এস যোগ করতে পারব, যদি এ ব্যাপারে সাহায্য করতে পারেন খুব কাজে লাগবে। নেট থেকে বুঝিনি।
ভাল কোন রিসোর্স থাকলে জানাবেন………..
আমি একটা ফাজিল। সবসময় ফাজলামো করতে ভালোবাসি। আর আমি প্রায় সবসময় হাসিখুশি থাকি। আমাদের সমাজে সবার এত বেশি দুঃখ যে কাওকে একটু হাসতে দেখলেই মনে করে তার মাথার স্ক্রু কয়েকটা পড়ে গেছে। আমি তাদের সাথে একমত, আমার শরীরের যে অংশ আমাকে হাসতে দেবে না, আমার তার দরকারও নাই।
ha ha ha ha ha
post e +
এই রকম লেখা অনেক দিন হতে খুজতাছিলাম। কালেকশনে রাখলাম। মাখনের মতই মজাদার টিউন হইছে। ধন্যবাদ মাখন ভাই।
আসসালামু আলাইকুম! আপনার এই কোডিং নিয়ে আমি চেষ্টা করেছি কিন্তু কাজ হচ্ছিলোনা। পরে কোডগুলো কপি পেষ্ট করেছি তাতেও সেই একই সমস্যা। শুধু এই মেসেজটা দেখাচ্ছে
Fatal error: Call to undefined function get_header() in C:\xampp\htdocs\theam\index.php on line 1
একটু কষ্ট করে ঠিক করে দিলে অনেক উপকার হতো।
আপনার লেখা কিন্তু অনেক সুন্দর হচ্ছে। নিয়মিত অনুশীলন করছি। আপনার কল্যাণ কামনা করে দ্রুত সমাধানের অপেক্ষায়।
@Shakirahmad: ভাইয়া আপনার একটু ভুল হচ্ছে, কিন্তু সেটা কোথায় আমি বুঝতে পারছি না। তাই আমার মত উত্তর দিলাম। কাজ হোক বা না হোক জানাবেন।
“এটা ওয়ার্ডপ্রেসের থিম। আপনাকে আগে ওয়ার্ডপ্রেস ইনষ্টল করতে হবে। ধরুন আপনি ওয়ার্ডপ্রেস রাখলেন
C:\xampp\htdocs\Shakir-blog\ এ তাহলে এই থিম ফাইলগুলো রাখতে হবে
C:\xampp\htdocs\Shakir-blog\\wp-content\themes\shakir-themes এ। এরপর ওয়ার্ডপ্রেস ড্যাশবোর্ড প্যানেল থেকে shakir-themes থিমটি এক্টিভেট করে দেখুন।”
আসসালামু আলাইকুম! , ধন্যবাদ সুন্দর টিউনের জন্য…, এই রকম লেখা অনেক দিন হতে খুজতাছিলাম
ভাল লাগল
](https://dnc.techtunes.io/tDrive/tuner/memaakn/50615/canvas.png "মাখন [পর্বঃ৩। অদ্ভুদ ডায়েরী](সায়েন্স ফিকশন)")
![ওয়ার্ডপ্রেস থিম ডিজাইন [পর্ব-১] :: প্রারম্ভিকা](https://dnc.techtunes.io/tDrive/tuner/memaakn/45550/wp.jpg "ওয়ার্ডপ্রেস থিম ডিজাইন [পর্ব-১] :: প্রারম্ভিকা")
আছি