Añadir color picker en WordPress

Antes de WordPress 3.5 era necesario añadir manualmente los archivos js y css de algún color picker existente para integrarlo en nuestro tema o en nuestro plugin. Desde WordPress 3.5 se incluye un nuevo color picker denominado como iris. El nuevo color picker fue originalmente desarrollado para poder definir colores personalizados. El color picker de WordPress utiliza gradientes CSS3 para todo, es bonito, fácil de usar y además se integra muy bien con cualquier cosa que hayamos creado.

Agregar color picker a WordPress usando iris wp Color Picker

Los desarrolladores de temas y de plugins pueden utilizar el nuevo color picker para agregar la funcionalidad de seleccionar colores a sus campos personalizados de opciones o a la interfaz de su tema. Vamos a ver cómo agregarlo tanto a la interfaz de nuestro tema como a una página de opciones de nuestro plugin.

Añadir wp-color-picker a la interfaz de nuestro tema

1. Lo primero que tenemos que hacer es añadir los archivos css y js mediante una función que podemos incluir en el archivo functions.php de nuestro tema.

function colpick_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'));
  wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n );
}
add_action('wp_enqueue_scripts', 'colpick_scripts', 100);

2. Seguidamente, tenemos que llamar al método de color picker para que los campos input pasen a ser de selección de color. Podemos asignar una clase a todos los métodos de este tipo. Incluiremos el código javascript para realizar esta tarea en un archivo localizado en  js/functions.js, manualmente en la cabecera de nuestro tema o en otro archivo que prefiramos, siempre y cuando el código esté presente cuando también lo esté un campo de selección de color .

(function ($) {
   $(function () {
      $('.mi-clase-de-ejemplo').wpColorPicker();
   });
}(jQuery));

3. Como podréis deducir, el último paso consiste en crear un campo input con la clase  mi-clase-de-ejemplo asociada.

<input type="text" class="mi-clase-de-ejemplo" value="#e9e9e9" >

Añadir wp-color-picker al panel de administración de WordPress

1. Agregamos los archivos js y css de wp-color-picker a nuestro plugin.

function color_picker_assets($hook_suffix) {
   wp_enqueue_style( 'wp-color-picker' );
   wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
add_action( 'admin_enqueue_scripts', 'color_picker_assets' );

2. Colocamos el código javascript al igual que antes, que podemos incluir en un archivo .js o en el el archivo principal php de nuestro plugin. De este modo, todos los elementos con la clase «mi-clase-de-ejemplo» asociada, serán selectores de color.

(function ($) {
  $(function () {
    $('.mi-clase-de-ejemplo').wpColorPicker();
  });
}(jQuery));

3. Agregamos la clase «mi-clase-de-ejemplo» a algún campo input en una página de nuestro panel de administración.

<input type="text" class="mi-clase-de-ejemplo" value="#e9e9e9" >

Como veis, es muy sencillo agregar un selector de color. Existen muchas opciones para personalizar el selector, pero hablaremos de ellas más adelante.

---