Cambiar el orden de widgets del footer en móvil con Flexbox — guía completa
En muchos temas de WordPress el footer contiene varias áreas o widgets (por ejemplo: contacto, redes sociales, menú, copyright). En escritorio el orden visual suele ser el deseado, pero en móvil, cuando los widgets se apilan verticalmente, puede interesar reordenarlos para priorizar contenido (p. ej. mostrar primero el formulario de contacto o el menú). La técnica más moderna y fiable para lograr esto sin tocar la estructura HTML es usar Flexbox y la propiedad order o la propiedad flex-direction en una media query para dispositivos móviles.
Resumen de la estrategia
- Detectar el contenedor del footer que agrupa los widgets (p. ej. .footer-widgets, .widget-area o .site-footer .widgets).
- Convertir ese contenedor a Flexbox en la vista móvil y establecer la dirección de los elementos en columna.
- Usar order o column-reverse para reordenar visualmente sin cambiar el HTML.
- Si hace falta un control más preciso, asignar clases o atributos a widgets desde functions.php y referenciarlos en CSS.
- Probar en diferentes tamaños, limpiar cachés y considerar accesibilidad y orden semántico.
Ventajas de usar Flexbox para reordenar widgets
- No modifica el DOM ni la salida PHP de WordPress.
- Se puede aplicar sólo en pantallas pequeñas mediante media queries.
- Funciona con cualquier tema que tenga un contenedor único para widgets.
- Permite reordenar visualmente sin afectar el orden para lectores de pantalla si se mantiene la jerarquía HTML (importante: si el orden visual difiere mucho del semántico, evaluar impacto en accesibilidad).
Pasos detallados
-
Identificar el contenedor y los widgets
Usa las herramientas de desarrollador del navegador (Inspector) y localiza el wrapper que contiene los widgets del footer. Ejemplos comunes:
- .footer-widgets
- .widget-area
- .site-footer .widgets
-
Probar con flexbox en la media query móvil
Aplica display:flex al contenedor dentro de una media query para pantallas pequeñas y establece flex-direction en columna para que los widgets se apilen verticalmente.
Ejemplo: convertir el contenedor en flex y usar column-reverse para invertir el orden:
.footer-widgets { / Comportamiento por defecto en escritorio (opcional) / display: block } / En móvil: apilamos con flexbox y damos la vuelta al orden / @media (max-width: 768px) { .footer-widgets { display: flex flex-direction: column-reverse / invierte el orden visual / } .footer-widgets .widget { / Aseguramos que cada widget ocupe su espacio / width: 100% } }Con esto, el último widget en el HTML aparecerá primero en móviles. Es la forma más simple si quieres invertir completamente el orden.
-
Reordenar de forma selectiva con la propiedad order
Si quieres un orden personalizado (no simplemente invertir), usa order en cada widget. Puedes seleccionar widgets por su posición (:nth-child()) o por su id/clase (p. ej. #text-2 o .widget_text).
/ Ejemplo: en móvil, poner el widget 3 primero, luego el 1 y por último el 2 / @media (max-width: 768px) { .footer-widgets { display: flex flex-direction: column } .footer-widgets .widget:nth-child(1) { order: 2 } / primero en HTML, segundo visual / .footer-widgets .widget:nth-child(2) { order: 3 } / segundo en HTML, último visual / .footer-widgets .widget:nth-child(3) { order: 1 } / tercero en HTML, primero visual / }Nota: order sólo afecta al orden visual. El DOM no cambia.
-
Asignar clases a widgets desde functions.php (opcional pero útil)
Si prefieres apuntar a widgets concretos por su función (p. ej. .widget-contacto) en lugar de nth-child o IDs generados por el tema, puedes inyectar clases adicionales a los widgets cuando se renderizan. Inserta este snippet en el functions.php del child theme:
/ Añadir una clase personalizada según el id del widget / add_filter(dynamic_sidebar_params, añadir_clase_widget_footer) function añadir_clase_widget_footer(params) { global wp_registered_widgets id = params[0][id] // id del sidebar/widget-area widget_id = params[0][widget_id] // id del widget, p. ej. text-2 // Solo para el sidebar del footer (ajusta sidebar-1 al id de tu área) if (id === sidebar-footer) { // añadir clase al antes de abrir el wrapper del widget (funciona en la mayoría de temas) params[0][before_widget] = str_replace(class=, class=mi-widget . esc_attr(widget_id) . , params[0][before_widget]) } return params }Con esto cada widget recibe una clase basada en su widget_id (por ejemplo text-2), y en CSS puedes apuntar directamente:
@media (max-width: 768px) { .footer-widgets { display:flex flex-direction:column } / Apuntar por clase añadida / .footer-widgets .mi-widget.text-2 { order: 1 } / poner primero en móvil / .footer-widgets .mi-widget.nav_menu-3 { order: 2 } / poner después / } -
Incluir soporte para temas con wrappers distintos
Hay temas que usan nombres de clases/ids distintos para el footer. Asegúrate de ajustar selectores (p. ej. .site-footer .widget-area, #colophon .widgets). Si no encuentras un contenedor único, es preferible crear uno en el template del child theme o usar selectores más específicos por widget.
-
Probar, limpiar cachés y revisar accesibilidad
- Prueba en varios navegadores y dispositivos (Chrome/Firefox/Safari/Edge, Android/iOS).
- Si usas plugins de caché o CDN, purga la caché tras los cambios.
- Revisa el orden lógico para usuarios de lectores de pantalla: si el orden visual difiere mucho del DOM, evalúa si es preferible modificar la plantilla PHP para cambiar el orden semántico en lugar de solo visual.
Ejemplos concretos según casos comunes
1) Invertir todo el orden en móviles (más simple)
@media (max-width: 768px) {
.footer-widgets {
display: flex
flex-direction: column-reverse
}
}
2) Orden personalizado usando nth-child
@media (max-width: 768px) {
.footer-widgets { display:flex flex-direction:column }
/ Supongamos 4 widgets y queremos este orden: 3,1,4,2 /
.footer-widgets .widget:nth-child(1) { order: 2 } / 1 -> segundo /
.footer-widgets .widget:nth-child(2) { order: 4 } / 2 -> cuarto /
.footer-widgets .widget:nth-child(3) { order: 1 } / 3 -> primero /
.footer-widgets .widget:nth-child(4) { order: 3 } / 4 -> tercero /
}
3) Reordenar apuntando a clases personalizadas añadidas vía functions.php
// functions.php (child theme)
add_filter(dynamic_sidebar_params, añadir_clase_widget_footer)
function añadir_clase_widget_footer(params) {
sidebar_id = params[0][id]
if (sidebar_id === sidebar-footer) {
widget_id = params[0][widget_id] // p.ej. text-2
params[0][before_widget] = str_replace(class=, class=widget- . esc_attr(widget_id) . , params[0][before_widget])
}
return params
}
/ CSS apuntando a las clases widget-text-2, widget-nav_menu-3, etc. /
@media (max-width: 768px) {
.footer-widgets { display:flex flex-direction:column }
.footer-widgets .widget-text-2 { order: 1 } / poner primero /
.footer-widgets .widget-nav_menu-3 { order: 2 }
.footer-widgets .widget-recent-posts-4 { order: 3 }
}
Compatibilidad y consideraciones
- Flexbox está soportado en todos los navegadores modernos. Para navegadores muy antiguos (IE9 y anteriores) no funcionará correctamente planifica degradado razonable (el orden seguirá siendo el del DOM).
- Si dependes de accesibilidad (lectores de pantalla, orden lógico de tabulación), recuerda que cambiar sólo el orden visual puede confundir la experiencia. En estos casos considera reordenar el HTML en el template del child theme.
- Si tu tema usa JavaScript para manipular widgets, revisa que no entre en conflicto con los cambios de CSS.
- Si el footer tiene colapsado por estilos previos (float, grid, etc.), adapta selectores o desactiva estilos conflictivos para el breakpoint móvil.
Depuración y comprobaciones rápidas
- Inspecciona el DOM y verifica el selector del contenedor de widgets.
- Prueba cambios CSS en las herramientas del navegador antes de aplicarlos al archivo del tema.
- Si no ves cambios, revisa la especificidad del selector y que no haya reglas más específicas o !important en el CSS del tema. Puedes usar un selector más específico o !important con moderación.
- Comprueba que la media query coincide con el ancho de tu dispositivo (ajusta max-width si usas otro breakpoint).
- Si tu tema genera widgets dinámicamente o con wrappers personalizados, añade clases desde functions.php como se mostró arriba.
Resumen final
Cambiar el orden de los widgets del footer en móvil se puede lograr de forma limpia y reversible con Flexbox. Las opciones van desde invertir todo el orden con flex-direction: column-reverse hasta aplicar órdenes personalizados con order por widget. Para apuntar con precisión a widgets concretos, añade clases desde functions.php en tu child theme y referencia esas clases en CSS dentro de una media query. Prueba en distintos dispositivos y considera la accesibilidad cuando el orden visual difiera del DOM.
Implementa siempre en un child theme o a través del panel de CSS adicional del personalizador para evitar perder cambios con actualizaciones del tema, y purga cachés tras aplicar modificaciones.
Leave a Reply