Question

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

我尝试了这段代码，我从许多教程和资源中得到了它，但遗憾的是它根本不起作用，就像我从未添加过代码一样。

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

您没有说明如何创建“主题选项”页面，但以下是一个有效的示例。它与示例代码几乎相同，但是enqueue直接在自定义菜单页面回调上完成，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
}

Answer 2

只需通过此脚本包含jQuery文件和样式表文件即可。

data structures

现在像cp-active.js一样创建一个新的javascript文件，并使用波纹管代码将其保留为avobe定义的“ /js/cp-active.js”文件路径。

// Register Scripts &amp; 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);

在您的设置页面上添加一个文本框，其中包含您要在其中显示输入文本的颜色选择器的CSS类。我已经使用“ color_code”作为输入$ variable。

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 jQuery Color Picker WordPress Theme or Plugin

的更多详细信息

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

2 个答案: