web-dev-qa-db-ja.com

カラーピッカーをウィジェットに追加するにはどうすればいいですか？

WpColorPickerをウィジェットに追加する際に問題がいくつかあります。ワーキングサンプルはありますか？ [保存]をクリックするかページをリロードすると機能しますが、新しいウィジェットをその領域にドラッグしてもアクティブになりません。誰かアイデアがありますか？以下にあなたはこれまでのところ私のコードを見つけることができます。

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
        }
    }
widgetscolor-picker
4
Mark

これが私のプロジェクトの1つに使用したコードです。

<?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();       
        }
    });
 });

唯一の要件は、カラーピッカーになりたい入力がcolor-pickerのクラス名を持つ必要があることです。

3
Manny Fleurmond

私があなたが本当にやりたいことは、ウィジェットがドロップ可能なサイドバー領域にドロップされた後に引き起こされる "sortstop"イベントへのバインディングです。

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

これはテストされていませんが、私が考えるべき正しい方法であると私は思います。

2
Dwayne Charrington