javascript - How to implement color picker from wordpress in my plugin?

admin管理员组

文章数量:1404927

I'm having difficulty implementing the color picker exactly the same as WordPress in my plugin.

Is there any official wordpress documentation on how to use this feature?

I'm having difficulty implementing the color picker exactly the same as WordPress in my plugin.

Is there any official wordpress documentation on how to use this feature?

• plugin-development
• javascript
• color-picker

Share Improve this question edited May 30, 2018 at 22:06 Krzysiek Dróżdż 25.6k99 gold badges5353 silver badges7474 bronze badges asked May 23, 2018 at 19:07 Gabriel SoligoGabriel Soligo 10511 gold badge11 silver badge44 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 16

Yes, there is: https://make.wordpress/core/2012/11/30/new-color-picker-in-wp-3-5/

1. You should enqueue scripts and styles...

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
    // first check that $hook_suffix is appropriate for your admin page
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}

2. ... add an input...

<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />

3. ... and call wpColorPicker function

jQuery(document).ready(function($){
    $('.my-color-field').wpColorPicker();
});

We need to wp_enqueue_script the script and wp_enqueue_style the style with add_action to the functions.php file. Just include a jQuery file and stylesheet file by this script.

// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'admin_enqueue_scripts', custom_color_picker_scripts);

Now create a new javascript file as like cp-active.js and keep it avobe defined “/js/cp-active.js” file path using bellows code.

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

Add a textbox to your settings page with a CSS class for the color picker, where you want to dispaly the input text. I have use “color_code” for input $variable.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

Please see more details on Add jQuery Color Picker WordPress Theme or Plugin

本文标签： javascriptHow to implement color picker from wordpress in my plugin