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 desarrollador, yo soy 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) puede ampliar aún más estas funciones, de forma gratuita en la versión estándar. Le 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 plug-in "WordPress", o el plug-in mencionado a continuación, le dan la posibilidad de ampliar WordPress y, por lo 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 necesite Advanced Custom Fields cuando ya no pueda seguir con los elementos de a bordo en el backend de WordPress. Se enfrenta a un reto que no puede realizarse, o sólo parcialmente, con la ayuda de páginas o puestos.

Dependiendo de los deseos del cliente, esto puede ocurrir con relativa rapidez. Si usted es diseñador de páginas web, seguro que esto le 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 quiere estar cerca de la acción, puede seguir al ACF en Twitter.

Si ya se ha 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 un millón de sitios web. Se ha probado 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 reseñas con una sola estrella, muy probablemente usuarios que abandonaron tras un (muy) corto periodo de tiempo.

Con un complemento como éste, está claro que se necesita un poco de tiempo y paciencia hasta que se entiende cómo utilizarlo. 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. Tiene 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 abarca los tipos de campo, las funciones, los filtros y las preguntas frecuentes.

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

¿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 le servirán de mucho. Sólo en combinación con los Custom Post Types surgen otras opciones.

Primero 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 crea 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 en el backend.

Sin embargo, ¿qué ocurre si quiere ofrecer un contenido que no puede ser cubierto por un sitionormal o una contribución?

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

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

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

Por supuesto, también puede programar el Custom Post Type usted mismo. 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 ha sido suficiente magia con sólo el Advanced Custom Fields (ACF), aquí viene lo mejor: ACF en combinación con Custom Post Type UI, CPT UI para abreviar.

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 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 Advanced Custom Fields , construí la base para la búsqueda de filtros en el frontend. Más información 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 puede 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 un plug-in. Busqué durante mucho tiempo un buen ayudante y finalmente di con "Search & Filter Pro" (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, estos son:

  • Búsqueda (campo de búsqueda normal)
  • Post Meta (acceder y buscar el respectivo campo personalizado avanzado 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 el plugin "Search & Filter Pro" puedes crear una búsqueda individual con criterios de filtrado.

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

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

EJEMPLO DE PRÁCTICA acf

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

tuPreguntas sobre ACF

¿Qué preguntas tiene sobre ACF y WordPress? No dude 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á.