থিম ডেভেলপমেন্ট

ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট

বর্তমান সময়ের সবথেকে আলোচিত এবং সম্মানজনক পেশা প্রফেশনাল ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট। বর্তমান সময়ে ওয়েবসাইট ছাড়া কোন প্রতিষ্ঠান বা কোম্পানি চিন্তা করা যায় না। তাই প্রতিনিয়ত বিশ্বে অসংখ্য নতুন নতুন সাইট তৈরি হচ্ছে। সহজে এবং কম সময়ে ওয়েবসাইট তৈরির জন্য ব্যবহার করা হয় বিভিন্ন সিএমএস (কন্টেন্ট ম্যানেজমেন্ট সিস্টেম)। এই সিএমএস গুলোর মধ্যে ওয়ার্ডপ্রেস অন্যতম। ইন্টারনেট লাইভ স্টেটস এর হিসাব অনুযায়ী অক্টোবর ২০১৪তে ইন্টারনেটে ওয়েবসাইটের সংখ্যা ১১০ কোটির উপরে। এদের মধ্যে ৪৪.২৬% ওয়েবসাইটই ওয়ার্ডপ্রেসে তৈরি।

ওয়ার্ডপ্রেস সিএমএস এর এত জনপ্রিয়তার কারন এটি পৃথিবীর সবথেকে সহজ, ইউজার বান্ধব, এবং সার্চ ইঞ্জিন ফ্রেন্ডলি সিএমএস যার মাধ্যমে অতি সহজেই কোন প্রকার টেকনিক্যাল জ্ঞান ছাড়াই মাত্র কয়েক মিনিটেই একটা পুর্নাঙ্গ ওয়েবসাইট তৈরি করা যায়।

এই টিউটোরিয়ালটি আপনাকে দেখাবে কিভাবে খুব সহজ একটি ওয়ার্ডপ্রেস থিম তৈরি করা যায়।

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

wrdp-theme1(1)

এখানের একটা অংশ আমরা লোড করব একটা ফাইল থেকে। যেমন আমাদের থিমে নিচের ফাইল গুলো থাকবেঃ

  • header.php – এ ফাইলে থিমের header অংশ থাকবে।
  • index.php – এখানে main area অংশ থাকবে।
  • sidebar.php – saidebar অংশ থাকবে এ ফাইলে।
  • footer.php – footer অংশ থাকবে এ ফাইলে।
  • style.css –  style  অংশ থাকবে এ ফাইলে।

যে কোন টেক্সট এডিটর দিয়ে ওপেন করুন। বা Sublime Text 2 ব্যবহার করতে পারেন।

 

The header.php file

এই ফাইলটি আপনি নিম্নলিখিত কোড যোগ করা উচিত:

<html>
<head>
<title>Tutorial theme</title>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
</head>
<body>

মূলত, এই একটি PHP কোড এবং একটি প্রমিত ওয়ার্ডপ্রেস ফাংশন ধারণকারী একটি একক লাইন সঙ্গে সহজ HTML কোড হয়। এই ফাইলটি আপনি যেমন আপনার ওয়েবসাইট-এর শিরোনাম, মেটা বিবরণ এবং আপনার পৃষ্ঠার জন্য কীওয়ার্ড হিসাবে আপনার মেটা ট্যাগ নির্দিষ্ট করে দিতে পারেন।

রাইট শিরোনাম লাইন আমরা যোগ করার পরে :

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>

 

ওয়ার্ডপ্রেস বলে style.css ফাইলটি লোড করার জন্য. এটা আপনার ওয়েবসাইটের স্টাইলিং হ্যান্ডেল করবে।

<?php bloginfo('stylesheet_url'); ?>

লাইনের অংশ একটি ওয়ার্ডপ্রেস ফাংশন যে আসলে স্টাইলশীট ফাইল লোড করা হয়।

এর পরে, আমরা একটি যা ওয়েবসাইটের মুল ধারক হতে হবে বর্গ আলোয়ান সঙ্গে “div” শুরুতে যোগ করা হয়েছে  । আমরা ক্লাসের এটা যাতে আমরা তা style.css ফাইলের মাধ্যমে পরিবর্তন করতে পারেন জন্য সেট আছে।

এরপর আমরা একটি সহজ ট্যাগ HEADER কোন শ্রেণী “হেডার” যা পরে স্টাইলশীট ফাইলের মধ্যে উল্লেখ করা হবে সঙ্গে একটি “div” আবৃত যোগ করেছেন.

The index.php file

<?php get_header(); ?>

Main Area

Posted on


<?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

এই ফাইলে কোড দিয়ে শুরু
<?php get_header(); ?>

যা header.php ফাইল এবং মূল পৃষ্ঠায় এটি কোড অন্তর্ভুক্ত করা হবে. এটা এই কাজ করতে একটি অভ্যন্তরীণ ওয়ার্ডপ্রেস ফাংশন ব্যবহার করে. আমরা এই টিউটোরিয়ালে পরে বিবরণ এই ব্যাখ্যা করবে. তারপর আমরা নির্দেশ করার জন্য আপনার থিম এর ধারা এই এলাকায় প্রদর্শন করা হয় একটি প্রধান ফোন টেক্সট স্থাপন করা হয়েছে.
পরের কয়েক লাইন একটি পিএইচপি কোড এবং মান ওয়ার্ডপ্রেস ফাংশন দ্বারা গঠিত. এই কোড পরীক্ষা আপনি ওয়ার্ডপ্রেস প্রশাসনিক এলাকার মধ্য দিয়ে তৈরি করা আপনার ব্লগে টিউন আছে কিনা এবং তাদের প্রদর্শন করা হয়.

এর পরে, আমরা এই লাইন দিয়ে sidebar.php ফাইল অন্তর্ভুক্ত

<?php get_sidebar(); ?>

এই ফাইলটি আপনি আপনার টিউনের বিভাগ, আর্কাইভ ইত্যাদি প্রদর্শন করতে পারেন । এই লাইন পরে, আমরা একটি খালি "div" যে আলাদা হবে প্রধান ফোন এবং ফুটার থেকে সাইডবার ঢোকান । পরিশেষে, আমরা গত এক লাইন যোগ 

<?php get_footer(); ?>

যা আপনার পৃষ্ঠায় footer.php ফাইল অন্তর্ভুক্ত করা হবে ।

The sidebar.php file

 

sidebar.php আমরা নিম্নলিখিত কোড যোগ করা হবে:

 

এই ফাইলটি আমরা ধরন এবং টিউন আর্কাইভ প্রদর্শনের জন্য অভ্যন্তরীণ ওয়ার্ডপ্রেস ফাংশন ব্যবহার.
ওয়ার্ডপ্রেস ফাংশন তাদের তালিকা আইটেম হিসাবে ফেরৎ,
তাই আমরা পাঁচমিশালী তালিকায় প্রকৃত ফাংশন (<ul> ট্যাগ) আবৃত করেছি.

 

The footer.php file

আপনি footer.php ফাইলে এই লাইন যোগ করা উচিত:

</div>
</body>
</html>

 

এই কোডটা দিয়ে, আমরা একটি সহজ পাদচরণ ট্যাগ যোগ করুন. পরিবর্তে এই কোড আপনার লিঙ্ক, অতিরিক্ত টেক্সট, আপনার থিম এবং অতিরিক্ত বস্তুর জন্য কপিরাইট তথ্য যোগ করতে পারেন.

The style.css file

style.css ফাইলে নিম্নলিখিত পংক্তিগুলি যোগ করুন

 

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
এই সহজ সিএসএস ফাইল আপনার থিম এর মৌলিক রূপ নির্ধারণ করা হবে. যারা লাইন আপনার পৃষ্ঠার ব্যাকগ্রাউন্ড সেট এবং সুবিধার জন্য সীমানা সঙ্গে আপনার সাইটের প্রধান অংশ ঘিরে.
এই মুহুর্তে আপনার ওয়েবসাইটে এই মত হওয়া উচিত:

wrdp-theme2

 

আমরা পূর্বে উল্লিখিত হয়েছে, অভ্যন্তরীণ ওয়ার্ডপ্রেস ফাংশন প্রায়ই থিমের কোড ব্যবহার করা হয়. আপনি প্রতিটি ফাংশন সম্পর্কে আরও তথ্যের জন্য ওয়ার্ডপ্রেস 
এর অফিসিয়াল ওয়েবসাইট এ সম্পূর্ণ ফাংশন রেফারেন্স কটাক্ষপাত গ্রহণ করতে পারেন.এখন থেকে আপনি, সিএসএস ফাইল পরিবর্তন অর্ডার কেমন লাগে আপনার ব্লগের জন্য যদি 
আপনি চান অর্জন করার জন্য আপনার থিম ইমেজ, এনিমেশন এবং অন্যান্য সামগ্রী যোগ করতে পারেন উপর!

যদিও আপনি যেমনটি চাচ্ছেন তেমন একটি থিম হয় নি। ডেভেলপমেন্ট মানেই হচ্ছে কোন কিছু আস্তে আস্তে তৈরি করা। css এর ব্যবহার যত ভালোভাবে করতে পারবেন থিম তত সুন্দর হবে।
থিমের জন্য আরেকটি প্রয়োজনীও ফাইল হচ্ছে functions.php ফাইল। আমি এ থিমে কোন ফাংশান লিখি নি, তাই এ ফাইলটিও ব্যবহার করিনি। ওয়ার্ডপ্রেস এর এ ডকটা দেখতে পারেন। Theme Development কিভাবে কি করতে হবে, কেন করতে হবে সব কিছুর বিস্তারিত দেওয়া রয়েছে। প্রথম প্রথম একটূ কঠিন মনে হবে। আসলে সব কিছু অনেক সহজ।
থিম ডেভেলপ করার সময় থিমটির কোড লেখাকি ঠিক হচ্ছে কি হচ্ছে না এ জন্য একটি প্লাগইন ব্যবহার করতে পারে। Theme-Check দিয়ে ডেভেলপ করার সময় বিভিন্ন ভুল গুলো দেখে ঠিক করে নিতে পারবেন। Log Deprecated Notices টাও দেখতে পারেন।
থিম ডেভেলপ করার সময় আপনার সাইটে কিছু স্যাম্পল ডেটা থাকলে ভালো হয়। নিজে নিজে সব কিছু তৈরি না করে কিছু ডামি ডেটা ইপোর্ট করে নিতে পারেন। তার জন্য এখানে ক্লিক করুন।
theme-unit-test-data.xml নামক ফাইলটি আপনার কম্পিউটারে সেভ করুন। এবার ওয়ার্ডপ্রেস এর ড্যাসবোর্ড থেকে Tools> Import থেকে ফাইলটি Import করে নিন।
আর এ লিঙ্কটিও দেখতে পারেঃ http://codex.wordpress.org/Theme_Unit_Test

ধন্যবাদ সবাইকে।

মন্তব্য

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s