Advertisement
  1. Code
  2. Creative Coding

Cómo añadir campos personalizados a los archivos adjuntos

Scroll to top
Read Time: 10 min

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

Deberías estar familiarizado con los campos personalizados en WordPress. Los usamos en una entrada o una página para añadir datos adicionales. En WordPress los archivos adjuntos también se guardan como posts, por lo que los campos personalizados están disponibles para ellos también.

Hoy veremos cómo podemos añadir algunos campos personalizados para que los archivos adjuntos puedan incluir más información que tan solo los datos predeterminados.


Lo que haremos

En primer lugar, vamos a crear un plugin para manejar los campos personalizados de los archivos adjuntos. Obtendrás un conjunto de opciones, las transformarás para que formen parte del formulario cuando editemos un archivo adjunto y las guardaremos en la base de datos.

Para esto, usaremos dos ganchos de WordPress:


1. Crea el plugin

Voy a explicar rápidamente en esta parte, ya que no es el propósito principal de este tutorial.

Crea una nueva carpeta "media-fields" en el directorio plugins (wp-content/plugins/media-fields/, por ejemplo) y coloca dentro un archivo (llamado plugin.php). También vamos a poner un archivo llamado custom_media_fields.php que mantendrá nuestras opciones.

Este es el aspecto que debería tener tu archivo plugin.php al principio:

Esta es la base, la cual rellenaremos en las siguientes secciones. Por ahora, vamos a definir nuestro conjunto de opciones.


2. Definir nuestras opciones

En el otro archivo, añadiremos algunas opciones para mejorar el formulario de edición de los datos adjuntos. Consideraremos, para este tutorial, opciones para mejorar las imágenes. Por ejemplo, añadiremos campos para los derechos de autor, descripción del autor, marca de agua, valoración y disposición de imágenes.

Es básicamente una matriz asociativa que contiene los siguientes parámetros:

  • label - el nombre del campo que se mostrará
  • input - el tipo de campo de entrada (por ejemplo, texto, selección, radio, ...)
  • helps - información para ayudar al usuario a rellenar el campo
  • application - a que tipo de mime de archivo adjunto se aplicará
  • exclusions - que tipo de mime de adjunto excluir
  • required - ¿será un campo requerido? (valor predeterminado false)
  • error_text - campo opcional para describir el error (si es necesario se establece en true)
  • options - campo opcional para los tipos de campo de radio y de selección
  • show_in_modal - si se muestra el campo en modal o no (valor predeterminado true)
  • show_in_edit - si se muestra el campo en la forma de visualización de edición clásica o no (valor predeterminado true)
  • extra_rows - filas adicionales para mostrar contenido (dentro de la misma etiqueta "tr")
  • tr - filas adicionales (etiqueta "tr")

Las opciones destacadas representan opciones con las que trabajaremos manualmente, mientras que otras son opciones predeterminadas que WordPress procesará automáticamente.

Como estamos tratando con imágenes, establecemos el parámetro application en "image". En realidad se aplicará a todo tipo de imágenes cuyo tipo mimo comience con "image" como image/jpeg, image/png y así sucesivamente. Podrías excluir el tipo de mime gif estableciéndolo en el campo exclusiones, por ejemplo.

Ahora nuestras opciones están establecidas, vamos a profundizar en los ganchos.


3. Los ganchos

Como se mencionó anteriormente, trabajaremos con dos ganchos.

Enlazamos nuestras dos funciones a esos ganchos con el método constructor.

Veamos ahora esos ganchos en detalle.

attachment_fields_to_edit

Tiene dos parámetros:

  1. $form_fields - Una matriz de campos contenidos en el formulario de edición de los adjuntos
  2. $post - Objeto que representa el propio archivo adjunto

Usaremos el parámetro $form_fields para combinar nuestros propios campos y comprobar cada uno de ellos con los requisitos de los adjuntos (con el tipo mime, por ejemplo).

En este paso, deberías tener el formulario de edición de adjuntos mejorado con los nuevos campos que hemos añadido. Pero se verán como campos de entrada de texto. Ahora tenemos que considerar diferentes tipos de campos de entrada (radio, casilla de verificación, etc...).

Así que vamos a editar nuestra función para manejar esto. Reemplaza $values['input'] = 'text'; con el siguiente código:

Ahora, podemos crear elementos HTML comunes. Echemos un vistazo a nuestro formulario de edición de archivos adjuntos. Debería tener este aspecto:

Attachment edit form with custom fieldsAttachment edit form with custom fieldsAttachment edit form with custom fields
Formulario de edición de datos adjuntos con campos personalizados

Los campos personalizados, dependiendo de si estableces tus opciones modales en true o no, también aparecerán en el formulario modal de medios al editar un post.

Custom fields in modalCustom fields in modalCustom fields in modal
Campos personalizados en modal

Ahora nuestros campos se muestran en nuestro formulario de edición de archivos adjuntos, tenemos que guardarlos en la base de datos. Para esto, vamos a usar el segundo gancho.

attachment_fields_to_save

Este gancho también tiene dos parámetros:

  1. $post - array que representa la entidad del dato adjunto
  2. $attachment - contiene todos los campos adjuntados al post de adjuntos

Ahora, vamos a rellenar la función saveFields que dejamos en la sección anterior.

Ok, ahora nuestros campos personalizados se guardan en la base de datos y estarán disponibles para el front-end.

  • Ten cuidado al manipular el parámetro post en ambos ganchos. Es un objeto (object) en el primero y una matriz (array) en el segundo.
  • Consejo: el update_post_meta creará la meta si no existe.
  • Consejo: Prefijamos la clave del campo personalizado con un guión bajo "_" de manera que no aparezcan en los metaboxes de los campos personalizados en las páginas de edición de las entradas.

Consideraciones de error

A partir de la versión 3.5, parece que los errores todavía no aparecen en los formularios de edición de datos adjuntos. Traté de investigar el código principal, y a pesar del hecho de que debería haber sido arreglado (http://core.trac.wordpress.org/ticket/13810), parece que no.

Para el proceso de guardado de ajax, es cierto que aún no se ha hecho como se menciona en el archivo ajax-actions.php:

Así que en este momento, los errores no van a funcionar correctamente, pero el código se ha creado de manera que cuando esos errores sean corregidos, funcione.


Front End

Para usar esos campos personalizados en tus plantillas, solo tienes que recuperar los metas del post de la misma manera que lo harías para las entradas estándar. No olvides añadir el prefijo "_" a las claves de los campos personalizados.

Por ejemplo, podrías hacerlo así:

Show custom fields on front-endShow custom fields on front-endShow custom fields on front-end
Mostrar los campos personalizados en el front-end

Llevarlo más lejos

Hay varios puntos de mejora dependiendo de tus necesidades:

  • Podrías tener tus ajustes en la base de datos para que sea más flexible añadirlos, editarlos y eliminarlos
  • Podrías tener un valor predeterminado establecido para todos los nuevos archivos adjuntos cuando no se establece un valor
  • Deberías establecer algún estilo para el formulario modal de manera que muestre los campos personalizados correctamente

Conclusión

No dudes en compartir con nosotros tus ideas sobre cómo mejorar este plugin y lo que se esperaría de dicha funcionalidad.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.