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

Question

我创建帖子选项，我想在其中实现 WordPress 颜色选择器核心

我尝试了这个代码，我从许多教程和来源获得了它，但不幸的是它根本不起作用，就像我从未添加过代码一样。

超文本标记语言

<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

您没有说明如何创建“主题选项”页面，但以下是一个工作示例。它与示例代码几乎相同，但排队是直接在自定义菜单页面回调上完成的，并且 jQuery 被引用为$（请注意其在 中的声明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
}

使用时admin_enqueue_scripts，回调函数只有一个参数$hook_suffix。有了它，您可以确保脚本和样式仅添加到正确的屏幕中：

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
}