প্রথম ওয়ার্ডপ্রেস থিম তৈরিঃ ৩ দিনের ১ম দিন

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

ওয়ার্ডপ্রেস থিম

এই তিন পার্টের সিরিজের প্রথম পার্টে আপনাকে স্বাগতম। আমরা এখানে থিম বানানো শুরু করব। সহজেই অনেক ওয়ার্ডপ্রেস থিম খুঁজে বের করা যায়। ইন্সটল করা যায় ও মডিফাই করে নিজের সাইটের জন্য মানানসই করে নেয়া যায়। এই সুবিধার জন্যই ওয়ার্ডপ্রেস এত জনপ্রিয় - প্রায় ২ কোটি সাইট শুধু WordPress.com দিয়েই বানানো।

বেশিরভাগ ওয়ার্ডপ্রেস ইউজারই জানে না কিভাবে একটি সাইটের টেমপ্লেট বানাতে হয়, থিম বানানো ও পরের কথা। অনেক ওয়ার্ডপ্রেস ইউজার FTP বা Uploading এর মানে বোঝে না। তাই ওয়ার্ডপ্রেসের বিল্ট ইন সার্চ ইঞ্জিন ও থিম ইন্সটলার অনেক কাজে আসে। টেকনিক্যাল কিছু না জেনেও মানুষ ওয়ার্ডপ্রেস ব্যবহার করতে পারে।

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

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

কি দিয়ে থিম ভালো হয়?

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

এই সিরিজে আগে থেকে তৈরি করা HTML/CSS ফাইলকে ওয়ার্ডপ্রেস থিমে কনভার্ট করা লাগে। এর মানে হচ্ছে কনভার্ট করার জন্য একটা প্রিমেড ডিজাইন পাবেন। আর পার্ট টু তেও ডিজাইন একটা ফ্রি দেয়া আছে।

এই ফাঁকে দেখে নিন প্রিয়িয়াম থিম আর ফ্রি থিমের মধ্যে পার্থক্য কি। এটা থিম বানানোর সময় মাথায় রাখলে ভালো থিম বানাতে পারবেন।

সম্পুরক ডিজাইন

থিমের ডিজাইন ভালো বিন্যাসের দেখা যেতে হবে। সাইট দেখে যেন আধুনিক মনে হয়। এর মানে হচ্ছে, এখন মানুষ সাইট ডিজাইনে কি চায়, সেটা কিন্তু জানা থাকতে হবে। আজকাল ফন্ট রিপ্লেসমেন্ট, সিএসএস গ্রেডিয়েন্ট, ট্রান্সপ্যারেন্ট বক্স, নয়েজি ব্যাকগ্রাউন্ড হচ্ছে ট্রেন্ড। কিন্তু এছাড়া ১০ বছর আগের ও এখনকার সাইত ইমিমেন্ট যেমন কার্সর ট্রেইল, গিফ ফাইল ও ফ্লেমিং টেক্সটের মত জিনিষে কোন পার্থক্য আসেনি।

শিউরে উঠলেন? তবে আমরা এই সব ট্রিক ও ট্রেন্ড এই টিউটোরিয়ালে আলোচনা করব না। ডিজাইন কিভাবে করবেন সেটা নিজের ইচ্ছা মত নির্বাচন করতে পারেন। ড্রিবল বা ফ্রস্টের মত কমিউনিটি  থেকে ডিজাইন ইমপ্রুভ করার জন্য ফিডব্যাক নিতে পারেন।

উইজেট সাপোর্ট

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

অনেক থিমে কাস্টম উইজেট সাপোর্ট থাকে। ওয়ার্ডপ্রেসে কিন্তু বিল্ট ইন স্ট্যান্ডার্ড উইজেট থাকে, যেমন ক্যালেন্ডার, সার্চ বক্স ইত্যাদি। ড্যাশবোর্ড থেকে উইজেট কাস্টমাইজ করা যায়। এরপর তা ফুটার ও সাইডবারে প্লেস করা যায়।

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

কমেন্ট ও ট্র্যাকব্যাক সাপোর্ট 

অনেক নতুন ওয়ার্ডপ্রেস ডেভেলাপাররা যেই ভুলটা করে, সেটা হচ্ছে তারা থিমে ট্রেসব্যাক ও কমেন্ট কম্প্যাবিলিটি ফিচার ঠিক মত ইমপ্লিমেন্ট করে না। যদিও সকল ব্লগ ট্রেসব্যাক ফিচার ব্যবহার করে না, কিন্তু যারা করে, সাপোর্ট ছাড়া থিম তারা ব্যবহার করবে না।

যারা জানেন না ট্যাকব্যাক কি; এটা ইনকামিং লিংক হিসাব ও অন্য ব্লগের সাথে যোগাযোগের একটি উপায়। কিন্তু এটি কমেন্ট থেকে অনেক ভিন্ন।

নতুন ডেভেলাপার হয়তো চাইবে কমেন্টের ফাঁকেফাঁকে ট্রেকব্যাক গুলো দেখাতে, কিন্তু তাতে কমেন্ট ক্লাটারড হয়ে যায়। কমেন্ট পাঠকের কাছে কমেন্টের মাঝে মাঝে পিং ও ট্র্যাকব্যাক দেখতে পাওয়া বিরক্তিকর হতে পারে।

ওয়ার্ডপ্রেস ২.৭ থেকে, নেস্টেড কমেন্ট কোর ফাংশনের একটা হয়ে গেছে। নেস্টেড কমেন্টের সুবিধা হচ্ছে, এটি দিয়ে শুধু পোষ্ট ও কমেন্টই নয়, একটা কমেন্টের উপরেও কমেন্ট করা যায়। টুটস+ সিরিজের মতই, যেমন উপরে দেখা যাচ্ছে। নেস্টেড কমেন্ট তৈরি করা একটি জটিল, কিন্তু করা গেলে এটা একটা চমৎকার ফিচার। আর এই ফিচারটি অনেক ব্লগারই পছন্দ করেন।

গ্র্যাভেটার

গ্র্যাভেটার সকল থিমের জন্যই একটি অসাধারণ ফিচার। গ্র্যাভেটার আপনার ইমেইলের সাথে যুক্ত থাকে, এর সাহায্যে ব্লগে কমেন্ট করা যায়।

গ্র্যাভেটার সহজে থিমে যুক্তও করা যায়। এটা কমেন্ট পার্সোনালাইজ করতে সাহায্য করে।

ফিচারড পোস্ট ও এভেটার

থিম ফরেস্টে জনপ্রিয় থিম দেখলে খেয়াল করবেন সেগুলোর প্রতিটায় ফিচারড পোষ্ট ফাংশন রয়েছে। আসুন একটি পপুলার থিমফরেস্ট থিম Striking এ দেখিঃ

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

আরেকটি ভালো ফিচার হচ্ছে  ফিচারড পোষ্ট সেকশন। এগুলা ম্যাগাজিন টাইপ থিমে বেশি দেখা যায়। একটি পপুলার থিমের উদাহরণঃ

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

কাস্টম পোষ্ট টাইপ

ব্লগে শুধু লেখাই পোস্ট হয়না। ব্লগাররা মিডিয়া, ইমেজ ও ভিডিও শেয়ার করে থাকেন।  এটার একটা ভালো উদাহরণ হচ্ছে নতুন Gridocked থিমঃ

Gridlocked ভিমিও ভিডিওর জন্য একটা কাস্টম পোষ্ট ব্যবহার করে। ইউটিউব ভিডিও ও অডিওর জন্যও কাস্টম পোষ্ট টাইপ এতে রয়েছে। এই সবগুলাই থিমের ডিজাইন পরিবর্ধনে সহয়াতা করে।

এই ফিচার সহজেই থিমে অ্যাড করা যায়। এই ফিচারের কাজ হচ্ছে ভিন্ন ভিন্ন ধরণের ডাটা আলাদা আলাদা স্টাইলে ডিসপ্লে করা।

থিমের কম্পোনেন্টসমূহ

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

header.php

এই ফাইলে থিমের </head> অংশ পর্যন্ত কোড থাকে। এই ফাইলে wp_head() ফাংশন থাকে, যেটা থিমের অতি জরুরী একটা হুক।

sidebar.php

এটা একটা অপশনাল ফাইল। এই ফাইল get_sidebar() ফাংশন কল করে সাইডবার শো করে। এখানেই আমরা থিমের সাইডবার উইজেটের কোড অ্যাড করব।

footer.php

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

page.php

এটা দিয়ে সিঙ্গেল পেজ শো করা হয়।

single.php

এটা দিয়ে পোষ্ট শো করা হয়। এটার কোডের সাথে page.php এর কোডের অনেক মিল রয়েছে। 

index.php

এই ফাইল সকল ফাইল কল করে একসাথে হোমপেজ শো করে।

function.php

ফাংশন ফাইল হয়ত আপনার কাছে নতুন। এই ফাইলে থিম স্পেসিফিক ফাংশনগুলো থাকে।

comments.php

এই ফাইল index.php এর মত একটা লুপ শো করে যেটা দিয়ে কমেন্ট ডিসপ্লে করা হয়। এখানে ট্র্যাকব্যাক ও নেস্টেড কমেন্টের ফাংশনালিটির কোডও থাকে।

থিমে প্রয়োজন অনুযায়ী একেবারে কম বা অনেক বেশি ফাইল থাকতে পারে। থিমের ফাইল স্ট্রাকচার থিম ডেভেলাপারের উপর নির্ভর করে। যেমন থিমে vimeo.php, youtube.php এবং audio.php ফাইল থাকতে পারে, আবার নাও থাকতে পারে।

থিমে কাস্টমাইজ করার জন্য অপশন পেজ

থিমের জনপ্রিয়তা একটি কাস্টমাইজেশনের জন্য অপশন পেজের উপর নির্ভর করতে পারে। বেশিরভাগ পপুলার থিমে কোন না কোন রকম অপশন পেজ থাকে। এটা ভালো একটা সেলিং পয়েন্ট। সাধারণ মানুষের সুবিধার জন্য এই ফিচার থিমে থাকা ভালো।

একটা অপশন পেজে কয়টা চেকবক্স, টেক্স এরিয়া ও স্লাইডার থাকতে পারে। সাধারণত, অপশন পেজ দিয়ে এই ইলিমেন্টগুলো এডিট করা যায়।

• কালার স্কিম
• লোগো 
• ফ্যাভিকন
• সোশ্যাল মিডিয়া সেটিংস
• একাধিক স্টাইল অপশন
• অন্যান্য

সকল অপশন লিস্টে দেয়া সম্ভব হয়। এখানে যত ইচ্ছা তত অপশন দেয়া সম্ভব। একটা ছোট থিমে বেশি অপশন না থাকলেও চলে। কারণ সকল ব্লগার এডিটিং এ দক্ষ নন।

আগামী সপ্তাহে

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

আগামী টিউটোরিয়াল বুঝতে বেসিক HTML, PHP এবং সিএসএস এর ধারণা থাকতে হবে। ওয়ার্ডপ্রেস থিম সম্পর্কে আপনার কিছু জানা থাকতে হবে না। সেটা আপনা একেবারে প্রথম থেকে শুরু করব।