¿Qué es Advanced Custom Fields (ACF) en WordPress y para qué lo necesito?

Michael Hörnlimann Última actualización 21.10.2020
6 min.
advanced custom fields wordpress
Última actualización 21.10.2020

"¿No conoces Advanced Custom Fields ? Sin ACF, definitivamente ya no utilizaría WordPress ". Esto es lo que me escribió un colega a través de Slack hace unas semanas. Sin embargo, él es un desarrollador, yo soy un diseñador. Sin embargo, a más tardar en este momento, me di cuenta de que debía (y quería) ocuparme de ello.

¿Qué es Advanced Custom Fields?

WordPress en sí mismo ya ofrece funciones muy diversas. Con los campos personalizados avanzados puede ampliar estas funciones aún más - en la versión estándar gratis. Le permiten un control total sobre el contenido de su sitio web.

Por defecto, encontramos campos típicos como el título, el contenido, la fecha y el autor en el backend de las entradas y las páginas. Advanced Custom Fields , o el mencionado más abajo Plugin, le dan la posibilidad de ampliar WordPress y, por tanto, las páginas y los mensajes de forma prácticamente arbitraria e individual.

Así que con WordPress casi todo es posible - Advanced Custom Fields cuasi como sintonía para WordPress .

De todos modos, ¿para qué necesito Advanced Custom Fields ?

En resumen: Probablemente necesitarás Advanced Custom Fields si estás atascado con los elementos del tablero en el WordPress backend. Usted se enfrenta a un desafío que no puede o sólo puede realizarse parcialmente con la ayuda de páginas o contribuciones.

Dependiendo de los deseos del cliente, esto puede ocurrir con relativa rapidez. Si eres diseñador de páginas web, seguro que esto también te resulta familiar.

En mi caso, por ejemplo, se me permitió construir una búsqueda con criterios de filtrado. No se trata de una simple búsqueda de texto, que busca el contenido adecuado en todo el sitio web, sino de una búsqueda en la que se pueden introducir previamente datos específicos a través de un formulario. El usuario dispone de diferentes criterios de filtrado. Entre otros, estos son:

  • Nombre (campo de texto)
  • Código postal (campo de texto)
  • País (desplegable)
  • Certificados (casilla de verificación)

Pero más adelante hablaremos de ello. Este caso de uso me dio la idea de utilizar Advanced Custom Fields (ACF). Esta búsqueda individual no es posible con los elementos del tablero WordPress sin ACF.

Advanced Custom Fields: El libre Plugin

Así que estaba buscando una solución para implementar este filtro de búsqueda con la ayuda de Advanced Custom Fields .

El epónimo Plugin en el directorio oficial WordPress -Plugin- proviene de Elliot Condon. El australiano trabaja muy activamente en ella y la desarrolla constantemente, de modo que aparecen nuevas funciones una y otra vez. Si quiere estar cerca de la acción, puede seguir al ACF en Twitter.

Si ya fue valiente y confía plenamente en el editor de bloques introducido desde WordPress 5.0 (Gutenberg), también hay bloques para el nuevo editor en Advanced Custom Fields .

El ACF Plugin está actualmente activo en más de un millón de sitios web. Se ha probado muy intensamente y funciona sin problemas con la última versión de WordPress . También es impresionante que Plugin haya recibido ya más de 1.000 valoraciones con 5 estrellas. Por el contrario, hay unos míseros 16 valoraciones con una sola estrella, muy probablemente usuarios que abandonaron tras un (muy) corto periodo de tiempo.

Con tal Plugin está claro: requiere algo de tiempo y paciencia hasta que se entienda la aplicación. Por supuesto, sólo he arañado la superficie de Advanced Custom Fields . Sólo quiero expresar que hay otros Plugins que se instalan y luego funcionan cómodamente en segundo plano - es diferente con ACF. Hay que diseñar activamente y ver la conexión global entre la base de datos, el backend y el frontend.

Lo que también es indispensable para este Plugin, que es bastante técnico: el soporte.

Todavía no he tenido que utilizarlo. La razón es sencilla: la documentación de primera clase, que abarca los tipos de campo, las funciones, los filtros y las preguntas frecuentes.

¿Qué son los Custom Post Types?

Antes he mencionado que el diseño activo es necesario. Esto significa también, en Advanced Custom Fields , que en algunos casos no le sirven de mucho. Sólo en combinación con los Custom Post Types se obtienen más opciones.

Primero surge la pregunta: ¿Qué es un tipo de puesto (normal)?

Los dos más populares en WordPress son las páginas y las entradas de blog. Así, para cada nuevo contenido que se cree para un sitio web, se decide qué tipo de post es el más adecuado. Esto depende de varios factores, entre ellos cómo quiere que la información sea visible y qué campos necesita para ello en el backend.

Pero, ¿qué pasa cuando se quiere ofrecer un contenido que no puede ser cubierto por un sitio o un post normal?

Puede que ya lo hayas adivinado: necesitas una nueva forma de introducir contenidos en el backend. Casi una máscara de entrada con exactamente los campos que necesita. Esto es lo que puede ofrecerle Advanced Custom Fields . El mencionado Plugin le permite definir y crear estos campos cómodamente en el backend. Una vez establecida esta estructura, llega el siguiente paso.

advanced custom fields campos propios
En el backend de ACF Plugins puede definir fácilmente los campos.

Aquí es cuando entran en juego los Custom Post Types. Es muy importante saber que tiene sentido crear un tipo de post personalizado para el uso de Advanced Custom Fields . En mi caso, llamo al Custom Post Type (CPT) simplemente terapeuta.

Por supuesto, también puede programar el Custom Post Type usted mismo. Sin embargo, para ello utilicé el Plugin "Custom Post Type UI", que explicaré con más detalle en la siguiente sección.

creación de tipos de entrada personalizados
Este es el aspecto del backend de la "Custom Post Type UI" de Plugins .

Custom Post Type UI: Gratis Plugin, el segundo

Si hasta ahora eso era poca magia para ti con sólo el Advanced Custom Fields (ACF), aquí viene lo mejor: ACF en combinación con Custom Post Type UI, abreviado CPT UI.

Esto le permite mostrar el contenido de la base de datos directamente en el frontend según lo desee. En mi caso, me enfrenté al reto de querer construir un filtro de búsqueda con diferentes campos. Así que primero tuve que cargar todos los datos al backend usando una importación CSV.

Después de eso, construí la base para la búsqueda de filtros en el frontend con la ayuda del Custom Post Type y el Advanced Custom Fields . Más información sobre esto en la siguiente sección.

combinación de tipo de puesto personalizado acf
Por ejemplo, tu nuevo Custom Post Type puede tener este aspecto.

Ejemplo práctico: Construir una búsqueda con criterios de filtrado

Hasta aquí el momento a la parte de atrás. Ahora es el momento del frontend. Para que pueda aplicar el conjunto y utilizar el individuo Advanced Custom Fields para su caso.

He utilizado el ACF para construir una búsqueda personalizada con criterios de filtrado. Sin embargo, ¿cómo es posible presentar el contenido del backend de forma elegante en el frontend para que sea posible la interacción del usuario?

De nuevo, puedes elegir entre desarrollarlo tú mismo o utilizar Plugin. Volví a buscar durante mucho tiempo un buen ayudante y finalmente encontré "Search & Filter Pro" (está enlazado al final del texto).

Esto me da una forma ingeniosa de utilizar los datos disponibles en el backend para mostrarlos en el frontend. En mi ejemplo son:

  • Búsqueda (campo de búsqueda normal)
  • Post Meta (acceder y buscar el campo personalizado avanzado correspondiente en la base de datos)
  • Botón de envío (botón para enviar la consulta o el formulario de búsqueda)

En el backend esto puede verse así:

búsqueda y filtro pro backend
Con Plugin "Search & Filter Pro" puede crear una búsqueda individual con criterios de filtrado.

Después puedes insertar el filtro de búsqueda recién creado en cualquier lugar del backend (por ejemplo en un sitio) mediante un shortcode.

Sin embargo, verás que entonces seguirá teniendo un aspecto poco atractivo. He mejorado esto con algunos manejos de CSS y encuentro, el resultado en el frontend es bastante respetable:

ejemplo práctico acf

Enlaces complementarios

Estoy ansioso por ver qué más puedo implementar con Advanced Custom Fields en el futuro. ¿Tiene alguna pregunta o comentario sobre este artículo? Si es así, estaré encantado de recibir muchos comentarios.

Imagen: Shane Aldendorff | Unsplash

Michael Hörnlimann, nacido en 1991 en Zurich, ama la naturaleza y la buena comida. Desde abril de 2018 ha estado trabajando exclusivamente de forma independiente y creando WordPress sitios web en nombre de los clientes. Desde entonces ha combinado el trabajo con su gran pasión, viajando a países y culturas extranjeras. Vive y trabaja dondequiera que esté, a veces en las montañas, a veces junto al mar.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.