2

我创建帖子选项，我想在其中实现 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();
});
4

2 回答 2

5

您没有说明如何创建主题选项页面，但以下是一个工作示例。它与您的示例代码几乎相同，但入队是直接在自定义菜单页面回调上完成的，并且 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
}
于 2013-08-19T20:52:25.013 回答
0

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

// 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);

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

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
});

将文本框添加到您的设置页面，其中包含颜色选择器的 CSS 类，您希望在其中显示输入文本。我使用“color_code”作为输入 $variable。

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

请查看有关添加 jQuery 颜色选择器 WordPress 主题或插件的更多详细信息

于 2019-12-26T18:52:48.223 回答