WordPress 3.5 Color Picker: aprende a usarlo en tus plugins

¿Te has fijado en el nuevo selector de color que hay en WordPress 3.5? Está genial, ¿Verdad? Sobre todo porque, hasta ahora, si no usas Google Chrome, la etiqueta de HTML 5 <input type=»color»> no es muy útil. ¿Te gustaría poder usarlo en tus plugins? Pues entonces, ¿A qué estamos esperando? Hoy aprenderemos a implementar el nuevo WordPress 3.5 Color Picker.

WordPress 3.5 Color Picker

Este pequeño addon que incorpora la nueva versión de WordPress lo podemos implantar en tres pequeños pasos. Recordad que estamos trabajando con la versión 3.5 de WordPress, que incorpora dependencias que vamos a necesitar. Y si vuestros usuarios utilizan Internet Explorer 7, o anterior a este, me temo que no podemos hacer nada por ellos, y verán un input text de toda la vida (con toda su funcionalidad… antigua: la de escribir un texto). A partir de IE 8 sí veremos funcionar nuestro Color Picker.

Si necesitáis comprobar la versión de WordPress, en esta entrada os ayudamos a encontrarla: Comprobar la versión de WordPress desde nuestros plugins.

Paso 1: Importando los scripts.

Lo primero es añadir a la lista de scripts que carga el administrador un pequeño archivo js desde el que llamaremos al script de WordPress 3.5 Color Picker. Algo tal que así:

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

Como véis, hemos añadido un my-script.js que depende de wp-color-picker. Ahora, WordPress cargará nuestro script junto con el resto de scripts en el administrador.

Paso 2: Clases en el html

Evidentemente, si estamos hablando de Javascript y de HTML, significa que vamos a interactuar por medio de clases o IDs. En este caso, clases. Nuestros input deben quedar tal que así.

<input type="text" class="mi-plugin-color-field" value="#000000" />

Podemos definir un color por defecto:

<input type="text" class="mi-plugin-color-field" data-default-color="#000000" value="#000000" />

Añadimos el nombre de clase que nos apetezca para nuestro plugin. Luego lo usaremos en el archivo Javascript, así que no lo perdáis de vista.

Por supuesto, si estamos en un formulario de opciones, recordad controlar los atributos name, id, value… en consecuencia con los campos que se guardan y con los datos ya existentes.

Paso 3: La magia de jQuery

Ahora tenemos que abrir el archivo mi-script.js que hemos creado anteriormente. Simplemente con este código, ya debería funcionar nuestro selector de color.

jQuery(document).ready(function($){
    $('.mi-plugin-color-field').wpColorPicker();
});

Tan simple como ejecutar la función wpColorPicker en la clase .mi-plugin-color-field. La mayoría de las veces habríamos acabado aquí, ya que con las opciones por defecto se convierte en una herramienta muy útil. Pero si quieres modificarlas, en el siguiente paso opcional tenemos algunos atributos.

Paso Extra: Añadiendo algunas opciones extra

Estas son algunas opciones que ofrece el plugin para configurarlo. Podemos establecer un color por defecto, funciones que se ejecutan cuando introducimos un color correcto o incorrecto, esconder el selector de color, o mostrar ciertos colores comunes. Reemplazamos el código del paso 3 por este otro:

jQuery(document).ready(function($){
	var opciones = {
	    // Podemos declarar un color por defecto aquí
	    // o en el atributo del input data-default-color
	    defaultColor: false,
	    // llamada que se lanzará cuando el input tenga un color válido
	    change: function(event, ui){},
	    // llamada que se lanzará cuando el input tenga un color no válido
	    clear: function() {},
	    // esconde los controles del Color Picker al cargar
	    hide: true,
	    // muestra un grupo de colores comunes debajo del selector
	    // o suministra de una gama de colores para poder personalizar más aun.
	    palettes: true
	};
    $('.mi-plugin-color-field').wpColorPicker(opciones);
});

Y con esto debería ser suficiente para que todo funcione. Ya sabemos implementar el nuevo WordPress 3.5 Color Picker. Si queréis más información, siempre podéis consultar el Codex, o el artículo original de este tutorial (en inglés).

Esperamos que os sea de utilidad.

«El buen código es su mejor documentación»
– Steve McConnell

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 3,00 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.



Aún no hay comentarios en esta entrada. ¿Te animas?