Campo Repetidor ACF

El campo Repetidor ACF es uno de los muchos tipos de campo ACF y se conoce como campo complejo, principalmente por el hecho de que permite añadir subcampos que pueden repetirse una y otra vez al editar contenido. Hace honor a su nombre.

El campo Repetidor es similar al campo Grupo ACF en que permite "agrupar" subcampos, aunque con el campo Grupo no se pueden "repetir" los subcampos, sólo se permite un conjunto de subcampos.

Una gran ventaja del campo Repetidor es que no necesita crear otro Custom Post Type (CPT), y aún así puede mostrar una lista de elementos. Suele ser útil para la página de opciones.

El campo Repetidor tiene 3 opciones de diseño: Tabla, Bloque y Fila. Cualquiera que elijas aquí afectará la apariencia del campo para los administradores y editores.

Si elige el diseño "Tabla", aparecerá una tabla de subcampos en la pantalla de edición, con etiquetas en la cabecera de la tabla. Si elige la presentación "Bloque", los subcampos se muestran en bloques, uno detrás de otro, y con "Fila", los subcampos se muestran en una tabla de dos columnas, con etiquetas en la primera columna.

La paginación en el paso de creación de campo, cuando está activada es útil para cuando se tiene un gran número de filas de repetición, esto ayuda a mejorar el rendimiento al guardar (antes, guardar incluso sólo 10 filas llevaba algún tiempo).

Entre bastidores, el campo Repetidor de ACF almacena los datos en la Meta de campos personalizados de la página (o entrada) actual.

Como sabes, el campo repetidor te permite tener múltiples filas de los mismos subcampos y los almacena dentro de un único campo principal. Suena bastante simple, pero podría llevarte a pensar que en la base de datos también se guarda como un único meta campo, cuando en realidad no es así.

Recuerda, presta mucha atención al hecho de que, los usuarios y desarrolladores deben tener la opción de hacer consultas de búsqueda por este campo. Por ejemplo, si tienes varias entradas, cada una con un repetidor con varias filas, y necesitas encontrarlas todas, ¿cómo sabrías que el valor específico existe en una de las filas? En realidad, esta tarea aparece mucho más a menudo de lo que se piensa.

Los desarrolladores de Advanced Custom Fields (ACF) ya pensaron en ello y decidieron almacenar cada subcampo en su propio metacampo, pero con una estructura especial.

Como se ha visto anteriormente, cada subcampo lleva como prefijo el número de fila y el nombre del repetidor.

Así, por ejemplo, si ha llamado a su campo repetidor "hojas de datos" y sus subcampos se llaman "hoja de datos" y "anexo", en la base de datos se almacenarán de la siguiente forma:

datasheets_{row-number}_datasheet and 
datasheets_{row-number}_attachment, 
where {row-number} begins from zero.

Cuando se "solicita" este campo a ACF con la función get_field, ACF hace un truco y convierte esta estructura en un array, de forma que se puede trabajar en PHP de forma similar a como se haría con un array plano. En nuestro ejemplo, si necesitamos obtener el subcampo de la primera fila, podríamos hacerlo con el siguiente código:

$datasheets = get_field(‘datasheets’);
echo $datasheets[0][‘datasheet’];
echo $datasheets[0][‘attachment’];

Es importante conocer y entender este enfoque, ya que la consulta de entradas por subcampos del repetidor requiere un conocimiento de la estructura, para poder escribir la WP_Query correcta. Puede aprender como crear una WP_Query para subcampos repetidores en los Docs oficiales.

El campo Repetidor es una función útil que le ayuda a almacenar varias entradas de datos, pero también tiene un inconveniente, que es el rendimiento de la búsqueda para conjuntos de datos más grandes.

Por lo tanto, aunque la consulta por subcampos es posible, consume muchos más recursos del servidor y lleva más tiempo en comparación con los elementos de tipo de entrada personalizada (CPT) y las taxonomías.

No notarás la diferencia en caso de que estés consultando varias entradas que tengan de 5 a 10 filas cada una, pero si hablamos de unos cientos de entradas con muchas filas, entonces será mucho más lento que el enfoque CPT alternativo. Por lo tanto, si usted sabe que habrá muchos datos, y necesitaría consultarlos, considere crear un CPT en su lugar. La creación de CPT es posible con el plugin ACF desde la versión 6.1 beta

Utilizar la forma de código para mostrar los campos es bastante flexible, pero tiene muchas desventajas;

• Lleva algún tiempo escribir el código.
• Es necesario conocer los tipos de retorno de los subcampos.
• Recordar nombres de claves específicas para el array de respuesta.
• Debe encontrar manualmente la plantilla de página correcta en su tema y modificarla.

Por otro lado, hay otra forma que permite mostrar el campo Repetidor ACF, (y sus subcampos) sin tener que escribir el código. El framework Advanced Views le permite mostrar campos ACF, y con Advanced Views Pro, puede mostrar campos complejos que incluyen el campo Repetidor, haciéndolo así super fácil y ahorrando toneladas de tiempo.

Advanced Views se encarga del marcado HTML. Sólo tenemos que elegir los campos ACF para mostrar, a continuación, copie el código corto auto-generado y pegarlo en cualquier lugar en una página, eso es todo, no hay nada más que tenemos que hacer, excepto el estilo de la salida.

Vea a continuación un breve tutorial en vídeo sobre cómo mostrar los campos del Repetidor ACF utilizando el método shortcode.
Hay más tutoriales en vídeo en el Canal Oficial de YouTube.

Salte del vídeo para ver una guía completa, paso a paso y basada en texto, para visualizar el Repetidor ACF.

Si desea seguir el tutorial, adquiera, instale y active el framework Advanced Views Pro en su sitio web WordPress. También tendrá que instalar y activar Advanced Custom Fields Pro para desbloquear el tipo de campo Repetidor.

Ahora que está listo, continuemos.

Al activar el framework Advanced Views aparece un nuevo elemento en el menú de administración, llamado "Advanced Views". El elemento tiene varios sub-elementos, pero en nuestro caso, vamos a trabajar sólo con el llamado "Views".

Haga clic en ese elemento del menú para abrir la página Vistas y, a continuación, haga clic en el botón "Añadir nueva" para crear una Vista.

En la nueva página dale un nombre a tu Vista, puede ser cualquier cosa que describa la Vista. He llamado a mi Vista "descargar hojas de datos".

Es hora de asignar el campo Repetidor y los subcampos a su Vista. Haz clic en el botón "Añadir campo" y selecciona tu "Grupo" en el desplegable. En mi caso, he llamado al grupo "Descargar hojas de datos".

A continuación, siga seleccionando el campo de destino de la lista. He seleccionado "Hoja de datos".

Verá que el tipo de campo de cada campo aparece entre paréntesis. En este caso, el tipo es "repetidor". A continuación, cambie a la pestaña "Subcampos" y añada los subcampos de la lista, de uno en uno, e inserte una etiqueta para cada campo.

Consejo profesional: Añada el primer campo, luego duplique la fila y cambie el campo por otro. Esto ahorra tiempo al no tener que seleccionar primero el Grupo de campos cada vez y luego elegir el campo.

Haga clic en el botón "Publicar" para guardar y publicar su Vista. Los códigos cortos se generan y se muestran a la derecha de la pantalla de edición de la vista. Lea más sobre los diferentes códigos cortosy sus usos en los documentos de Advanced Views.

Copie el primer shortcode sin el parámetro object-id en el portapapeles.
Por ejemplo [acf_views view-id="123" name="Nombre de la vista"]

Ahora todo debería estar listo para mostrar su campo Repetidor ACF. Vaya a su página de destino (la página donde ha ubicado sus campos ACF) y en la pantalla de edición, pegue el shortcode copiado en cualquier lugar que desee del contenido de la página.

En caso de que estés usando el editor Gutenberg: haz clic en el botón más de la barra superior y elige el bloque "Shortcode" de la lista, luego pega tu shortcode en el bloque.

Ahora sólo queda rellenar los campos (subcampos en realidad). Añade más filas de subcampos a medida que los necesites.

En mi caso, tengo un campo de texto "Hoja de datos" y un campo de archivo al que he llamado "Adjunto". Al final he utilizado tres filas de repetición para las hojas de datos en inglés, francés y alemán.

Asegúrese de guardar su página haciendo clic en "Actualizar" o "Publicar" y, a continuación, visite su página. Como resultado, y si lo ha hecho todo correctamente, debería ver la lista de elementos del Repetidor.

Si no ve su lista de elementos, vuelva atrás y edite la página. Por ejemplo, asegúrese de que ha rellenado los campos y guardado la página, si efectivamente están rellenados, entonces vuelva a su Vistaedición, donde asignó los campos. A continuación, vuelva a comprobar que están asignados desde el grupo de campos correcto. En consecuencia, si ha dejado los campos sin rellenar en la página o entrada, no habrá nada que mostrar.

Hay ocasiones en las que necesitarás tener lo que se conoce como Repetidor anidado, que es un campo Repetidor con un Subcampo Repetidor, que también tiene subcampos. Por lo tanto, tres niveles de profundidad, en lugar de uno o dos niveles habituales.

Advanced Views Pro admite repetidores anidados sin ninguna limitación. Consulte la guía paso a paso en los documentos.

Aprende a mostrar campos repetidos en las páginas de producto de WooCommerce, para que la información relevante sea vista por los clientes potenciales.

Mostrar subcampos del Repetidor significa que tendrá que crear marcado HTML, para los campos y para las variables para cuando se rellenen los campos.

Aquí tienes algunos ejemplos de código PHP necesarios para mostrar subcampos y un deslizador de imágenes básico.

Código PHP para mostrar los valores de los subcampos del repetidor con el bucle básico.

$items = get_field('repeater');
// value can be null, convert in case the array is empty
$items = $items ?: [];

echo "<div class='view'>";
foreach ($items as $item) {
	printf("<div class='view__address'>%s</div>", $item['address']);
}
echo "</div>";

Código PHP para mostrar un deslizador de imágenes básico.

$items = get_field('repeater');
// value can be null, convert in case the array is empty
$items = $items ?: [];

echo "<ul class='slides'>";
foreach ($items as $item) {
	// Return Format of the image must be 'ID'
	$imageId = $item['image'];

	// skip if the image is not selected
	if (!$imageId) {
    	continue;
	}

	// wp_get_attachment_image() will create HTML markup for the selected image (the img tag)
	printf("<div class='slides__slide'>%s</div>", wp_get_attachment_image($imageId, 'full'));
}
echo "</ul>";

Para obtener información adicional, vea el vídeo que figura a continuación y lea el artículo oficial de la ACF.

Si te interesa el lado más técnico de WordPress, considera leersobre lo que deben saber los buenos desarrolladores de WordPress.

En este tutorial le hemos mostrado cómo utilizar y mostrar los campos del Repetidor ACF de dos formas, la primera con codificación y la forma más práctica y sencilla con el uso de un shortcode.

Una Vistapuede contener cualquier número de campos de diferentes tipos, lo que significa que puede ampliar su Vistaen cualquier momento, Advanced Views soporta todos los tipos de campos disponibles con soporte extendido para campos complejos.

Obtenga más información sobre el plugin que utilizamos en nuestro ejemplo de shortcode, visitando la página oficial del plugin.

Sólo el cielo es el límite ahora con lo que puede lograr con WordPress, Advanced Custom Fields y Advanced Views. Buena suerte.