it-swarm.com.de

Hinzufügen von WordPress Colorpicker in Widget-Einstellungen

Ich möchte den WordPress-Standardfarbwähler in das Widget-Einstellungsformular einfügen. Folgendes versuche ich:

In meiner functions.php habe ich folgendes:

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' );

In meiner Widget-Datei habe ich Folgendes:

<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'] ); ?>" />

Wenn ich den obigen Code verwende, kann ich die Schaltfläche "Farbe auswählen" des Farbwählers sehen, aber zunächst kann ich nicht darauf klicken.

Ich kann nur klicken, nachdem das Widget gespeichert wurde. Ich vermute, das liegt an der Zuweisung der ID.

Wenn ich versuche, einen CSS-Klassennamen zu verwenden, wird die Schaltfläche zweimal angezeigt (ich weiß nicht warum, auch wenn die Klasse nur einmal in einem Widget vorhanden ist). Folgendes sehe ich, wenn ich den Klassennamen verwende: enter image description here

Ich denke auch, dass der Klassenname das Problem verursacht, wenn dasselbe Widget mehrmals verwendet wird. Deshalb versuche ich, eine dynamische ID für das Eingabefeld zu verwenden.

2
jay

Folgendes hat bei mir funktioniert. Ich verwende Klassenattribut anstelle von ID, um mehrere Farbwähler abzugleichen.

<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>

Mein Widget-Formular ist wie folgt eingerichtet:

<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

Ich mischte das, was ich hatte, und die Lösung, die von @chifliiiii gepostet wurde, und kam zu Folgendem:

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

Das hat den Trick viel einfacher gemacht. Ich habe es getestet und es scheint gut zu funktionieren. Hoffe das kann dir noch weiterhelfen :)

2
D'T4ils

Der folgende Code hat bei mir funktioniert.

<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>

Mein Widget-Farbwählercode:

<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