Question

现在，我正在研究Wordpress中的颜色选择器和小部件。在我选择颜色并提交之后。我的颜色选择器更改为文本框。我该如何解决这个问题？

我的代码如下。

在表单功能中：

   $instance            = wp_parse_args( (array) $instance, array('background_color' => '#e3e3e3' ) ); 
$background_color   = isset( $instance['background_color'] ) ? esc_attr( $instance['background_color'] ) : ''; 

<label for="<?php echo $this->get_field_id( 'background_color' ); ?>" style="display:block;"><?php _e( 'Title Background Color:' ); ?></label> 
<input class="widefat color" id="<?php echo $this->get_field_id( 'background_color' ); ?>" name="<?php echo $this->get_field_name( 'background_color' ); ?>" type="text" value="<?php echo esc_attr( $background_color ); ?>" />
<div class="colorpicker"></div>

我的js文件。

jQuery( document ).ready(function(){

"use strict";

//This if statement checks if the color picker widget exists within jQuery UI
//If it does exist then we initialize the WordPress color picker on our text input field

if( typeof jQuery.wp === 'object' && typeof jQuery.wp.wpColorPicker === 'function' ){
    jQuery( '.color' ).wpColorPicker();
}

else {
    //We use farbtastic if the WordPress color picker widget doesn't exist
    jQuery( '.colorpicker' ).farbtastic( '.color' );
}
});

在功能更新

中

$instance['background_color']   = $new_instance['background_color'];

Answer 1

我刚刚找到了解决方案。更改js文件如下。

serviceid

}）;

Answer 2

对不起上面的回答。它错了，当我创建新的小部件时，它会显示两个颜色选择器。

现在，我用这个解决方案解决了这个问题。（来自Oren评论，http://zourbuth.com/archives/877/how-to-use-wp-color-picker-in-widgets/）

jQuery(document).ready( function() {
jQuery('.color').wpColorPicker();
jQuery(document).ajaxComplete(function() {
jQuery('.color').wpColorPicker();
});
});

拾色器和小工具

2 个答案: