Question

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

}

Answer 1

在后端添加颜色选择器

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函数。请记住，它只适用于后端。

希望这会有所帮助..

Answer 2

添加此操作挂钩

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

WordPress小部件颜色选择器没有显示

2 个答案: