WordPress默认颜色选择器未显示在窗口小部件中。相反,它显示的是文本字段。有人可以告诉我这里的实际问题是什么吗?我似乎无法想象。我故意删除了一些代码以提高可读性。我错过了什么吗?我做了配置吗?
/*************************************************
* Intro Two Widget
**************************************************/
/**
* Register the Widget
*/
add_action( 'widgets_init', create_function( '', 'register_widget("example_intro_two_widget");' ) );
class example_intro_two_widget extends WP_Widget
{
/**
* Constructor
**/
public function __construct()
{
$widget_ops = array(
'classname' => 'example_intro_two_widget',
'description' => __('example Intro Widget Two', 'example'),
'customize_selective_refresh' => true
);
parent::__construct( 'example_intro_two_widget', 'Intro Widget Two', $widget_ops );
add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
add_action('admin_enqueue_styles', array($this, 'upload_styles'));
}
/* Add necessary styles & scripts*/
public function enqueue_scripts( $hook_suffix ) {
if ( 'widgets.php' !== $hook_suffix ) {
return;
}
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'wp-color-picker' );
}
/**
* Print scripts.
*
* @since 1.0
*/
public function print_scripts() {
?>
<script>
( function( $ ){
function initColorPicker( widget ) {
widget.find( '.color-picker' ).wpColorPicker( {
change: _.throttle( function() { // For Customizer
$(this).trigger( 'change' );
}, 3000 )
});
}
function onFormUpdate( event, widget ) {
initColorPicker( widget );
}
$( document ).on( 'widget-added widget-updated', onFormUpdate );
$( document ).ready( function() {
$( '#widgets-right .widget:has(.color-picker)' ).each( function () {
initColorPicker( $( this ) );
} );
} );
}( jQuery ) );
</script>
<?php
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance )
{
$text1 = isset( $instance['text1'] ) ? apply_filters('widget_title', $instance['text1'] ) : __('Graphic','example');
$bgcolor = isset( $instance['bgcolor'] ) ? $instance['bgcolor'] : '#1f1f1f';
/* Before widget (defined by themes). */
echo $args['before_widget'] ;
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance )
{
/* Set up some default widget settings. */
$defaults = array(
'text1' => __('Graphic', 'example'),
'bgcolor' => '#1f1f1f'
);
$instance = wp_parse_args( (array) $instance, $defaults );
?>
<!-- bg Color Field -->
<p >
<label style="vertical-align: top;" for="<?php echo $this->get_field_id( 'bgcolor' ); ?>"><?php _e('Background Color', 'resumee') ?></label>
<input class="widefat color-picker" id="<?php echo $this->get_field_id( 'bgcolor' ); ?>" name="<?php echo $this->get_field_name( 'bgcolor' ); ?>" value="<?php echo $instance['bgcolor']; ?>" type="text" />
</p>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
// update logic goes here
$instance = $new_instance;
$instance[ 'text1' ] = wp_kses_post( $new_instance[ 'text1' ] );
$instance['bgcolor'] = sanitize_hex_color($new_instance['bgcolor']);
return $instance;
}
}
答案 0 :(得分:0)
在后端添加颜色选择器
add_action( 'admin_enqueue_scripts', 'prefix_foo_function' );
function prefix_foo_function( $hook ) {
if( is_admin() ) {
//add color picker css file.
wp_enqueue_style( 'wp-color-picker' );
}
}
您需要将函数作为第二个参数传递给add_action函数。请记住,它只适用于后端。
希望这会有所帮助..
答案 1 :(得分:0)
添加此操作挂钩
add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );
这两行解决了问题后
add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
add_action('admin_enqueue_styles', array($this, 'upload_styles'));