无法让wpColorPicker在小部件中工作

时间:2019-06-05 作者:pickos7

我可以显示颜色选择器,我可以更改颜色并看到保存按钮,但是没有任何内容保存到DB,我得到

未定义索引:my\\u color”,文件:“wp content/plugins/my\\u plugin/my\\u color。php”,第53行

这是我的小部件:

<?php
class widget007 extends WP_Widget {

    function __construct() {
        add_action(\'admin_print_styles-widgets.php\', array( $this, \'load_color_picker_style\' ) );
        $args = array(
            \'name\' => esc_html__( \'widget007\', \'txt-domaine\' ),
            \'description\' => esc_html__( \'Something\', \'txt-domaine\' )
        );
        parent::__construct( \'my_widget007\', \'\', $args );
    }

    function load_color_picker_style() {
        wp_enqueue_style( \'wp-color-picker\' );
        wp_enqueue_script( \'wp-color-picker\' ); 
    }

    function form( $instance ) {
        $my_color = ! empty( $instance[\'my_color\'] ) ? $instance[\'my_color\'] : \'\';
        ?>
        <p>  
            <label for="<?php echo esc_attr( $this->get_field_id( \'my_color\' ) ); ?>">Color</label>
            <input class="color-picker" type="text" id="<?php echo esc_attr( $this->get_field_id( \'my_color\' ) ); ?>" name="<?php echo esc_attr( $this->get_field_id( \'my_color\' ) ); ?>" value="<?php echo $my_color; ?>" />
        </p>
        <script>
            ( function( $ ){
                function initColorPicker( widget ) {
                    widget.find( \'.color-picker\' ).wpColorPicker( {
                        change: _.throttle( function() { // For Customizer
                            $(this).trigger( \'change\' );
                        }, 3000 )
                    });
                }

                function onFormUpdate( event, widget ) {
                    initColorPicker( widget );
                }

                $( document ).on( \'widget-added widget-updated\', onFormUpdate );

                $( document ).ready( function() {
                    $( \'#widgets-right .widget:has(.color-picker)\' ).each( function () {
                        initColorPicker( $( this ) );
                    } );
                } );
            }( jQuery ) );
        </script>
        <?php
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance[\'my_color\']  =  $new_instance[\'my_color\'];
        return $instance;
    }
}

add_action( \'widgets_init\', function(){
    register_widget( \'widget007\' );
});

1 个回复
最合适的回答,由SO网友:Bhupen 整理而成

请尝试此修改的代码:

class widget007 extends WP_Widget {

        function __construct() {
            add_action(\'admin_print_styles-widgets.php\', array( $this, \'load_color_picker_style\' ) );
            $args = array(
                \'name\' => esc_html__( \'widget007\', \'txt-domaine\' ),
                \'description\' => esc_html__( \'Something\', \'txt-domaine\' )
            );
            parent::__construct( \'my_widget007\', \'\', $args );
        }

        function load_color_picker_style() {
            wp_enqueue_style( \'wp-color-picker\' );
            wp_enqueue_script( \'wp-color-picker\' ); 
            wp_enqueue_script( \'underscore\' );
        }

        function form( $instance ) {
            $my_color = esc_attr( $instance[ \'my_color\' ] );
            ?>
            <p>  
                <label for="<?php echo $this->get_field_id( \'my_color\' ); ?>">Color</label>
                <input type="text" name="<?php echo $this->get_field_name( \'my_color\' ); ?>" class="color-picker" id="<?php echo $this->get_field_id( \'my_color\' ); ?>" value="<?php echo $my_color; ?>" />
            </p>
            <script>
                ( function( $ ){
                    function initColorPicker( widget ) {
                        widget.find( \'.color-picker\' ).wpColorPicker( {
                            change: _.throttle( function() { // For Customizer
                                $(this).trigger( \'change\' );
                            }, 4000 )
                        });
                    }

                    function onFormUpdate( event, widget ) {
                        initColorPicker( widget );
                    }

                    $( document ).on( \'widget-added widget-updated\', onFormUpdate );

                    $( document ).ready( function() {
                        $( \'#widgets-right .widget:has(.color-picker)\' ).each( function () {
                            initColorPicker( $( this ) );
                        } );
                    } );
                }( jQuery ) );
            </script>
            <?php
        }

        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            $instance[\'my_color\']  = strip_tags( $new_instance[\'my_color\'] );

            return $instance;
        }
    }

    add_action( \'widgets_init\', function(){
        register_widget( \'widget007\' );
    });

相关推荐

My widgets do not save

每次我保存我的小部件并离开页面时,我的小部件都会消失。侧边栏已完全清空,不会保存任何更改。控制台或PHP日志中没有任何错误。如果我将小部件直接复制并保存在数据库中widgets_text, 它们将被显示,但我仍然无法在侧边栏中添加或删除任何内容。这只发生在我的右侧边栏上,左侧边栏工作正常,但它们都以相同的方式注册。这是我注册侧边栏的方式:function my_widgets_init() { register_sidebar( array ( \'name\'