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

প্রথমে বলি আপনি যখন আপনার ওয়েব ব্রাউজারে কোন ওয়ার্ডপ্রেস সাইট ভিজিট করেন তখন আপনার টোটাল ডিসপ্লে টা হল ‘বডি‘ (body)। মানে যে পেজ এর উপর আমরা সকল ডিজাইন করব সেটা হল বডি (body):

itbatayan.com
উপরের যে চিত্র টা দেকতে পাচ্ছেন সেটা সম্পূর্ণটাই হল বডি (body)। এই বডি এর উপর আমরা আলাদা আলাদা সেকশন এড করব। এখন বডি এর উপর প্রথমে যে প্রিন্সিপ্যাল সেকশন এড করব সেটা হল ‘র‌্যাপার‘ (wrapper)। চলুন চিত্র দেখে বুঝি (কালার দেখে বুঝে নিবেন):

http://itbatayan.com

উপরের চিত্রে বডি এর উপর যে প্রিন্সিপ্যাল সেকশন বসানো হয়েছে সেটা হল র‌্যাপার (wrapper)।

এবার র‌্যাপার কে আমরা তিনটি সেকশনে ভাগ করব সেগুলো হল:

১। হেডার (header)

২। কন্টেইনার (container)

৩। ফুটার (footer)

এখন চলুন চিত্র দেখে সেকশন গুলোর লে-আউট সম্পর্কে ধারণা নিই:

itbatayan.com

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

১। কন্টেন্ট (content)

২। সাইডবার (sidebar)

চলুন তাহলে এখন কন্টেন্ট ও সাইডবার সাব সেকশন সহ টোটাল সেকশন নিয়ে লে-আউট টা দেখে নেওয়া যাক:

itbatayan.com
আশাকরি উপরের চিত্র গুলো থেকে ওয়ার্ডপ্রেস এর সাধারণ থিম এর লে-আউট সম্পর্কে মোটামুটি ধারণা পেয়েছেন। শেষ চিত্রে যে সেকশন গুলো দেখা যাচ্ছে তা হল:

১। হেডার-header

২। কন্টেন্ট-content

৩। সাইডবার-sidebar

৪। ফুটার -footer

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

হেডার-header

হেডার সেকশনে সাধারণত ব্লগের নাম এবং স্লোগান থাকে। আবার আপনি চাইলে এখানে কাস্টমাইজ করে বিজ্ঞাপন এবং ফেসবুক লাইক বক্স ইত্যাদি বসাতে পারবেন।

কন্টেন্ট-content

আপনি আপনার ওয়ার্ডপ্রেস ব্লগে যে পোষ্ট করবেন সেটা কন্টেন্ট সেকশনে ডিসপ্লে হবে।

সাইডবার-sidebar

সাইডবার সেকশনে সাধারণত রিসেন্ট পোষ্ট, ফেভারিট পোষ্ট, ব্লগ আর্কাইভ, ক্যাটাগরি লিষ্ট, ইত্যাদি বসাতে হয় মানে যে জিনিষ গুলো শো করার জন্য কম উইথের (width) দরকার হয় সে গুলো।

ফুটার -footer

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

এই ছিল আজকের পোষ্টের আলোচনা। পরবর্তী পোষ্টে আমরা প্রয়োজনীয় ফাইল-ফোল্ডার তৈরী করব। পরবর্তী পর্বগুলো দেখার আমন্ত্রণ জানিয়ে এখানেই বিদায়। আল্লাহ হাফেজ।

ওয়ার্ডপ্রেস কাস্টম থিম তৈরী: পর্ব-১, সার্ভার প্রস্তুতকরণ ও কিছু সাধারণ বিষয়ের উপর আলোচনা।
ওয়ার্ডপ্রেস কাস্টম থিম তৈরী: পর্ব-২, ওয়ার্ডপ্রেস থিম এর লে-আউট পরিচিতি।
ওয়ার্ডপ্রেস কাস্টম থিম তৈরী: পর্ব-৩, প্রয়োজনীয় ফাইল-ফোল্ডার তৈরী।

14 thoughts on "ওয়ার্ডপ্রেস কাস্টম থিম তৈরী: পর্ব-২, ওয়ার্ডপ্রেস থিম এর লে-আউট পরিচিতি।"

  1. Shadin Contributor says:
    অসাম পোস্ট, ভাইয়া।
    স্ক্রিনশট দেখা গেলে আরো ভালো হতো।
    আপনি নতুন করে স্ক্রিনশট আপলোড দিয়ে পোস্টে অ্যাড করে দিন। কারণ আপনার পোস্টে দেওয়া স্ক্রিনশটগুলো অনেক পুরনো (অর্থাৎ পোস্টটা আরো আগে করছেন)। এজন্য স্ক্রিনশট মুছে গিয়েছে।
    1. সিহাব সুমন Author Post Creator says:
      ধন্যবাদ ভাইয়া। আমি দেখছি বিষয় টা।
  2. Sahariaj Author says:
    Gd … Next Part Dan ..Joldi
    1. সিহাব সুমন Author Post Creator says:
      ok viya. I will try as soon as possible.
      thanks for comments
  3. MdNasir Hussain Contributor says:
    great post..vaiya..
  4. MdNasir Hussain Contributor says:
    ভাইয়া আপনারা আছেন বলেই,TRICKBD,তে নিয়মিত ভিজিট করি,ধন্যবাদ ভাইয়া চালিয়ে যান??/ full part পাব বলে আসা করছি???by by
    1. সিহাব সুমন Author Post Creator says:
      অবশ্যই পাবেন ভাইয়া।
  5. স্বপ্ন Author says:
    ভাই আপনার ব্লগ সাইটটির মতো একটি সাইট তৈরি করতে চাই
    প্লিজ থিমটা দিবেন??????
  6. স্বপ্ন Author says:
    অথবা আপনার সাইটের মতো আমরা কিভাবে তৈরী করবো সেটা শিখান।
    1. সিহাব সুমন Author Post Creator says:
      অবশ্যই শিখাবো সাথে থাকুন পেয়ে যাবেন।
  7. mdatikulislam Contributor says:
    ধন্যবাদ,
    ভাই শেষ পর্যন্ত শিখাবেন plz
    মাঝপথে বন্ধ করবেন না।
  8. mr. X Contributor says:
    ss দেখা যায়না

Leave a Reply