এইচটিএমএল থেকে ওয়ার্ডপ্রেস থিম তৈরি (পর্ব-১)

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

কিন্তু এই কাজটি অনেকের কাছেই খুব কষ্টের বিষয়। আমি এই কষ্টের কাজটি সহজ করে দেওয়ার জন্যই একটি Blank থিম তৈরি করার কথা বলছি। কারণ আমরা জানি প্রতি ওয়ার্ডপ্রেস থিমেই কিছু ফাংশন/কোডিং একই। যার জন্য আমার যদি একটি একটি Blank থিম তৈরি করে রাখি তবে শুধু আমাদের মূল ডিজাইনটির এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট ও অন্যান্য ফাইল গুলো যুক্ত করে দিলেই কাজ শেষ। ফলে একটি নতুন থিম তৈরির ক্ষেত্রে পঞ্চাশ ভাগ কাজ আগেই শেষ!
তো চলুন কাজ শুরু করা যাক, প্রথমে আপনাকে সতেরটি ফাইল এবং চারটি ফোল্ডার তৈরি করতে হবে। তবে শুরু করার পূর্বে নতুন একটি ফোল্ডার তৈরি করুন। ধরুন আমি ফোল্ডারটির নাম দিলাম Blank Theme, আপনি আপনার ইচ্ছা মতো নাম দিতে পারেন। এখন Blank Theme ফোল্ডারের মাঝে চারটি ফোল্ডার তৈরি করুন:

• css ফোল্ডার: এখানে আপনার থিমের সব সিএসএস ফাইল রাখা হবে। এখানে একটি সিএসএস ফাইল তৈরি করুন ie.css নামে।
• images ফোল্ডার: এখানে আপনার থিমের সব ইমেজ ফাইল রাখা হবে।
• js ফোল্ডার: এখানে আপনার থিমের সব জাভাস্ক্রিপ্ট ফাইল রাখা হবে।
• inc ফোল্ডার: এখানে ইউজারের ডাটা গুলো রাখা হবে। পরবর্তীতে এই বিষয়টি আরোও বুঝিয়ে বলা হবে। এই ফোল্ডারে দুটি পিএইচপি ফাইল তৈরি করুন meta.php এবং nav.php নামে।

এবার মূল ফোল্ডারের মাঝে, মানে Theme ফোল্ডারের মাঝে ১৪টি ফাইল তৈরি করতে হবে:

• 404.php: কোনো পেইজ না পাওয়া গেলে আমাদের তৈরি করা পেইজ দেখাতে ব্যবহার করা হবে।
• archive.php: নাম শুনেই বুঝতে পারছেন আর্কাইভের জন্য এই পেইজটি ব্যবহার করা হবে।
• comments.php: কমেন্টের জন্য এই পেইজটি ব্যবহার করা হবে।
• footer.php: ওয়েবসাইটের নিচের অংশ প্রদর্শনের জন্য ব্যবহার করা হবে।
• functions.php: এটি হচ্ছে ওয়ার্ডপ্রেস থিমের মূল কেন্দ্রবিন্দু। এই পেইজ থেকেই আপনার পুরো থিমটির নিয়ন্ত্রণ করা হবে।
• header.php: ওয়েবসাইটের উপরের অংশ প্রদর্শনের জন্য ব্যবহার করা হবে।
• index.php: ওয়েবসাইটের মূল অংশ মানে কনটেন্ট প্রদর্শনের জন্য ব্যবহার করা হবে। যদিও আমরা হোম পেইজ ডিজাইনের জন্য নতুন পেইজ ব্যবহার করে থাকি।
• page.php: আপনার অন্যান্য পেইজের জন্য ব্যবহার করা হবে।
• search.php: আপনার ওয়েবসাইটে সার্চ অপশনটি যুক্ত করার জন্য ব্যবহার করা হবে।
• searchform.php: সার্চ অপশনটির ফর্ম তৈরির জন্য ব্যবহার করা হবে।
• sidebar.php: আপনার ওয়েবসাইটের বাম বা ডান পাশে যে কলাম থাকে সেটিকে আমরা সাইডবার বলছি। এই সাইডবারটির জন্য ব্যবহার করা হবে।
• single.php: একক একটি পেইজের জন্য ব্যবহার করা হবে।
• style.css: সম্পূর্ণ থিমটিতে আপনার মূল সিএসএস ফাইলটি হচ্ছে এটি।
• screenshot.png: প্রতিটি থিম ইনস্টল করার পর থিম অপশনে আমরা থিমের যে ছবিটি দেখি এটি হচ্ছে সেই ছবিটি। এটি নাম অবশ্যই screenshot এবং png ফরমেটে হতে হবে। এটির সাইজ হবে 300px X 225px

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