Agregar el selector de color de WordPress en la configuración del widget

2

Quiero agregar el selector de color predeterminado de WordPress en el formulario de configuración del widget. Esto es lo que estoy tratando:

En mis funciones.php, tengo esto:

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

En mi archivo de widgets, tengo esto:

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

Al usar el código anterior, puedo ver el botón "Seleccionar color" del selector de color, pero no me permite hacer clic en él inicialmente.

Solo me permite hacer clic después de guardar el widget. Supongo que es debido a la asignación de la ID.

Si trato de usar un nombre de clase css, muestra el botón 2 veces (no sé por qué, incluso la clase solo existe una vez en un widget). Esto es lo que veo si uso el nombre de clase:

También creo que el nombre de la clase causará el problema si se utiliza el mismo widget varias veces. Es por eso que estoy tratando de usar una identificación dinámica para el campo de entrada.

    
pregunta jay 17.12.2013 - 09:51

2 respuestas

3

Lo siguiente funcionó para mí. Utilizo el atributo de clase en lugar del ID para hacer coincidir varios selectores de color.

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

Mi formulario de Widget está configurado como:

<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>
    
respondido por el chifliiiii 17.12.2013 - 11:57
2

Mezclando lo que tenía y la solución publicada por @chifliiiii, llegué a lo siguiente:

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

Eso hizo el truco de una manera mucho más simple. Lo probé y parece estar funcionando bien. Espero que esto todavía pueda ser útil para usted :)

    
respondido por el D'Tails 11.09.2015 - 06:34

Lea otras preguntas en las etiquetas