Comment ajouter un sélecteur de couleur aux widgets?

Question

J'ai quelques problèmes pour ajouter le wpColorPicker à un widget. Quelqu'un at-il un échantillon de travail? Cela ne fonctionne que lorsque je clique sur "Enregistrer" ou que je recharge la page, mais lorsque je déplace un nouveau widget vers la zone, il ne s'active pas. Quelqu'un a des idées? Ci-dessous vous pouvez trouver mon code jusqu'à présent.

class SampleWidget extends WP_Widget 
    {

        /**
         * Register widget with WordPress.
         */
        public function __construct () 
        {
            parent::__construct
            (
                'sample_widget',
                'Sample',
                array( 'description' => __( 'A sample description'), )
            );  

            add_action( 'admin_enqueue_scripts', array( &$this, 'admin_enqueue_scripts' ) );
        }

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

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

        /**
         * Front-end display of widget.
         *
         * @see WP_Widget::widget()
         *
         * @param array $args     Widget arguments.
         * @param array $instance Saved values from database.
         */
        public function widget( $args, $instance ) 
        {
            extract( $args );

            echo $before_widget;
            echo $after_widget;
        }

        /**
         * Sanitize widget form values as they are saved.
         *
         * @see WP_Widget::update()
         *
         * @param array $new_instance Values just sent to be saved.
         * @param array $old_instance Previously saved values from database.
         *
         * @return array Updated safe values to be saved.
         */
        public function update( $new_instance, $old_instance ) 
        {
            $instance = array();
            return $instance;
        }

        /**
         * Back-end widget form.
         *
         * @see WP_Widget::form()
         *
         * @param array $instance Previously saved values from database.
         */
        public function form ( $instance ) 
        {
            ?>
            <p>  
                <label for="<?php echo $this->get_field_id( 'background-color' ); ?>">Achtergrondkleur:</label>
                <input type="text" id="<?php echo $this->get_field_id( 'background-color' ); ?>" name="<?php echo $this->get_field_name( 'background-color' ); ?>" value="<?php echo esc_attr( $backgroundColor ); ?>" />                              
            </p>

            <script type="text/javascript">
            jQuery(document).ready(function($){
                $('#<?php echo $this->get_field_id( 'background-color' ); ?>').wpColorPicker();
            });
            </script>
            <?php
        }
    }

Answer 1

Voici le code que j'ai utilisé pour l'un de mes projets:

<?php
function load_color_picker_style() {
    wp_enqueue_style( 'wp-color-picker' );
}
    add_action('admin_print_scripts-widgets.php', 'load_color_picker_script');
    add_action('admin_print_styles-widgets.php', 'load_color_picker_style');
?>

///Javascript

jQuery(document).ready(function($){
    function updateColorPickers(){
        $('#widgets-right .wp-color-picker').each(function(){
            $(this).wpColorPicker({
                // you can declare a default color here,
                // or in the data-default-color attribute on the input
                defaultColor: false,
                // a callback to fire whenever the color changes to a valid color
                change: function(event, ui){},
                // a callback to fire when the input is emptied or an invalid color
                clear: function() {},
                // hide the color picker controls on load
                hide: true,
                // show a group of common colors beneath the square
                // or, supply an array of colors to customize further
                palettes: ['#ffffff','#000000','#ff7c0b']
            });
        }); 
    }
    updateColorPickers();   
    $(document).ajaxSuccess(function(e, xhr, settings) {

        if(settings.data.search('action=save-widget') != -1 ) { 
            $('.color-field .wp-picker-container').remove();    
            updateColorPickers();       
        }
    });
 });

La seule condition requise est que l'entrée que vous voulez utiliser comme sélecteur de couleurs doit avoir le nom de classe de, ainsi, color-picker.

Answer 2

Je pense que ce que vous voulez vraiment faire, c'est de vous lier à l'événement "sortstop" qui est déclenché après qu'un widget a été déposé dans une zone de barre latérale largable.

jQuery('div.widgets-sortables').bind('sortstop', function(event,ui) {
    // This javascript code within here will be run after you've dropped a sidebar widget
});

Cela n'a pas été testé, mais je pense que c'est probablement la bonne voie à suivre.