Mostrar campos repetear en Elementor

Tabla de contenido

Cuando trabajas con contenido dinámico en WordPress, los campos repetidores (repeater fields) son una herramienta clave para mostrar listas, galerías, pasos de un proceso, equipo de trabajo o cualquier contenido que requiera estructuras repetidas.

En Elementor, puedes mostrar estos campos con ayuda de ACF Pro o de otros plugins compatibles, pero la forma de hacerlo dependerá de tu configuración.

¿Qué es un campo Repeater?

Un Repeater Field es un tipo de campo que te permite añadir varias filas de datos con la misma estructura.
Ejemplo típico en ACF:

  • Imagen del miembro del equipo
  • Nombre
  • Cargo
  • Descripción

En el editor, puedes añadir tantas filas como quieras, y cada una tendrá esos campos.

Qué necesitas

  • Elementor Pro para poder usar contenido dinámico.
  • Advanced Custom Fields Pro para crear el campo repetidor.
  • Opcional: un plugin como Dynamic.ooo (Dynamic Content for Elementor) o ACF Repeater Field for Elementor si quieres hacerlo de forma totalmente visual.

Creación del Repeater en ACF

  1. Ve a ACF y crea un nuevo grupo de campos.
  2. Añade un campo de tipo Repeater, por ejemplo “mi_repeater”.
  3. Dentro, añade subcampos como título, descripción, imagen, enlace, etc.
  4. Asigna el grupo de campos a la página, entrada o CPT donde quieras usarlo.

Recuerda dar valor a los campos dentro del campo seleccionado para que la prueba te muestre datos válidos

Mostrar el Repeater en Elementor con Code Snippets

Vamos a crear un snippet en vez de modificar plantillas, así lo mantenemos limpio.

  1. Instala y activa el plugin Code Snippets.
  2. Añade un nuevo snippet con el siguiente código:
add_shortcode('mostrar_repeater', 'dnlt_mostrar_repeater');
function dnlt_mostrar_repeater() {    $pageID = get_the_ID(); 
    $content = '<table>';
    
    $content .= '<tr>
                <th align="left"><strong>Encabezado 1</strong></th>
                <th align="left"><strong>Encabezado 2</strong></th>
                </tr>';

    if (have_rows('mi_repeater', $pageID)) {
        while (have_rows('especificaciones_tecnicas', $pageID))  {
            the_row();
            $content .='<tr><td>'. get_sub_field('dato_1') . '</td>'; // 
            $content .='<td>'. get_sub_field('valor_2') . '</td></tr>'; //
        }
    }
    return $content .='</table>';
}

  1. Guarda y activa el snippet.

En el ejemplo, tenemos un repetear con 2 valores, «dato_1» y «valor_2».
Pero vosotros podéis modificar el código para que muestre todos los datos que habéis creado en vuestro campo repetear.

Insertar el Repeater en Elementor

  1. Edita la página con Elementor.
  2. Añade un widget de Shortcode.
  3. Escribe [mostrar_repeater].
  4. Guarda y visualiza.

Y listo, ahora en el bloque donde habéis añadido vuestro shortcode se mostrarán todas las filas de contenido a modo de tabla de vuestro campo repetear.

¿necesitas una web?

Contacta conmigo sin compromiso y hablamos de tu proyecto

DISEÑO Y DESARROLLO WEB

últimas entradas

Hosting de alto rendimiento