বাংলায় WordPress Plugin Development – পর্ব ০৮

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

Lazy Load ফিচার যুক্ত করা (পর্ব ৮)

ওয়ার্ডপ্রেস প্লাগিন ডেভেলপমেন্টের ধারাবাহিক টিউটোরিয়ালের ৮ম পর্বে স্বাগতম। আগের পর্বে আমরা শিখেছি কিভাবে কাস্টম সেটিংস পেজ এবং ক্রন জব ইন্টারফেস তৈরি করতে হয়। আজ আমরা ওয়েবসাইটের পারফরম্যান্স বাড়ানোর জন্য Lazy Load ফিচার যুক্ত করবো।

Lazy Load একটি গুরুত্বপূর্ণ ফিচার, যা ওয়েবসাইট লোডিং টাইম দ্রুত করতে সাহায্য করে। এই পদ্ধতিতে, ইমেজ বা কন্টেন্ট তখনই লোড হয় যখন তা ভিজিটরের স্ক্রিনে দৃশ্যমান হয়।

---

পর্ব ৮-এর লক্ষ্য

১. Lazy Load ফিচারের প্রয়োজনীয়তা বুঝা।
২. Lazy Load ফিচার যুক্ত করার জন্য জাভাস্ক্রিপ্ট এবং PHP ব্যবহার করা।
৩. Lazy Load ফিচারকে কাস্টমাইজ করা।

---

Lazy Load কী এবং কেন প্রয়োজনীয়?

Lazy Load এমন একটি টেকনিক, যেখানে ইমেজ বা মিডিয়া কন্টেন্ট ওয়েবসাইট লোড হওয়ার সাথে সাথে ডাউনলোড না হয়ে তখনই লোড হয় যখন ভিজিটর সেই কন্টেন্ট স্ক্রলে দেখে।

Lazy Load-এর সুবিধা

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

---

Lazy Load যুক্ত করার ধাপ

Lazy Load ফিচার যুক্ত করতে আমরা নিচের স্টেপগুলো অনুসরণ করবো:

১. HTML কোড আপডেট করে ইমেজ ট্যাগে data-src অ্যাট্রিবিউট যোগ করা।
২. জাভাস্ক্রিপ্ট দিয়ে Lazy Load ইমেজ লোড করা।
৩. PHP দিয়ে অটো-লেজি লোড অ্যাট্রিবিউট যোগ করা।

---

স্টেপ ১: HTML-এ data-src অ্যাট্রিবিউট যোগ করা

Lazy Load-এর জন্য প্রতিটি ইমেজ ট্যাগে src এর পরিবর্তে data-src ব্যবহার করা হয়।

উদাহরণ কোড:

<img class="lazyload" data-src="example-image.jpg" alt="Example Image" />

এই কোডে ইমেজ তখনই লোড হবে, যখন এটি ভিজিটরের ভিউপোর্টে আসবে।

---

স্টেপ ২: জাভাস্ক্রিপ্ট দিয়ে Lazy Load ইমেজ লোড করা

Lazy Load ইমপ্লিমেন্ট করার জন্য আমরা একটি ছোট জাভাস্ক্রিপ্ট লিখবো।

কোড যুক্ত করুন assets/js/lazyload.js ফাইলে:

document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll("img.lazyload");

    const lazyLoad = (target) => {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.classList.remove("lazyload");
                    observer.unobserve(img);
                }
            });
        });

        observer.observe(target);
    };

    lazyImages.forEach(lazyLoad);
});

---

স্টেপ ৩: PHP দিয়ে ইমেজ ট্যাগ মডিফাই করা

ওয়ার্ডপ্রেসের কন্টেন্টে থাকা ইমেজ ট্যাগগুলোতে data-src অ্যাট্রিবিউট যোগ করতে PHP ব্যবহার করা হবে।

কোড যোগ করুন includes/lazyload.php ফাইলে:

<?php

function add_lazyload_to_images($content) {
    // ইমেজ ট্যাগ খুঁজে বের করা
    $content = preg_replace(
        '/<img(.*?)src=["\']([^"\']+)["\'](.*?)>/i',
        '<img$1data-src="$2" src="" class="lazyload"$3>',
        $content
    );

    return $content;
}
add_filter('the_content', 'add_lazyload_to_images');

---

স্টেপ ৪: জাভাস্ক্রিপ্ট এবং CSS লোড করা

Lazy Load ফিচারের জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট এবং CSS লোড করতে হবে।

মেইন ফাইলে কোড যুক্ত করুন:

function load_lazyload_assets() {
    wp_enqueue_script(
        'lazyload-script',



        plugin_dir_url(__FILE__) . 'assets/js/lazyload.js',
        array(),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'load_lazyload_assets');

---

স্টেপ ৫: ফলের পরীক্ষণ

এখন আপনার Lazy Load ফিচারটি ওয়েবসাইটে পরীক্ষা করে দেখুন।
১. পেজ লোড করার পর Developer Tools > Network ট্যাবে গিয়ে দেখুন ইমেজগুলো ডাউনলোড হচ্ছে কি না।
২. যখন ইমেজ ভিজিটরের স্ক্রিনে আসে, তখন ইমেজ ডাউনলোড শুরু হবে।

---

Lazy Load ফিচার কাস্টমাইজ করা

Lazy Load ফিচার আরও উন্নত করতে চাইলে আপনি নিম্নলিখিত টুইকগুলো করতে পারেন:

• Placeholder ইমেজ: ইমেজ লোড হওয়ার আগে একটি লোডার বা প্লেসহোল্ডার দেখাতে পারেন।
• ফেড ইন ইফেক্ট: ইমেজ লোড হওয়ার সময় ফেড ইন অ্যানিমেশন যোগ করতে পারেন।
• Exclude Certain Images: নির্দিষ্ট কিছু ইমেজ Lazy Load থেকে বাদ দিতে পারেন।

---

Lazy Load ফিচারের সুবিধা

১. ব্যান্ডউইথ সাশ্রয়: Lazy Load শুধুমাত্র ভিজিটরের প্রয়োজনীয় কন্টেন্ট লোড করে।
২. উন্নত পারফরম্যান্স: পেজ লোডিং টাইম দ্রুত হয়।
৩. SEO-বান্ধব: গুগল পেজস্পিড এবং কোর ওয়েব ভাইটাল স্কোর উন্নত করে।

---

পর্ব ৮-এর সংক্ষিপ্তসার

১. Lazy Load ফিচার যুক্ত করার জন্য ইমেজ ট্যাগ মডিফাই করেছি।
২. জাভাস্ক্রিপ্ট ব্যবহার করে Lazy Load ইমপ্লিমেন্ট করেছি।
৩. Lazy Load-এর মাধ্যমে ওয়েবসাইটের পারফরম্যান্স উন্নত করেছি।

---

My Telegram