Field, de Polina Rytova

Una de las principales ventajas de WordPress es su enorme versatilidad, la cual es posible gracias a la capacidad que tiene para extenderse y adaptarse a las necesidades de sus usuarios. Entre las diferentes fórmulas de extensión que ofrece encontramos los campos personalizados:

WordPress permite a los autores añadir campos personalizados a una entrada. Esta información extra se conoce con el nombre de «metadatos» y no es más que un conjunto de pares del tipo clave/valor.

Documentación de WordPress.org

Por ejemplo, si queremos crear metadatos sobre conceptos relacionados con el mundo del motor, tendríamos cosas como:

  • Marca: Ford
  • Modelo: Focus
  • Color: Blanco
  • Potencia: 110cv
  • etc

En la entrada de hoy te enseñaré cómo crear campos personalizados, qué usos pueden tener y cómo puedes usarlos en tu web. Si bien es cierto que para poder trabajar con campos personalizados deberás saber programar un poco, verás que usarlos es relativamente sencillo, especialmente si acabamos usando plugins como, por ejemplo, Advanced Custom Fields.

Cómo funcionan los campos personalizados

La mejor forma de entender qué son y cómo funcionan los campos personalizados es echando un vistazo a la base de datos de WordPress. Como es posible que ya sepas, cada vez que creas una entrada, una página o (casi) cualquier otro tipo de contenido en WordPress, este nuevo contenido se almacena en una tabla llamada wp_posts (el prefijo puede cambiar).

Las tablas en una base de datos son como cualquier otra tabla con la que hayas trabajado anteriormente. Básicamente, tienen un conjunto de columnas que definen «qué puedes guardar» y luego filas con la información concreta. En el caso de wp_posts, las columnas son cosas como título, contenido, autor, fecha de publicación, etc.

Tabla wp_posts en la base de datos de WordPress
Tabla wp_posts en la base de datos de WordPress

Uno de los «problemas» de usar tablas es que la información que podemos meter es limitada, ya que no podemos añadir conceptos nuevos para los que no exista una columna. Entonces, ¿cómo conseguimos crear campos personalizados? Muy sencillo, con una nueva tabla diseñada para ello.

En toda base de datos de WordPress existe otra tabla llamada wp_postmeta como la siguiente:

Tabla wp_postmeta en la base de datos de WordPress
Tablawp_postmeta en la base de datos de WordPress

Tal y como puedes ver en la captura anterior, la tabla de metadatos está diseñada de tal forma que podemos crear pares clave/valor usando las columnas meta_key y meta_value y asociar cada par a un contenido concreto usando la columna post_id.

Cómo crear un nuevo campo personalizado

Tal y como ya hemos visto, los campos personalizados están siempre asociados a una entrada concreta. Por lo tanto, es de suponer que dichos campos deben poder editarse a través del editor de WordPress, ¿no? Sin embargo, si echas un vistazo a Gutenberg, no parece que pueda hacerse…

Para poder editar los campos personalizados desde el editor de WordPress lo primero que debemos hacer es activar el panel avanzado de Gutenberg que nos da acceso a ellos. Simplemente haz clic en el icono superior derecho del editor y haz clic en Opciones:

Ajustes de Gutenberg
Ajustes de Gutenberg.

Con ello se abrirá una nueva ventana con los diferentes paneles que hay disponibles en Gutenberg. Busca uno llamado Campos personalizados y actívalo:

Cómo activar los campos personalizados en Gutenberg
Cómo activar los campos personalizados en Gutenberg.

Una vez activado, podrás crear y editar los campos personalizados de tu entrada fácilmente:

Campos personalizados en Gutenberg
Campos personalizados en Gutenberg.

Como ves, se trata de una interfaz sencilla que nos permite crear tantos pares clave/valor como queramos. En la captura anterior, por ejemplo, ves cómo he añadido los diferentes campos nelio_brand, nelio_model, nelio_color y nelio_hp a una entrada cualquiera de mi blog.

Cómo usar un campo personalizado

Para usar un campo personalizado lo único que necesitamos saber son tres cosas: (a) el identificador de la entrada cuyo valor nos interesa, (b) el nombre del campo que queremos usar y (c) decidir dónde vamos a usarlo.

Por ejemplo, supongamos que quiero mostrar el campo nelio_brand que hemos creado en el ejemplo anterior al final de una entrada. Para ello deberemos usar la función get_post_meta de WordPress:

function nelio_add_brand_field( $content ) {
  $brand = get_post_meta( get_the_ID(), 'nelio_brand', true );
  return "{$content}\n<p><strong>Brand:<strong> {$brand}</p>";
}
add_filter( 'the_content', 'nelio_add_brand_field' );

Fíjate que en el ejemplo anterior estamos dando respuesta a las tres cosas que necesitamos saber:

  • El primer parámetro de get_post_meta es, precisamente, el identificador de la entrada que me interesa. En este caso, usamos get_the_ID(), lo cual nos devuelve la entrada actual.
  • El segundo parámetro es el nombre de nuestro meta campo (en este caso, nelio_brand)
  • En tercer lugar, decidimos que queremos mostrar el campo al final del contenido, así que lo recuperamos durante el filtro the_content y lo añadimos al final dentro de una etiqueta <p>.

El resultado de hacer esto es algo parecido a lo que puedes ver en la siguiente captura de pantalla:

Captura de pantalla del front-end donde se ve un campo personalizado
Captura de pantalla del front-end donde se ve un campo personalizado después del contenido de una entrada.

De todas formas, no te quedes únicamente con la idea de que los campos personalizados se usan para mostrar cosas en tu web. En realidad, puedes usarlos para lo que te dé la gana. Por ejemplo, nuestro plugin Nelio A/B Testing añade un campo personalizado al contenido alternativo que se crea en un test A/B para saber a qué test pertenece. Es un metadato que se usa únicamente de forma interna, pero que necesitamos para el correcto funcionamiento de nuestro plugin.

Funciones de WordPress para gestionar campos personalizados

De la misma forma que tenemos un método para recuperar el valor de un campo personalizado (get_post_meta), WordPress dispone de métodos adicionales para crear, actualizar y eliminar campos personalizados de forma programática: add_post_meta, update_post_meta y delete_post_meta.

Qué es y cómo usar Advanced Custom Fields

Ahora que ya sabes cómo funciona internamente el mecanismo para crear campos personalizados en WordPress, creo que ya puedo darte las buenas noticias: existen diferentes plugins que simplifican muchísimo el proceso de trabajar con campos personalizados.

Uno de los plugins más conocidos y mejor valorados para crear metadatos en nuestros contenidos es Advanced Custom Fields. Con él no solo podrás definir los campos de una forma más sencilla, sino que tendrás la posibilidad de disfrutar de una interfaz de usuario mejorada para tratar con dichos campos que se encargará de verificar que los valores que pones se corresponden con los tipos que esperas (fechas, imágenes, galerías, números, rangos, textos…):

Captura de pantalla del plugin Advanced Custom Fields
Captura de pantalla del plugin Advanced Custom Fields.

Si quieres aprender a usar ACF y entender un poco mejor todo lo que te ofrece esta extensión, no te pierdas esta charla de Juanka Díaz que dio en WordCamp Zaragoza 2020:

¡Ojalá esta pequeña introducción a los campos personalizados te ayude en tu camino a convertirte en un mejor desarrollador para WordPress!

Imagen destacada de Polina Rytova en Unsplash.

4 respuestas a «Cómo crear y usar campos personalizados en WordPress»

  1. Avatar de Paco Ortega
    Paco Ortega

    El plugin de ACF no funciona en mi configuración de WordPress, al instalarlo no aparece en el Dashboard el menu para la creación de Campos Personalizados.

    He probado a quitar algunos plugins por si era problema de compatibilidades pero nada, no funciona.

    He enviado un ticket de soporte al creador, a ver si contesta.

    Paco Ortega

    1. Avatar de David Aguilera

      ¡Qué raro! Por favor, cuando sepas algo, dinos.

  2. Avatar de mendozalz
    mendozalz

    Haber y si Yo quisiera conocer un metacampo especifico en Woocomerce, ejemplo el metacampo de CATEGORIA o PRECIO e identificarlo en un meta query, ejemplo JetSmartFiletrs, como y donde ver cual es el metacampo?

    1. Avatar de David Aguilera

      En la documentación de WooCommerce o haciendo «ingeniería inversa». Es decir, te fijas en el ID de la entrada o producto o página cuyos metacampos quieres ver y, una vez lo tienes, lanzas una consulta a la base de datos para que te devuelva todos los metacampos relacionados con él. Y a partir de ahí ya puedes ver cuáles hay, cómo se llaman y qué valores tienen.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.