在帖子选项中使用wordpress颜色选择器

Question

I create post options and I want to implement wordpress color picker core inside it

I tried this code I got it from many tutorials and sources but unfortunately It's not working at all, It's like I never added the code.

HTML

<input name="mv_cr_section_color" type="text" id="mv_cr_section_color" value="#ffffff" data-default-color="#ffffff">

PHP

function Colorpicker(){ 
  wp_enqueue_style( 'wp-color-picker');
  wp_enqueue_script( 'wp-color-picker');
}
add_action('admin_enqueue_scripts', 'Colorpicker');

JQuery

jQuery(document).ready(function(){
   jQuery('#mv_cr_section_color').wpColorPicker();
});

Answer 1

You don't say how you're creating the Theme Options page, but the following is a working example. It's almost the same code as your sample code, but the enqueue is done directly on the custom menu page callback and jQuery is being referenced as $ (note its declaration in ready(function($)):

<?php
/**
 * Plugin Name: Testing the Color Picker
 */

add_action( 'admin_menu', 'b5f_demo_menu' );

function b5f_demo_menu() 
{
    add_menu_page(
        'Test', 
        'Test', 
        'edit_pages', 
        'test-slug', 
        'b5f_callback_function'
    );
}

function b5f_callback_function() 
{
    wp_enqueue_script('wp-color-picker');
    wp_enqueue_style( 'wp-color-picker' );
    ?>
    <input name="mv_cr_section_color" type="text" id="mv_cr_section_color" value="#ffffff" data-default-color="#ffffff">
    <script type="text/javascript">
    jQuery(document).ready(function($) {   
        $('#mv_cr_section_color').wpColorPicker();
    });             
    </script>
    <?php
}

When using admin_enqueue_scripts, the callback function has one parameter $hook_suffix. With it, you can make sure the scripts and styles are only added in the correct screen:

add_action( 'admin_enqueue_scripts', 'b5f_custom_enqueue' );

function b5f_custom_enqueue( $hook_suffix )
{
    // CHECK IF CORRECT PAGE, IF NOT DO NOTHING
    # if ( 'my_hook-name' != $hook_suffix )
    #    return;

    ?>
    <script type="text/javascript">
        // Use this to check the hook_suffix name
        console.log('<?php echo $hook_suffix; ?>');
    </script>
    <?php
}