হাই বন্ধুরা, আশা করি সবাই ভালোই আছেন।ওয়ার্ডপ্রেস থিম এখন আপনে নিজেই তৈরি করুন? আজকে আমরা জানবো কিভাবে নিজে নিজেই নিজের ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করবেন। ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করুন আপনি নিজেই । প্রাথমিক থিমটি তৈরি করতে আমাদের যে কয়টি ফাইল নিয়ে কাজ করা লাগবে এবার তা দেখে নেই।
হেডার
ফুটার
সাইডার
ইনডেক্স
স্টাইল
এই পাচটি ফাইল নিয়ে কিভাবে একটি বেসিক থিম তৈরি করা যায় তা আমরা আজকে শিখব।
প্রয়োজনীয় সফটওয়্যারঃ
ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করার জন্য সবচেয়ে ভালো হয় যদি আপনি ড্রিমওয়েভার সফটওয়্যারটি ব্যবহার করেন। যদি না থাকে তবে উইন্ডোজ ডিফলট নোটপ্যাডদিয়েও কাজ সারাতে পারেন। তবে আপনাকে জোর দিয়েই বলছি ড্রিমওয়েভার সফটওয়্যারটি সংগ্রহ করে নিন। কাজ করে অনেক মজা পাবেন ।
কিভাবে থিম ডেভেলপ করবঃ
মূলত আমরা একটি ফোল্ডারের ভেতর header.php Footer.php Index.php Sidebar-right.phpStyle.css ফাইলগুলো ক্রিয়েট করব এবং তাতে কোডিং করার পর সবগুলো ফাইল সেভ করব এবং ফোল্ডারটিকে জিফ ফরমেট দিয়ে সেভ করব। ফলে তৈরি হয়ে যাবে আমাদের আজকের বেসিক ওয়ার্ডপ্রেস থিমটি। ফাইলগুলো ক্রিয়েট করার জন্য ড্রিমওয়েভার বা নোটপ্যাড ওপেন করে header.php,Footer.php Index.php, Sidebar-right.php, Style.css লিখে লিখে একই ফোল্ডারের ভেতর সেভ করুন।
ধাপ একঃ
প্রথমেই একটি ফোল্ডর ক্রিয়েট করুন। একে রিনেম করে যে কোন নাম দিন। আমি নাম দিলাম- my first theme.
ধাপ দুইঃ
আপনার ক্রিয়েট করা My first theme নামক ফোল্ডারের ভেতর ফাইলগুলো ক্রিয়েট করুন। header.php Footer.php Index.php Sidebar-right.php Style.css ফাইলগুলো এখন সম্পূর্ণ খালি । অথ্যাৎ এখনো এগুলোতে কোন প্রকার কোডিং করা হয়নি । এবার আমরা কোডিং করব।
ধাপ তিন – কোডিং
চলুন কোডিং এ প্রবেশ করি
header.php
প্রথমেই আসুন আমরা header.php তে কোডিং করি। কোডিং করার জন্য নিচের কোড গুলো লিখে ফাইলটি সেভ করুন।
<head> <title>Welcome to HelpTeach</title> <link rel=“stylesheet” href=“<?php bloginfo(‘stylesheet_url’); ?>“> </head> <body <div id=“wrapper”> <div id=“header”> <h1> Welcome to HelpTeach </h1> </div>
কোডগুলো বুঝে নিনঃ
<head> দিয়ে হেড অংশের সূচনা করা হয়েছে এবং </head> দিয়ে শেষ করা হয়েছে। মাঝখানে <title>Welcome to HelpTeach</title> দিয়ে সাইটের টাইটেল দেয়া হয়েছে। আপনি যে কোন টাইট্যাল ব্যবহার করতে পারেন। এবং <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”> দিয়ে স্টাইলশীট কল করা হয়েছে। এটি স্টাইলশীট কল করার জন্য ওয়ার্ডপ্রেসের ডিফলট কোড। তারপর বডি অংশে রেপার এবং হেডার নামে দুটি ডিভ কল করা হয়েছে। সাইটের রেপার এবং হেডার স্টাইলিং করার জন্য তা অপরি হার্য। হেডার ডিভ এর মাঝে <h1> Welcome to bdtechpress </h1> দিয়ে সাইটের হেডার অংশের টাইটেল বা হেডলাইন দেয়া হয়েছে। h1 হল বড় হেডলাইন । আপনি ২/৩/৪ ইচ্ছামত ব্যবহার করতে পারেন।এবং সবশেষে ডিভটি শেষ করা হয়েছে।
Footer.php
ফুটার অংশে নিচের কোড গুলো লিখে সেভ করুন।
<html> <title>footer</title><div id=“footer”> <h1>Designed By WbbMehedi </h1> </html>
কোড বুঝে নিন এখানে এইচটিএমএল ব্যবহার করে ফুটার অংশের লেখাটি নির্ধারণ করা হয়েছে। আপনি Designed By WbbMehedi লেখাটি যে কোন নাম দিয়ে পরিবর্তন করে নিতে পারেন। এখানে ডিভ আইডি ফুটার নামে যে ডিভ দেয়া হয়েছে তা Style.css ফাইলে স্টাইলিং করতে প্রয়োজন হবে। মূলত ডিভ ঘোষণা করে তা স্টাইলিং করা সুবিধাজনক।
Sidebar-right.php
সাইডবার রাইটে নিচের কোডগুলো লিখে সেভ করুন।
<div id=“sidebar-right”> <h2><?php _e(‘Categories’); ?></h2> <ul> <?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?> </ul> <h2><?php _e(‘Arcihves’); ?></h2> <ul> <?php wp_get_archives(‘type=monthly’); ?> </ul> </div>
কোড গুলো বুঝে নিনঃ <div id=”sidebar-right”> দিয়ে রাইট সাইডবার ঘোষণা করা হয়েছে।
<h2 class=”sidebartitle”><?php _e(‘Categories’); ?></h2> <ul><?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0′); ?></ul>
ক্যাটাগরী শো করানোর জন্য কোডগুলো ব্যবহার করা হয়েছে।
<h2 class=”sidebartitle”><?php _e(‘Archives’); ?></h2><ul><?php wp_get_archives(‘type=monthly’); ?>
</ul>
এবং উপরিউক্ত কোডগুলো মাসিক ভিত্তিতে আর্কাইভ শো করানোর জন্য ব্যবহার করা হয়েছে।
Index.php
ইনডেক্স পিএইচপিতে নিচের কোডগুলো লিখে সেভ করুন?
<?php get_header(); ?>
<div id=“main”>
<?php get_sidebar(‘right’); ?>
</div>
<div id=“content”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href=“<?php the_permalink(); ?>“><?php the_title(); ?></a></h1>
<span <h4>Posted on <?php the_time(‘F jS, Y’) ?></h4> .post in <?php echo get_the_category_list( ‘, ‘); ?> </span>
<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(); ?> কোড দিয়ে হেডার কল করা হয়েছে। <div id=”main”> দিয়ে একটি ডিভ ঘোষণা করা হয়েছে। রাইট সাইডবার দেখা যাবার জন্য <?php get_sidebar(‘right’); ?> ব্যবহার করা হয়েছে। কনটেন্ট পাওয়ার জন্য ওয়ার্ডপ্রেসের ডিফল্ট কোড হলো এগুলো-
<div id=”content”><?php if (have_posts()) : while (have_posts()) : the_post(); ?><h1><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1>
কোন ক্যাটাগরীতে পোস্ট করা হয়েছে এবং কত তারিখে পোস্ট করা হয়েছে তা দেখানোর জন্য এ কোড গুলো-
<span><h4>Posted on <?php the_time(‘F jS, Y’) ?></h4> .post in <?php echo get_the_category_list( ‘, ‘); ?></span>
পোস্টে রিডমোর অপশন যোগ করার জন্য এই কোড-
<p><?php the_content(__(‘(more…)’)); ?</p>
যদি কোন পোস্ট না পাওয়া যায় তখন কি হবে তা নির্ধারণ করতে নিচের কোড –
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
এবং ফুটার পাওয়ার জন্য <?php get_footer(); ?> ব্যবহার করা হয়েছে।
এই সমস্ত কোড আপনি বার বার প্রাকটিস করুন এবং মনে রাখার চেস্টা করুন। আশা করি আপনে নিজেই আপনার সাইটের জন্য একটি থিম তৈরি করতে পারবেন। ধন্যবাদ ।
