技术问询：如何在WordPress插件页面添加Widget而非后台仪表盘

Got it! Adding WordPress widgets to your custom plugin page is totally feasible—here’s a step-by-step guide with code examples to make it happen smoothly:

First, you need a dedicated sidebar to act as the container for your widgets. WordPress uses sidebars to manage widget placement, so we’ll create one tied specifically to your plugin.

Add this code to your plugin’s main file (or a dedicated admin include file):

add_action('widgets_init', 'my_plugin_register_widget_area');
function my_plugin_register_widget_area() {
    register_sidebar([
        'id'            => 'my_plugin_custom_widgets',
        'name'          => __('My Plugin Widget Area', 'my-plugin-textdomain'),
        'description'   => __('Widgets added here will appear on your plugin\'s admin page.', 'my-plugin-textdomain'),
        'before_widget' => '<div id="%1$s" class="widget %2$s postbox">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="hndle"><span>',
        'after_title'   => '</span></h2>'
    ]);
}

• The id must be unique—pick something specific to your plugin to avoid conflicts.
• The before_widget/before_title values use WordPress admin postbox classes so widgets match the native dashboard styling out of the box.

WordPress widgets rely on specific scripts and styles for features like drag-and-drop sorting. We’ll load these only on your plugin’s admin page to avoid unnecessary bloat elsewhere.

First, grab the "hook name" of your plugin page—this is the return value when you register your admin page with add_menu_page() or add_submenu_page(). For example:

$my_plugin_page_hook = add_menu_page(
    'My Plugin',
    'My Plugin',
    'manage_options',
    'my-plugin-slug',
    'my_plugin_admin_page_callback'
);

Then use that hook to enqueue the necessary assets:

add_action('admin_enqueue_scripts', 'my_plugin_enqueue_widget_assets');
function my_plugin_enqueue_widget_assets($current_hook) {
    global $my_plugin_page_hook;
    
    // Only load assets on our plugin page
    if ($current_hook !== $my_plugin_page_hook) {
        return;
    }

    // Load core WordPress widget scripts and styles
    wp_enqueue_script('widgets');
    wp_enqueue_style('wp-admin');
    wp_enqueue_script('jquery-ui-sortable');
}

Now, add the widget area to your plugin’s admin page template. We’ll structure it to match the native dashboard’s two-column layout for a familiar user experience:

function my_plugin_admin_page_callback() {
    ?>
    <div class="wrap">
        <h1><?php esc_html_e('My Plugin Dashboard', 'my-plugin-textdomain'); ?></h1>
        
        <div id="poststuff">
            <div id="post-body" class="metabox-holder columns-2">
                <!-- Main plugin content area -->
                <div id="post-body-content">
                    <p>This is your plugin's primary content space.</p>
                </div>

                <!-- Widget sidebar -->
                <div id="postbox-container-1" class="postbox-container">
                    <?php 
                    // Render our custom widget area
                    if (!dynamic_sidebar('my_plugin_custom_widgets')) {
                        echo '<p>' . esc_html__('Add widgets from the Appearance > Widgets screen.', 'my-plugin-textdomain') . '</p>';
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
    <?php
}

• Head to Appearance > Widgets in your WordPress admin—you’ll see your new "My Plugin Widget Area" listed.
• Add any widgets you want (Text, Recent Posts, etc.) to this area.
• Navigate back to your plugin’s page—your widgets will be rendered in the sidebar!

Quick Tips: #

• If drag-and-drop doesn’t work, double-check that you’re loading jquery-ui-sortable and the widgets script correctly.
• Adjust the before_widget/after_widget markup if you want custom styling for your widgets.
• Always use your plugin’s text domain for translatable strings to support internationalization.

内容的提问来源于stack exchange，提问作者csandreas1