Wordpress

বাংলায় WordPress Plugin Development – পর্ব ০৪

Tanver Hossain

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

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

ওয়ার্ডপ্রেস প্লাগিন ডেভেলপমেন্ট: CSS ও JavaScript মিনিফিকেশন যোগ করা (পর্ব ৪)

আগের পর্বগুলাতে আমরা বেসিক প্লাগিন ফাইল তৈরি, অ্যাডমিন মেনু যোগ করা আর ইমেজ অপটিমাইজেশনের মতো গুরুত্বপূর্ণ ফিচার তৈরি করছিলাম। আজকের পর্বে আমরা আরও একধাপ এগিয়ে, CSS এবং JavaScript মিনিফিকেশন ফিচার যোগ করবো।

মিনিফিকেশন অর্থ হলো আপনার CSS এবং JavaScript ফাইলগুলার অপ্রয়োজনীয় স্পেস, কমেন্টস, এবং লাইন ব্রেক মুছে ফেলা, যাতে ফাইলগুলো হালকা হয় আর ওয়েবসাইট দ্রুত লোড হয়। এটা ওয়েব অপ্টিমাইজেশনের জন্য অত্যন্ত দরকারি।

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

এই পর্বে আমরা যা শিখবো:

CSS এবং JavaScript মিনিফাই করা কীভাবে কাজ করে।
প্লাগিনের মাধ্যমে CSS এবং JS ফাইলগুলো মিনিফাই করা।
মিনিফাইড ফাইল স্টোর করার জন্য আলাদা ডিরেক্টরি তৈরি।
মিনিফাই করা ফাইল ড্যাশবোর্ডে দেখানোর সিস্টেম।

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

CSS এবং JS ফাইলগুলার মিনিফাইড ভার্সন সেভ করার জন্য আলাদা ফোল্ডার তৈরি করবো। আমাদের প্লাগিনের নতুন স্ট্রাকচার এমন দেখাবে:

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

minified-files/css/ এবং minified-files/js/ ডিরেক্টরি আমরা মিনিফাইড CSS ও JS ফাইল রাখার জন্য ব্যবহার করবো।

স্টেপ ২: মিনিফিকেশন ফাইল তৈরি করা

includes/file-minification.php নামে নতুন ফাইল তৈরি করুন এবং নিচের কোড যোগ করুন:

<?php

// Add action to minify CSS and JS files
add_action('init', 'speed_optimizer_minify_files');

function speed_optimizer_minify_files() {
    $css_files = glob(plugin_dir_path(__FILE__) . '../assets/css/*.css');
    $js_files = glob(plugin_dir_path(__FILE__) . '../assets/js/*.js');

    // Minify CSS files






    foreach ($css_files as $file) {
        $file_content = file_get_contents($file);
        $minified_content = speed_optimizer_minify_css($file_content);

        $destination = plugin_dir_path(__FILE__) . '../minified-files/css/' . basename($file);
        file_put_contents($destination, $minified_content);
    }

    // Minify JS files
    foreach ($js_files as $file) {
        $file_content = file_get_contents($file);
        $minified_content = speed_optimizer_minify_js($file_content);

        $destination = plugin_dir_path(__FILE__) . '../minified-files/js/' . basename($file);
        file_put_contents($destination, $minified_content);
    }
}

function speed_optimizer_minify_css($css) {
    $css = preg_replace('/\/\*.*?\*\//s', '', $css); // Remove comments
    $css = preg_replace('/\s+/', ' ', $css);         // Remove extra spaces
    $css = str_replace([' {', '{ '], '{', $css);     // Adjust spaces around {
    $css = str_replace(['; ', ' ;'], ';', $css);     // Adjust spaces around ;
    $css = str_replace([': ', ' :'], ':', $css);     // Adjust spaces around :
    return trim($css);
}

function speed_optimizer_minify_js($js) {
    $js = preg_replace('/\/\*.*?\*\//s', '', $js);   // Remove comments
    $js = preg_replace('/\s+/', ' ', $js);           // Remove extra spaces
    return trim($js);
}

কোড ব্যাখ্যা:

glob(): CSS এবং JS ফাইলগুলো খুঁজে বের করে।
speed_optimizer_minify_css(): CSS ফাইলের অপ্রয়োজনীয় স্পেস এবং কমেন্ট মুছে ফেলে।
speed_optimizer_minify_js(): একই কাজ JS ফাইলের জন্য।
মিনিফাইড ফাইলগুলো: minified-files/css/ এবং minified-files/js/ ফোল্ডারে সেভ হয়।

স্টেপ ৩: মেইন ফাইলে মিনিফিকেশন যুক্ত করা

speed-optimizer.php ফাইলে নিচের লাইন যোগ করুন:

require_once plugin_dir_path(__FILE__) . 'includes/file-minification.php';

স্টেপ ৪: অ্যাডমিন ড্যাশবোর্ডে মিনিফাইড ফাইল দেখানো

আমরা ড্যাশবোর্ডে মিনিফাইড ফাইলগুলার লিস্ট দেখাবো।

includes/admin-menu.php ফাইল আপডেট করুন:

function speed_optimizer_settings_page() {
    ?>
    <div class="wrap">
        <h1>Speed Optimizer Settings</h1>




        <h2>Minified CSS Files</h2>
        <ul>
            <?php
            $css_files = glob(plugin_dir_path(__FILE__) . '../minified-files/css/*.css');
            foreach ($css_files as $file) {
                echo '<li>' . basename($file) . '</li>';
            }
            ?>
        </ul>

        <h2>Minified JS Files</h2>
        <ul>
            <?php
            $js_files = glob(plugin_dir_path(__FILE__) . '../minified-files/js/*.js');
            foreach ($js_files as $file) {
                echo '<li>' . basename($file) . '</li>';
            }
            ?>
        </ul>
    </div>
    <?php
}

স্টেপ ৫: CSS/JS মিনিফিকেশন টেস্ট করা

প্লাগিন অ্যাকটিভ করেন।
assets/css/ এবং assets/js/ ফোল্ডারে কিছু ফাইল যোগ করেন।
ওয়েবসাইট রিফ্রেশ করেন।
দেখুন, মিনিফাইড ফাইলগুলো minified-files/ ফোল্ডারে সেভ হয়েছে।
অ্যাডমিন ড্যাশবোর্ডে লিস্ট দেখুন।

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

এই পর্বে আমরা শিখলাম:

CSS এবং JS ফাইল মিনিফাই করার পদ্ধতি।
মিনিফাইড ফাইল আলাদা ফোল্ডারে স্টোর করা।
ড্যাশবোর্ডে মিনিফাইড ফাইলগুলোর লিস্ট দেখানো।

পরবর্তী পর্বে:
আমরা ডেটাবেজ অপ্টিমাইজেশন নিয়ে কাজ করবো। ডেটাবেজ ক্লিনআপ এবং সাইজ রিডাকশন কীভাবে করা যায়, তা শিখবো।

পর্ব ৫-এ দেখা হবে!

My Telegram