Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Theme Development
Code

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

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Developing Your First WordPress Theme.
Developing Your First WordPress Theme: Day 1 of 3
Developing Your First WordPress Theme: Day 3 of 3

Bengali (বাংলা) translation by Arnab Wahid (you can also view the original English article)

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

২য় পর্ব

২য় পর্বে স্বাগতম। আগের পর্বে আমরা ভালো থিম কেমন হয় এটা নিয়ে আলোচনা করেছি। এখন দেখবো সেটা কিভাবে বানাতে হয়।


আমাদের থিম

চলুন শুরু করি। নিজের লেআউট ব্যবহার করে এই টিউটোরিয়াল ফলো করতে পারেন।

আমরা এই লে আউট ব্যবহার করব। এটা একটা ব্লগের লেআউট। এটা ডাউনলোড করে নিয়ে আপনি আমাদের টিউটোরিয়াল ফলো করতে পারেন। জিপ ফাইলটি ডাউনলোড করে আনজিপ করে নিন।

থিমটি ব্রাউজারে ওপেন করে দেখুন দেখতে কেমনঃ


পার্ট গুলো আলাদা করে নেয়া

আমরা এই ফ্রন্টেন্ড কোড থিমের বিভিন্ন ফাইলের জন্য আলাদা করে নিবো। ওয়ার্ডপ্রেসের ডিফল্ট ফাইল স্ট্রাকচার ফলো করে থিম বানানো ভালো। ওয়ার্ডপ্রেসের ফাইল ইনক্লুড করার জন্য such as get_header() ফাংশন রয়েছে।

আসুন প্রস্তুতি নেই। থিমের নামে একটি ফোল্ডার তৈরি করুন ফোল্ডারে নিচে দেয়া নামের ফাইল তৈরি করে নিন।

  • index.php
  • single.php
  • page.php
  • comments.php
  • functions.php
  • header.php
  • footer.php
  • sidebar.php

এখন আমরা কাজ শুরু করব। style.css ফাইলে এই কোড বসান।

ওয়ার্ডপ্রেস অটোমেটিকেলি এই ফাইল থেকে থিম ইনফরমেশন নিয়ে নিবে। এই কোড style.css এ পেস্ট করুনঃ

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

প্রথমে আমরা HTML কোড ভাগ ভাগ করে নিবো। টিউটোরিয়ালের সাথে দেয়া index.html ফাইল ওপেন করলে এই কোড দেখতে পাবেন।

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

মেইন কন্টেন্ট index.php, page.php ইত্যাদি পেজে থাকবে। কন্টেন্ট বক্সের বাইরের সব কন্টেন্ট সাইডবার ও ফুটারে থাকে। আমাদের থিম এভাবে বানানো হবে।

index.html এ doctype থেকে কন্টেন্ট ডিভ পর্যন্ত কোড কপি করে header.php তে পেস্ট করুনঃ

এখন আমরা কন্টেন্ট সেকশন স্কিপ করে যাবো। ওটাই সবচেয়ে কঠিন পার্ট। আসুন আগে ফুটার দেখি। ফুটার লেআউটের লাস্ট অংশ। তবে, সাইডবারের কোড ফুটারের পরে আসে। footer.php তে যেই কোড থাকবেঃ

আমরা get_sidebar() ওয়ার্ডপ্রেস ফাংশন ব্যবহার করছি। সাইডবারের কোড যেহেতু ফুটারের পরে আসে, তাই এই কোড ফুটারেই অ্যাড করা হয়।

ফাইনালি, সাইডবার অ্যাড করব। সবার শেষের কোড বিধায় র‍্যাপার, বডি ইত্যাদি ক্লোসিং ট্যাগ সাইডবারে থাকে।

index.php তে এই কোড বসানঃ

এমন দেখাবে

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


bloginfo() ফাংশন

bloginfo() ফাংশন ওয়ার্ডপ্রেসের বিল্টইন থাকে, এটা দিয়ে সব লোকাল ইনফর্মেশন যেমন ব্লগের নাম, ডেসক্রিপশন, স্টাইলশিট ডায়রেক্টরি ইত্যাদি ইমপোর্ট করা হয়। bloginfo() সম্পর্কে বিস্তারিত জানতে ওয়ার্ডপ্রেস কোডেক্সে দেখুন

হেডার ফাইল ওপেন করে এই ইনফরমেশন বসান। header.php এর কোড এখন এমনঃ

আসুন মিসিং স্টাইলশিট ফিক্স করি।  bloginfo থেকে আমরা stylesheet_directory ও stylesheet_url এই দুটা ভ্যালু ব্যবহার করব।  URL ভ্যালু ডায়রেক্ট স্টাইল শিটের ডায়রেক্টরি ইন্ডিকেট করে। এইসব ওয়ার্ডপ্রেস ফাংশন ট্রেইলিং স্ল্যাশ ভ্যালুতে অ্যাড করে না, এটা খেয়াল রাখতে হবে।

স্টাইল শিট লাইন এই কোড দিয়ে রিপ্লেস করুনঃ

থিমে এখন স্টাইলশিপ প্রপার্টি ঠিক করা হয়ে গেছে। এখন হেডার ফাইলে ব্লগের নাম ও ট্যাগ লাইন চেঞ্জ করব।

wp_title() ফাংশন ব্যবহার করে। এই ফাংশন টাইলেটের ভ্যালু রিটার্ন করে। পেজের নামের আগের » বাদ দিতে wp_title() এর বদলে wp_title(“”, true); ব্যবহার করুন।

এটাতেঃ

এখন আমরা bloginfo() প্রপার্টি দিয়ে লোগো, টাইটেল ইত্যাদি চেঞ্জ করতে পারবো।

পেজটি এখন এমন দেখাবেঃ

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


লুপ

লুপ হচ্ছে ওয়ার্ডপ্রেসের পোষ্ট লিস্ট করে দেখানোর একটি উপায়। এটা ওয়ার্ডপ্রেসের একটা বিল্টইন ফাংশন।

আসুন আমরা আগে একটা পোষ্টের স্ট্রাকচার দেখে নেই।

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

  • the_title
  • the_tags
  • the_ID
  • the_category
  • the_date
  • the_content
  • এছাড়াও আরও অনেক কিছু। (http://codex.wordpress.org/Template_Tags#Post_tags লিংকে দেখে নিন)

লুপে এমন একেক ফাংশন কল করে একেক ডাটা ডিসপ্লে করা হয়।

উপরে দেয়া লিংকে এমন সব ফাংশনের লিস্ট দেয়া আছে।

কোড এমন দেখাবেঃ

যেই কোডে সমস্যা হওয়ার কথা, আসুনে সেটা দেখে নেই।

ক্যাটাগরি ডিসপ্লে করার সময় ওয়ার্ডপ্রেস বাই ডিফল্ট লিস্ট স্টাইলে পোষ্ট করে। এটা ওভাররাইড করতে, আমরা নিজেদের সেপারেটর ব্যবহার করব।

এরপর কমেন্ট এর লিংকস।

এরপর কন্টেন্ট শো করতে একটা সহজ if স্টেটমেন্ট। the_excerpt() দিয়ে পোষ্টের এক্সার্প্ট ও the_content() দিয়ে পোষ্টের পুরো কন্টেন্ট। যেটা <--more--> বাটনে ক্লিক করলে দেখা যাবে। আর্কাইভ পেজে ফুল কন্টেন্ট ব্যবহার করার দরকার নেই, তাই the_excerpt() ব্যবহার করা হয়।

এই কোড আমরা আমাদের লুপের ভিতরে ব্যবহার করব। আমাদের index.php ফাইল এখন দেখতে এমন হয়েছেঃ

এই কোড হেডার ফাংশনে রাখুনঃ

আর এটা ফুটার ফাংশনের ঠিক আগেঃ

এখন ওয়ার্ডপ্রেস ব্লগটি লোড করলে এমন দেখাবেঃ

এখন আমাদের থিম পোষ্ট ডিসপ্লে করার জন্য রেডি। কিন্তু যদি অনেক পোষ্ট থাকে? এরপর পেজিনেশন দরকার।

যেমন ৭ টা পোষ্ট থাকলে, প্রথম পেজে ৫ টা পোষ্ট দেখা গেলে, যেন বাকি দুটা পরের পেজে দেখা যায়।

এর জন্য আমরা ব্যবহার করব next_posts_link() এবং previous_posts_link() ফাংশন। শুধু এই দুটা ফাংশন ব্যবহার করেও সব পোষ্ট ডিসপ্লে করা যায়, লুপের পরিবর্তে।

কিন্তু লুপ ব্যবহার করাই প্রচলিত নিয়ম।

আর লুপের মাধ্যমে এক পেজে এখাধিক পোষ্ট শো করা যায়। এখন আমাদের index.php এর কোড যেমন দেখাবেঃ


সিঙ্গেল পোষ্ট

সিঙ্গেল পোষ্টের কোড নিয়ে কিছু কাজ করতে হবে। single.php file ও index.php এর কোড প্রায় কাছাকাছি। কিন্তু single.php file ফাইলে আমাদের পেজিনেশন লিংক দরকার নেই। single.php ফাইলের কোডঃ

শেষের লাইন ছাড়া index.php এর সাথে তেমন কোন পার্থক্য নেই. আমরা পেজিনেশনের দুটা ফাংশন বাদ দিয়ে, comments_template() অ্যাড করেছি। এর ফলে পোষ্টের নিচে কমেন্ট লোড হবে, যদি থাকে।

আর নতুন কমেন্ট করার ফর্ম, যদি কমেন্ট এনেবল থাকে।


পেজ

পেজ লোড করার ফাইলের কোডও সিঙ্গেল পোষ্ট ফাইলের মতই। শুধু পোষ্ট অথর, টাইম ইত্যাদি বাদ দিতে হবে। যেটার কোড দেখতে এমনঃ


ন্যাভিগেশন

ফাইনালি আমরা একটা ন্যাভিগেশন মেন্যু অ্যাড করব। header.php ওপেন করে nav-bar-tile এই কোড দিয়ে রিপ্লেস করুনঃ

এখানে wp_nav_menu ফাংশন ব্যবহার করা হয়েছে। এখানে একটি আর্গুমেন্ট ব্যবহার করে একটি এরে ডিসপ্লে করা হয়েছেঃ

  • menu - আপনার সাইটের মেন্যু
  •  wp_nav_menu সিএসএস ক্লাস
  • menu_id - The UL element ID
  • container - Whether or not to wrap the list
  • theme_location - যেই লোকেশনে মেন্যু শো হবে
  • show_home - মেন্যুতে হোম লিংক শো হবে কিনা

ওয়ার্ডপ্রেস কিভাবে কন্টেন্ট জেনারেট করে, সেটা যাচাই করে দেখে সেইভাবেই এই সিএসএস ক্লাস গুলো বসানো হয়েছে।

এখন আমাদের ওয়ার্ডপ্রেস ব্লগ এমন দেখতে হবেঃ


পরবর্তী...

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

আমরা কোন প্রশ্ন থাকলে সেটা আমাদের কমেন্টে জানাতে পারেন। আমরা বিস্তারিত জানার আগ্রহ থাকলে সেগুলো শেখার জন্য WordPress Codex এর কোণ বিকল্প নেই।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.