Выбора цвета в WordPress: Iris Color Picker

С версии 3.5. в WordPress был измен скрипт выбора цвета с Farbtastic на Iris (Айрис). Особенность этого скрипта в том, что в его коде используется CSS3 градиенты, поэтому палитра, кроме прочих преимуществ, отлично отображается на HiDPI (Retina) экранах. В этой заметке я покажу, как подключать и использовать родной скрипт WordPress для выбора цвета админ-панели при создании плагинов и на страницах сайта (фронт-энде). Это не сложно.

Подключение Color Picker в админке

Чтобы подключить выбор цвета Iris к полям формы при написании плагина, нужно выполнить 3 действия:

#1 Добавить стили и скрипты wp-color-picker

Используя событие admin_enqueue_scripts, нужно подключить скрипт и стили "wp-color-picker". Также тут подключим свой js файл:

# Подключаем Iris Color Picker 
add_action( 'admin_enqueue_scripts', 'add_admin_iris_scripts' );
function add_admin_iris_scripts( $hook ){
	// подключаем IRIS
	wp_enqueue_script( 'wp-color-picker' );
	wp_enqueue_style( 'wp-color-picker' );

	// подключаем свой файл скрипта
	wp_enqueue_script( 'plugin-script', plugins_url('js/plugin-script.js', __FILE__), array('wp-color-picker'), false, 1 );
}

#2 Добавить поля формы

Далее, на странице настроек плагина, в форме, используем такие поля ввода для цвета:

<input name="color1" type="text" value="" />
<input name="color2" type="text" value="#f19" />

Если указать значение поля (атрибут value), то Iris возьмет это значение в качестве цвета по умолчанию.

#3 Подключить Iris к полям формы

Далее мы должны создать файл JS, который подключается в первом пункте. Свой файл скрипта будет иметь такой код:

jQuery(document).ready( function($){
	$('input[name*="color"]').wpColorPicker();
});

В этом файле мы подключаем Iris ко всем полям формы, в значении атрибута name которых есть строка color: name="color1", name="my_color".

Настройки метода wpColorPicker()

Метод wpColorPicker() может принимать параметры, с помощью которых можно настроить выбора цвета. Например, если нужно во время выбора цвета производить какие-то действия. Вот список всех параметров, которые может принимать функция:

var myOptions = {
	// устанавливает цвет по умолчанию, также цвет по умолчанию
	// берется из атрибута value у input. Значение input приоритетнее
	defaultColor: false,

	// функция обратного вызова, срабатывающая каждый раз 
	// при выборе цвета (когда водите мышкой по палитре)
	change: function(event, ui){ },

	// функция обратного вызова, срабатывающая при очистке (сбросе) цвета
	clear: function(){ },

	// спрятать ли выбор цвета при загрузке (палитра будет появляться при клике)
	hide: false,

	// показывать ли группу стандартных цветов внизу палитры
	// можно добавить свои цвета указав их в массиве: 
	// ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f']
	palettes: true

};

$('.iris_color').wpColorPicker( myOptions );

Демо плагин

Чтобы наглядно показать первые три пункта, я написал небольшой плагин, который добавляет страницу настроек в админ-панель. На странице всего одно поле - выбор цвета. Вот что получается в результате работы плагина:

Код плагина:

<?php
/*
Plugin Name: Выбор цвета Iris
Description: Демонстрация подключения Iris color picker
Version: 1.0
Author: Kama
Author URI: http://wp-kama.ru
*/

class irisDemo {
	function __construct(){
		add_action( 'admin_init', array( $this, 'init') );
		add_action( 'admin_menu', array( $this, 'add_options_page') );
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts') );
	}

	function init(){
		register_setting( 'iris_options', 'iris_options' );
	}

	function add_options_page(){
		add_options_page( 'Демонстрация Iris Color Picker', 'Демо Iris', 'manage_options', 'iris_color_pick', array( $this, 'options') );
	}

	/**
	 * Страница настроек
	 */
	function options(){
		?>
		<div class="wrap">
			<h2><?php echo get_admin_page_title() ?></h2>
			<form method="post" action="options.php">
	<?php settings_fields( 'iris_options' ); ?>
	<?php $options = get_option( 'iris_options' );?>
	<p>
	<input class="iris_color" name="iris_options[link_color]" id="link-color" type="text" value="<?php echo $options['link_color']; ?>">
	</p>
	<?php submit_button();?>
			</form>
		</div>
		<?php
	}

	/**
	 * Подгружаем стили и скрипты
	 */
	function enqueue_scripts( $hook ) {
		// Убедимся, что это страница настроек нашего плагина
		if( 'settings_page_'.'iris_color_pick' != $hook )
			return;
			wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );
		// подключаем свой стиль
		// wp_enqueue_script( 'script_123', plugins_url( 'script.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ), false, 1 );
		add_action( 'admin_footer', array( $this, 'admin_footer_script'), 99 );
	}

	/**
	 * Подключаем свой скрпит в подвал
	 */
	function admin_footer_script(){
		?>
		<script type="text/javascript">
		jQuery(document).ready(function($){
			$('.iris_color').wpColorPicker({
	// устанавливает цвет по умолчанию, также цвет по умолчанию
	// из атрибута value у input
	defaultColor: false,
	// функция обратного вызова, срабатывающая каждый раз 
	//при выборе цвета (когда водите мышкой по палитре)
	change: function(event, ui){ },
	// функция обратного вызова, срабатывающая при очистке (сбросе) цвета
	clear: function(){ },
	// спрятать ли выбор цвета при загрузке
	// палитра будет появляться при клике
	hide: false,
	// показывать ли группу стандартных цветов внизу палитры
	// можно добавить свои цвета указав их в массиве: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f']
	palettes: true
			});
		});
		</script>
		<?php
	}

}

new irisDemo();
?>

Подключение во фронт-энде

Чтобы использовать выбор цвета Iris во фронт-энде (в лицевой части сайта), нужно подключить все необходимые для работы скрипта jQuery расширения, это: 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch'.

Данное решение я нашел здесь, не уверен что это лучший способ заставить работать Iris Color Picker во фронт-энде, но этот способ работает (проверил). Для работы скрипта нужно подключить элементы jQuery UI и указать глобальную переменную js - wpColorPickerL10n:

add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );
function wpa82718_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(
		'wp-color-picker',
		admin_url( 'js/color-picker.min.js' ),
		array( 'iris' ),
		false,
		1
	);
	$colorpicker_l10n = array(
		'clear' => __( 'Clear' ),
		'defaultString' => __( 'Default' ),
		'pick' => __( 'Select Color' ),
		'current' => __( 'Current Color' )
	);
	wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}