Выбор цвета в WordPress: Интеграция пикера цветов Iris

# Выбор цвета в WordPress: Пикер цветов Iris

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

## Содержание

- Подключение пикера цветов в админ-панели
- Настройки метода wpColorPicker()
- Демонстрация плагина
- Интеграция на фронтенде

## Подключение пикера цветов в админ-панели

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

### Шаг 1: Добавление стилей и скриптов wp-color-picker

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

```php
// Подключаем пикер цветов Iris
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: Добавление полей формы

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

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

Шаг 3: Подключение Iris к полям формы

Теперь создайте файл JS, который был подключен на первом шаге. В этом файле будет такой код:

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

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

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

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

var myOptions = {
    defaultColor: false, // Устанавливает цвет по умолчанию, который также берется из атрибута value поля ввода
    change: function(event, ui) { }, // Функция, срабатывающая каждый раз при выборе цвета
    clear: function() { }, // Функция, срабатывающая при очистке цвета
    hide: false, // Скрыть выбор цвета при загрузке (палитра появится при клике)
    palettes: true // Показать группу стандартных цветов внизу палитры
};

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

wpColorPicker() — это обертка WordPress для основного скрипта Iris. Она нужна для удобства замены на другую библиотеку в будущем. Однако, если вам нужны дополнительные настройки, просто используйте метод iris() вместо wpColorPicker().

Демонстрация плагина

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

Код плагина:

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' => __( 'Очистить' ),
        'defaultString' => __( 'По умолчанию' ),
        'pick' => __( 'Выбрать цвет' ),
        'current' => __( 'Текущий цвет' )
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n );
}