如何在我的插件中实现WordPress中的颜色选择器？

时间：2018-05-23 作者：Gabriel Soligo

我很难在插件中实现与WordPress完全相同的颜色选择器。

有关于如何使用此功能的官方wordpress文档吗？

2 个回复
最合适的回答,由SO网友:Krzysiek Dróżdż 整理而成

是的，有：https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

1。您应该将脚本和样式排队

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。。。添加输入

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

3。。。并调用wpColorPicker函数

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

SO网友:csehasib

我们需要使用wp\\u enqueue\\u脚本和wp\\u enqueue\\u样式将样式添加到函数中。php文件。这个脚本只包含一个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\\u code”。

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />
请查看更多详细信息Add jQuery Color Picker WordPress Theme or Plugin

结束
标签： plugin-development   javascript   color-picker   小码农  

相关推荐

WP_LOCALIZE_SCRIPT()和JavaScript命名空间

如你所知，wp_localize_script() 允许从PHP对象创建JavaScript对象。因此，在运行下面示例中的代码之后：wp_localize_script(\'my-script\', \'var_name\', $var); // This works 我们将以一个名为var_name 可在脚本中访问的my-script. 此JavaScript变量是从原始PHP变量复制而来的$var.目前一切正常。我面临的问题是：我喜欢能够分配var_name 到JavaScript命名空间