เขียน CSS แยกจอ Desktop, Tablet, Mobile ง่ายๆ ด้วยปลั๊กอิน WordPress (แจกฟรี!)

				
					<?php
/**
 * Plugin Name:       My Responsive CSS
 * Description:       Adds a settings page to input custom CSS for Desktop, Tablet, and Mobile.
 * Version:           1.0
 * Author:            Jodbush
 */

// ป้องกันการเข้าถึงไฟล์โดยตรง
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// 1. สร้างเมนูในหน้า Admin
function mrc_add_admin_menu() {
    add_menu_page(
        'Responsive CSS',          // Page Title
        'Responsive CSS',          // Menu Title
        'manage_options',          // Capability
        'my_responsive_css',       // Menu Slug
        'mrc_settings_page_html',  // Callback function to display content
        'dashicons-admin-customizer', // Icon
        80                         // Position
    );
}
add_action('admin_menu', 'mrc_add_admin_menu');


// 2. สร้างหน้าตั้งค่า (HTML Form)
function mrc_settings_page_html() {
    // ตรวจสอบสิทธิ์ผู้ใช้
    if (!current_user_can('manage_options')) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <p>ใส่โค้ด Custom CSS ของคุณโดยแยกตามขนาดหน้าจอ</p>
        <form action="options.php" method="post">
            <?php
            settings_fields('mrc_settings_group');
            do_settings_sections('my_responsive_css');
            submit_button('Save Settings');
            ?>
        </form>
    </div>
    <?php
}


// 3. ลงทะเบียน Settings, Sections, และ Fields
function mrc_register_settings() {
    register_setting('mrc_settings_group', 'mrc_css_options');

    add_settings_section(
        'mrc_css_section',
        'Custom CSS Rules',
        null,
        'my_responsive_css'
    );

    add_settings_field('mrc_global_css', 'Global CSS (ทุกขนาดหน้าจอ)', 'mrc_field_callback', 'my_responsive_css', 'mrc_css_section', ['name' => 'global_css']);
    add_settings_field('mrc_desktop_css', 'Desktop CSS (1025px ขึ้นไป)', 'mrc_field_callback', 'my_responsive_css', 'mrc_css_section', ['name' => 'desktop_css']);
    add_settings_field('mrc_tablet_css', 'Tablet CSS (768px - 1024px)', 'mrc_field_callback', 'my_responsive_css', 'mrc_css_section', ['name' => 'tablet_css']);
    add_settings_field('mrc_mobile_css', 'Mobile CSS (ไม่เกิน 767px)', 'mrc_field_callback', 'my_responsive_css', 'mrc_css_section', ['name' => 'mobile_css']);
}
add_action('admin_init', 'mrc_register_settings');


// 4. สร้าง Callback function เพื่อแสดงช่อง Textarea
function mrc_field_callback($args) {
    $options = get_option('mrc_css_options');
    $name = $args['name'];
    $value = isset($options[$name]) ? $options[$name] : '';
    ?>
    <textarea name="mrc_css_options[<?php echo esc_attr($name); ?>]" rows="10" cols="80" class="large-text"><?php echo esc_textarea($value); ?></textarea>
    <?php
}


// 5. นำโค้ด CSS ที่บันทึกไว้ไปแสดงผลที่หน้าเว็บไซต์ (Front-end)
function mrc_output_css() {
    $options = get_option('mrc_css_options');
    if (empty($options)) {
        return;
    }

    echo '';
}
add_action('wp_head', 'mrc_output_css');

?>