WPLake > Centro de aprendizaje > Campo Repetidor ACF
  • English
  • Deutsch
  • Français
  • Italiano

Campo Repetidor ACF

Descubra la versatilidad de ACF Repeater: Explore las opciones de diseño, almacenamiento de datos, consultas de búsqueda, visualización de shortcodes y creación de repetidores anidados para mayor flexibilidad.
hot air balloons are kinda like repeater fields

Resumen de los puntos clave

  1. Conceptos básicos del campo: El campo Repetidor ACF permite añadir conjuntos repetidos de subcampos dentro de un post o página sin necesidad de Custom Post Types (CPTs) adicionales, lo que lo convierte en una herramienta versátil para la gestión de contenidos.
  2. Opciones de diseño: Los campos del Repetidor ACF ofrecen tres opciones de diseño: Tabla, Bloque y Fila, cada una de las cuales afecta a la presentación visual de los subcampos para administradores y editores, proporcionando flexibilidad en la forma de mostrar y gestionar el contenido.
  3. Almacenamiento y Recuperación de Datos: Entre bastidores, los campos repetidos de ACF almacenan los datos en la Meta de Campos Personalizados, organizando cada subcampo repetido con un identificador único en la base de datos, lo que permite una recuperación y manipulación eficientes a través de PHP.
  4. Consideraciones para las consultas de búsqueda: los desarrolladores deben tener en cuenta la estructura de los datos del campo Repetidor a la hora de diseñar las consultas de búsqueda, ya que cada subcampo se almacena con una convención de nomenclatura específica en la base de datos, lo que requiere un manejo cuidadoso para una búsqueda eficiente.
  5. Visualización de campos de repetición con shortcodes: El plugin Advanced Views Pro ofrece un cómodo método basado en shortcodes para mostrar los campos repetidores de ACF, simplificando el proceso de incrustar estructuras de campos complejas en las páginas de WordPress sin codificación HTML manual.
  6. Creación de repetidores anidados: Advanced Views Pro admite repetidores anidados, lo que permite a los usuarios crear estructuras de repetidores de varios niveles para una organización y visualización de datos más compleja, ofreciendo flexibilidad en la gestión de contenidos.

Índice

Sobre el campo Repetidor

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.

Opciones de diseño

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.

acf repeater layout settings
Los tres tipos de opciones de diseño para el campo Repetidor ACF. Fltr: Disposición en bloques, disposición en tablas y disposición en filas

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).

acf repeater pagination
Paginación repetida para un gran número de filas para mejorar el rendimiento.

Entre bastidores en ACF

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í.

Consultas de búsqueda de campos

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.

repeater in db
Subcampos repetidos en la tabla meta de WP.

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.

Rendimiento

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

Mostrar ACF Repetidor con un shortcode

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.

repeater video thumb

Cómo hacerlo paso a paso

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.

Paso 1. Creación de una vista

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".

Asignación de campos

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".

assigning acf fields to view
Asignación de campos ACF a su vista ACF con un desplegable.

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.

repeater sub field options
Asignación de subcampos a una vista ACF.

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"]

Paso 2. Pega el shortcode en su lugar

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.

repeater row layout
Filas de campos Repetidos para mis Hojas de Datos de Grupos de Campos.

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.

repeater datasheets styled output
El resultado final de mi grupo de campos Hojas de datos del repetidor con estilos CSS.

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.

Repetidores anidados

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.

Visualizar el repetidor ACF con código PHP

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.

ACF Repeater type with code, video cover

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

inside a hot air balloon

Reflexiones finales

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.

fill repeater fields

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

¿Le ha resultado útil este artículo?

Totalmente inútil

Ligeramente útil

Muy útil

Modo FAQ

/

Modo de aprendizaje

  1. ¿Qué es el campo Repetidor y en qué se diferencia de otros tipos de campo ACF?

    El campo Repetidor ACF nos permite repetir subcampos dentro de un mismo campo, proporcionando una forma de gestionar múltiples conjuntos de datos sin necesidad de crear Custom Post Types (CPTs) adicionales. Esto lo diferencia de otros tipos de campo ACF al ofrecer un enfoque más estructurado para gestionar datos repetidos.

  2. ¿Qué opciones de diseño hay para los editores?

    Puede elegir entre tres opciones de diseño: Tabla, Bloque y Fila. Cada opción de diseño presenta los subcampos de forma diferente en la pantalla de edición, atendiendo a distintas preferencias y necesidades de uso.

  3. ¿Cómo se almacenan los datos en la base de datos?

    Cada subcampo del campo Repetidor se almacena por separado en la base de datos, siguiendo una convención de nomenclatura específica. Esta estructura facilita la recuperación y manipulación eficaz de los datos, garantizando un rendimiento óptimo.

  4. ¿Hay consideraciones de rendimiento cuando se utiliza el campo Repetidor?

    Si bien el campo Repetidor ofrece flexibilidad en la gestión de múltiples entradas de datos, puede dar lugar a un rendimiento de búsqueda más lento para conjuntos de datos más grandes en comparación con alternativas como Custom Post Types (CPTs). Debe tener en cuenta el tamaño de su conjunto de datos y la frecuencia de las operaciones de búsqueda a la hora de elegir el enfoque de gestión de datos adecuado.

  5. ¿Cuáles son las opciones de visualización de los campos del Repetidor?

    Puede elegir mostrar los campos del Repetidor utilizando código PHP o un shortcode. Aunque el uso de código PHP ofrece más flexibilidad, requiere escribir código personalizado y estar familiarizado con la estructura de datos. Alternativamente, el uso de un shortcode proporciona un enfoque más conveniente y ahorro de tiempo, especialmente con plugins como Advanced Views.

  6. ¿Qué son los repetidores anidados y cómo se soportan en el ecosistema ACF?

    Los Repetidores Anidados son campos Repetidores con subcampos que también contienen subcampos, creando múltiples niveles de profundidad en la estructura de datos. El plugin Advanced Views Pro, mencionado anteriormente, admite repetidores anidados sin limitaciones, lo que le proporciona flexibilidad en la gestión de estructuras de datos jerárquicas.

  7. ¿Existen alternativas a la utilización del campo Repetidor ACF para gestionar las entradas de datos repetidas?

    Sí, puede considerar alternativas como la creación de Custom Post Types (CPTs) para gestionar entradas de datos repetidas. Aunque el campo Repetidor ofrece comodidad, los CPT pueden proporcionar un mejor rendimiento de búsqueda para conjuntos de datos más grandes y estructuras de datos complejas.

Navegación por el curso: Plugin ACF

Enlaces de contenido (15)

Sobre el autor

Baxter Jones

With over 15 years of experience in the web industry, I specialize in design, user experience, and web best practices. I have a keen eye for detail and thrive on following a structured process in my work. I’m passionate about WordPress, considering it the best innovation since sliced bread. When I’m not at my computer, you’ll find me enjoying time in the garden.

0 Comentarios

    Deja un comentario

    Responder a 

    Por favor, sea considerado al dejar un comentario.

    No expuesto al público

    Got it