Si trabajas con WordPress y realizas desarrollos de plugins o temas para esta plataforma CMS, sabes que normalmente, además de la parte visual que ve el usuario cuando visita la web, cualquier plugin o tema tiene una parte de configuración o administración, la cual se realiza desde la parte administrativa de WordPress.
A esto normalmente lo llamamos back-end, y es la parte, que aunque no es visible por el usuario, forma parte del plugin o tema que estemos desarrollando, y es donde se realiza su gestión y configuración.
Pues bien, cuando desarrollamos la parte de administración de nuestro plugin o tema, es posible que en algún momento te haga falta un selector de color, o también llamado WP Color Picker. Este no es más que un objeto web que, al pinchar sobre él, muestra la gama de colores, posibilitando el seleccionar uno de ellos de forma directa sobre el lienzo, o también mediante su código RGB.
Esto facilita mucho las cosas, ya que no es lo mismo tener que introducir directamente un código RGB en hexadecimal en un campo de texto, que seleccionar de una paleta de colores el color que más nos guste. Por lo que para ello, vamos a usar el selector de color.
La forma de añadir un selector de color a una página de administración de tu plugin o tema de WordPress es bastante sencillo. En primer lugar, solo tienes que añadir a la cola de estilos y scripts el estilo y script ‘wp-color-picker‘, de la siguiente forma:
1 2 | wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'wp-color-picker' ); |
Posteriormente, donde quieras usar un selector de color, añade una etiqueta input de tipo texto tal que así:
1 | <input type="text" class="colorPicker" name="mi_color" value="" data-default-color="#e5e5e5" /> |
Como puedes ver, asignamos una clase a este elemento, que hemos llamado ‘colorPicker‘. Hemos usado este nombre por claridad, pero puedes usar el nombre que quieras, siempre que en el paso siguiente uses el mismo.
Otro de los campos a tener en cuenta es ‘data-default-color‘ que indica el color que, por defecto, tomará el WP Color Picker.
Para terminar, tendrás que realizar una llamada, mediante jQuery, dentro de una etiqueta de script, de la siguiente forma:
1 2 3 4 5 | <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.colorPicker').wpColorPicker(); }); </script> |
Donde colorPicker indica la clase que hemos asignado al elemento input que hemos creado anteriormente.
Una vez hecho esto, si abres la página que estés desarrollando, verás que donde debería estar el elemento input que has creado anteriormente, se muestra un selector de color o WP Color Picker. Si pinchas sobre él, se desplegará una paleta de colores desde la cual puedes elegir el color que quieras, y cuyo valor se guardará en el atributo value del elemento input creado con anterioridad.
De esta forma puedes añadir a la parte de gestión o administración de cualquier tema o plugin que estés creando, un selector de color, evitándote así tener que estar trabajando con códigos RGB hexadecimales que a primera vista pueden no darte una idea de qué color se trata.
2 pensamientos sobre “Cómo usar un selector de color, o WP Color Picker, en la administración de WordPress”
Hola, actualicé mi wordpress y el cuadro conde se escribe el hexadecimal desaparecio lo que me ha costado muchos problemas, saben de como hacer aparecer de nuevo ese cuadro si pueden ayudarme con esa informacion lo agradezco, saludos
Hola Cesar. Puede que sea alguna incompatibilidad con alguno de los plugins que tengas instalados. El selector de color que comentas, ¿es de algún plugin o de algún tema? Quizás ese tema o plugin no están actualizados a la versión que tienes de WordPress y pueden tener algún bug.