是的，您可以创建一个小部件并从后端设置内容。你也可以通过插件来实现。但既然你要一个小部件，我确实为你写了一个完整的小部件。

由于我为每一行都添加了详细信息，因此代码很容易解释。我没有将您的代码复制到其中，因为我不确定您想要什么，但在查看代码后，您应该能够轻松地完成。

// Initiate our widget, when WordPress is firing the widgets
add_action( \'widgets_init\', \'my_custom_widget\' );
function my_custom_widget() {
    // Some custom name for the widget
    register_widget( \'create_my_widget\' );  
}

// Extend the WP_Widget class
class create_my_widget extends WP_Widget {

    // Let\'s set a name and ID for our widget
    function __construct() {
        parent::__construct(
            \'create_my_widget\', // Widget\'s ID
            __(\'My Custom Widget\', \'photogram\'), // Widget\'s Title in the back-end
            array( \'description\' => __( \'Widget Description in the admin panel\', \'photogram\' ), ) 
        );
    }

    // This is the front-end of our widget
    public function widget( $args, $instance ) {
        // Filter for our widget\'s title, in case we need to change it later
        $title = apply_filters( \'widget_title\', $instance[\'title\'] );
        // This is an example value to use in our widget
        $value = apply_filters( \'widget_title\', $instance[\'value\'] );
        // If widget has no data, then do nothing
        if(!isset($value)) return; 
        // We output the widget\'s title and "before" argument
        echo $args[\'before_widget\'];
        if ( ! empty( $title ) )
        echo $args[\'before_title\'] . $title . $args[\'after_title\'];
        // Now, here is the place to code and output the actual HTML

        echo \'Your HTML content goes here\';

        // Now, we close the widget
        echo $args[\'after_widget\'];
    }

    // This is to add the data in the back-end
    public function form( $instance ) {
        // Set the title of our widget, if it\'s not set. Remember, this is for front-end
        if ( isset( $instance[ \'title\' ] ) ) {
            $title = $instance[ \'title\' ];
        } else {
            $title = __( \'My Widget Title\', \'photogram\' );
        }

        //Remember the value? We give it a default value if it\'s not set. This happens when you save a widget
        if ( isset( $instance[ \'value\' ] ) ) {
            $value = $instance[ \'value\' ];
        } else {
            $value =\'Some default value\';
        } ?>
        <!-- Now, the place to add content to our widget in the back-end. The first field is for title, the second one is... whatever we want. -->
        <p>
            <label for="<?php echo $this->get_field_id( \'title\' ); ?>"><?php _e( \'Title:\' ); ?></label> 
            <input id="<?php echo $this->get_field_id( \'title\' ); ?>" name="<?php echo $this->get_field_name( \'title\' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( \'value\' ); ?>"><?php _e( \'Value:\' ); ?></label> 
            <input id="<?php echo $this->get_field_id( \'value\' ); ?>" name="<?php echo $this->get_field_name( \'value\' ); ?>" type="text" value="<?php echo esc_attr( $value ); ?>" />
        </p>
        <?php 
    }
    // Updating widget replacing old instances with new
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance[\'title\'] = ( ! empty( $new_instance[\'title\'] ) ) ? strip_tags( $new_instance[\'title\'] ) : \'\';
        $instance[\'value\'] = ( ! empty( $new_instance[\'value\'] ) ) ? strip_tags( $new_instance[\'value\'] ) : \'\';
        return $instance;
    }
}

现在，你的脚本我们通过使用小部件输出一些HTML并向其中添加一些数据。现在，要将脚本和样式添加到网站，您应该使用wp_enqueue_scripts. 将脚本存储在一些js文件中，将样式存储在一些CSS文件中。然后，让他们排队：

add_action(\'wp_enqueue_scripts\',\'my_widget_scripts\');
function my_widget_scripts(){
    // Enqueue your styles
    wp_enqueue_style(\'my-styles\',get_template_directory_uri().\'/my-style.css\');
    // And your script
    wp_enqueue_script(\'my-scripts\',get_template_directory_uri().\'my-script.js\');
}

插件方法是插件实现这一点的时间。为此，我们需要两件不同的事情：

存储数据的选项页将数据返回到模板的函数我们可以使用add_options_page():

if ( ! class_exists( \'my_Custom_plugin\' ) ) {
    class my_Custom_plugin {
        public function __construct() {
            // We only need to register the admin panel on the back-end
            if ( is_admin() ) {
                add_action( \'admin_menu\', array( \'my_Custom_plugin\', \'my_plugin_add_admin_menu\' ) );
                add_action( \'admin_init\', array( \'my_Custom_plugin\', \'custom_plugin_register_settings\' ) );
            }
        }
        // Returns all plugin options 
        public static function get_my_custom_plugin() {
            return get_option( \'my_custom_plugin\' );
        }
        // Returns single plugin option
        public static function my_plugin_get_theme_option_value( $id ) {
            $options = self::get_my_custom_plugin();
            if ( isset( $options[$id] ) ) {
                return $options[$id];
            }
        }
        // Add sub menu page
        public static function my_plugin_add_admin_menu() {
            add_options_page(
                esc_html__( \'Plugin Options\', \'text-domain\' ),
                esc_html__( \'Plugin Options\', \'text-domain\' ),
                \'manage_options\',
                \'plugin-options-slug\',
                array( \'my_Custom_plugin\', \'plugin_create_admin_page\' )
            );
        }
        // Register a setting and its sanitization callback.
        public static function custom_plugin_register_settings() {
            register_setting( \'my_custom_plugin\', \'my_custom_plugin\', array( \'my_Custom_plugin\', \'custom_plugin_sanitize\' ) );
        }
        // Sanitization callback
        public static function custom_plugin_sanitize( $options ) {
            // If we have options lets sanitize them
            if ( $options ) {
                // Checkbox sanitize
                if ( ! empty( $options[\'checkbox_input\'] ) ) {
                    $options[\'checkbox_input\'] = \'on\';
                } else {
                    $options[\'checkbox_input\'] = \'off\'; 
                }
                // Input sanitize
                if ( ! empty( $options[\'text_input\'] ) ) {
                    $options[\'text_input\'] = sanitize_text_field( $options[\'text_input\'] );
                } else {
                    unset( $options[\'text_input\'] ); // Remove from options if empty
                }
            }
            // Return sanitized options
            return $options;
        }
        // Settings page output
        public static function plugin_create_admin_page() { ?>
            <div class="wrap">
                <div class="page-header">
                    <h1><?php esc_html_e( \'Plugin Options\', \'text-domain\' ); ?></h1>
                </div>
                <?php settings_errors(); ?>
                <form method="post" action="options.php">
                    <?php settings_fields( \'my_custom_plugin\' ); ?>
                    <div class="panel panel-default">
                        <table class="form-table">
                            <tbody><?php
                                // This is a sample checkbox ?>
                                <tr>
                                    <th scope="row">
                                        <?php esc_html_e( \'Sample Checkbox\', \'text-domain\' ); ?>
                                    </th>
                                    <td>
                                        <?php $value = self::my_plugin_get_theme_option_value( \'checkbox_input\' ); ?>
                                        <label for="sample-checkbox"><?php esc_html_e( \'Sample Checkbox\', \'text-domain\' ); ?></label>
                                        <input id="sample-checkbox" type="text" name="my_custom_plugin[checkbox_input]" <?php checked( $value, \'on\' ); ?> />
                                    </td>
                                </tr><?php
                                // And this is a sample text input ?>
                                <tr>
                                    <th scope="row">
                                        <?php esc_html_e( \'Sample Text\', \'text-domain\' ); ?>
                                    </th>
                                    <td>
                                        <?php $value = self::my_plugin_get_theme_option_value( \'text_input\' ); ?>
                                        <label for="sample-input"><?php esc_html_e( \'Sample Checkbox\', \'text-domain\' ); ?></label>
                                        <input type="text" name="my_custom_plugin[text_input]" value="<?php echo esc_attr( $value ); ?>"> 
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <?php submit_button(); ?>
                </form>
            </div>
        <?php }
    }
}
new my_Custom_plugin();
// Helper function to use in theme to return a theme option value
function get_my_custom_plugin_value( $id = \'\' ) {
    return my_Custom_plugin::my_plugin_get_theme_option_value( $id );
}

在上面的示例中，我为您提供了一个示例复选框和文本输入。你可以随心所欲地改变它。text区域、选择等。在我们编写类之后，在后端将添加一个新选项。我们将有一个文本输入和一个复选框，我们可以修改。保存数据后，可以使用以下方法检索数据：

get_my_custom_plugin_value($id);

id必须等于输入的名称，在本例中text_input 或checkbox_input. 这些数据稍后将用于塑造HTML。

现在，第二部分是创建一个插件，在其中使用此代码。只需创建一个空白的php文件，命名为任意名称，然后向其中添加以下代码：

<?php
/*
Plugin Name: Sample Plugin
Description: Some description
Author: Your name
Version: 1.0
Author URI: Your website URL
*/

// Now we create our HTML

function create_my_html(){
    // Write your HTML structure here. Whenever you need a value,
    // use get_my_custom_plugin_value() to add it to your HTMl.

} 

// After creating the HTML, you should include the class in your plugin,
// to add the options. It can be pasted here.

// Now, enqueue your CSS and JS files, the way I mentioned above
?>

一切都完成了。你现在可以打电话create_my_html(); 在模板中，可以在任何需要的地方输出HTML。别忘了使用echo, 如果返回数据而不是打印数据。此外，请将其与function_exists() 要确保禁用插件后主题不会中断，请执行以下操作：

if (function_exists(create_my_html())) {
    echo create_my_html();
}

Abracadabra期待更多？对不起，让你失望了。仅此而已：）