En la anterior entrada que publiqué, hablaba sobre los custom post types, explicando qué son, para qué sirven y cómo se crean. Hoy, muy relacionado con esto, voy a hablar sobre los custom fields de WordPress, o campos personalizados, y cómo crearlos con el plugin Advanced Custom Fields (ACF).
Al leer este artículo, conocerás las enormes posibilidades que ofrecen ambas funcionalidades de WordPress juntas, ya que gracias a los CPT y los custom fields, puedes añadir contenido personalizado con las características que necesites.
Como dije en el anterior post, puede que todo esto te suene a chino mandarín (de pueblo cerrado, además), pero te voy a explicar en qué consiste un custom field y qué usos le puedes dar, con algunos ejemplos.
Así que no me enrollo más, y voy a empezar por la teoría, como siempre.
¿Qué es un custom field de WordPress?
Custom field, que en español quiere decir “campo personalizado”, es un campo que ofrece información personalizada sobre un contenido en concreto.
Para entenderlo mejor, siguiendo con el ejemplo que puse en la entrada anterior, imagina que estamos haciendo la web para una inmobiliaria, y creamos un custom post type llamado “Inmuebles” para mostrar todos los inmuebles que hay a la venta.
Este custom post type tiene estos elementos por defecto para añadir información: título, descripción, imagen destacada y taxonomías para categorizar los inmuebles (ej: piso, casa, dúplex, etc.).
Pero, aparte de introducir estos datos básicos, nos interesa añadir unos campos para introducir más información, como por ejemplo, el número de habitaciones, el número de baños, la superficie del inmueble, el año de construcción, el precio, etc.
Toda esta información “extra” la podríamos escribir en la descripción del inmueble, sí, pero hay un motivo por el que usar un custom field para cada una de ellas, y es que vamos a poder introducir y presentar esa información de una manera mucho más útil y atractiva.
Ejemplo de custom field
Aparte del ejemplo que acabo de poner, hay un ejemplo muy evidente para entender qué es un custom field, y que si has hecho o has visto alguna vez una tienda online con WooCommerce, lo verás muy claro.
Resulta que cuando estás creando un producto en WooCommerce (ya vimos que los productos son un custom post type), aparte del espacio para el título y la descripción, hay varios campos que puedes rellenar con información concreta sobre el producto.
Entre esta información, se encuentra el precio, el precio rebajado, el código SKU, el peso, las dimensiones, la cantidad de stock, etc, etc.
Y luego, esa información es mostrada o utilizada por separado según convenga. Por ejemplo, el precio se muestra en el catálogo de productos y justo debajo del título en la página de producto, y el peso y/o las dimensiones, se utilizan para calcular costes de envío.
Esto no se podría hacer sin utilizar custom fields, por los que son grandes aliados a la hora de hacer muchos tipos de webs 😉
Advanced Custom Fields
Sabiendo ya qué es un campo personalizado, te quiero presentar el plugin Advanced Custom Field, que sirve para crear, como su nombre indica, custom fields.
Este plugin, también conocido por sus siglas ACF, tiene una versión gratuita, que puedes descargar e instalar desde el repositorio de WordPress, y una versión de pago, que incluye más funcionalidades.
Advanced Custom Fields es el plugin de referencia para crear campos personalizados para cualquier tipo de contenido que tengas en tu web. La versión gratuita está bastante bien, ya que viene con una buena variedad de custom fields para añadir (más de 30 diferentes), así que te recomiendo que la instales y la pruebes tú mismo.
La versión Advanced Custom Fields Pro viene con algunas funcionalidades más avanzadas, algunas de ellas pensadas para desarrolladores.
Cómo crear campos personalizados con ACF
Bien, pues ahora que ya conoces toda la teoría, vamos a ver cómo crear campos personalizados con Advanced Custom Fields.
Una vez has instalado y activado el plugin, se crea una nueva pestaña en el administrador de WordPress llamada “Campos Personalizados”. Haz clic en él y luego, en “Añadir nuevo”.
Para este post, voy a seguir con el ejemplo de la inmobiliaria, pero se puede adaptar a tu caso, sea cual sea.
Lo primero que tienes que hacer, es ponerle un título al nuevo grupo de campos personalizados.
Una vez puesto, puedes añadir tantos campos personalizados como quieras.
Al añadir un nuevo campo, aparece un formulario donde debes introducir las características del nuevo campo. Estas características pueden variar en función del tipo de campo que selecciones. No serán exactamente las mismas características que para un campo de texto, que para un campo de fecha, por ejemplo.
Para empezar, tienes que poner la etiqueta y el nombre del campo:
En este caso, el campo que esto creando será para indicar el número de habitaciones que tendrá la vivienda. Verás que el nombre del campo se rellena automáticamente cuando escribes la etiqueta. Puedes dejarlo tal cual o modificarlo.
Acto seguido, tienes que indicar el tipo de campo que quieres que sea:
Según el objetivo del campo, tienes que seleccionar un tipo u otro. En este caso, al tener que indicar el número de habitaciones, podría indicar que se trata de un campo de número, aunque también podría ser un campo “checkbox” y asignar varias opciones: 1, 2, 3, 4, +5…
Una vez elegido el campo, aparecerán unas opciones u otras. Son bastante intuitivas y muchas de ellas vienen con una descripción, así que no voy a explicarlas todas.
Entre otras cosas, puedes indicar si se trata de un campo requerido obligatoriamente, el valor que tendrá por defecto, un marcador de texto, e incluso activar la lógica condicional para que el campo aparezca o no en función del valor del resto de campos.
Puedes agregar tantos campos como quieras o necesites. Para el ejemplo, he creado estos campos:
Cuando los hayas creado todos, es turno de indicar en qué tipo de contenido quieres que aparezcan estos campos. En este caso, quiero que aparezcan únicamente en el custom posts type “Inmueble”:
Por último, puedes indicar si el grupo de campos está activo, dónde mostrarlos, y qué elementos que suelen aparecer por defecto en la edición de una entrada de WordPress deben ocultarse.
Utilizar los custom fields
Ahora que ya están creados los campos personalizados y he indicado en qué tipo de contenido deben aparecer, ya se puede comenzar a utilizarlos.
En este caso, voy a “Inmuebles”, creo uno nuevo, y esto es lo que me aparece:
Ya puedo crear un nuevo inmueble e indicar el número de habitaciones y baños, los metros cuadrados, si tiene parking o no, añadir una descripción y su precio.
Podría añadir más campos con ACF, obviamente: galería de imágenes, año de construcción, estado de conservación, si tiene trastero o no, etc.
Puedo utilizar las categorías para indicar si se trata de una casa, un piso, un terreno, etc., y la imagen destacada para añadir la imagen principal del inmueble.
¿Qué ocurre cuando se rellenan todos estos campos y se publica el inmueble, en este caso?
Pues que al visualizar el inmueble, solo se verán dos cosas: la imagen destacada y el título del inmueble, porque son los únicos campos que vienen por defecto en WordPress. El resto los hemos añadido con el plugin ACF.
Por lo que ahora es necesario buscar una manera para que también se muestren los campos personalizados.
Mostrar los campos personalizados con Elementor
La mala noticia es que el plugin ACF no incluye una manera visual para añadir los campos personalizados, sino que hay que añadirlos mediante programación, cosa que no está al alcance de la mayoría de usuarios.
Sin embargo, hay una buena noticia, y es que es posible utilizar algún plugin para ello, destacando por encima de todos el incombustible Elementor Pro.
Si no lo conocías, haz clic en el enlace que te acabo de poner para descubrir todas sus bondades, y si ya lo conocías, pues sí, aparte de ser el mejor maquetador para WordPress, te permite crear plantillas para mostrar los custom post type junto con sus campos personalizados.
Vamos a ver cómo hacerlo.
Lo primero que tienes que hacer es crear una nueva plantilla en Elementor Pro de tipo individual y escogiendo el post type al que quieras aplicarla, en este caso, en Inmueble:
En esta plantilla, puedes añadir los widgets “imagen destacada” y “post title” para que coja automáticamente el título y la imagen de cada uno de los inmuebles que vayas subiendo.
Esto es lo sencillo e intuitivo. Ahora, para añadir los campos personalizados que hemos creado y que se muestren los datos concretos de cada inmueble, hay que utilizar la funcionalidad de etiquetas dinámicas que viene con Elementor.
En este caso, puedo utilizar el widget “listado de iconos” para mostrar los campos personalizados relativos a las características del inmueble (habitaciones, baños, metros cuadrados, parking).
Pero puedes hacer lo mismo con otros widgets de Elementor: encabezado, editor de texto, botón, imagen, etc.
Añado el widget listado de iconos, agrego el primer elemento al listado, le pongo el icono de una cama, que hará referencia a las habitaciones, y, en el espacio para indicar el valor de ese elemento del listado, en lugar de escribir nada, hago clic en el botón “etiquetas dinámicas”:
Aparece un listado de todos los elementos dinámicos que puedo añadir, y busco el elemento “ACF Field”.
Acto seguido, hago clic en la llave inglesa que aparece justo al lado, y en “key”, selecciono el campo personalizado que quiero que se muestre, en este caso, el campo “habitaciones”.
Esto hará que coja automáticamente el número de habitaciones que tiene cada uno de los inmuebles. Hay que repetir el proceso con el resto de campos personalizados que quieras mostrar.
Este sería el resultado:
También es posible añadir un texto antes o después de cada uno de las etiquetas dinámicos. Para ello, hay que hacer clic en la llave inglesa de la etiqueta, luego en “Avanzado”, y puedes escribir el texto en la posición que desees:
Este sería el resultado:
Del mismo modo, añado el precio y la descripción, añadiendo un widget encabezado y un widget editor de texto respectivamente, utilizando también las etiquetas dinámicas.
El resultado final de esa demostración sería este:
Es un ejemplo y un diseño muy básico, pero creo que será suficiente para que entiendas todas las posibilidades que ofrece Advanced Custom Fields y Elementor Pro.
Conclusión sobre los campos personalizados de WordPress y AFC
Como ves, los campos personalizados son una funcionalidad muy útil para llevar a cabo muchos proyectos en WordPress, junto con los custom post types, y Advanced Custom Field es el plugin por excelencia para crearlos.
Muchos plugins que están programados para diferentes propósitos (para inmobiliarias, agencias de viajes, compraventa, etc.) los incluyen para poder cumplir sus objetivos, pero ahora ya sabes cómo hacerlo desde cero sin ellos.
Si no los conocías, ya tienes deberes, ponte a trabajar con ellos y explora todas sus posibilidades, verás que es otro de los motivos para enamorarse de WordPress 🙂
