Extendiendo los campos personalizados o custom fields en WordPress

En una entrada anterior vimos cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante, haciendo uso de meta_boxes para ordenar y recoger la meta información adicional de nuestros posts.

Ahora vamos a ir un paso más allá, extendiendo esta funcionalidad y mejorando la experiencia de usuario en la administración desde el back-end. No nos limitaremos a crear los campos personalizados como “cajitas de texto”, vamos a ver con un ejemplo práctico cómo ofrecer al usuario una administración más dinámica, flexible e intuitiva.

Crearemos 3 campos personalizados: imagen, fecha y color. Para el primero implementaremos un botón que nos permita seleccionar una imagen de nuestra librería multimedia. También añadiremos la funcionalidad de borrar imagen. Para el campo fecha ofreceremos un datepicker, para que el usuario pueda escoger una fecha en un calendario. Algo parecido para el campo color, en éste caso montaremos un colorpicker para la selección de color.

Sin lugar a dudas es más dinámico generar un botón que nos dé acceso a la librería multimedia, y que nos permita subir imágenes o seleccionarla de la biblioteca, que poner un input de tipo texto donde poder establecer la URL de la imagen.

Necesitaremos agregar un archivo custom-fields.js desde el functions.php así como las librerías datepicker y colorpicker (que incluye WordPress) al action admin_print_scripts:

También en el functions.php agregaremos las funciones necesarias para crear nuestros campos personalizados, como en el ejemplo que mencionábamos anteriormente:

En el caso del campo imagen comentar que lo que realmente vamos a almacenar en base de datos es el id de la imagen. Con la función wp_get_attachment_url($id) obtendremos su url y podremos mostrarla en una etiqueta imagen. También hacemos uso de una variable $display, que tendrá el valor “display:none” para que en el caso de no tener un ID de la imagen (es decir, la imagen no ha sido seleccionada aún), no nos muestre la etiqueta img ni el botón eliminar.

Y por último agregamos éste código en nuestro archivo custom-fields.js:

Como puede observarse, en el evento “on click” del botón con la clase custom_media_item_upload abrimos la librería multimedia. Por medio de jQuery establecemos los valores id en el input custom_field_image, url en la etiqueta imagen, mostramos la etiqueta imagen con el método show(), así como el botón eliminar.

campo personalizado imagen

También realizamos acciones en el evento on click del botón eliminar, en este caso vaciamos los valores del atributo src de la imagen, del input custom_field_image, y con el método hide() ocultamos la etiqueta imagen y el propio botón de eliminar.

En cuanto al datepicker, podemos establecer una serie de valores como el primer día de la semana, los nombre de los días de la semana en nuestro idioma, así como el de los meses, y el formato de la fecha.

campo personalizado fecha

El colorpicker lo inicializamos también para el input que tiene la clase color_picker. Acepta una serie de opciones: color por defecto, si está oculto al inicio, o si tiene una paleta de colores más frecuentes en la parte inferior, así como dos funciones de callback.

campo personalizado color

 

Con este práctico ejemplo hemos visto cómo mejorar la experiencia de usuario en la administración de campos de entrada personalizados desde el back-end. En cualquier desarrollo a medida es primordial éste tipo de funcionalidad que aunque se tarde un poco más en desarrollar, nos hace ganar tiempo y ser más eficaces en la administración de nuestra web.

Si te ha gustado, valora este artículo para mejorar la calidad del blog o compártelo en Redes Sociales…
1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, valoración 5,00 sobre 5) Loading...

Web Hosting