WordPress-Widget Farbauswahl nicht angezeigt

Question

WordPress Standard-Farbwähler wird nicht im Widget angezeigt. Stattdessen zeigt es ein Textfeld. Kann mir jemand freundlicherweise sagen, was das eigentliche Problem ist? Ich kann es nicht scheinen. Ich habe bewusst einige Codes zur besseren Lesbarkeit gelöscht. Fehle ich etwas? habe ich die Konfiguration richtig gemacht?

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

Addiert man diese Aktion Haken

add_action('admin_footer-widgets.php', array($this, 'print_scripts'), 9999); 

nach diesen beiden Linien das Problem

add_action('admin_enqueue_scripts', array($this, 'upload_scripts')); 
add_action('admin_enqueue_styles', array($this, 'upload_styles')); 

gelöst hilft

Answer 2

Hinzufügen von Farbauswahl in Backend

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

Sie müssen die Funktion der add_action Funktion als zweiter Parameter übergeben. Denken Sie daran, dass es nur im Backend funktioniert.

Hope this ..