Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
campos personalizados

Cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante

En esta entrada vamos a ver como añadir campos personalizados o custom fields al back-end de WordPress de manera elegante, es decir, utilizando meta_boxes.

Actualmente puedes añadir campos personalizados sin la necesidad de utilizar plugins. Simplemente puedes dirigirte a editar una entrada, desplegar el menú colgante Opciones de pantalla situado en la parte superior derecha, y verificar que se encuentra activa la casilla Campos personalizados.

Una vez activada vemos que al final de la página nos genera un meta_box llamado Campos personalizados donde puedes agregar tantos campos como quieras. Los custom fields se almacenan en la tabla wp_postmeta, relacionados al id del post y compuestos por una key y un value.

custom fields defecto

Los campos personalizados son una manera muy útil de añadir información y enriquecer el contenido de tus páginas. Pero, ¿qué pasa cuando quieres ir un poco más allá? Es muy común en los desarrollos a medida querer presentar esta información de una manera más elegante, o adaptarlos a unas necesidades concretas. Si necesitamos agregar un campo personalizado que sea un combo donde pueda escoger entre varias opciones, o queremos agruparlos por secciones…la opción por defecto que nos da WordPress se nos queda corta.

Podemos entonces utilizar un plugin sobre el que ya hablamos en este blog como Advanced Custom Fields. Con éste potentísimo plugin podemos añadir prácticamente cualquier funcionalidad y cualquier tipo de campo a cualquier elemento de WordPress: selector de fecha, selector de color, relaciones con otros posts, google maps, etc…

Pero en ocasiones, no podemos utilizar plugins de terceros por requerimientos de cliente, o simplemente no queremos sobrecargar la web con un uso desmesurado de plugins y preferimos hacer el desarrollo nosotros mismos.

Después de ésta introducción vamos a lo que nos ocupa, con un ejemplo práctico. Vamos a agregar información relacionada (fecha, población, provincia, e-mail de contacto) a un custom post type Eventos. Lo primero de todo es agregar un meta_box con la función add_meta_box(). Crearemos una función personalizada para agregar éste meta_box sólo en el caso en el que estemos editando o añadiendo una entrada perteneciente al custom post type Eventos, y la añadiremos al action add_meta_boxes:

Cómo podemos observar la función add_meta_box() acepta los siguientes parámetros:

  • id: Identificador del meta_box.
  • title: Título o nombre que aparece en la parte superior o cabecera.
  • callback: Función a la que llamaremos para crear nuestros campos personalizados dentro del meta_box.
  • screen: Pantallas de la administración de WordPress donde aparecerá el meta_box. Los valores que acepta son ‘post’, ‘page’, ‘dashboard’, ‘link’, ‘attachment’, ‘custom_post_type’, ‘comment’, donde custom_post_type es el slug de nuestro custom post type (eventos).
  • context: Lugar de la pantalla de edición donde aparecerá. Los valores que acepta son ‘normal’, ‘advanced’, o ‘side’.
  • priority: La prioridad dentro del contexto. Los valores que acepta son ‘high’, ‘core’, ‘default’ o ‘low’.

 

El siguiente paso es crear la función campos_eventos que llamamos en el callback, y que creará nuestros campos fecha, población, provincia e e-mail dentro del meta_box:

Ya tenemos nuestro meta_box con los campos personalizados, el siguiente paso es guardar la meta información cuando actualizamos el post. Para ello vamos a crear una función y la añadiremos al action save_post. Antes de guardar los datos realizaremos las siguientes comprobaciones:

  • Hemos establecido un campo nonce, verificaremos que es correcto
  • Comprobaremos si es un autoguardado, en este caso no realizaremos acción alguna
  • Comprobaremos los permisos de usuario
  • Si estas tres premisas son válidas, guardaremos los datos

 

Ya tenemos la funcionalidad complete para trabajar con custom fields personalizados en nuestro back-end. Para un editor es más facil si lo presentamos de este modo, quedando así:

custom fields personalizados

 

Para recuperar esta información en el front-end haremos uso de la función get_post_meta(). Obtendremos los datos que hemos almacenado en nuestro custom post type Eventos y podremos mostrársela a los usuarios de la manera que necesitemos, e incluso generar un pequeño formulario de contacto donde el receptor sea el e-mail establecido.

Puede que también te interese

Cómo integrar los estilos de los menús de bootstrap con WordPress
Cómo integrar los estilos de los menús de bootstrap con WordPress
Si estás desarrollando un tema nuevo en WordPress y estás usando el framework Bootstrap para la maquetación del Front-end, probablemente te hayas encontrado con el…
Mejora la puntuación de Google PageSpeed Insights: Optimizar imágenes
Mejora la puntuación de Google PageSpeed Insights: Optimizar imágenes
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Cómo cambiar WordPress Multisite de subdominios a subdirectorios ó viceversa
Cómo cambiar WordPress Multisite de subdominios a subdirectorios ó viceversa
Si alguna vez has instalado WordPress Multisite sabrás que lo primero que te pide es que tomes una decisión: subdominios o subdirectorios. Por favor, elige…
Creando un tema desde cero para WordPress parte 3: El loop
Creando un tema desde cero para WordPress parte 3: El loop
1. Creando un tema desde cero para WordPress: Consideraciones previas 2. Creando un tema desde cero para WordPress: Escribiendo el tema 3. Creando un tema…