如何使用 WordPress 的拾色器（Color Picker）API

！

在一些 WordPress 主题或插件项目中，我们经常要用到拾色器，今天我们就一起来看看如何使用 WordPress 的拾色器（Color Picker）API。在开始前，请确保你的 WordPress 是 3.5 以及以上版本，这样才能适用本教程。

引用拾色器文件

要添加拾色器，我们需要引用它的jQuery和CSS样式文件。下面的代码将告诉你怎么引用：

1 2 3 4 5 6 7 8 9 10 11 12

add_action( 'admin_enqueue_scripts', 'wptuts_add_color_picker' ); function wptuts_add_color_picker( $hook ) { if( is_admin() ) { // 添加拾色器的CSS文件 wp_enqueue_style( 'wp-color-picker' ); // 引用我们自定义的jQuery文件以及加入拾色器的支持 wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true ); } }

请注意，当我们引用了自定义的jQuery文件以及加入拾色器的支持后，我们就可以将拾色器应用到jQuery文件中的文本字段。

1 2 3 4 5 6 7 8

(function( $ ) { // 添加颜色选择器到所有包含"color-field"类的 input 中 $(function() { $('.color-field').wpColorPicker(); }); })( jQuery );

创建一个使用拾色器的插件

下面我们就来展示如何整合拾色器到一个真正的插件里面。

以下就是我们要讲解的：

• 如何添加一个仪表盘选项页面，模拟一个主题设置页面。
• 如何添加准备使用拾色器的设置字段。
• 如何验证并保存输入。