如何在wpColorPicker内更改颜色后刷新主题定制器?

时间:2015-12-27 作者:Kolya Korobochkin

我开发了自定义小部件,并在其中设置小部件的自定义颜色。我使用此代码初始化wpColorPicker 而不是默认的文本输入form() Widget类的方法:

jQuery(document).ready(function($){
    $(\'#<?php echo $this->get_field_id( \'bg_color_1\' ); ?>\').wpColorPicker();
});
所有这些都很好,但如果您在更改值后尝试在主题定制器中更改颜色,则不会发生任何情况:保存按钮仍不活动,网站页面也不会使用新颜色刷新。

以前尝试触发change 事件,但不起作用:

$(\'#<?php echo $this->get_field_id( \'bg_color_1\' ); ?>\').wpColorPicker({
    change: function(event, ui) {
        $(\'#<?php echo $this->get_field_id( \'bg_color_1\' ); ?>\').change();
    }
});
如何重新加载页面预览(当输入中的值发生更改时触发事件)?

2 个回复
SO网友:Rachel Stinson

尝试使用现有的WordPress功能修改调色板,如:

function my_mce4_options( $init ) {
    $default_colours = \'
        "000000", "Black",
        "993300", "Burnt orange",
        "333300", "Dark olive",
        "003300", "Dark green",
        "003366", "Dark azure",
        "000080", "Navy Blue",
        "333399", "Indigo",
        "333333", "Very dark gray",
        "800000", "Maroon",
        "FF6600", "Orange",
        "808000", "Olive",
        "008000", "Green",
        "008080", "Teal",
        "0000FF", "Blue",
        "666699", "Grayish blue",
        "808080", "Gray",
        "FF0000", "Red",
        "FF9900", "Amber",
        "99CC00", "Yellow green",
        "339966", "Sea green",
        "33CCCC", "Turquoise",
        "3366FF", "Royal blue",
        "800080", "Purple",
        "999999", "Medium gray",
        "FF00FF", "Magenta",
        "FFCC00", "Gold",
        "FFFF00", "Yellow",
        "00FF00", "Lime",
        "00FFFF", "Aqua",
        "00CCFF", "Sky blue",
        "993366", "Brown",
        "C0C0C0", "Silver",
        "FF99CC", "Pink",
        "FFCC99", "Peach",
        "FFFF99", "Light yellow",
        "CCFFCC", "Pale green",
        "CCFFFF", "Pale cyan",
        "99CCFF", "Light sky blue",
        "CC99FF", "Plum",
        "FFFFFF", "White"
        \';
    $custom_colours = \'
        "e14d43", "Color 1 Name",
        "d83131", "Color 2 Name",
        "ed1c24", "Color 3 Name",
        "f99b1c", "Color 4 Name",
        "50b848", "Color 5 Name",
        "00a859", "Color 6 Name",
        "00aae7", "Color 7 Name",
        "282828", "Color 8 Name"
        \';
    $init[\'textcolor_map\'] = \'[\'.$default_colours.\',\'.$custom_colours.\']\';
    $init[\'textcolor_rows\'] = 6; // expand colour grid to 6 rows
    return $init;
}
add_filter(\'tiny_mce_before_init\', \'my_mce4_options\');
我希望这对你有帮助!

SO网友:Hisham Dalal

这是我用这段代码解决的同一个问题:

<?php

class my_widget extends WP_Widget 
{
    function __construct() 
    {   
        parent::__construct(__CLASS__, __(\'Title\', TEXT_DOMAIN), array ( \'description\' => __( \'Description\', TEXT_DOMAIN ), ) );
    
        //...
        
        add_action( \'admin_enqueue_scripts\', array( $this, \'enqueue_scripts\' ) );
        add_action( \'admin_footer-widgets.php\', array( $this, \'print_widget_scripts\' ), 9999 );
    }

    public function enqueue_scripts( $hook_suffix ) {
        if ( \'widgets.php\' !== $hook_suffix ) {
            return;
        }

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

    public function print_widget_scripts() {
        ?>
        <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() {
                    $( \'.widget:has(.color-picker)\' ).each( function () {
                        initColorPicker( $( this ) );
                    } );
                } );
                
            }( jQuery ) );
        </script>
        <?php
    }   
}