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

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

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

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

তো আর কথা না বাড়ায়া, চলেন কাজে নামি!

---

ইমেজ অপটিমাইজেশন কী এবং কেন?

আপনার ওয়েবসাইটের লোড টাইমের বড় একটা কারণ হইলো ইমেজ ফাইলের সাইজ। একটা ইমেজ যদি ৫০০ কিলোবাইটের হয়, সেইটা লোড করতে অনেক সময় লাগে। এখন যদি আপনি সেই ইমেজটারে ১০০ কিলোবাইটে নামায় আনতে পারেন, তাহলে ওয়েবপেজটা অনেক দ্রুত লোড হবে।

আমাদের কাজ হইলো প্লাগিন বানাইয়া এই ইমেজগুলারে কম্প্রেস করা। এর জন্য আমরা PHP এর কিছু লাইব্রেরি ব্যবহার করবো।

---

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

এই পর্বে আমরা যেই কাজগুলা শিখবো:

1. ইমেজ আপলোডের সময় অটোমেটিক অপটিমাইজ করা।
2. JPG, PNG ইত্যাদি ফরম্যাটের ইমেজ কম্প্রেস করা।
3. অপটিমাইজড ইমেজের জন্য নতুন ফোল্ডার তৈরি করা।

---

স্টেপ ১: ফোল্ডার স্ট্রাকচার আপডেট

আমরা ইমেজ অপটিমাইজেশনের জন্য কোড আলাদা ফাইলে রাখবো। includes ফোল্ডারের ভিতরে image-optimization.php নামে নতুন ফাইল তৈরি করেন।

আপনার নতুন ফোল্ডার স্ট্রাকচার এমন দেখাবে:

/speed-optimizer/
    |-- speed-optimizer.php
    |-- includes/
        |-- admin-menu.php
        |-- functions.php
        |-- image-optimization.php
    |-- assets/
        |-- css/
            |-- style.css
        |-- js/
            |-- script.js
    |-- optimized-images/

optimized-images/ ফোল্ডারটা এমন একটা জায়গা, যেইখানে অপটিমাইজড ইমেজগুলো সেভ হবে।

---

স্টেপ ২: PHP ইমেজ কমপ্রেশন লাইব্রেরি যোগ করা

আমরা PHP এর GD Library ব্যবহার করবো। এই লাইব্রেরি আপনাকে ইমেজ প্রসেস করতে সাহায্য করবে। ওয়ার্ডপ্রেস ডিফল্টভাবে এই লাইব্রেরি সাপোর্ট করে।

image-optimization.php ফাইলের কোড

includes/image-optimization.php ফাইলটা খুলে নিচের কোড যোগ করেন:

<?php

// Add action to optimize image on upload
add_filter('wp_handle_upload', 'speed_optimizer_optimize_image');







function speed_optimizer_optimize_image($upload) {
    $file_path = $upload['file'];
    $file_type = wp_check_filetype($file_path);

    if (in_array($file_type['ext'], ['jpg', 'jpeg', 'png'])) {
        $optimized_image = speed_optimizer_compress_image($file_path, $file_path, 75);
        if ($optimized_image) {
            $upload['file'] = $optimized_image;
        }
    }

    return $upload;
}

function speed_optimizer_compress_image($source, $destination, $quality) {
    $info = getimagesize($source);

    if ($info['mime'] == 'image/jpeg') {
        $image = imagecreatefromjpeg($source);
        imagejpeg($image, $destination, $quality);
    } elseif ($info['mime'] == 'image/png') {
        $image = imagecreatefrompng($source);
        imagepng($image, $destination, 9);
    }

    return $destination;
}

ব্যাখ্যা:

1. add_filter('wp_handle_upload'): ইমেজ আপলোডের সময় এই ফাংশন ট্রিগার হয়।
2. speed_optimizer_compress_image: এখানে GD Library ব্যবহার করে JPG/PNG ফাইল কমপ্রেস করা হয়।
3. 75: JPG এর কোয়ালিটি ৭৫% এ নামাইয়া আনি। PNG এর জন্য ৯ (ম্যাক্স কম্প্রেশন)।

---

স্টেপ ৩: মেইন ফাইলে ইমেজ অপটিমাইজেশন ইন্টিগ্রেট করা

speed-optimizer.php ফাইল আপডেট করেন, যাতে image-optimization.php ফাইল লোড হয়:

require_once plugin_dir_path(__FILE__) . 'includes/image-optimization.php';

---

স্টেপ ৪: অপটিমাইজড ইমেজের লগ তৈরি করা

ইউজাররা দেখতে চাইবেন কতোগুলো ইমেজ অপটিমাইজ হইছে। এজন্য আমরা একটা লগ তৈরি করবো।

functions.php ফাইল আপডেট করুন

includes/functions.php ফাইলে নিচের কোড যোগ করেন:

function speed_optimizer_log($message) {
    $log_file = plugin_dir_path(__FILE__) . '../logs/optimization-log.txt';
    $current_time = date('Y-m-d H:i:s');
    $log_message = "[{$current_time}] {$message}\n";

    file_put_contents($log_file, $log_message, FILE_APPEND);



}

লগ যোগ করা

image-optimization.php ফাইলের speed_optimizer_optimize_image ফাংশনের শেষে নিচের কোড যোগ করেন:

speed_optimizer_log("Optimized image: {$file_path}");

---

স্টেপ ৫: অ্যাডমিন মেনুতে অপটিমাইজড ইমেজের সংখ্যা দেখানো

admin-menu.php ফাইল আপডেট

includes/admin-menu.php ফাইলে নিচের কোড যোগ করেন:

function speed_optimizer_settings_page() {
    $log_file = plugin_dir_path(__FILE__) . '../logs/optimization-log.txt';
    $log_content = file_exists($log_file) ? file_get_contents($log_file) : 'No logs found.';

    ?>
    

        
Speed Optimizer Settings
        
Optimization Logs
        


    <?php

}


এখন অ্যাডমিন প্যানেলে লগগুলো দেখা যাবে।

স্টেপ ৬: কোড টেস্ট করা
১. প্লাগিন অ্যাকটিভ করুন।

২. নতুন ইমেজ আপলোড করেন।

৩. optimized-images/ ফোল্ডারে যান। দেখবেন, অপটিমাইজড ফাইল সেভ হইছে।

৪. লগ ফাইল চেক করেন।

পর্ব ৩-এর সংক্ষিপ্তসার
এই পর্বে আমরা শিখলাম:

ইমেজ অপটিমাইজেশন ফিচার যোগ করা।
JPG/PNG ফাইল কমপ্রেস করা।
অপটিমাইজড ইমেজের জন্য ফোল্ডার তৈরি।
লগ ফাইল তৈরি করে ড্যাশবোর্ডে দেখানো।

পরবর্তী পর্বে:

আমরা সিএসএস/জাভাস্ক্রিপ্ট মিনিফিকেশন ফিচার যোগ করবো। আপনার অভিজ্ঞতা শেয়ার করতে ভুলবেন না!
পর্ব ৪-এ দেখা হবে!
My Telegram