Выбора цвета в 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 Color Selection
 * Description: Demonstration of Iris color picker integration
 * Version: 1.0
 * Author: Kama
 * Author URI: http://wp-kama.ru
 */

class irisDemo {

	function __construct() {
		add_action( 'admin_init', [ $this, 'init' ] );
		add_action( 'admin_menu', [ $this, 'add_options_page' ] );
		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
	}

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

	function add_options_page() {
		add_options_page(
			'Iris Color Picker Demonstration',
			'Iris Demo',
			'manage_options',
			'iris_color_pick',
			[ $this, 'options' ]
		);
	}

	/**
	 * Settings page
	 */
	function options() {
		?>
		<div class="wrap">
			<h2><?= 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="<?= esc_attr( $options['link_color'] ?? '' ) ?>">
				</p>
				<?php submit_button();?>
			</form>
		</div>
		<?php
	}

	/**
	 * Load styles and scripts
	 */
	function enqueue_scripts( $hook ) {
		// Make sure this is the settings page of our plugin
		if( 'settings_page_'.'iris_color_pick' != $hook ){
			return;
		}

		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );

		// connect our style
		// wp_enqueue_script( 'script_123', plugins_url( 'script.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ), false, 1 );
		add_action( 'admin_footer', [ $this, 'admin_footer_script' ], 99 );
	}

	/**
	 * Connect our script in the footer
	 */
	function admin_footer_script() {
		?>
		<script>
			jQuery( document ).ready( function( $ ){
				$( '.iris_color' ).wpColorPicker( {
					// sets the default color, the default color is also taken from the value attribute of the input
					defaultColor: false,
					// callback function that triggers every time a color is selected
					// when you move the mouse over the palette
					change: function( event, ui ){},
					// callback function triggered when clearing the color
					clear: function(){},
					// hide the color selection on load
					// the palette will appear when clicked
					hide: false,
					// show the group of standard colors at the bottom of the palette
					// you can add your own colors by specifying them in the array: ['#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 );

}