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.

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 (2 votos, valoración 5,00 sobre 5) Loading...

Web Hosting
  • Javen Urd

    Con que codigo especificamente, llamo los 4 campos creados en este ejemplo usando el get_post_meta()?

    • Efectivamente. Dentro del loop de tu plantilla puedes utilizar la función get_post_meta(). Por ejemplo get_post_meta(‘event_date’) para obtener la fecha

  • Efectivamente. Dentro del loop de tu plantilla puedes utilizar la función get_post_meta(‘event_date’) por ejemplo para obtener la fecha

  • Javen Urd

    Alguna idea del por que, cuando llamo get_post_meta(‘event_province’) en vez de mostrarme la provincia, me muestra un numero?

    • Si. Para este ejemplo construyo el select de provincias a partir de un array. Lo normal sería hacerlo a través de una tabla en BBDD. Al construir el select dinámicamente asigno al value de cada option el “key” del foreach que en este caso es 0, 1, 2, 3….por eso te devuelve un número.

      Ese número es el índice del array de provincias