El elemento Repeater permite construir visualmente bucles en Oxygen utilizando una consulta de post o un repeater ACF (Advanced Custom Fields) como fuente de datos.
Para añadir uno: +Add -> Helpers -> Repeater.
QUERY
La consulta selecciona que publicaciones serán mostradas por el elemento Repeater.
Default
La consulta por defecto es generada por WordPress basándose en la URL que se visita. Si visitas la URL del archivo de entradas de blog, WordPress generará una consulta que le devolverá las entradas de blog. Si visitas la URL de un anuncio inmobiliario, WordPress generará una consulta que devolverá ese anuncio
Todo esto lo hace automáticamente WordPress.
Puedes anular la consulta por defecto eligiendo la personalizada o la manual.
Custom
- Post Type - elige los tipos de entrada devueltos por la consulta, o especifique manualmente los IDs de las entradas del tipo de entrada Posts (si quieres seleccionar entradas de otro tipo de entrada a través de su ID, tendrás que usar una consulta manual).
- Filtering - excluye las entradas que no coinciden con el autor o las taxonomías especificadas.
- Order - el orden en que se muestran las entradas - alfabético, por fecha, etc.
- Count - el número de entradas que se mostrarán.
Manual
Para tener un control completo sobre las publicaciones devueltas por la consulta, puedes especificar manualmente los parámetros de WP_Query.
Tutorial de consulta: https://wpdevdesign.com/how-to-generate-the-query-string-for-easy-posts-in-oxygen/.
Usar un ACF Repeater
Si el tipo de entrada utiliza un Repeater ACF, seleccions la casilla "Repeater ACF" que mostrará los grupos de campos ACF disponibles.
LAYOUT
Selecciona "Stack Child Elements Vertically" para un diseño vertical o "Stack Child Elements Horizontally" para tener los campos repetidos en la misma fila.
PAGINATION
- Alignment - elige la posición de la paginación.
- Gap - define el número de páginas mostradas antes de que un espacio sea reemplazado por una elipsis (...).
- Range - define el número de páginas a mostrar antes y después de la página actual.
- Previous Link Text - establece el texto que se utilizará en lugar de "Previous".
- Next Link Text - establece el texto que se utilizará en lugar de "Next.
- Link Hover Transition Duration - establece el número de segundos que desea utilizar para la transición del enlace (por ejemplo, 1s sería un segundo).
- Font Size - establece el tamaño de la fuente de la paginación.
- Text Color - establece el color de la página activa.
- Link Color - establece el color del enlace.
- Link Hover Color - establece el color del enlace en estado Hover, (al poner el puntero del ratón encima).
Container Style
- Size & Spacing - establece el tamaño, el relleno y el margen (Padding y Margin).
- Children Layout - cambiar la orientación de la paginación.
- Borders - añade un borde alrededor de la paginación.
- Background - controla el fondo de la paginación.
Links Style
- Link Size & Spacing - controla el tamaño, el relleno y el margen de los enlaces, (Padding y Margin).
- Active Link Size & Spacing - controla el tamaño, el relleno y el margen (Padding y Margin) del elemento activo.
- Link Background - añade un fondo a los enlaces.
- Active Link Background - añade un fondo al enlace activo.
- Link Borders - añade bordes a los enlaces individuales.
- Active Link Borders - añade un borde al enlace activo.
Links Hover Style
- Link Hover Size & Spacing - controla el tamaño, el relleno y el margen de los enlaces al pasar por encima.
- Active Link Hover Size & Spacing - controla el tamaño, el relleno y el margen del elemento activo al pasar por encima.
- Link Hover Background - añade un fondo a los enlaces por encima.
- Active Link Hover Background - añade un fondo al enlace activo al pasar por encima.
- Link Hover Borders - añade bordes a los enlaces individuales al pasar por encima.
- Active Link Hover Borders - añade un borde al enlace activo al pasar por encima.
PREVIEW RENDER
- Normal Mode - Muestra todas las entradas en el constructor que son obtenidas por la consulta.
- Single Mode - Muestra una sola entrada en el constructor.
USING THE REPEATER
El Repeater contiene un elemento div, que puede ser estilizado para crear diseños horizontales y verticales. Puedes añadir elementos al div del Repeater para construir el diseño. Estos elementos se repetirán para cada entrada devuelta por su consulta.
Para crear un diseño de 3 columnas, añade el elemento Columns a su div Repeater haciendo click en +Add -> Basics -> Columns y configura el número de columnas necesario. Añade el título de la publicación haciendo click en uno de los divs de columnas y añadiendo un elemento de encabezado haciendo click en +Add > Basics > Heading. Haz doble clic en el encabezado y selecciona Insert Data -> Post > Title. Esto insertará dinámicamente el título de la publicación para cada fila de su repetidor. Puedes repetir este proceso para otros elementos (como Imágenes y Contenido) para construir el Repeater.
Última modificación: 16 de abril de 2021
