Выбора цвета в 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 );
wpColorPicker() - это обертка WordPress для основного скрипта Iris. Обертка нужна для того, чтобы если в будущем появится скрипт получше, его легко можно было заменить. Однако, если вам нужны какие-либо дополнительные настройки, просто используйте метод iris()
вместо wpColorPicker()
и у вас появится возможность использовать все настройки iris.
Демо плагин
Чтобы наглядно показать первые три пункта, я написал небольшой плагин, который добавляет страницу настроек в админ-панель. На странице всего одно поле - выбор цвета. Вот что получается в результате работы плагина:
Код плагина:
<?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 ); }