0
ワードプレスのデフォルトのカラーピッカーがウィジェットに表示されません。代わりに、テキストフィールドを表示しています。誰か親切にここに実際の問題が何かを教えてもらえますか？私はそれを把握していないようだ。私は意図的に読みやすくするためにいくつかのコードを削除しました。何か不足していますか？私は構成の権利をしましたか？バックエンドWordPressウィジェットカラーピッカーが表示されない
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');
}
}
にカラーピッカーを追加
/*************************************************
* 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;
}
}