我想在小部件设置表单中添加WordPress默认颜色选择器。以下是我正在尝试的：
在我的功能中。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\'] ); ?>" />
使用上面的代码，我可以看到colorpicker“Select color”按钮，但它不允许我最初单击它。
它只允许我在小部件保存后单击。我猜这是因为分配了ID。
如果我尝试使用css类名，它会显示按钮2次（我不知道为什么，即使该类在小部件中只存在一次）。这是我在使用类名时看到的：
此外，如果同一个小部件被多次使用，我认为类名会导致问题。这就是为什么我试图为输入字段使用动态ID。
SO网友:chifliiiii
以下内容对我有用。我使用class属性而不是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>
我的Widget表单设置如下：
<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>
SO网友:Rodrigo D\'Agostino
将我所拥有的和@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();
});
});
这样做的方法简单得多。我对它进行了测试，它似乎工作得很好。希望这仍然能对您有所帮助：）
SO网友:Rubel Miah
以下代码适用于我。
<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>
