Вибір кольору в 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
Автор: 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 );

}