আসসালামুআলাইকুম,
থিম ডেভেলপমেন্ট করার পোস্টগুলোর প্রতি আমাদের আকর্ষণ নিতান্তই কম। কেননা থিম ডেভেলপ করে সবার কাজ নেই। এটাই স্বাভাবিক। কিন্তু যে কয়জন আগ্রহ প্রকাশ করেন থিম ডেভেলপ নিয়ে তাদের জন্যেই মূলত আমার এই পোস্ট।
ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট টিউটোরিয়ালের আজকের পর্বে আমরা একেবারে বেসিক একটি থিম তৈরি করা শিখব। তবে বলে রাখা প্রয়োজন আপনি যদি ওয়ার্ডপ্রেস ওয়েবডিজাইন না জানেন তবে অবশ্যই তা শিখে নিন।
ভাবছেন কিভাবে? আপনার জন্য রয়েছে ওয়ার্ডপ্রেস ওয়েবডিজাইনের ভিডিও টিউটোরিয়াল।
স্টেপ বাই স্টেপ ফলো করুন । ইনশাআল্লাহ মাত্র ৩ দিনে এক্সপার্ট হয়ে যাবেন।
তার পর শুরু করুন থিম ডেভেলপমেন্ট তৈরির মিশন।
আরো একটি কথা যা আপনার জানা থাকা প্রয়োজনঃ আমি ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে হাতুড়ে ডাক্তার। ইন্টারনেটে ছড়িয়ে থাকা বিভিন্ন ওয়েবসাইটের সাহায্য নিয়ে আমি ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করা শিখেছি। তবুও বলছি আপনি আমার কাছ থেকে যতদূর পারেন শিখুন।
অনেক পিডিএফ বই আছে যা অনেক সনামধন্য ব্যক্তিরা বানিয়েছেন ।ধরা যাক ওয়ার্ডপ্রেস প্লাগইন ডেভেলপমেন্ট বিষয়ক। আপনি সেই পিডিএফ পড়ে নিজে তো ক্রিয়েটিভ কোন প্লাগইন তৈরি করতে পারবেন ই না বরং যে পিডিএফ লিখেছে সে কি তৈরি করল তাও বুঝতে পারবেন না। কিন্তু আমি আপনাকে গ্যারান্টি দিচ্ছি। থিম ফরেস্টের ২৭০০ ডলার মূল্যের থিম বানানো আপনাকে শেখাতে পারব না ঠিকই । কিন্তু আপনার শখের ওয়েবসাইটের জন্য একটি সুন্দর থিম কিভাবে বানাবেন তা অন্তত শেখাতে পারব।
তাছাড়া কোন এক্সপার্ট লোক আপনাকে কোনদিন শেখাবে না। আর যদিও শেখায় তবুও ৳ ছাড়া হবেনা। মিনিমাম ৳ ৬০০০/=। তাও আমি যা শেখাব তার চেয়ে ভালো কিছু উনি আপনাকে শেখাবে না।
আমি গর্ব করে বলতে পারি আমি কোন ফ্রি টেমপ্লেট বা থিম আমার নিজস্ব সাইটে ব্যবহার করিনি। আমি আমার নিজের গড়া থিম দিয়েই আমার ওয়ার্ডপ্রেস সাইট ডিজাইন করেছি।
আরো কিছু জেনে নিনঃ
শেখার কোন শেষ নেই। তা থিম ডেভেলপমেন্টই বলুন আর যে কোন ডিজাইন ই বলুন। থিম ডেভেলপমেন্ট শিখতে গিয়ে নানা ধরণের সমস্যায় পড়েছি। যেমন – ইমেজ এলাইনমেন্ট ঠিক করতে না পারা, থাম্বনেইল ইমেজ ঠিক মত স্টাইলিংক না করতে পারা, থিম এক এক ব্রাউজারে এক এক রকম দেখানো ইত্যাদি। অনেকগুলো বাংলা ওয়েবসাইট ও ফোরামে সাহায্য চেয়েছিলাম বাট! কোন প্রকার সাহায্য কেউ করে নি। তদুপরি কিছু কিছু ব্যক্তির কথা (অতিরঞ্জিত হলেও) নিজেকে প্রশান্তি এনে দেয়।
একে বারে প্রাথমিক থিমটি তৈরি করতে আমাদের যে কয়টি ফাইল নিয়ে কাজ করা লাগবে এবার তা দেখে নেই।
হেডার >> ফুটার >> সাইডার >> ইনডেক্স >> স্টাইল
এই পাচটি ফাইল নিয়ে কিভাবে একটি বেসিক থিম তৈরি করা যায় তা আমরা আজকে শিখব। একদিনেই সব শিখে ফেললে সমূহ বিপদের সম্ভাবনা রয়েছে। তাই আস্তে আস্তে এগুতে হবে। এবং বিশ্বাস রাখুন পরবর্তীতে এই বেসিক থিমটিই আমাদের বড় বড় প্রজেক্ট করার সাহস যোগাবে।
ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করার জন্য সবচেয়ে ভালো হয় যদি আপনি ড্রিমওয়েভার সফটওয়্যারটি ব্যবহার করেন। যদি না থাকে তবে উইন্ডোজ ডিফলট নোটপ্যাড দিয়েও কাজ সারাতে পারেন। তবে আপনাকে জোর দিয়েই বলছি ড্রিমওয়েভার সফটওয়্যারটি সংগ্রহ করে নিন। কাজ করে অনেক মজা পাবেন ।
মূলত আমরা একটি ফোল্ডারের ভেতর header.php Footer.php Index.php Sidebar-right.php Style.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 তে কোডিং করি। কোডিং করার জন্য নিচের কোড গুলো লিখে ফাইলটি সেভ করুন।
<head>
<title>Welcome to marksitbd</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body
<div id="wrapper">
<div id="header">
<h1> Welcome to marksitbd </h1>
</div><head> দিয়ে হেড অংশের সূচনা করা হয়েছে এবং </head> দিয়ে শেষ করা হয়েছে। মাঝখানে <title>Welcome to marksitbd</title> দিয়ে সাইটের টাইটেল দেয়া হয়েছে। আপনি যে কোন টাইট্যাল ব্যবহার করতে পারেন। এবং
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”> দিয়ে স্টাইলশীট কল করা হয়েছে। এটি স্টাইলশীট কল করার জন্য ওয়ার্ডপ্রেসের ডিফলট কোড।
তারপর বডি অংশে রেপার এবং হেডার নামে দুটি ডিভ কল করা হয়েছে। সাইটের রেপার এবং হেডার স্টাইলিং করার জন্য তা অপরি হার্য। হেডার ডিভ এর মাঝে
<h1> Welcome to marksitbd </h1> দিয়ে সাইটের হেডার অংশের টাইটেল বা হেডলাইন দেয়া হয়েছে। h1 হল বড় হেডলাইন । আপনি ২/৩/৪ ইচ্ছামত ব্যবহার করতে পারেন।এবং সবশেষে ডিভটি শেষ করা হয়েছে।
ফুটার অংশে নিচের কোড গুলো লিখে সেভ করুন।
<html> <title>footer</title><div id="footer"> <h1>Designed By Marksitbd</h1> </html>
এখানে এইচটিএমএল ব্যবহার করে ফুটার অংশের লেখাটি নির্ধারণ করা হয়েছে। আপনি Designed By Marksitbd লেখাটি যে কোন নাম দিয়ে পরিবর্তন করে নিতে পারেন। এখানে ডিভ আইডি ফুটার নামে যে ডিভ দেয়া হয়েছে তা Style.css ফাইলে স্টাইলিং করতে প্রয়োজন হবে। মূলত ডিভ ঘোষণা করে তা স্টাইলিং করা সুবিধাজনক।
সাইডবার রাইটে নিচের কোডগুলো লিখে সেভ করুন।
<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('Archves'); ?></h2>
<ul>
<?php wp_get_archves('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(‘Archves’); ?></h2>
<ul>
<?php wp_get_archves(‘type=monthly’); ?>
এবং উপরিউক্ত কোডগুলো মাসিক ভিত্তিতে আর্কাইভ শো করানোর জন্য ব্যবহার করা হয়েছে।
ইনডেক্স পিএইচপিতে নিচের কোডগুলো লিখে সেভ করুন
<?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(); ?> ব্যবহার করা হয়েছে। এই সমস্ত কোড আপনি বার বার প্রাকটিস করুন এবং মনে রাখার চেস্টা করুন।
স্টাইল সিএসএস এ আমি নিচের কোড ব্যবহার করলাম আপনি কোড বুঝে কাস্টমাইজ করে নিতে পারেন।
/*
Theme Name: WordPress Theme Development
Theme URI: http://marksitd.blogspot.com/
Description: WordPress theme development tutorial.
Author: Arif Ahmad
Author URI: http://marksitbd.blogspot.com/
Version: 1.01
*/
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color:#ffffff;
width:960px;
}
#wrapper {
display: block;
border: 1px #000000 solid;
width:960px;
margin:0px auto;
background-color:#ffffff
}
#header {
border: 1px #000000 solid;
background:#666666;
color:#ffffff;
height: 140px;
width:960px;
}
#content {
width: 700px;
border: 1px #000000 solid;
float: left;
position: relative;
}
#sidebar-right{
width: 250px;
background:#ccc;
border: 1px #000000 solid;
float: right;
position: relative;
}
#delimiter {
clear: both;
}
#footer {
border: 2px #000000 solid;
bacground: none repeat scroll 0 0 #CC0000;
background-color:#3300FF;
color:#FFFFFF;
}
.title {
font-size: 12pt;
font-family: verdana;
font-weight: bold;
}
/*
Theme Name: WordPress Theme Development <br>
Theme URI: http://marksitd.blogspot.com/<br>
Description: WordPress theme development tutorial
Author: Arif Ahmad<br>
Author URI: http://marksitbd.blogspot.com
Version: 1.01<br>
*/
এই অংশ টুকু ওয়ার্ডপ্রেসের ডিফল্ট কোড। এখানে থিম নেম , থিমের অথর. অথরের সাইট প্রভৃতি বিষয় নির্ধারণ করা হয়। আপনি পছন্দমত থিম নেম , আপনার নাম ও আপনার ওয়েব এড্রেস ব্যবহার করুন।
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color:#ffffff;
width:960px;
}
এই অংশে আমরা আমাদের থিমের বডি অংশের স্টাইলিং করেছি। আমাদের ওয়েবসাইটে যে সকল টেক্সট থাকবে তা সেন্টার হয়ে থাকবে text-align: center; কোডটির জন্য । আপনি সেন্টার এর বদলে রাইট বা লেফট দিতে পারেন।
তাছাড়া আমাদের বডির দৈর্ঘ্য কতটুকু হবে তা নির্ধারণ করেছি width:960px; দিয়ে। আমরা আমাদের থিমটির দৈর্ঘ্য দিয়েছি 960px; । এবং ব্যাকগ্রাউন্ড কালার দিয়েছি #ffffff; অর্থ্যাৎ সাদা। প্রত্যেক কালারের একটি কালার কোড রয়েছে যেমন সাদার জন্য #ffffff কালোর জন্য #000000 ইত্যাদি। আপনারা ফটোশপে কালার কোড পেতে পারেন।
#wrapper {
display: block;
border: 1px #000000 solid;
width:960px;
margin:0px auto;
background-color:#ffffff
}
একিভাবে রেপার অংশ স্টাইলিং করা হয়েছে।
#header {
border: 1px #000000 solid;
background:#666666;
color:#ffffff;
height: 140px;
width:960px;
}
আমাদের হেডারের হাইট দেয় হয়েছে 140px; এবং ওয়ায়েড দেয়া হয়েছে 960px;। border: 1px #000000 solid; দিয়ে আমাদের হেডারের চারপাশে কালো রং এর 1px মোটা একটি বর্ডার দেয়া হয়েছে । background:#666666; এটি দিয়ে আমাদের হেডারের ব্যকগ্রাউন্ড কালার দেয়া হয়েছে এবং color:#ffffff; দিয়ে হেডার অংশের ট্যাক্সট কালার দেয়া হয়েছে।
#content {
width: 700px;
border: 1px #000000 solid;
float: left;
position: relative;
}
আমাদের কনটেন্ট অর্থ্যাৎ পোস্ট থাকবে 700px; জুড়ে। এবং লেখার চারপাশে কালো রং এর একটি বর্ডার দেয়া হয়েছে। float: left; দ্বারা কনটেন্ট এরিয়া লেফট বা বাম পাশে থাকবে বলে নির্ধারন করা হয়েছে। আপনি রাইট করে দিলে তা বাম পাশে চলে যাবে।
#sidebar-right{
width: 250px;
background:#ccc;
border: 1px #000000 solid;
float: right;
position: relative;
}
রাইট সাইডবার অংশের দৈর্ঘ্য দেয়া হয়েছে 250px; এবং তা অবস্থান করবে float: right; ডান পাশে। আপনি রাইটকে লেফট করে দিলে তা বাম পাশে চলে যাবে। একিভাবে একটি 1px বর্ডার ব্যবহার করা হয়েছে।
#footer {
border: 2px #000000 solid;
bacground: none repeat scroll 0 0 #CC0000;
background-color:#3300FF;
color:#FFFFFF;
}
ফুটার অংশের বর্ডার দেয়া হয়েছে 2px। ব্যাক গ্রাউন্ড কালার দেয়া হয়েছে background-color:#3300FF; এবং ফুটার অংশে টেক্সট কালার দেয়া হয়েছে color:#FFFFFF;।
.title {
font-size: 12pt;
font-family: verdana;
font-weight: bold;
}
সর্বশেষ টাইটেল কেমন হবে তা ঠিক করে দেয়া হয়েছে এই কোড দিয়ে। ফন্ট সাইজ, ফন্ট এবং ওয়েট দেয়া হয়েছে এখানে।
এবার সবগুলো ফাইল সঠিকভাবে কোডিং করার পর আপনার ক্রিয়েট করা my first theme ফোল্ডারটি সেভ করুন জিফ ফরমেটে। ব্যাস!! তৈরি আপনার প্রথম থিমটি। আপলোড করে দেখুন একেবারে বাচ্চা লেবেলের আপনার নিজের হাতে তৈরি করা থিমটি।
প্রথম হিসেবে আজকের লেসনটিই চর্চা করা শুরু করুন। চেস্টা করেছি যতদূর সম্ভব আপনাকে বোঝানোর। যারা একেবারে নতুন তারা ট্রাই করে দেখুন আর প্রস্তুত হোন পরবর্তী ক্লাসের জন্য।
পরবর্তী ক্লাসে আমরা শিখব একটি থিমের খুঁটিনাটি বিষয় বস্তু। যদিও প্রথম ক্লাস এটি হওয়া উচিত ছিল কিন্তু আমার মনে হলো জানার আগে শিখুন!!
কেমন হলো জানিনা ২ ঘন্টার পরিশ্রম এই পোস্টটি। সামান্য ভুল ক্রুটি থাকাটাই স্বাভাবিক ,দয়া করে মন্তব্যের ঘরে গঠণমূলক সমালোচনা করুন। কষ্ট পাই এমন মন্তব্য করার প্রয়োজন নেই। এর চেয়ে ভালো করে বোঝানোর ক্ষমতা থাকলে আপনি শুরু করুন পোস্ট করা। এমন কোন মন্তব্য করবেন না যাতে পরবর্তী পোস্ট করতে নিরুৎসাহিত হই।
ভুল ক্রুটি ক্ষমা করবেন। ধণ্যবাদ সবাইকে।
বিশেষ নোটঃ
সাইডবার রাইটে ইংরেজি আর্কাইভ বানান লিখতে আই ব্যবহার করা হয়নি! আপনারা কোড লিখার সময় অবশ্যই সঠিক ভাবে আর্কাইভ লিখবেন। টেকটিউনসে আর্কাইভের বানানে এইচ আই ভি ভাইরাস পেয়েছে!! ফরবিডেন ওয়ার্ড হিসেবে আর্কাইভের এর আর সি এইচ আইভি ই থেকে এইচ আইভি ট্রাক করছে। মডারেটররা বিষয়টি ঠিক করবেন আশা করি। অথবা সবগুলো কোড ডাউনলােড করতে এখানে যান।
কোন সমস্যা হলে ফেসবুকে অথবা সরাসরি ফোন কলে (০১৮২২৩৩৯০৮৫) সাহায্য নিতে পারেন (ফোন অবশ্যই বিকাল ৩টা থেকে রাত ১০ টার ভেতর করবেন)
:::এডসেন্স সস্পর্কিত যে কোন জিজ্ঞাসায় আমাদের ফেসবুক গ্রুপে যোগ দিতে পারেন::
::এডসেন্স সম্পর্কিত ভিডিও লেসন পেতে পারেন ইউটিউবে:::
সৌজন্যেঃ মার্কস আইটি ব্লগ
আমি আরিফ আহমাদ চৌধুরী। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 58 টি টিউন ও 417 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
![ওয়েবসাইট তৈরী সম্পূর্ন ফ্রিতে [পর্ব-০৬] :: ওয়েবসাইট লগইন সিকিউরিটি।৮০ডলার প্রতিবছর মুল্যের সিকিউরিটি প্লাগিন নিয়ে নিন সম্পূর্ণ ফ্রীতে](https://dnc.techtunes.io/tDrive/tuner/mdsorol/470598/CREATE-WEBSITE.png "ওয়েবসাইট তৈরী সম্পূর্ন ফ্রিতে [পর্ব-০৬] :: ওয়েবসাইট লগইন সিকিউরিটি।৮০ডলার প্রতিবছর মুল্যের সিকিউরিটি প্লাগিন নিয়ে নিন সম্পূর্ণ ফ্রীতে")
![Ξভিডিও টিউনΞ ফটোশপের স্বরে-অ থেকে চন্দ্রবিন্দু [পর্ব-০৩] :: ফটোশপের ই ঈ – লেয়ার না দেখতে পাওয়ার ও ফুল স্ক্রীন সমস্যার সমাধান](https://dnc.techtunes.io/tDrive/tuner/carifahmad/148610/Untitled-1-copy.jpg "Ξভিডিও টিউনΞ ফটোশপের স্বরে-অ থেকে চন্দ্রবিন্দু [পর্ব-০৩] :: ফটোশপের ই ঈ – লেয়ার না দেখতে পাওয়ার ও ফুল স্ক্রীন সমস্যার সমাধান")
নোটপ্যাড প্লাস প্লাস দিয়ে করা যাবে না???