Seleccionar página

colorpickerDesde WordPress 3.5, en algunas configuraciones internas se puede seleccionar el color usando una herramienta que llamamos “Color Picker” (Selector de color). Se trata de un botón que, al pulsarlo, despliega un completo selector de colores. No importa que navegador uses (salvo IE, pues esto solo funciona a partir de IE8), el Color Picker es compatible con todos, a diferencia de la etiqueta <input type=”color”> de HTML5, que aun no está totalmente implementada en todos los navegadores.

Sería ideal poder usarlo en nuestros propios plugins o themes, ¿Cierto? Vamos a verlo paso a paso. Es muy simple de implementar.

Lo primero que tenemos que tener en cuenta es que sólo funcionará si nuestra versión de WordPress es 3.5 o superior. Tras ello, vamos a nuestro plugin o al archivo functions.php de nuestro theme, y añadimos los scripts que vamos a utilizar:

Es decir… Cargamos jQuery, cargamos el estilo wp-color-picker (que viene con WordPress) y cargamos un nuevo script que creamos en este momento, llamado mi-script (o como queráis llamarlo, pero aseguraos que la ruta está bien escrita, con plugins_url para plugins, o si estamos en un theme, con get_template_directory_uri() seguido de la ruta donde esté el archivo js), y le decimos que depende del script wp-color-picker (incluido en un array después de la ruta js), para que lo cargue justo antes.

Añadimos la accion al admin_enqueue_scripts, porque lo vamos a usar en el administrador de WordPress.

Por otro lado, estaremos preparando una vista HTML del formulario de opciones en el que van a aparecer nuestros botones. Los ColorPicker se construyen a partir de un input de tipo texto, y lo que nos interesa es establecer el atributo class de dicho input, ya que será nuestra forma de identificar los inputs que deben convertirse en Color Picker. Por ejemplo, podemos llamarlo, en un alarde de originalidad, “colorpicker”:

He puesto dos para recordar algo bastante obvio, pero que a veces se nos pasa. Si necesitamos dos (o más) selectores de colores, la clase debe ser la misma, ¡Pero el atributo name no! Luego en los formularios, cada input tiene su atributo name para guardar su información.

Nos queda un último paso. Abrimos el archivo js que hemos creado antes, y escribimos algo como esto:

Ya con esto deben funcionar todos los Color Picker que hayamos creado. Podemos establecer una serie de opciones extra, como color por defecto, llamadas cuando el input tenga un color válido o no, etc… Todo esto es opcional, solo con lo de arriba ya funciona perfectamente.

Listo. ¡A llenar de colores nuestras opciones!

“El buen código es su mejor documentación”
.- Steve McConnell