创建自己的后台字段面板

<?php 
// Function to create the main options page
function create_options_panel() {
    add_menu_page(
        'Site Options', // Page title
        'Site Options', // Menu title
        'manage_options', // Capability
        'site_options_panel', // Menu slug
        'render_site_options_panel', // Callback function to render the main options panel
        'dashicons-admin-generic', // Icon (Optional)
        30 // Position in the menu
    );
}
add_action('admin_menu', 'create_options_panel');


// Function to render the main options panel
function render_site_options_panel() {
    ?>
   <div class="wrap">
    <h1>Site Options</h1>
    <p>Here you can manage various options for your website.</p>
    <ul class="site-options-tabs">
        <li><a href="#general">General</a></li>
        <li><a href="#slides">Slides</a></li>
        <li><a href="#dummy">Dummy content</a></li>
        <!-- Add more tabs for other sections -->
    </ul>

    <div class="tab-content" id="general">
        <!-- General options content here -->
        <?php render_general_options(); ?>
    </div>

    <div class="tab-content" id="slides">
        <!-- Slide options content here -->
        <?php render_slide_options(); ?>
        <!-- Form for slide options goes here -->
    </div>

     <div class="tab-content" id="dummy">
        <!-- Slide options content here -->
        <h2>this is dummy content</h2>
        <!-- Form for slide options goes here -->
    </div>
    <!-- Add more tab-content sections for other sections -->
</div>

    <?php
}

// Function to render the General options section
function render_general_options() {
    ?>
    <h2>General Options</h2>
    <!-- HTML and form elements for General options -->
    <p>Add your general site options here.</p>
    <?php
}

// Function to render the Slide options section
function render_slide_options() {
    ?>
    
    <form method="post" action="options.php">
        <?php
        settings_fields('slide_options');
        do_settings_sections('site_options_panel');
        submit_button('Save Changes');
        settings_errors();
        ?>
    </form>
    <?php
}

// Function to register settings and fields for Slide options
function register_slide_settings() {
    register_setting('slide_options', 'slide_options');

    add_settings_section('slide_options_section', 'Slide Options', 'slide_options_section_callback', 'site_options_panel');
    //add_settings_section( $id, $title, $callback, $page );

    add_settings_field('slide_one_image', 'Slide 1 Image', 'slide_one_image_callback', 'site_options_panel', 'slide_options_section');

    add_settings_field('slide_two_image', 'Slide 2 Image', 'slide_two_image_callback', 'site_options_panel', 'slide_options_section');
}
add_action('admin_init', 'register_slide_settings');

// Callback functions for slide options fields
function slide_options_section_callback() {
    echo '<p>Upload images for each slide:</p>';
}

function slide_one_image_callback() {
    $options = get_option('slide_options');
    ?>
    <input type="text" name="slide_options[slide_one_image]" value="<?php echo esc_attr($options['slide_one_image'] ?? ''); ?>" />
    <input type="button" value="Upload Image" class="button-secondary upload-image" data-field="slide_one_image" />
    <br>
    <img src="<?php echo esc_url($options['slide_one_image'] ?? ''); ?>" width="150" height="auto" alt="Slide 1 Preview" />
    <?php
}

function slide_two_image_callback() {
    $options = get_option('slide_options');
    ?>
    <input type="text" name="slide_options[slide_two_image]" value="<?php echo esc_attr($options['slide_two_image'] ?? ''); ?>" />
    <input type="button" value="Upload Image" class="button-secondary upload-image" data-field="slide_two_image" />
    <br>
    <img src="<?php echo esc_url($options['slide_two_image'] ?? ''); ?>" width="150" height="auto" alt="Slide 2 Preview" />
    <?php
}


// Add callback functions for slide options (similar to previous example)

// Add JavaScript and media uploader handling (similar to previous example)

// Add more sections, settings, and fields as needed using similar patterns


add_action( 'admin_enqueue_scripts', 'wpt_framework_scripts' );


function wpt_framework_scripts($hook) {

	wp_enqueue_style( 'admin-frame-style', get_template_directory_uri() . '/inc/framework/css/frame.css' );

	wp_enqueue_media(  );
	wp_enqueue_script('admin-frame-script', get_template_directory_uri() . '/inc/framework/js/frame.js',array('jquery'),'1.0.0',true);


}

CSS

/* CSS for tabs */
.site-options-tabs {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.site-options-tabs li {
    display: inline-block;
    margin-right: 10px;
}

.site-options-tabs a {
    text-decoration: none;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: #333;
}

.site-options-tabs a:hover {
    background-color: #e0e0e0;
}


.tab-content {
    display: none; /* Hide all tab contents by default */
}

JS

jQuery(document).ready(function($) {
    // Hide all tab contents except for the default tab content (General)
    $('.tab-content').hide();
    $('#general').show(); // Show the default tab content

    // Tab switching functionality
    $('.site-options-tabs a').on('click', function(e) {
        e.preventDefault();
        var tab = $(this).attr('href');
        $('.site-options-tabs a').removeClass('active');
        $(this).addClass('active');
        $('.tab-content').hide();
        $(tab).show();
    });


     $('.upload-image').click(function(e) {
        e.preventDefault();
        var button = $(this);
        var field = button.data('field');
        var image = wp.media({
            title: 'Upload Image',
            multiple: false
        }).open().on('select', function(e) {
            var uploaded_image = image.state().get('selection').first();
            var image_url = uploaded_image.toJSON().url;
            $('input[name="slide_options[' + field + ']"]').val(image_url);
        });
    });
});