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

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

ওয়ার্ডপ্রেস প্লাগিন ডেভেলপমেন্ট: অ্যাডমিন মেনু ও বেসিক সেটিংস তৈরি (পর্ব ২)

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

স্টেপ ১: ফোল্ডার আর ফাইল রি-অর্গানাইজ করা

বড় প্লাগিন বানাইতে গেলে ফাইলগুলারে গুছাইয়া না রাখলে কোডের জগাখিচুড়ি হয়ে যাবে। এখন আমরা ফাইলগুলারে একটু ঠিকঠাক সাজাই:

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

আপনার speed-optimizer ফোল্ডারটা এমন দেখাবে:

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

এখন নতুন admin-menu.php ফাইল যোগ করবেন, যেইখানে আমরা অ্যাডমিন মেনুর কাজ করবো।

স্টেপ ২: অ্যাডমিন মেনু যোগ করা

অ্যাডমিন মেনু হইলো ওয়ার্ডপ্রেস ড্যাশবোর্ডের বাম পাশের সেই মেনু। আমাদের টার্গেট, ওইখানে "Speed Optimizer" নামে একটা মেনু যোগ করা।

মেইন ফাইল আপডেট (speed-optimizer.php)

speed-optimizer.php ফাইল আপডেট করেন, যাতে নতুন admin-menu.php ফাইল লোড হয়। নিচের মতো কোড যোগ করেন:

<?php
// Include admin menu file
require_once plugin_dir_path(__FILE__) . 'includes/admin-menu.php';

admin-menu.php ফাইল তৈরি

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

<?php

// Add Admin Menu
add_action('admin_menu', 'speed_optimizer_add_admin_menu');

function speed_optimizer_add_admin_menu() {
    add_menu_page(
        'Speed Optimizer', // Page Title
        'Speed Optimizer', // Menu Title
        'manage_options',  // Capability
        'speed-optimizer', // Menu Slug
        'speed_optimizer_settings_page', // Callback Function
        'dashicons-performance', // Icon
        110 // Position
    );
}

// Admin Page Callback
function speed_optimizer_settings_page() {
    ?>
    <div class="wrap">
        <h1>Speed Optimizer Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('speed_optimizer_options_group');
            do_settings_sections('speed-optimizer');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

ব্যাখ্যা:

add_menu_page ফাংশন: অ্যাডমিন মেনু তৈরি করে।
- Speed Optimizer: পেজ আর মেনুর টাইটেল।
- manage_options: মেনুতে এক্সেস করার জন্য প্রয়োজনীয় পারমিশন।
- speed_optimizer_settings_page: ক্লিক করলে যেই পেজ দেখাবে।
dashicons-performance: মেনুর পাশে একটা পারফরমেন্স আইকন দেখাবে।

স্টেপ ৩: সেটিংস যোগ করা

এখন আমরা প্লাগিনে কাস্টম সেটিংস যোগ করবো, যেনো ব্যবহারকারী তার প্রয়োজন অনুযায়ী সেটিংস কাস্টমাইজ করতে পারে।

functions.php ফাইল তৈরি

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

<?php

// Register Settings
add_action('admin_init', 'speed_optimizer_register_settings');

function speed_optimizer_register_settings() {
    register_setting('speed_optimizer_options_group', 'speed_optimizer_option');
    add_settings_section(
        'speed_optimizer_main_section',
        'Main Settings',
        null,
        'speed-optimizer'
    );
    add_settings_field(
        'speed_optimizer_field',
        'Optimize Images',
        'speed_optimizer_field_callback',
        'speed-optimizer',
        'speed_optimizer_main_section'
    );
}

// Field Callback
function speed_optimizer_field_callback() {
    $value = get_option('speed_optimizer_option', '');
    echo '<input type="checkbox" name="speed_optimizer_option" value="1"' . checked(1, $value, false) . '> Enable Image Optimization';
}

স্টেপ ৪: সিএসএস আর জাভাস্ক্রিপ্ট যোগ করা

স্টাইলশিট তৈরি (style.css)

assets/css/style.css ফাইলে নিচের কোড যোগ করেন:

.wrap h1 {
    color: #0073aa;
    font-size: 24px;
    margin-bottom: 20px;
}

জাভাস্ক্রিপ্ট ফাইল তৈরি (script.js)

assets/js/script.js ফাইলে নিচের কোড যোগ করেন:

document.addEventListener('DOMContentLoaded', function() {
    console.log('Speed Optimizer Script Loaded');
});

স্টাইলশিট ও জাভাস্ক্রিপ্ট লোড করা

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

add_action('admin_enqueue_scripts', 'speed_optimizer_load_assets');
function speed_optimizer_load_assets($hook) {
    if ($hook != 'toplevel_page_speed-optimizer') {
        return;
    }
    wp_enqueue_style('speed-optimizer-style', plugin_dir_url(__FILE__) . 'assets/css/style.css');
    wp_enqueue_script('speed-optimizer-script', plugin_dir_url(__FILE__) . 'assets/js/script.js', array(), false, true);
}

স্টেপ ৫: কাজ টেস্ট করা

১. আপনার প্লাগিনটা /wp-content/plugins/ ফোল্ডারে আপডেট করেন।
২. ওয়ার্ডপ্রেস ড্যাশবোর্ডে যান, "Plugins" থেকে "Speed Optimizer" অ্যাকটিভ করেন।
৩. ড্যাশবোর্ডে "Speed Optimizer" নামে নতুন মেনু দেখবেন। ক্লিক করেন আর আপনার সেটিংস পেজ চেক করেন।