要添加拾色器，我們需要引用它的jQuery和CSS樣式文件。下面的代碼將告訴妳怎麽引用：
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 );
}
}
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文件中的文本字段。
(function( $ ) {
// 添加顏色選擇器到所有包含"color-field"類的 input 中
$(function() {
$('.color-field').wpColorPicker();
});
})( jQuery );
創建壹個使用拾色器的插件
下面我們就來展示如何整合拾色器到壹個真正的插件裏面。
以下就是我們要講解的：
如何添加壹個儀表盤選項頁面，模擬壹個主題設置頁面。
如何添加準備使用拾色器的設置字段。
如何驗證並保存輸入。
步驟1
壹旦妳設置了妳的插件到 WordPress 的?wp-content/plugins?文件夾裏面，我們就已經做好了開始的準備。下圖顯示了我如何結構化本教程所做的插件。
步驟2
在?color-picker-plugin.php?文件裏面，我們填寫了插件的基本信息，然後創建壹個名為CPA_Theme_Options?的PHP類，下面的代碼顯示了我們將要實現壹步壹步的所有類方法。
/*
Plugin Name: Color Picker API
Plugin URI:
Description: Demo about the new Color Picker API
Version: 1.0
Author: code.tutsplus.com
Author URI:
*/
/**
* Main Class - CPA stands for Color Picker API
*/
class CPA_Theme_Options {
/*--------------------------------------------*
* Attributes
*--------------------------------------------*/
/** Refers to a single instance of this class. */
private static $instance = null;
/* Saved options */
public $options;
/*--------------------------------------------*
* Constructor
*--------------------------------------------*/
/**
* Creates or returns an instance of this class.
*
* @return ?CPA_Theme_Options A single instance of this class.
*/
public static function get_instance() {
if ( null == self::$instance ) {
self::$instance = new self;
}
return self::$instance;
} // end get_instance;
/**
* Initializes the plugin by setting localization, filters, and administration functions.
*/
private function __construct() { }
/*--------------------------------------------*
* Functions
*--------------------------------------------*/
/**
* Function that will add the options page under Setting Menu.
*/
public function add_page() { }
/**
* Function that will display the options page.
*/
public function display_page() { }
/**
* Function that will register admin page options.
*/
public function register_page_options() { }
/**
* Function that will add javascript file for Color Piker.
*/
public function enqueue_admin_js() { }
/**
* Function that will validate all fields.
*/
public function validate_options( $fields ) { }
/**
* Function that will check if value is a valid HEX color.
*/
public function check_color( $value ) { }
/**
* Callback function for settings section
*/
public function display_section() { /* Leave blank */ }
/**
* Functions that display the fields.
*/
public function title_settings_field() { }
public function bg_settings_field( ) { }
} // end class
CPA_Theme_Options::get_instance();
步驟3
首先，讓我們來實現類的構造函數。下面的代碼顯示了壹個新的實例將被創建時，這個插件就行了。
它將：
在WordPress管理菜單的設置部分添加壹個新的選項頁
註冊選項頁面中註冊設置字段
添加 WordPress 拾色器的CSS樣式表
添加調用拾色器的自定義 JavaScript 文件
設置選項屬性與保存設置。
private function __construct() {
// Add the page to the admin menu
add_action( 'admin_menu', array( &$this, 'add_page' ) );
// Register page options
add_action( 'admin_init', array( &$this, 'register_page_options') );
// Css rules for Color Picker
wp_enqueue_style( 'wp-color-picker' );
// Register javascript
add_action('admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
// Get registered option
$this->options = get_option( 'cpa_settings_options' );
}
步驟4
接下來的步驟介紹如何添加選項頁，以及如何顯示它。
/**
* Function that will add the options page under Setting Menu.
*/
public function add_page() {
// $page_title, $menu_title, $capability, $menu_slug, $callback_function
add_options_page( 'Theme Options', 'Theme Options', 'manage_options', __FILE__, array( $this, 'display_page' ) );
}
/**
* Function that will display the options page.
*/
public function display_page() {
><div class="wrap">
<h2>Theme Options</h2>
<form method="post" action="options.php">
<?php
settings_fields(__FILE__);
do_settings_sections(__FILE__);
submit_button();
></form>
</div> <!-- /wrap -->
<?php
}
請註意，我們已經寫了 —— 在 display_page() 函數裏 —— 將添加表單、字段和提交按鈕用於註冊頁面選項的代碼。
步驟5
在這壹步中，我們要實現註冊並顯示兩個字段的設置方法：博客標題字段和背景顏色字段。這兩個領域都屬於主題選項部分。
/**
* Function that will register admin page options.
*/
public function register_page_options() {
// Add Section for option fields
add_settings_section( 'cpa_section', 'Theme Options', array( $this, 'display_section' ), __FILE__ ); // id, title, display cb, page
// Add Title Field
add_settings_field( 'cpa_title_field', 'Blog Title', array( $this, 'title_settings_field' ), __FILE__, 'cpa_section' ); // id, title, display cb, page, section
// Add Background Color Field
add_settings_field( 'cpa_bg_field', 'Background Color', array( $this, 'bg_settings_field' ), __FILE__, 'cpa_section' ); // id, title, display cb, page, section
// Register Settings
register_setting( __FILE__, 'cpa_settings_options', array( $this, 'validate_options' ) ); // option group, option name, sanitize cb
}
/**
* Functions that display the fields.
*/
public function title_settings_field() {
$val = ( isset( $this->options['title'] ) ) ? $this->options['title'] : '';
echo '<input type="text" name="cpa_settings_options[title]" value="' . $val . '" />';
}
public function bg_settings_field() {
$val = ( isset( $this->options['title'] ) ) ? $this->options['background'] : '';
echo '<input type="text" name="cpa_settings_options[background]" value="' . $val . '" class="cpa-color-picker" >';
}
步驟6
這個步驟的重點是驗證。下面的代碼顯示了如何在保存它們之前驗證這兩個領域。
/**
* Function that will validate all fields.
*/
public function validate_options( $fields ) {
$valid_fields = array();
// Validate Title Field
$title = trim( $fields['title'] );
$valid_fields['title'] = strip_tags( stripslashes( $title ) );
// Validate Background Color
$background = trim( $fields['background'] );
$background = strip_tags( stripslashes( $background ) );
// Check if is a valid hex color
if( FALSE === $this->check_color( $background ) ) {
// Set the error message
add_settings_error( 'cpa_settings_options', 'cpa_bg_error', 'Insert a valid color for Background', 'error' ); // $setting, $code, $message, $type
// Get the previous valid value
$valid_fields['background'] = $this->options['background'];
} else {
$valid_fields['background'] = $background;
}
return apply_filters( 'validate_options', $valid_fields, $fields);
}
/**
* Function that will check if value is a valid HEX color.
*/
public function check_color( $value ) {
if ( preg_match( '/^#[a-f0-9]{6}$/i', $value ) ) { // if user insert a HEX color with #
return true;
}
return false;
}
如果用戶試圖手動插入的顏色代碼，拾色器通知他或她，他/她已經鍵入的提交表單上的無效值；然而，顏色—— 盡管它可能是錯誤的——仍然會被保存。該check_color()?函數負責驗證輸入的顏色。
步驟7
這是最後壹步，我們將要引用我們自定義的 JavaScript 文件，用來在拾色器中轉換壹個簡單的文本字段。
/**
* Function that will add javascript file for Color Piker.
*/
public function enqueue_admin_js() {
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( 'jquery.custom.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ), '', true ?);
}
讓我們創建?jquery.custom.js?文件
(function( $ ) {
$(function() {
// Add Color Picker to all inputs that have 'color-field' class
$( '.cpa-color-picker' ).wpColorPicker();
});
})( jQuery );
如果您嘗試激活該插件，妳應該得到壹個儀表板頁面，如下所示的圖像中的所有字段：
小結
在本教程中，您學習了如何以引用WordPress拾色器。在插件演示中，我已經展示了如何整合拾色器到壹個真正的插件，當然，妳可以在 meta框、窗口小部件等等中使用這個 API。
拾色器可以在 WordPress3.5+ 中正常工作，但如果用戶有以前版本，代碼也將工作。請務必使用 check_color() 方法來驗證每壹種顏色輸入