如何使用 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 );

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

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

以下就是我们要讲解的:

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

你可能感兴趣的:(如何使用 WordPress 的拾色器(Color Picker)API)