Tutorial de Advanced Custom Fields: La Mejor Guía

Los campos personalizados de WordPress son una parte importante de lo que hace a WordPress un sistema de administración de contenido flexible, más que tan sólo una “plataforma de blogging”.

Cuando se trata de los campos personalizados de WordPress, el plugin freemium Advanced Custom Field es uno de los nombres más conocidos. Hace que sea más sencillo trabajar con campos personalizados en todos los aspectos, y también será el tema de nuestro artículo hoy en día.

Específicamente, le explicaremos por qué Advanced Custom Fields es tan valioso y luego le mostraremos, paso a paso, como aplicarlo a su sitio de WordPress.

Esto es lo que encontrará en el artículo:

Estos son muchas cosas por hablar, así que empecemos de una vez…

¿Qué son los Campos Personalizados de WordPress? ¿Qué le Permiten Hacer?

Los campos personalizados de WordPress le permiten almacenar y mostrar información personalizada sobre un pedazo de contenido en WordPress. En un nivel más técnico, los campos personalizados le ayudan a almacenar metadatos.

Incluso si usted no está familiarizado con este término, los campos personalizados respaldan muchas de las funcionalidades de sus plugins y temas favoritos.

Por ejemplo, WooCommerce, la forma más popular para construir una tienda de eCommerce, utiliza campos personalizados para almacenar información adicional sobre un producto como:

• Precio
• Peso
• Color

O, si usted tiene un plugin de calendario de eventos de WordPress, ese plugin utilizará campos personalizados para almacenar información adicional sobre un evento como:

• Ubicación
• Tiempo de Inicio/Fin
• Precio

También puede crear sus propios campos personalizados para almacenar información que es relevante a sus necesidades únicas, y de eso se trata este artículo.

¿Cuándo Debería Utilizar Campos Personalizados?

Ahora, podría estarse preguntando la razón por la que necesitaría tener campos personalizados en primer lugar.

Por ejemplo, si usted quiere publicar un evento en su sitio de WordPress, ¿por qué no sólo poner toda esa información como texto regular en su editor de WordPress?

Bueno, si, podría hacer esto. Pero el utilizar campos personalizados es una mejor forma de hacer las cosas por estas razones:

• Ingreso más sencillo – en lugar de tener que teclear las cosas desde cero, un buen grupo de campos personalizados hará que sea mucho más sencillo ingresar datos. Por ejemplo, en lugar de teclear la fecha, usted simplemente podría seleccionar la fecha del seleccionador de fechas.
• Consistencia – la información que usted ingresa en sus campos personalizados siempre mostrará lo que tenga según su configuración, lo que quiere decir que será mucho más consistente a lo largo de su sitio.
• Fácil de actualizar y mantener – si desea cambiar algo sobre que tanta información muestra en el futuro, simplemente puede actualizar una cosa en lugar de tener que editar cada publicación de forma individual.

WordPress Incluye Campos Personalizados Integrados en su Funcionalidad

WordPress en realidad incluye una funcionalidad para agregar campos personalizados a su contenido. En el editor classic TinyMCE, usted puede habilitar esto en el área de la Pantalla de Opciones. O, en el nuevo editor de bloque, puede habilitarlo en el área de Opción:

Usted puede ingresar los datos de su campo personalizado utilizando pares clave/valiosos:

Esta funcionalidad nativa de campos personalizados es totalmente funcional, pero no es la forma más intuitiva de hacer las cosas, razón por la cual la mayoría de las personas deciden utilizar el plugin de Advanced Custom Fields.

Advanced Custom Fields lo Hace Más Fácil

Es simple, Advanced Custom Fields hace esta tarea de trabajar con campos personalizados en WordPress algo mucho más sencillo… prácticamente en todos los aspectos.

Esta simplifica la interfaz para agregar y administrar campos personalizados en el dashboard de WordPress y también simplifica el proceso de mostrar información de los campos personalizados en el frontend de su sitio. El hecho sólo ayuda a explicar la razón por la que está activo en más de 1 millón de sitios con una calificación de 4.9 estrellas de 5 y más de 1,000 reseñas.

En el backend, le permitirá crear meta boxes intuitivos que incluyen tipos preseleccionados de campos. Así que, en lugar de la interfaz genérica de pares claves-valiosos (como las que vio arriba), usted podrá utilizar seleccionadores de fechas, checkboxes, y más cosas como esta:

En total, Advanced Custom Fields ofrece más de 30 tipos de campos distintos que puede agregar a cualquier área en su dashboard, incluyendo publicaciones, usuarios, taxonomías, media, comentarios e incluso páginas de opciones personalizadas.

Usted puede ver información más detallada sobre cada tipo de campo aquí.

Advanced Custom Fields también hace mucho más sencillo mostrar esa información, con funciones bien documentadas, shortcodes, bloques de Gutenberg, y más.

O, puede encontrar integraciones con otras herramientas, como los page builders drag and drop de WordPress.

Advanced Custom Fields Versión Gratuita vs Pro: ¿Cuál Necesita?

Advanced Custom Fields viene en versión gratuita y también en versión premium a un precio accesible.

Para la mayoría de los usos más básicos, la versión gratuita es más que suficiente. Le da acceso a casi todos los tipos de campos, al igual que todas las funciones de las que hablamos anteriormente.

Si tan sólo quiere almacenar información adicional sobre su contenido, la versión gratuita es suficiente.

Habiendo dicho esto, la versión Pro si agrega algunas funciones bastante convenientes que le ayudarán a utilizar el Advanced Custom Fields de formas más interesantes:

• Campos Repetidos – estos le permiten repetir ciertos campos/grupo de campos en cada publicación. Por ejemplo, si fuese agregar algo sobre algún conferencista en un evento, un campo repetido le ayudaría a lidiar con la situación cuando haya más de un conferencista (simplemente podría “repetir” el campo(s) para el conferencista las veces que sean necesarias, lo cual le permitirá lidiar casos en los que haya múltiples conferencistas).
• Bloques ACF – muestra sus campos como un bloque Gutenberg, en lugar de un meta box. Esto es especialmente conveniente si usted está construyendo un sitio para un cliente y quiere darles una forma sencilla para ingresar y visualizar campos de datos personalizados.
• Campo de contenido flexible – crea diseños a partir de otros campos. Es como un page builder liviano basado en información personalizado de campos.
• Campo de galería – suba múltiples imágenes con un sólo campo.

También hay otras diferencias, como páginas de opciones, la capacidad de clonar campos, mejoras a los campos de relación, y otros arreglos menores.

Usted puede ver todas las funciones del ACF Pro aquí.

ACF PRO comienza a partir de los $25 para tenerlo de por vida en un sitio. O puede pagar $100 para tenerlo de por vida en cualquier cantidad de sitios.

Cuando tenga duda, empiece con la versión gratuita hasta que descubra exactamente que funcionalidad necesita. Siempre podrá cambiarlo en otro momento.

Tutorial de Advanced Custom Fields: Cómo Agregar Campos

Ahora sigamos con el tutorial del Advanced Custom Fields y le mostrar como puede crear y mostrar su primer conjunto de campos personalizados.

Para este ejemplo, digamos que usted tiene un blog sobre salir a correr. Pero hablamos de… que realmente ama esto de salir a correr y que quiere compartir su rutina de ejercicio diaria con sus lectores. Específicamente, con cada publicación de su blog, usted quiere compartir:

• El Propósito – digamos que usted tiene dos formas distintas para salir a correr: “velocidad” y “condicionamiento”.
• Distancia – que tanto corrió.
• Tiempo de Inicio – cuándo comenzó a correr.
• Tiempo Final – cuándo terminó su rutina.
• Ubicación – dónde salió a correr.

Para recolectar esa información, usted querrá agregar cinco campos adicionales.

Es importante tomar en cuenta que los principios que usted aprenderá en este tutorial de Advanced Custom Fields aplican para cualquier caso. Sólo estamos eligiendo este ejemplo en específico porque nos ayuda a tener un ejemplo tangible con el que podamos identificarnos.

Dividiremos este tutorial en dos partes:

1. Cómo agregar y administrar sus campos personalizados en el backend.
2. Cómo mostrar información de campos personalizados en el frontend de su sitio.

1. Crear un Nuevo Grupo de Campos

Una vez que haya instalado y activado la versión gratuita del Advanced Custom Fields de WordPress.org, vaya a Campos Personalizados > Agregar Nuevo para crear su primer Grupo de Campos.

Como sugiere el nombre, un “Grupo de Campos” es un grupo de uno más campos personalizados que son plasmados juntos en el dashboard de su WordPress.

Por ejemplo, usted creará un grupo de campos que contiene cinco campos personalizados.

De a su grupo de campos un nombre, y luego elija su Ubicación. Para este ejemplo, queremos mostrar estos campos personalizados para publicaciones regulares de blog en WordPress, así que puede dejarlo como la Publicación por defecto.

Sin embargo, si quiere mostrar sus campos personalizados en otro lado, como, por ejemplo, junto a un tipo de publicación personalizado o con una taxonomía, usted querrá cambios como este. También puede establecer múltiples reglas para mostrar sus campos en múltiples ubicaciones:

2. Agregue Campos Personalizados

Luego, de clic en el botón de +Agregar Campo, para agregar su primer campo personalizado:

Esto abrirá muchas opciones, pero no necesita agregar todo necesariamente.

Las dos elecciones más importantes son:

• Etiqueta del Campo – esto es lo que aparecerá en el editor. También será usado para generar el Nombre del Campo, que es lo que usará en el código. Usted no necesita cambiar el nombre del campo (pero puede hacerlo si es que lo necesita).
• Tipo de Campo – este es el tipo de información que usted quiere recolectar. Por ejemplo, usted querrá un campo de Número para recolectar información de números o un campo de Email para recolectar direcciones de email.

Para este primer campo, usted querrá un tipo de campo de Radio Botón:

Más abajo, usted puede ingresar la selección de opciones de radio botón en la casilla de Opciones:

También hay varias otras opciones que puede tomar, como si se requiere o no el campo y un valor por defecto. Siéntase libre de configurar estas a sus necesidades.

Veamos otro ejemplo, un campo personalizado para recolectar la distancia del camino recorrido al correr. Pero ahora, usted querrá un tipo campo de Número:

También podría hacer las cosas un poco más intuitivas para los usuarios al optar por Agregar la unidad de distancia. Y si así lo desea, usted también podría agregar validación con un Valor Mínimo y un Valor Máximo. Por ejemplo, ¡probablemente no correrá 1,000 millas (y si así es… Dios mio, eres como Forrest Gump)!

Sólo repita el proceso para todos los campos personalizados que quiera recolectar. Cuando termine, debería lucir así:

3. Configure las Opciones y Publique

Para terminar esto, llegue a la casilla de Opciones. Aquí, usted puede controlar como sus campos aparecen en el editor de WordPress.

La mayoría del tiempo, usted puede dejar esto, así como está. Pero siéntase libre de cambiar un poco las cosas si así lo desea. Por ejemplo, usted podría optar por mostrar sus campos personalizados arriba del editor regular de WordPress:

Una vez que haya terminado con todas sus opciones, Publique su grupo de campos para ponerlo en línea.

4. Agregue Información en el Editor de WordPress

Una vez que haya publicado su grupo de campo, usted verá sus campos aparecer cuando usted va a crear una nueva publicación.

Por defecto, estos aparecerán juntos debajo del editor en el editor classic TinyMCE y en el nuevo editor de bloque.

La información que ingrese aquí será almacenada en la base de datos de su sitio para que tenga acceso fácil a este (usted verá a que me refiero en la siguiente parte de nuestro tutorial de Advanced Custom Fields).

Explorando la Lógica Condicional

Antes de que prosigamos, tomemos una pequeña desviación.

Mire, una de las razones por las que el Advanced Custom Fields es tan popular es por toda la cantidad de implementaciones interesantes que permite.

Y una poderosa opción aquí es la Lógica Condicional, la cual le permite mostrar/esconder campos usando como base la forma en que fue respondido el campo pasado.

Demos un rápido vistazo a un ejemplo de como funciona esto…

Digamos que usted quiere tener un blog sobre comida, sus viajes, o cualquier cosa que no sea correr. Cuando usted está escribiendo sobre algo que no sea correr, no tiene mucho sentido mostrar campos personalizados con información sobre su rutina de ejercicio, ¿Cierto?

Qué tal, si en lugar de mostrar automáticamente todos los campos personalizados que usted creó, usted pudiera mostrar un campo personalizado que diga “¿Este es un artículo sobre salir a correr?”:

Si usted marca esta casilla, entonces los campos con información sobre su rutina aparecerán. Si lo deja sin marcar, estos permanecerán escondidos:

¡Esto es lo que le permite hacer la lógica condicional!

Para establecer esto, usted editaría su grupo de campo y agregaría un nuevo campo de Verdad / Falso para “¿Esto es sobre su rutina de salir a correr?”:

Entonces, usted editaría los campos existentes y activaría la Lógica Condicional para que cada campo sólo aparezca cuando el campo de “¿Esto es sobre correr?” este marcado:

Cómo Mostrar Advanced Custom Fields en el Frontend

Ok, ya vamos por la mitad de nuestro viaje con el Advanced Custom Fields. Ahora usted podrá agregar información a sus campos personalizados, asociarlos con el tipo de publicación relevante, y almacenarlas en su base de datos.

Sin embargo, aún existe un problema potencial: ¡la información de sus campos personalizados aún no aparece en el frontend!

Con esto quiere decir, que, aunque usted haya agregado algunos campos personalizados a su editor para sus publicaciones de blog, las publicaciones en su blog seguirán luciendo como artículos normales en el frontend:

Arreglemos esto.

Hay varias formas distintas para mostrar los datos del Advanced Custom Fields en el frontend de su sitio. El método exacto que elija dependerá de sus necesidades y nivel de conocimiento. Aquí le dejamos tres formas distintas para lograr esto:

1. Los archivos de plantilla de su tema – esto requiere un poco de conocimiento técnico, pero es la mejor forma de hacerlo la mayoría de las veces, especialmente si usted se siente cómodo trabajando con los archivos de plantilla de su tema.
2. Con un shortcode – esto es súper simple y una buena opción si sólo quiere insertar datos de campo personalizados de vez en cuando. Sin embargo, requiere mucho trabajo manual porque usted tendrá que agregar shortcodes a cada publicación.
3. Con Elementor Pro – este es fantástico porque elimina completamente la necesidad de trabajar con PHP, pero es un producto premium y también esto quiere decir que tendrá que utilizar el Elementor Pro para sus plantillas.

Usted puede dar clic en los enlaces anteriores para ir directamente a ese método en específico o puede leerlos todos. Depende de usted.

Cómo Agregar Advanced Custom Fields en los Archivos de Plantilla de su Tema

La primera forma para mostrar la información de sus campos personalizados es agregando las funciones PHP del Advanced Custom Fields directamente a los archivos de plantilla de su tema child.

Esta es una técnica un poco avanzada porque requiere que usted entre a los archivos de plantilla de su tema, pero eso asegurará que sus campos personalizados aparecerán automáticamente en el mismo sitio todo el tiempo.

Usted necesitará editar la plantilla única específica para el tipo de publicación en el que esté trabajando.

Para una publicación regular de su blog, este es single.php. U, otros temas dividen un poco las cosas en partes de plantilla. Por ejemplo, para el tema Twenty Nineteen, usted tendrá que editar la parte de la plantilla content-single.php.

Si está un poco confundido, usted podría utilizar otro método.

Una vez que haya encontrar el archivo de plantilla del tema para su publicación, usted puede utilizar la función the_field() del Advanced Custom Fields para mostrar la información del campo. Por ejemplo,

<?php the_field('FIELD_NAME'); ?>

Aprenda más sobre esto aquí.

Por ejemplo, para mostrar el campo de “Propósito”, usted usaría

<?php the_field('purpose'); ?>

Usted puede encontrar el nombre del campo cuando usted edita un grupo de campos:

Así que, combinar un poco de marcaje HTML con el PHP, usted podría obtener algo como esto para mostrar todos los campos:

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

Para agregar esto arriba del contenido de publicación regular, usted tendría que agregar esto al archivo de plantilla de su tema sobre el the_content():

Y ahora, después de refrescar la publicación de su blog, usted podrá ver los datos del campo personalizado sobre el contenido regular de WordPress:

Para aprender más sobre esto, vea la documentación completa del Advanced Custom Fields.

Cómo Mostrar los Datos del Advanced Custom Fields con un Shortcode

Usted puede utilizar shortcodes para agregar de una forma mucho más simple los datos de su campo personalizado. Aunque lo malo de esto, es que usted necesitará agregar el shortcode cada vez que quiera mostrar un campo personalizado. No hay una forma sencilla para automatizar esta tarea.

Este es el shortcode:

[acf field="FIELD_NAME"]

Por ejemplo, si usted ingresó en el editor de WordPress:

Luego, el frontend de su sitio luciría exactamente igual al método anterior de plantilla de tema:

Cómo Mostrar Advanced Custom Fields con Elementor Pro

Elementor es uno de los page builders más populares de WordPress. Le permite construir sus diseños utilizando un editor drag and drop. Como nota, Elementor es uno de los socios oficiales de Kinsta.

Con Elementor Pro, el add-on de paga, también puede construir los archivos de plantilla de su tema, incluyendo una opción para insertar datos de campos personalizados dinámicos del Advanced Custom Fields dentro de sus diseños.

Esta es una excelente opción si usted quiere la flexibilidad de incluir automáticamente datos de campos personalizados en sus plantillas, pero no se siente cómodo editando directamente el código en los archivos de plantilla de su tema.

Para empezar, vaya a Plantillas > Constructor de Tema  y cree una nueva plantilla de Elementor para su publicación Única:

También podría agregar el widget regular de Elementor para el Título de su Publicación y Contenido de su Publicación.  Luego, para mostrar los datos de su campo personalizado, usted tendría que agregar widgets Editores de Texto. La única diferencia aquí, en lugar de editar el texto, usted seleccionará la opción Dinámica:

Después de esto, usted puede seleccionar ACF Fields de un menú desplegable:

A partir de ahí, usted puede seleccionar el campo específico que agregó con el Advanced Custom Fields:

Y también puede utilizar la pestaña Avanzada de acordeón para pre-agregar o agregar información, lo cual le permite agregar etiquetas y unidades:

Fácil, ¿no? ¡Ahora repita esto en sus otros campos personalizados!

Resumen

Al usar Advanced Custom Fields, usted podrá enriquecer sus páginas y publicaciones con más datos e información con una solución fácil de usar. Más: usted podrá empezar a recolectar información adicional para cualquier contenido en su sitio y luego mostrarla en el frontend para sus visitantes.

Para hacer esto, usted tiene 3 opciones:

• Los archivos de plantillas de su tema
• Con un shortcode
• Con Elementor Pro

El conocimiento que ha ganado con este artículo le permitirá desbloquear todo ese potencial que tiene WordPress para construir sitios 100% personalizados que van más allá de las raíces del blogging de WordPress.

La única pregunta que queda es:

¿Qué creará usted con el Advanced Custom Fields? Comparta con nosotros sus experiencias en la sección de comentarios.