Shortcode web_carousel_feed
El shortcode web_carousel_feed muestra contenido público actual mediante una consulta guardada o IDs de entradas ordenados y una plantilla de feed compartida. El bloque Carousel Feed usa el mismo renderizador y los mismos recursos condicionales. Los shortcodes existentes siguen renderizándose cuando el editor Legacy está desactivado.
Los atributos siguientes coinciden con los controles actuales de Page Builder y con la salida pública. Usa la sintaxis raw solo para contenido revisado que no se pueda mantener mediante los controles visuales.
Uso
[web_carousel_feed]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
query_type |
custom |
custom, single_posts |
La consulta predeterminada obtiene 12 entradas por página ordenadas por fecha descendente. Las consultas personalizadas se pueden crear en los ajustes del Theme. |
single_posts |
— | IDs de entradas positivos separados por comas | Selección ordenada completa. Se admite un único ID; una selección vacía no muestra nada. Disponible cuando query_type es single_posts. |
custom_query |
1 |
Cadena salvo que se indique lo contrario | Controla las consultas personalizadas. Disponible cuando query_type es custom. |
only_related |
— | yes |
Controla el contenido relacionado solo con la entrada actual. |
related_display_mode |
mix |
mix, split |
Controla el modo de visualización de las entradas relacionadas. Disponible cuando only_related es yes. |
related_split_{post_type}_title |
Related {type label} localizado |
Texto sin formato | Encabezado y etiqueta accesible para un grupo relacionado dividido; por ejemplo related_split_page_title. Un valor vacío suprime el encabezado. |
layout |
default |
default o un slug de plantilla de feed personalizada configurada |
Selecciona la plantilla usada para cada resultado del carousel. |
web_carousel_style |
style_2 |
style_1, style_2, style_3 |
Contenido centrado, varias columnas o slider ancho. |
web_carousel_elements_align |
center |
center, left |
Controla la alineación de los elementos del carousel. Disponible cuando web_carousel_style es style_2. |
web_carousel_contain |
— | yes |
Si se marca, el carousel estará contenido. Disponible cuando web_carousel_style es style_2. |
web_carousel_arrows |
— | yes |
Si se marca, las flechas serán visibles. |
web_carousel_arrows_style |
default |
default, over_content, next_to_content, below_content |
Controla el estilo de las flechas. Disponible cuando web_carousel_arrows es yes. |
web_carousel_dots |
— | yes |
Si se marca, los puntos serán visibles. Disponible cuando web_carousel_style es style_2. |
web_carousel_slide_numbers |
— | yes |
Si se marca, los números serán visibles. Disponible cuando web_carousel_style es style_2. |
web_carousel_opacity |
— | yes |
Si se marca, las diapositivas no principales tendrán menos opacidad. Disponible cuando web_carousel_style es style_2. |
web_carousel_continuous_scroll |
— | yes |
Activa el movimiento continuo con bucle automático en lugar de la reproducción automática temporizada. |
web_carousel_scroll_direction |
left |
left, right |
Dirección física del movimiento cuando el desplazamiento continuo está activado. |
web_carousel_scroll_speed |
60 |
Número de 1 a 300 |
Velocidad del movimiento continuo en píxeles por segundo. |
web_carousel_pause_autoplay_on_hover |
— | yes |
Pausa la reproducción automática temporizada o el desplazamiento continuo al pasar el cursor por encima. Déjalo vacío para que siga moviéndose. |
web_carousel_yes_autoplay |
— | yes |
Si se marca, la reproducción automática estará activada. |
web_carousel_autoplay_speed |
3000 |
1000–10000 milisegundos |
Intervalo de reproducción automática temporizada. Disponible cuando web_carousel_yes_autoplay es yes. |
web_carousel_cells_loop |
— | yes |
Si se marca, se permitirá el bucle infinito. |
web_carousel_adaptive_height |
— | yes |
Si se marca, la altura del carousel se adaptará a cada celda. |
web_carousel_draggable |
yes |
yes |
Activa el arrastre entre diapositivas. |
web_carousel_free_scroll |
— | yes |
Permite desplazar y deslizar el contenido libremente sin alinear las celdas con una posición final. |
web_carousel_columns |
web-carousel-x2 |
web-carousel-x2, web-carousel-x3, web-carousel-x4, web-carousel-x5 |
Ayudas de escritorio existentes para 3, 4, 5 o 7 columnas, con adaptaciones para pantallas más pequeñas. Disponible cuando web_carousel_style es style_2. |
accessible_name |
Carousel localizado |
Texto sin formato | Etiqueta descriptiva de la región del carousel. Los títulos de grupos divididos tienen prioridad. |
device_visibility |
— | Cadena salvo que se indique lo contrario | Aplica la regla de visibilidad responsive seleccionada. |
el_id |
— | ID HTML único válido | Introduce el ID de sección (Nota: asegúrate de que sea único y válido según la especificación w3c). |
el_class |
— | Cadena salvo que se indique lo contrario | Si deseas dar estilo a un elemento de contenido concreto de forma distinta, usa este campo para añadir un nombre de clase y, después, haz referencia a él en tu archivo css. |
Desplazamiento continuo
El desplazamiento continuo mueve el contenido a una velocidad constante sin esperas entre diapositivas. Está disponible en Carousel y Carousel feed, en los tres estilos, incluidos sus bloques de Gutenberg. El shortcode Slider no expone esta opción.
- Edita el elemento en Page Builder. Para Carousel feed, abre Carousel options.
- Activa Continuous scroll.
- Elige Left o Right en Scroll direction y, después, configura Continuous scroll speed en píxeles por segundo. Los valores más altos se mueven más rápido.
- Activa Pause AutoPlay on hover para pausar mientras el puntero esté sobre el carousel, o déjalo sin marcar para que siga moviéndose.
- Guarda la página y comprueba el frontend.
Este modo activa el bucle y el desplazamiento libre automáticamente. Tiene prioridad sobre Autoplay, Autoplay speed, Reverse autoplay y el ajuste manual de bucle; esos ajustes se siguen aplicando cuando el desplazamiento continuo está desactivado. El arrastre y la navegación siguen disponibles, y el movimiento continuo se reanuda cuando el desplazamiento se asienta. La navegación por teclado y los enlaces o controles con foco pausan el movimiento continuo; abandona el carousel para reanudarlo. Los visitantes que solicitan movimiento reducido reciben un carousel estático con navegación manual. Las pestañas ocultas y los carousels fuera de pantalla se pausan hasta que vuelven a ser visibles. Un único elemento permanece estático; usa elementos suficientes para llenar el área de visualización y obtener una franja continua.
[web_carousel_feed custom_query="1" web_carousel_continuous_scroll="yes" web_carousel_scroll_direction="left" web_carousel_scroll_speed="60" web_carousel_pause_autoplay_on_hover="yes"]Elige una consulta que devuelva varios elementos. Cuando el contenido relacionado se divide por tipo de entrada, cada carousel recibe los mismos ajustes de movimiento y se pausa de forma independiente.
El contenedor del carousel expone data-continuous-scroll="true", data-scroll-direction="left|right" y data-scroll-speed="60". La pausa al pasar el cursor reutiliza data-pause-autoplay-on-hover="true"; omitirlo desactiva la pausa al pasar el cursor. Estos atributos configuran el runtime del carousel existente.
Confirma la dirección en el frontend, pasa el cursor con el ajuste de pausa activado y desactivado, arrastra a otro elemento y verifica que el movimiento se reanude sin un salto en el límite del bucle. Si se queda quieto, comprueba las preferencias de movimiento reducido, el foco del teclado, la visibilidad y el número de elementos.
Accesibilidad
Cada resultado visible sigue estando disponible para las tecnologías de asistencia y la navegación por teclado, incluidos los diseños que muestran varios resultados simultáneamente. Los resultados fuera del área de visualización del carousel se ocultan del árbol de accesibilidad y se vuelven inertes hasta que entran en la vista.
Configura accessible_name para describir el contenido. Las preferencias de movimiento reducido impiden tanto la reproducción automática temporizada como el movimiento continuo. El foco del teclado pausa la reproducción automática; los controles manuales siguen disponibles.
Comportamiento de la consulta y la plantilla
La salida relacionada dividida por tipo de entrada aplica el límite de resultados guardado de forma separada a cada tipo. Las filas históricas del selector de taxonomía combinan taxonomías con AND y los términos de cada taxonomía con IN; una consulta estructurada explícitamente conserva sus relaciones anidadas.
El carousel conserva el tamaño de la consulta guardada, incluidas las consultas de todos los resultados, independientemente de la paginación de la página. Solo se renderizan los elementos públicos publicados y sin contraseña permitidos por las reglas de permisos del tipo de contenido actual. Las selecciones explícitas conservan todos los IDs en el orden en que se crearon, incluso cuando se selecciona una sola entrada. Las consultas explícitas ausentes y las selecciones vacías no muestran nada. Usa un límite de consulta práctico para colecciones grandes; la expansión recursiva de tarjetas sigue estando limitada.
El modo relacionado interseca el origen con la selección related_posts de la entrada actual. Una relación vacía no muestra nada. El modo dividido agrupa los elementos resultantes por tipo de entrada y omite los grupos vacíos; no consulta cada tipo de forma independiente.
La plantilla default, y una plantilla eliminada, usan la alternativa de solo título del theme sin enlaces. Elige una plantilla configurada para obtener enlaces de tarjeta, medios y metadatos. La hoja de estilos/script del carousel existente y las dependencias condicionales de la plantilla seleccionada se comparten con Gutenberg. No se genera ninguna hoja de estilos nueva por carousel. Evita las plantillas autorreferenciales; la expansión anidada está limitada.
[web_carousel_feed query_type="single_posts" single_posts="123,456" layout="news-card" accessible_name="Featured news" web_carousel_arrows="yes" web_carousel_adaptive_height="yes"]Sustituye los IDs y el slug de plantilla de ejemplo por contenido publicado y una plantilla configurada en tu sitio. Borra la caché de página relevante después de los cambios cuando, de lo contrario, el HTML almacenado en caché seguiría siendo visible.
Verificación
Con el desplazamiento continuo desactivado, la reproducción automática activada y el bucle desactivado, el feed se detiene en su última diapositiva. Activa el bucle para una reproducción continua. Las pausas de visibilidad al pasar el cursor y al usar el tabulador no reinician la reproducción una vez alcanzada la última diapositiva.
Opera web_carousel_feed con entrada de puntero y teclado, y confirma que las etiquetas, el foco y el movimiento sigan siendo comprensibles. Presta especial atención a query_type y single_posts.