Incluir el ‘Color Picker’ en tu theme WordPress

Desde la versión 3.5, WordPress permite que utilices una pequeña pero útil herramienta, Color Picker, en tus desarrollos. Color Picker te permite, básicamente, escoger un color en el panel de administración del back-end de WordPress.

En el anterior artículo Selección de imágenes de la biblioteca de medios de WP, vimos cómo podíamos seleccionar una imagen de nuestra propia biblioteca de medios, para utilizarla posteriormente en el front-end de nuestro sitio.

Siempre que se pueda, es mejor aprovechar los recursos que te pone a tu alcance el núcleo de WordPress, para evitar el uso de plugins que aumenten la carga de la página y que te obliguen a estar al tanto de las actualizaciones, incompatibilidades, etc.

Como ya comenté al presentar mi tema Minority, los artículos de la serie ‘Temas WordPress’ seguirían a medida que me salieran temas interesantes que tratar, al estar desarrollando ya otro tema nuevo, Ancora.

Bien, buscando cómo integrar un selector de color en mi nuevo panel de administración, encontré un interesante artículo de Michele Ivani, How to Use WordPress Color Picker API, el cual me dio las pautas para instalarlo.

 

Porqué utilizar Color Picker

Michele enumera las ventajas tanto para usuarios como para desarrolladores del uso de Color Picker, con las que estoy completamente de acuerdo.

Para usuarios

  • Provee un sistema muy sencillo y rápido para seleccionar un color.
  • Hace que el usuario no se deba preocupar del formato en que se introduce el código del color.
  • Genera lo que en programación se llama una mejor experiencia del usuario.

Para desarrolladores

  • Tus páginas de ajustes se integrarán mejor con el entorno del panel de administración de WordPress.
  • Provee una fácil validación de la entrada del código del color.
  • Da un aspecto más profesional a nuestro desarrollo.

 

Añadir Color Picker a nuestro theme

Michele, en su post, lo integra como plugin, pero hacerlo en un tema no tiene mayor misterio.

Lo primero que tenemos que hacer es crear, en el subdirectorio de archivos JavaScript de nuestro tema, un archivo con el siguiente contenido:

Este archivo lo denominamos como queramos, yo en mi caso mi-script.js.

Ahora, debemos añadir el script y el estilo del control. Esto lo hacemos incluyendo las siguientes sentencias:

La pregunta es ¿dónde?. La respuesta es bien sencilla, allí donde vayas a utilizar el control Color Picker.

En mi caso, yo lo utilizo en la función que me crea un submenú en la administración de WordPress, y que llamo mediante la función

La función que llama es

function stmancora_funcion_pagina_inicio()

Bien, pues justo en el inicio de la función añadimos las dos líneas que os he indicado anteriormente.

Finalmente, para utilizar el control debemos indicar la clase my-color-field en el input:

Obteniendo el resultado deseado:

color-picker

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *