advanced custom fields wordpress

¿Qué es Advanced Custom Fields (ACF) en WordPress?

"¿No conoces Advanced Custom Fields (ACF)? Sin ACF, definitivamente ya no usaría WordPress". Esto es lo que me escribió un colega vía 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 (ACF)?

El propio WordPress ya ofrece una amplia gama de funciones. Con Advanced Custom Fields (ACF) puedes ampliar aún más estas funciones, de forma gratuita en la versión estándar. Te permiten un control total sobre el contenido del sitio web tus .

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 El plugin "WordPress", o el plugin que se menciona a continuación, te dan la posibilidad de ampliar WordPress y, por tanto, las páginas y las entradas prácticamente a voluntad y de forma individual.

Esto significa que casi todo es posible con WordPress: Advanced Custom Fields como un ajuste para WordPress, por así decirlo.

¿Para qué necesito Advanced Custom Fields?

En pocas palabras: Probablemente necesites Advanced Custom Fields cuando ya no puedas seguir con los elementos de a bordo en el backend de WordPress. Te enfrentas a un reto que no puede realizarse, o sólo parcialmente, con la ayuda de páginas o puestos.

En función de los deseos del cliente, esto puede ocurrir con relativa rapidez. Si eres diseñador de páginas web, seguro que esto 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 busque en todo el sitio web el contenido adecuado, 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 varios 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 de a bordo de WordPress sin ACF.

Advanced Custom FieldsEl plugin gratuito

Por lo tanto, estaba buscando una solución para implementar este filtro de búsqueda con la ayuda de Advanced Custom Fields .

El plugin del mismo nombre en el directorio oficial de plugins de WordPress 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 quieres estar cerca de la acción, puedes seguir a ACF en Twitter.

Si ya te has atrevido a utilizar el editor de bloques (Gutenberg) introducido en WordPress 5.0, también hay bloques para el nuevo editor en Advanced Custom Fields .

El plugin ACF está actualmente activo en más de 1 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 el plugin haya recibido ya más de 1.000 valoraciones con 5 estrellas. En cambio, hay unas míseras 16 opiniones con una sola estrella, muy probablemente usuarios que abandonaron después de un (muy) corto periodo de tiempo.

Con un plug-in de este tipo, está claro que se necesita algo de tiempo y paciencia hasta que hayas entendido 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 - esto es diferente con ACF. Tienes que diseñar y reconocer activamente la conexión global entre la base de datos, el backend y el frontend.

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

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

"*"indica que los campos son obligatorios

Consentimiento*
Este campo es de validación y no debe modificarse.

¿Qué son los Custom Post Types?

Antes he mencionado que el diseño activo es necesario. En Advanced Custom Fields , esto también significa que en algunos casos no te servirán de mucho. Sólo en combinación con los Custom Post Types surgen otras opciones.

En primer lugar, surge la pregunta: ¿Qué es un tipo de puesto (normal)?

Los dos más conocidos en WordPress son las páginas y las entradas de blog. Para cada nuevo contenido que se cree para un sitio web, tú decides qué tipo de post es el más adecuado. Esto depende de varios factores, entre ellos cómo quieres que sea visible la información y qué campos necesitas en el backend.

Sin embargo, ¿qué pasa si quieres proporcionar un contenido que no puede ser cubierto por un sitio normal o una contribución?

Puede que ya lo hayas adivinado: necesitas una nueva forma de introducir contenido en el backend. Una especie de máscara de entrada con exactamente los campos que necesitas. Esto es lo que puede ofrecerte Advanced Custom Fields . El plugin del mismo nombre mencionado anteriormente te permite definir y crear cómodamente estos campos en el backend. Una vez establecida esta estructura, viene el siguiente paso.

advanced custom fields campos propios
En el backend del plugin ACF puedes definir fácilmente los campos.

Esto es cuando se utilizan los tipos de entrada personalizados. Es muy importante señalar aquí que tiene sentido crear un tipo de post personalizado para el uso de Advanced Custom Fields . En mi caso, simplemente llamo al terapeuta del tipo de puesto personalizado (CPT).

Por supuesto, también puedes programar tú mismo el Custom Post Type. Sin embargo, para ello he utilizado 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 del plugin "Custom Post Type UI".

Custom Post Type UI: Plugin gratuito

Si hasta ahora no te ha parecido suficiente magia sólo con el Advanced Custom Fields (ACF), aquí viene lo mejor: ACF en combinación con Custom Post Type UI, CPT UI para abreviar.

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

Luego, con la ayuda del custom post type y de Advanced Custom Fields , construí la base para la búsqueda de filtros en el frontend. Más sobre esto en la siguiente sección.

combinación de tipo de puesto personalizado acf
Este es el aspecto que podría tener, por ejemplo, el nuevo tipo de entrada personalizado de tu .

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

Hasta aquí la parte de atrás por ahora. Ahora es el momento del frontend. Así que también puedes aplicarlo todo y utilizar el Advanced Custom Fields individual para tu 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 un plug-in. Busqué durante mucho tiempo un buen ayudante y finalmente di con "Search & Filter Pro" (enlazado al final del texto).

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

  • Buscar (campo de búsqueda normal)
  • Post Meta (accede y busca el respectivo Campo Personalizado Avanzado en la base de datos)
  • Botón de envío (botón para enviar la consulta de búsqueda o el formulario)

En el backend, esto puede tener el siguiente aspecto:

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

A continuación, puedes insertar el filtro de búsqueda que acabas de crear en cualquier lugar del backend (por ejemplo, en una página de sitio) mediante un shortcode.

Sin embargo, verás que esto seguirá teniendo un aspecto poco atractivo. Lo he mejorado con algunos retoques de CSS y creo que el resultado en el frontend es bastante respetable:

EJEMPLO PRÁCTICO acf

Estoy deseando ver qué más puedo implementar con Advanced Custom Fields en el futuro. ¿Tienes alguna pregunta o comentario sobre este artículo? Entonces, espero recibir tus comentarios.

tu Preguntas sobre el ACF

¿Qué preguntas tienes sobre ACF y WordPress? No dudes en utilizar la función de comentarios. ¿Quieres estar informado de los nuevos artículos sobre WordPress y diseño web? Entonces síguenos en Twitter, Facebook, LinkedIn o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

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