增强版后台字段框架（只有option），使用的是settings api

<?php
/**
 * Plugin Name: Modern Options Framework
 * Author: Wangtuike
 * Author URI: wanhtuike.com
 * Version: 2.0.1
 * Description: A modern and functional WordPress options framework 新版本添加了自由添加 字段组合
 */

if (!defined('ABSPATH')) {
    exit;
}

class Modern_Options_Framework {
    private $option_name = 'modern_options';
    private $page_slug = 'modern-options-framework';
    private $groups = [];

    public function __construct() {
        add_action('admin_menu', [$this, 'add_plugin_page']);
        add_action('admin_init', [$this, 'page_init']);
        add_action('admin_enqueue_scripts', [$this, 'enqueue_admin_scripts']);

    }

    public function add_plugin_page() {
        add_menu_page(
            'Modern Options Framework',
            'Modern Options',
            'manage_options',
            $this->page_slug,
            [$this, 'create_admin_page'],
            'dashicons-admin-generic',
            110
        );
    }

    public function create_admin_page() {
        $options = get_option($this->option_name);
        ?>
        <div class="wrap">
            <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
             <?php settings_errors(); ?>
            <form method="post" action="options.php">
                <?php
                settings_fields('modern_options_group');
                do_settings_sections($this->page_slug);

                //render group settings 另外的方法 
                // foreach ($this->groups as $group_id => $group_title) {
                //     echo "<h2>{$group_title}</h2>";
                //     do_settings_sections($this->page_slug,$group_id . '_section');
                // }
                


                submit_button();
                ?>
            </form>
            <h2>Current Options:</h2>
            <pre><?php print_r($options); ?></pre>
        </div>
        <?php
    }

    public function enqueue_admin_scripts($hook) {
        if ($hook != 'toplevel_page_' . $this->page_slug) {
            return;
        }
        wp_enqueue_media();
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script('wp-color-picker');
        wp_enqueue_style('modern-options-css', plugins_url('css/modern-options.css', __FILE__));
        wp_enqueue_script('modern-options-js', plugins_url('js/modern-options.js', __FILE__), array('jquery', 'wp-color-picker'), null, true);
    }

    //这里是你添加字段的地方
    public function page_init() {
        register_setting(
            'modern_options_group',
            $this->option_name,
            [$this, 'sanitize']
        );

        add_settings_section(
            'general_settings_section',
            'General Settings',
            [$this, 'print_section_info'],
            $this->page_slug
        );

        // 开始添加字段
        $this->add_field('Site Heading','Site Heading','text');
        $this->add_field('text', 'Text Input', 'text');
        $this->add_field('textarea', 'Textarea', 'textarea');
        $this->add_field('checkbox', 'Checkbox', 'checkbox');
        $this->add_field('radio', 'Radio Buttons', 'radio', [
            'option1' => 'Option 1',
            'option2' => 'Option 2',
            'option3' => 'Option 3'
        ]);
        $this->add_field('select', 'Select Dropdown', 'select', [
            'choice1' => 'Choice 1',
            'choice2' => 'Choice 2',
            'choice3' => 'Choice 3'
        ]);
        $this->add_field('multiselect', 'Multi-Select', 'multiselect', [
            'multi1' => 'Multi 1',
            'multi2' => 'Multi 2',
            'multi3' => 'Multi 3',
            'multi4' => 'Multi 4'
        ]);
        $this->add_field('color', 'Color Picker', 'color');
        $this->add_field('image', 'Image Upload', 'image');
        $this->add_field('password', 'Password Field', 'password');
        $this->add_field('number', 'Number Input', 'number');
        $this->add_field('url', 'URL Input', 'url');
        $this->add_field('email', 'Email Input', 'email');
        $this->add_field('date', 'Date Picker', 'date');
        $this->add_field('time', 'Time Picker', 'time');
        $this->add_field('editor', 'WYSIWYG Editor', 'editor');

        //slider group 
        $this->add_group('slider','slider Settings');
        $this->add_field('slider_image','Slider Image','image',[],'slider');
        $this->add_field('slider_text','Slider Text','text',[],'slider');
        $this->add_field('slider_url','Slider Url','url',[],'slider');

        $this->add_group('top_ads','top ads');

        $this->add_field('top_ads_image','Top ads Image','image',[],'top_ads');

    }

    public function add_field($id, $title, $type, $options = [],$group = 'general_settings') {
        add_settings_field(
            $id,
            $title,
            [$this, 'create_field'],
            $this->page_slug,
            $group . '_section',
            [
                'id' => $id,
                'type' => $type,
                'options' => $options
            ]
        );
    }

    public function add_group($id,$title)
    {
        $this->groups[$id] = $title;
        add_settings_section( 
            $id . '_section', 
            $title, 
            [$this,'print_section_info'], 
            $this->page_slug );

        
    }

    public function create_field($args) {
        $id = $args['id'];
        $type = $args['type'];
        $options = get_option($this->option_name);
        $value = isset($options[$id]) ? $options[$id] : '';

        switch ($type) {
            case 'text':
            case 'password':
            case 'number':
            case 'url':
            case 'email':
                echo "<input type='$type' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' class='regular-text' />";
                break;
            case 'textarea':
                echo "<textarea id='$id' name='{$this->option_name}[$id]' rows='5' cols='50'>" . esc_textarea($value) . "</textarea>";
                break;
            case 'checkbox':
                $checked = checked($value, 1, false);
                echo "<input type='checkbox' id='$id' name='{$this->option_name}[$id]' value='1' $checked />";
                break;
            case 'radio':
                foreach ($args['options'] as $key => $label) {
                    $checked = checked($value, $key, false);
                    echo "<label><input type='radio' name='{$this->option_name}[$id]' value='" . esc_attr($key) . "' $checked /> $label</label><br />";
                }
                break;
            case 'select':
                echo "<select id='$id' name='{$this->option_name}[$id]'>";
                foreach ($args['options'] as $key => $label) {
                    $selected = selected($value, $key, false);
                    echo "<option value='" . esc_attr($key) . "' $selected>" . esc_html($label) . "</option>";
                }
                echo "</select>";
                break;
            case 'multiselect':
                echo "<select id='$id' name='{$this->option_name}[$id][]' multiple='multiple' style='height: 100px;'>";
                foreach ($args['options'] as $key => $label) {
                    $selected = in_array($key, (array)$value) ? 'selected="selected"' : '';
                    echo "<option value='" . esc_attr($key) . "' $selected>" . esc_html($label) . "</option>";
                }
                echo "</select>";
                break;
            case 'color':
                echo "<input type='text' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' class='color-picker' />";
                break;
            case 'image':
                echo "<input type='text' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' class='regular-text image-url' />";
                echo "<input type='button' class='button upload-image-button' value='Upload Image' data-field='$id' />";
                if (!empty($value)) {
                    echo "<br><img src='" . esc_url($value) . "' class='image-preview' style='max-width:300px;' />";
                }
                break;
            case 'date':
                echo "<input type='date' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' />";
                break;
            case 'time':
                echo "<input type='time' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' />";
                break;
            case 'editor':
                wp_editor($value, $id, array(
                    'textarea_name' => "{$this->option_name}[$id]",
                    'textarea_rows' => 10
                ));
                break;
        }
    }

    public function sanitize($input) {
        $new_input = [];
        foreach ($input as $key => $value) {
            switch ($key) {
                
                case 'checkbox':
                    $new_input[$key] = isset($value) ? 1 : 0;
                    break;
                case 'textarea':
                $new_input[$key] = sanitize_textarea_field( $value );
                break;
                case 'editor':
                    $new_input[$key] = wp_kses_post($value);
                    break;
                case 'multiselect':
                    $new_input[$key] = array_map('sanitize_key', (array)$value);
                    break;
                case 'email':
                    $new_input[$key] = sanitize_email($value);
                    break;
                case 'url':
                    $new_input[$key] = esc_url_raw($value);
                    break;
                case 'number':
                    $new_input[$key] = intval($value);
                    break;
                case 'color':
                    $new_input[$key] = sanitize_hex_color($value);
                    break;
                default:
                    $new_input[$key] = sanitize_text_field($value);
            }
        }

         add_settings_error(
            'modern_options_messages',
            'modern_options_message',
            __('Settings Saved', 'modern-options-framework'),
            'updated'
        );
        return $new_input;
    }

    public function print_section_info() {
        echo 'Enter your settings below:';
    }
}

if (is_admin()) {
    $modern_options_framework = new Modern_Options_Framework();
}

js版本

jQuery(document).ready(function($) {
    // Initialize color pickers
    $('.color-picker').wpColorPicker();

    // Image upload
    $('.upload-image-button').click(function(e) {
        e.preventDefault();
        var button = $(this);
        var fieldID = button.data('field');
        var customUploader = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        }).on('select', function() {
            var attachment = customUploader.state().get('selection').first().toJSON();
            $('#' + fieldID).val(attachment.url);
            button.siblings('.image-preview').remove();
            button.after('<br><img src="' + attachment.url + '" class="image-preview" style="max-width:300px;" />');
        }).open();
    });
});

css版本

.wrap {
    max-width: 800px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

form {
    margin-top: 20px;
}

.form-table th {
    width: 200px;
    padding: 20px 10px;
}

.form-table td {
    padding: 15px 10px;
}

input[type="text"], input[type="password"], input[type="number"], input[type="url"], input[type="email"],
textarea, select {
    width: 100%;
    max-width: 400px;
}

.image-preview {
    margin-top: 10px;
    border: 1px solid #ddd;
    padding: 5px;
    max-width: 150px !important;
    height: auto;
}

.wp-editor-wrap {
    max-width: 800px;
}

×

增强版后台字段框架（只有option），使用的是settings api

<?php /** * Plugi...