Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins

Cómo usar la API Color Picker de WordPress

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Cuando el equipo de WordPress lanza una nueva versión, introducen algunas nuevas características no solo para los usuarios sino también para los desarrolladores. WordPress ofrece un montón de herramientas que hacen que sea fácil desarrollar nuevos fantásticos temas o plugins.

Una de las últimas APIs disponibles para los desarrolladores de WordPress es el nuevo Color Picker; esta característica permite sustituir el campo estándar de texto por un selector de color agradable y amigable para el usuario.

En este tutorial, voy a mostrarte como añadir el selector de color dentro de tu proyecto WordPress. Empecemos.


Por qué puede ser útil

Existen algunas razones interesantes del porque los desarrolladores deberían implementar opciones de color usando la nueva API de selección de color:

Para los usuarios

  • Proporciona una forma más rápida y sencilla de seleccionar un color.
  • Los usuarios no se tienen que preocupar sobre qué formato de color deben escribir, hexadecimal, RGB, etc.
  • Hablando en términos generales, proporciona en conjunto una mejor experiencia de usuario.

Para los desarrolladores

  • Las páginas de tu escritorio se integrarán con la interfaz de usuario de WordPress.
  • Proporciona una validación de entrada más sencilla para el campo de color.
  • Da como resultado un producto final más profesional porque está usando los controles nativos.

Tras cubrir algunos de los principales aspectos del Selector de color de WordPress, añadámoslo dentro de nuestro plugin o tema.


Incluir recursos del Selector de color

Antes de continuar, tengo que especificar que la API del Color Picker fue introducida en la versión 3.5 de WordPress de manera que para continuar con este tutorial, asegúrate de haber instalado la versión 3.5 o posterior.

Para añadir el selector de color, simplemente incluye un archivo jQuery y un archivo de hoja de estilos. Las siguientes líneas de código te muestran cómo hacer esto.

Observa que cuando hayamos incluido el archivo custom-script.js con la dependencia wp-color-picker. Ahora puedes aplicar el selector de color a tus campos de texto dentro de tu archivo jQuery.


Crear un plugin que use el selector de color de WordPress

En este punto, es el momento de mostrar cómo integrar el Selector de color en un plugin real.

Aquí tienes lo que vamos a cubrir:

  • Cómo añadir una página de opción al escritorio que simule la página de ajustes del tema.
  • Cómo añadir los campos de ajustes preparados para el Selector de color.
  • Cómo validar y guardar los datos de entrada.

Paso 1

Una vez hayas colocado tu plugin dentro de tu carpeta wp-content/plugins de WordPress estaremos preparados para empezar. La siguiente imagen muestra como hemos estructurado el plugin para este tutorial.

Estructura del plugin

Paso 2

Dentro del archivo color-picker-plugin.php, escribe los comentarios con la información del plugin y crea una nueva clase denominada CPA_Theme_Options. El siguiente código muestra todos los métodos de clase que vamos a implementar paso a paso.

Paso 3

Primero, implementemos la clase del constructor. El código siguiente muestra qué hará el plugin cuando una nueva instancia sea creada.

Hará lo siguiente:

  • Añadirá una nueva página de opciones dentro de la sección de Ajustes de tu menú de administración
  • Registrará campos de ajuste dentro de la página de opciones
  • Añadirá una hoja de estilos CSS para el Selector de color de WordPress
  • Añadirá un archivo JavaScript personalizado que invoque el Selector de color
  • Establecerá el atributo options con los ajustes guardados

Paso 4

El siguiente paso cubre cómo añadir la página de opciones y cómo mostrarla.

Observa que ya hemos escrito, dentro del método display_page(), el código que añadirá el formulario, los campos y el botón de envío para registrar las opciones de la página.

Paso 5

En este paso vamos a implementar los métodos que registrarán y mostrarán dos campos de ajuste: el campo Título del blog y el campo Color de fondo. Ambos campos pertenecen a la sección Opciones del tema.

Paso 6

Estos pasos se centran en la validación. El siguiente código muestra cómo validar los dos campos antes de guardarlos.

Si el usuario intenta insertar el código de color manualmente, el Selector de color le notificará que ha tecleado un valor incorrecto en el formulario de envío; sin embargo, el color, aunque sea erróneo, se guardará. La función check_color se ocupa de validar la entrada de color.

Paso 7

Este es el paso final en donde vamos a incluir nuestro archivo JavaScript que convertirá un simple campo de texto en un útil selector de color.

Creemos el archivo jquery.custom.js.

Si intentas activar el plugin, deberías obtener una página en el escritorio con todos los campos como se muestra en la imagen inferior:

Página de administración final

¡Eso es todo!

En este tutorial, has aprendido cómo incluir el Selector de color proporcionado por WordPress. En la demostración del plugin he mostrado cómo puedes integrar el selector de color en un plugin real pero puedes usar la API en donde necesites como un metabox, un widget, etc.

El Selector de color funciona en la versión 3.5 y superiores de WordPress, pero si un usuario tiene una versión anterior tu código funcionará. Asegúrate de validar cada entrada de color usando el método check_color() que se muestra en el Paso 6.

Ahora tus plugins o temas serán más potentes y amigables para el usuario.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.