it-swarm.com.ru

Добавление палитры цветов WordPress в настройках виджета

Я хочу добавить палитру цветов WordPress по умолчанию в форму настроек виджета. Вот что я пытаюсь:

В моем functions.php у меня есть это:

function widgets_scripts( $hook ) {
    if ( 'widgets.php' != $hook ) {
        return;
    }
    wp_enqueue_style( 'wp-color-picker' );        
    wp_enqueue_script( 'wp-color-picker' ); 
}
add_action( 'admin_enqueue_scripts', 'widgets_scripts' );

В моем файле виджета у меня есть это:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#<?php echo $this->get_field_id( 'color' ); ?>').wpColorPicker();
    });
</script>
<input id="<?php echo $this->get_field_id( 'color' ); ?>" type="text" name="<?php echo $this->get_field_name( 'color' ); ?>" value="<?php echo esc_attr( $instance['color'] ); ?>" />

Используя приведенный выше код, я вижу кнопку выбора цвета "Выбрать цвет", но она не позволяет мне щелкнуть ее изначально.

Это позволяет мне нажимать только после сохранения виджета. Я предполагаю, что это из-за присвоения идентификатора.

Если я пытаюсь использовать имя класса css, он отображает кнопку 2 раза (не знаю почему, даже класс существует только один раз в виджете) Вот что я вижу, если использую имя класса: enter image description here

Также я думаю, что имя класса вызовет проблему, если один и тот же виджет используется несколько раз. Вот почему я пытаюсь использовать динамический идентификатор для поля ввода.

2
jay

Следующее сработало для меня. Я использовал атрибут класса вместо ID, чтобы сопоставить несколько палитр цветов.

<script type="text/javascript">
    jQuery(document).ready(function($) { 
            jQuery('.color-picker').on('focus', function(){
                var parent = jQuery(this).parent();
                jQuery(this).wpColorPicker()
                parent.find('.wp-color-result').click();
            }); 
    }); 
</script>

Моя форма виджета настроена так:

<p>
    <label for="<?php echo $this->get_field_id( 'font_color' ); ?>" style="display:block;"><?php _e( 'Font Color:' ); ?></label> 
    <input class="widefat color-picker" id="<?php echo $this->get_field_id( 'font_color' ); ?>" name="<?php echo $this->get_field_name( 'font_color' ); ?>" type="text" value="<?php echo esc_attr( $font_color ); ?>" />
</p>
3
chifliiiii

Смешав то, что у меня было, и решение, опубликованное @chifliiiii, я пришел к следующему:

jQuery(document).ready(function($) {

    $('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();

    // Executes wpColorPicker function after AJAX is fired on saving the widget
    $(document).ajaxComplete(function() {
        $('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();
    });
});

Это сделало трюк намного проще. Я проверил это, и, кажется, работает нормально. Надеюсь, что это все еще может быть полезным для вас :)

2
D'T4ils

Следующий код работал для меня.

<script type="text/javascript">

    ( function( $ ){
        function initColorPicker( widget ) {
            widget.find( '.color-picker' ).not('[id*="__i__"]').wpColorPicker( {
                change: _.throttle( function() {
                    $(this).trigger( 'change' );
                }, 3000 )
            });
        }

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

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

        $( document ).ready( function() {
            $( '.widget-inside:has(.color-picker)' ).each( function () {
                initColorPicker( $( this ) );
            } );
        } );

    }( jQuery ) );

</script>

Мой код выбора цвета виджета:

<p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>"><?php _e
        ( 'Background', 'text-domain'   ); ?></label>
    <input id="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'rm_background' ) ); ?>" value="<?php echo $instance['rm_background']; ?>" class="wp-color-result"/>
</p>
0
Rubel Miah