WordPress Theme Development – Zero to Hero : Episode 10

আমরা এই পোস্টে নতুন কিছু কোড লিখব এবং আগের কোড গুলোতে কিছু নতুন কোড।

সরাসরি কোড গুলো এখান থেকে কপি করে নিন।

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

EPISODES:

Episode 01

Episode 02

Episode 03

Episode 04

Episode 05

Episode 06

Episode 07

Episode 08

Episode 09
Episode 10

ধাপ ১০: থিমের রেসপন্সিভ ডিজাইন

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

১) থিমের জন্য Media Queries অ্যাড করুন

CSS-এ Media Queries ব্যবহার কইরা ডিভাইস অনুযায়ী ডিজাইন কাস্টমাইজ করা হয়। style.css ফাইলে নিচের কোড যুক্ত করেন:

/* Large screens (Desktop) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

/* Medium screens (Tablets) */
@media (max-width: 1199px) and (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 15px;
    }

    .sidebar {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Small screens (Mobile) */
@media (max-width: 767px) {
    .container {
        padding: 0 10px;
    }

    .main-content, .sidebar {
        width: 100%;
    }

    .navigation {
        flex-direction: column;
        text-align: center;






    }

    .navigation a {
        display: block;
        margin-bottom: 10px;
    }
}

২) চেকলিস্ট: কী কী এলিমেন্ট রেসপন্সিভ করবেন?

নিচের এলিমেন্টগুলো রেসপন্সিভ করার জন্য বিশেষ খেয়াল রাখবেন:

• Header: মেনু বার, লোগো, সোশ্যাল আইকন।
• Main Content: পেজের মূল কন্টেন্ট যাতে ছোট স্ক্রিনে ঠিকমতো স্কেল হয়।
• Sidebar: মোবাইলে সাইডবারের কন্টেন্ট মেইন কন্টেন্টের নিচে চলে আসবে।
• Footer: লিঙ্ক আর আইকনগুলো ঠিক মতো দেখায় কিনা।

৩) রেসপন্সিভ নেভিগেশন মেনু

আমরা নেভিগেশন মেনু মোবাইল ডিভাইসের জন্য রেসপন্সিভ করব। HTML এডিট করুন (header.php):

<nav class="navigation">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
</nav>

CSS যোগ করুন (style.css):

/* Navigation bar styling */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navigation a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
}

.navigation a:hover {
    background-color: #333;
}

/* Mobile menu toggle */
@media (max-width: 767px) {
    .navigation {
        flex-direction: column;
        align-items: flex-start;
    }

    .navigation a {
        width: 100%;



        text-align: left;
        padding: 15px 10px;
    }
}

৪) থিমে Flexbox/Grid সিস্টেম অ্যাড করুন

আপনার লেআউট আরো ফ্লেক্সিবল করতে Flexbox/Grid ব্যবহার করতে পারেন। উদাহরণ:

/* Flexbox Layout */
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1 1 50%; /* 50% প্রস্থ */
    padding: 10px;
}

@media (max-width: 767px) {
    .col {
        flex: 1 1 100%; /* মোবাইলে 100% প্রস্থ */
    }
}

HTML:

<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>

৫) থিম রেসপন্সিভ কিনা চেক করুন

• Google Chrome এর DevTools ব্যবহার করে বিভিন্ন স্ক্রিন সাইজে চেক করুন।
• ফোন বা ট্যাবলেটে থিমটা লাইভ প্রিভিউ দিন।

এপিসোড-১০ শেষ করছি এবং আপনাদের এক একটি কমেন্ট গুরুত্বপূর্ণ ভূমিকা রাখবে।
আপনাদের মতামত আমি কামনা করছি।
সবাই ভালো থাকবেন সুস্থ থাকবেন।
যেকোন সমস্যা বা কোড না বুঝলেঃ

My Telegram