«

»

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

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

একটা সাধারণ ওয়ার্ডপ্রেস থিম মূলত ৪ ভাগে ভাগ থাকে। হেডার, কন্টেট, সাইডবার আর ফুটার। নিচের ছবিটা দেখুন।

এই ছবি দেখেই বুঝে যাওয়ার কথা কোথায় কি থাকে। তবু বলি, সাইডবারগুলোতে সাধারনত, ক্যাটাঘড়ি, বিভাগ সার্চবক্সসহ আরো নানা রকমের উইডজেট(Widget) থাকে। Header এ থাকে সাইটের নাম, স্লোগান, লোগো সহ অন্য কোন ব্যানার। Main body তে আপনার সর্বশেষ কয়েকটা পোস্ট থেকে নির্দিষ্ট সংখ্যক কিছু পোস্ট থাকে। আর আপনি যখন কোন পোস্ট পড়তে চান তখন ঐ পোস্টটি এই অঞ্চলে দেখায়। আপনি চাইলে এই পদ্বতিরও পরিবর্তন করতে পারবেন। আসলে ওয়ার্ডপ্রেস একটি ওপেন সোর্স প্লাটফর্ম হওয়ায় আপনি যে জায়গায় যেমনটি চান ঠিক তেমনই করতে পারবেন। এই জন্যে কিছু কোড লিখা ছাড়া আর কিছুই করতে হবে না আপনাকে। এই ছাড়া হাজার হাজার ফ্রী প্লাগিন তো আছেই।

যা-ই হোক আমরা উপরের ছবির মত একটি থিম বানাব আজকে। ভাল করে লক্ষ করুন কি কি আছে থিমটিতে। দুটি সাইডবার একটি বামপাশে আর একটি ডান পাশে। তাহলে দুটি পিএইচপি ফাইল বানাব এর জন্য। sidebar-left.php এবং sidebar-right.php। চাইলে একটাও বানাতে পারি, কিন্তু পরিচ্ছন্ন থাকলে সবার জন্য বুঝতে সুবিধা হবে। 😉 এরপর আছে উর্ধ্বতন(header) আর পাঠাতন(footer) এই দুটির জন্য দুটি ফাইল header.php আর footer.php। এবং এদের একসাথে যুক্ত করার জন্য index.php। ব্যাস, হয়ে গেল। আহা আহা আরেকটা ফাইল বানাতে হবে আমাদের style.css। থিম ডিজাইনে আসল কাজ এই style.css ফাইলের। নাম শুনেই এর কাজ বুঝে গেছেন নিশ্চয়ই। এর কাজ হল, আপনার থিম এর কন্টন্টগুলো বিভিন্ন স্টাইলে সাজানো। ধীরে ধীরে আমরা আরো বিস্তারিত জানতে পারব আশা করি। 😉

কি কি ফাইল থাকবে তা তো জানলেন, কিন্ত ফাইলের ভিতর কি থাকবে? হুম। চলুন দেখি,

১. header.php


ওয়ার্ডপ্রেস থিম ডিজাইন</pre>
<div id="wrapper">
<div id="header">
<h1>HEADER(উর্ধ্বতন)</h1>
</div>

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

২. footer.php

</pre>
<div id="footer">
<h1>FOOTER(পাঠাতন)</h1>
</div>
<pre>

ওখানে এটি আপনার থিমের সর্বশেষ অংশ। এইখানে আপনি সাইটের কপিরাইট স্বত্ব। থিমের ডিজাইনকারীর নাম, থিমের নাম, সাইটের নাম এমনকি প্রয়োজনে অন্যান্য উইডজেট বসানোর জন্য জায়গা বানাতে পারবেন। আপাতত আমরা শুধু এর নামটি বড় করে লিখে দিয়েছি। ৩. index.php

<!--?php get_header(); ?--></pre>
<div id="main"><!--?php get_sidebar('left'); ?-->
<!--?php get_sidebar('right'); ?--></div>
<div id="content">
<h1>Main Area</h1>

<hr />

 <!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->
<h1></h1>
<h4>Posted on <!--?php the_time('F jS, Y') ?--></h4>
<!--?php the_content(__('(more...)')); ?-->

<hr />

 <!--?php endwhile; else: ?-->

<!--?php _e('Sorry, no posts matched your criteria.'); ?-->

 <!--?php endif; ?--></div>
<pre><!--?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

</pre>
<div id="sidebar-left">
<h2 class="sidebartitle"></h2>
<center><img src="http://1.gravatar.com/avatar/b59886de1ff96987658d9afb0d0d503e?s=100&d=identicon&r=G" alt="" />

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

</center></div>

এটা হল আমাদের প্রথম সাইডবার, যেখানে about me তথ্য দেয়া হয়েছে।<div id=”sidebar-left”> এই কমান্ডের মাধ্যমে সাইডবারের ডিভিশনটির নাম দেয়া হয়েছে।
৫. sidebar-right


অব্য সাইডবারটির কোড রয়েছে এখানে। এখানে <?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/ ফোল্ডারে রাখুন। এরপর সাইটের এডমিন প্যানেল থেকে থিমটি ইনষ্টল করুন আর এক্টিভেট করুন। এরপর আপনার সাইটটি রিফ্রেশ করুন। আর উপভোগ করুন আপনার প্রথম ওয়ার্ডপ্রেস থিম। প্রিভিউ দেখুন

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


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

ফটোশপে তৈরি করুন বই(২)
সঠিক নিয়মে একসাথে শিখি, Basic Html-1(নবীনদের জন্য বিশেষ উপকারি )
বর্তমান বিশ্ব সাধারণ জ্ঞান(৪)
আপনার ব্লগসাইটে পপআপ ফেসবুক লাইক বক্স যুক্ত করুন (+অটোক্লোজ টাইমার)
চলুন সি এসএস এর সব কার্সর ইফেক্ট গুলো দেখে নেওয়া যাক………
জনপ্রিয় সেরা ২ টি সেলফি স্পেশালিস্ট স্মার্টফোন
কিওয়ার্ড রিসার্স কি এবং কিভাবে কিওয়ার্ড রিসার্স করতে হয়।

মন্তব্য দিনঃ

comments

About the author

মাখন

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

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

10 comments

Skip to comment form

  1. ঐ ছেলেটি
    jakir

    অসাধারন। রুবেলের জন্য শুভ কামনা, সাথে আপনার জন্য ও।

    1. মাখন

      তৈল প্রদানের নিমিত্তে ধন্যবাদ। 😛

    2. ঐ ছেলেটি
      jakir

      তাহলে গ্যাস দিমু এবার। রাজি?? অসাধারনকে সাধারন বলতে খারাপ লাগে।
      টুইট আসলেই সুন্দর হয়েছে।

    3. মাখন

      হুরর, এইবার রীতিমত লজ্জা পাইলাম। 😛 আবারো ধন্যবাদ।

  2. Rubel Orion

    এহেম। এহেম। :/

    1. মাখন

      (এহেম এহেম) ^২

  3. Masud

    ভাল লাগল। ধন্যবাদ।

    1. মাখন

      আপনার মন্তব্যের জন্য ধন্যবাদ

  4. MNUWORLD

    বাহ বাহ….চালিয়ে যান…ধন্যবাদ দিয়ে ছোট করব নাহ। অভিনন্দন…রুবেল ভাই এর জন্য শুভকামনা 🙂

    1. মাখন

      অনেক ধন্যবাদ ভাইয়া, আপনার সাহায্য করতে থাকলে চালিয়ে যাওয়া কোন ব্যাপারই না। 😛

মন্তব্য করুন