He sido un fan de Advanced Custom Fields (ACF) desde hace mucho tiempo. Se utiliza en casi todos los sitios que he construido o trabajado en los últimos años.
Para los que no saben, ACF es un plugin que le da más control de su contenido. Utiliza custom post meta para enriquecer tu contenido con datos estructurados. También te permite construir y configurar los campos de datos en cajas meta cuando actualizas posts, páginas, tipos de post personalizados, y mucho más.
En el pasado, he utilizado el plugin como parte de un proyecto en el sitio web de Delicious Brains. Sin embargo, esta entrada del blog me ha mostrado lo vital que es la solución de terceros para el desarrollo de WordPress. Deja que te lo explique…
Cómo funciona ACF
Me ha costado un poco entender lo que hace ACF, así que aquí tienes un ejemplo rápido. Lo he utilizado en un sitio de caridad de rescate de perros, donde los usuarios añaden nuevos perros para el realojamiento como un tipo de post personalizado. Sin embargo, junto con el nombre del perro, la descripción, el título del post y el contenido, también quieren almacenar la raza y el sexo del perro, un enlace a un vídeo y algunas fotos.
Para ello, he creado un grupo de campos para estos datos desde el menú Campos personalizados > Grupos de campos > Añadir nuevo:
Puedes añadir campos de varios tipos. Aquí he utilizado selecciones, cuadros de texto, una simple casilla de verificación booleana y un campo de galería. Este último es una opción de ACF Pro, y hablaré de ello más adelante.
Así es como se configuraría una caja de selección, completa con las opciones del usuario:
A continuación, he dicho que este grupo sólo debería aparecer en las pantallas de edición del Dog tipo de post personalizado. Hay todo tipo de lógica que puedes utilizar aquí, como tipos de post, plantillas, categorías y roles de usuario:
Sin embargo, el verdadero poder de ACF es cuando añades datos.
Añadir datos a los campos ACF
La pantalla de edición se ve diferente cuando se trabaja en un Dog post. Muestra un meta box personalizado completo con los campos definidos:
Esto hace que añadir todos los datos extra sea fácil para los editores de contenido. También te permite especificar exactamente dónde quieres que se muestren los datos en el tema, usando el código de la función get_field:
<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>Sin el plugin, tendría que usar los metaboxes personalizados por defecto de WordPress, codificar mis propios metaboxes más ricos desde cero, o meter con calzador la raza y el sexo del perro en taxonomías personalizadas. Incluso podría tener que usar la galería nativa incrustada dentro del contenido del post.
ACF eleva WordPress
ACF es exactamente lo que le faltaba a WordPress como sistema de gestión de contenidos (CMS) cuando se trata de tener más control sobre su contenido. Con más de un millón de instalaciones activas, ha ayudado a que la plataforma WordPress sea más potente, e incluso puede haber contribuido a su crecimiento.
Es más, los desarrolladores y las agencias lo han aprovechado para dar a los clientes el control de su contenido sin necesidad de shortcodes, constructores de páginas, o incluso post_content en absoluto. Los desarrolladores tienen un control total sobre dónde aparecen los datos en el front-end del sitio, evitando las inevitables ediciones del cliente que destruyen los visuales.
De hecho, ACF es tan popular entre nuestros clientes, que tuvimos que añadir una integración con WP Offload Media. Ahora, las imágenes y el recorte funcionan con medios descargados en Amazon S3, DigitalOcean Spaces o Google Cloud Storage.
Añadir opciones de campo extra a ACF
La versión gratuita del plugin tiene mucha funcionalidad. Sin embargo, la versión premium es esencial para obtener acceso a campos como repetidores, diseños flexibles y galerías.
Por ejemplo, estamos utilizando el campo Repetidor para permitir a los usuarios mostrar testimonios seleccionados en un deslizador en las páginas de productos. El Repetidor contiene un campo objeto post anidado:
A continuación, aparece al editar la página, por lo que podemos controlar qué testimonios se mostrarán:
Con las acciones y los filtros salpicados por la base de código, ACF siempre ha sido una herramienta extremadamente fácil de desarrollar y ampliable. También da prioridad a las mejoras que son importantes para sus usuarios.
Usando la característica JSON local
Sin embargo, uno de los pocos problemas que he encontrado en el pasado fue el almacenamiento de las configuraciones de campo en la base de datos, específicamente los tipos de postes personalizados para los grupos de campos y campos.
Esto significaba que si cambiabas la definición del campo en un sitio de desarrollo, no podías empujar tu base de datos usando una solución como WP Migrate DB Pro de nuevo a la vida. Encontrarías que la tabla de posts cambiaría, y perderías los nuevos datos.
Este es el viejo problema de la fusión de bases de datos (no me hagas empezar…). Yo solía trabajar alrededor de esto haciendo cambios de campo en el sitio en vivo primero. Luego, tiraba de la base de datos a mi sitio local para continuar con el desarrollo. No es lo ideal.
Afortunadamente, ACF introdujo la función JSON local. Lo que esto hace es permitir que las configuraciones de campo se guarden como archivos JSON, que pueden sincronizarse con la base de datos.
Esta impresionante característica resuelve el problema de la fusión de la base de datos para los datos de ACF. También significa que puedes mantener los archivos JSON bajo control de versiones y hacer que la configuración sea parte de tu proceso típico de despliegue de archivos. Mientras trabajaba con el plugin en nuestro sitio, añadí algunos ajustes para integrarlo aún más con nuestro Git y la configuración de múltiples entornos:
- Definí el directorio JSON a nuestro directorio
app/datafuera del tema (ya que podría cambiar). - El elemento de menú «Campos personalizados» sólo se mostrará en entornos de desarrollo.
- Los archivos JSON con una configuración de base de datos desactualizada en
admin_initse sincronizarán automáticamente. - Puede llevar sus campos personalizados actuales al ecosistema del Editor de Bloques.
- Puedes crear soluciones personalizadas en línea.
Aunque ahora tengamos el Editor de Bloques de WordPress (antes conocido como Gutenberg), yo diría que ACF sigue siendo vital para crear una gran experiencia de edición.
Usando el Editor de Bloques junto a ACF
El Editor de Bloques ofrece una dirección diferente para editar contenido que ACF. Creas contenido usando Bloques en lugar de almacenarlo como metadatos del post, lo que te da cierta flexibilidad de diseño.
Al principio, el Editor de Bloques no soportaba los meta boxes. Incluso se eliminaron de la pantalla de «Editar publicación», lo que provocó mucha indignación. Ahora, se ha añadido soporte para los meta boxes. Aparecen debajo del Editor de Bloques con una Interfaz de Usuario (UI) mínima y menos refinada.
Usando Bloques en lugar de campos para datos personalizados, el nuevo editor tiene el potencial de tener un gran impacto en el futuro de ACF. Es más, los nuevos sitios serán mucho menos propensos a instalar una herramienta de terceros ahora que hay una solución nativa.
Sin embargo, no es la primera vez que los cambios propuestos en el núcleo han amenazado el futuro de ACF. Hace unos años, se creó un nuevo equipo para Post Meta. Al principio, esto sonaba como si fuera a matar a las diversas soluciones de campos personalizados de terceros:
Ha habido una serie de bibliotecas/frameworks/plugins (CMB, SCB, WPAlchemy, ACF, Pods), que han llenado este papel por el momento. Los veremos como precuelas espirituales de un nuevo plugin digno del núcleo.
En su momento, escribí sobre cómo esta decisión de introducir nuevas características competitivas podría hacer que algunos plugins fueran redundantes. Finalmente, el proyecto Post Meta no llegó a ninguna parte, el nuevo editor llegó, y ACF capeó el temporal.
ACF no sólo se recuperó, sino que se adaptó. El resultado fue algo que combinaba la potencia de ACF y la flexibilidad de los Bloques personalizados. Hablemos de esto a continuación.
Cómo construir bloques con ACF
Es evidente que los bloques personalizados pueden ser beneficiosos. Sin embargo, el proceso técnico para crearlos es complejo. Los Bloques ACF llenan el vacío.
Los Bloques ACF se integran con sus campos personalizados actuales, son dinámicos y personalizables, y le permiten lograr dos cosas:
Se renderizan utilizando un archivo de plantilla PHP o una función callback – por lo que es igual que desarrollar un tema. También conservan la compatibilidad con el núcleo de WordPress, por lo que incluso podrías crear Bloques reutilizables a través del framework.
Aunque los Bloques ACF no son una muleta, yo diría que si tus conocimientos de React son todavía escasos, definitivamente querrás investigarlos más. Te permitirán aprovechar la potencia del Editor de Bloques mientras te mantienes dentro del conocido archivo functions.php.
Construyendo un Bloque ACF
Vamos a mostrarte cómo construir un Bloque ACF. La versión Pro de la herramienta incluye esta funcionalidad desde ACF 5.8, por lo que lleva unos dos años con nosotros. Aquí está el código de registro del bloque de ejemplo súper simple:
add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}A partir de aquí, querrá crear un grupo de campos y renderizar el Bloque. Para lo primero, lo harás desde la pantalla de Grupos de Campos Personalizados > dentro de WordPress:
Aquí, añade tu grupo de campos y rellénalo de forma normal. Sin embargo, en el cuadro meta «Ubicación», querrá utilizar la regla «Bloque» para seleccionar (en este caso) el Bloque de Testimonio.
Por último, tendrá que renderizar el Bloque. Esto sigue el mismo proceso al que ya podrías estar acostumbrado con los campos personalizados:
- Crea un archivo de plantilla para tu tema basado en el parámetro dado en el ajuste
render_templateal registrar inicialmente el Bloque. - Choose the right method for rendering the Block.
- Enqueue your styles and scripts.
Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.
On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.
‘InnerBlocks’ Support
The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.
They can be custom or core Blocks, and you’re able to use the current «Title», «Content», and «Button» fields in your own ACF Blocks.
Here’s a quick tutorial to get up and running. Para empezar a utilizar los InnerBlocks, incluye 'jsx' => true en la matriz supports:
acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));Luego tendrás que echo la etiqueta HTML <InnerBlocks /> en tu plantilla de bloques:
echo '<div class="block-about__content">'; echo '<InnerBlocks />';Este es sólo un ejemplo sencillo, pero hay mucho más que puedes hacer con los InnerBlocks.
Alternativas a los bloques ACF
Por supuesto, ACF no va a ser la única solución para crear bloques. Como tal, es probable que tu primer instinto sea una construcción personalizada.
Hemos cubierto cómo crear un Bloque ‘vainilla’ en el pasado, pero antes de empezar, necesitarás conocimientos de React.
También hay plugins de WordPress que te permiten ensamblar Bloques a partir de varios componentes, pero yo diría que no son realmente para los desarrolladores sino para los ‘juguetones usuarios finales’. Lazy Blocks se actualiza regularmente, así que es una buena opción si quieres experimentar con lo que ofrece.
El futuro de ACF
Desde su lanzamiento, ACF ha sido un plugin complementario vital para WordPress. Amplía, enriquece y hace más usable la plataforma. No creo que pueda construir sitios web sin él.
Sin embargo, la combinación del Editor de Bloques y los Bloques ACF es la guinda del pastel – es una excelente inversión en el futuro del CMS. Ayudará a bajar la barrera de entrada para que los desarrolladores amplíen el Editor de Bloques sin empezar en la empinada curva de aprendizaje de React. A largo plazo, aquellos que están presionando tanto por la evolución del Editor de Bloques podrían ver esto como una victoria.