web-dev-qa-db-fra.com

Ajouter WordPress colorpicker dans les paramètres du widget

Je souhaite ajouter le sélecteur de couleurs par défaut WordPress dans le formulaire de configuration des widgets. Voici ce que j'essaye:

Dans mon functions.php, j'ai ceci:

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

Dans mon fichier de widget, j'ai ceci:

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

En utilisant le code ci-dessus, je peux voir le bouton "Choisir une couleur" de colorpicker, mais il ne me permet pas de cliquer dessus initialement.

Cela ne me permet de cliquer qu'une fois le widget enregistré. Je suppose que c'est à cause de l'attribution de l'ID.

Si j'essaie d'utiliser un nom de classe CSS, il affiche le bouton 2 fois (je ne sais pas pourquoi, même la classe n'existe qu'une seule fois dans un widget). Voici ce que je vois si j'utilise le nom de la classe: enter image description here

Aussi, je pense que le nom de la classe posera le problème si le même widget est utilisé plusieurs fois. C'est pourquoi j'essaie d'utiliser un identifiant dynamique pour le champ de saisie.

theme-developmentthemeswidgetscolor-picker
2
jay

Ce qui suit a fonctionné pour moi. J'utilise l'attribut de classe au lieu de l'ID pour faire correspondre plusieurs sélecteurs de couleurs.

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

Mon formulaire de widget est configuré comme suit:

<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

En mélangeant ce que j'avais et la solution publiée par @chifliiiii, je suis arrivé à ceci

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

Cela a fait le tour d'une manière beaucoup plus simple. Je l'ai testé et il semble bien fonctionner. J'espère que cela peut encore vous être utile :)

2
D'T4ils

Le code suivant a fonctionné pour moi.

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

Mon code de sélecteur de couleur de widget:

<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