Cómo arreglar el error de la barra lateral debajo del contenido en WordPress

¿Intentas solucionar el error de la barra lateral debajo del contenido en WordPress?

Este problema se produce con las plantillas de WordPress que utilizan un diseño de dos columnas para el contenido y una barra lateral. Debido a un ligero cambio en el código, la barra lateral empieza a aparecer debajo del contenido en lugar de al lado

En este artículo, te mostraremos cómo solucionar fácilmente el error de la barra lateral debajo del contenido en WordPress

Arreglar el problema de la barra lateral debajo del editor de contenido

¿Qué causa el problema de la barra lateral debajo del contenido en WordPress?

La causa más común de que la barra lateral aparezca debajo del contenido es un error HTML o CSS que rompe el diseño

Cada <div> en HTML debe estar bien cerrado. Si la plantilla responsable de la visualización de la página tiene un <div> sin cerrar, se rompería el diseño

Cerrar todos los divs en el diseño del tema de WordPress

Del mismo modo, una etiqueta

de cierre no deseada también puede afectar al diseño y hacer que la barra lateral se desplace hacia abajo

Aparte del HTML, el CSS también afecta al diseño general de cada elemento de tu sitio web. Se utiliza para definir la anchura, la alineación y la flotación de los elementos en tu diseño

En pocas palabras, si la anchura de tu área de contenido es mayor que el espacio disponible, entonces obligará a la barra lateral a moverse hacia abajo

Barra lateral debajo del área de contenido

Dicho esto, vamos a ver cómo solucionar fácilmente el error de la barra lateral debajo del contenido en WordPress

Arreglar el error de la barra lateral debajo del contenido en WordPress

En primer lugar, tendrás que averiguar qué código específico está causando el problema de la barra lateral debajo del contenido en WordPress.

1. Deshacer los cambios recientes en tu tema de WordPress

Normalmente, el problema se debe a cambios en los archivos de tu tema de WordPress

Si has realizado recientemente algún cambio en tu tema o tema hijo de WordPress, examinar esos cambios será una forma rápida de solucionar el problema

Si no puedes averiguar qué cambios debes revertir, sigue leyendo y te mostraremos otras formas de solucionar el problema

2. Descarta los plugins de WordPress

La apariencia y el estilo de tu sitio de WordPress están controlados por el tema que utilizas. Sin embargo, a veces los plugins de WordPress también pueden añadir su propio HTML y CSS a tu sitio web

Por ejemplo, añadir un formulario de contacto en una página o una caja de luz emergente cargaría CSS y HTML adicionales

Para asegurarte de que el problema no está causado por un plugin de WordPress, puedes desactivar temporalmente todos los plugins de WordPress de tu sitio web.

Desactivar todos los plugins de WordPress

Si el problema desaparece, significa que un plugin estaba causando el problema. Simplemente activa todos tus plugins de WordPress uno por uno, comprobando tu sitio web después de cada plugin para averiguar cuál es el que está causando el problema.

Después de eso, puedes ponerte en contacto con el soporte del plugin para encontrar una solución e informar del problema

3. Encuentra el HTML que rompe el diseño

Como hemos dicho antes, un HTML roto <div> es una de las causas habituales de que la barra lateral se desplace por debajo del contenido

Ahora bien, si el problema se produce en una zona concreta de tu sitio web, puedes comprobar la plantilla responsable de mostrar ese código

Por ejemplo, si este problema sólo se produce en las entradas individuales, entonces puedes comprobar la plantilla single.php. Para saber qué plantilla debes mirar, consulta nuestra completa hoja de trucos sobre la jerarquía de las plantillas de WordPress

La forma más fácil de encontrar rápidamente un elemento div no cerrado es utilizar la función Herramienta del Validador del W3C

Uso de la herramienta Validador de HTML

También puedes utilizar la herramienta Inspect o las aplicaciones del editor de código que te ayudan a depurar el código resaltando las etiquetas de inicio y fin de los elementos

Depurar un error HTML con un editor de código

Al mirar el código, tienes que asegurarte de que cualquier <div> que se abra tenga también un cierre </div> de cierre

Del mismo modo, también debes buscar una etiqueta de cierre

huérfana que no tenga su correspondiente etiqueta abierta

Si has encontrado el HTML defectuoso, al arreglarlo se solucionará el problema de la barra lateral que aparece debajo del contenido

4. Encuentra el CSS que mueve la barra lateral por debajo del contenido

El CSS controla los aspectos más importantes del diseño de tu sitio web. Tu tema de WordPress utiliza CSS para definir el ancho del contenido y las áreas de la barra lateral dentro de un diseño de cuadrícula

Este valor está en el porcentaje del área de visualización disponible. En los dispositivos móviles, tu tema empujará automáticamente la barra lateral por debajo del contenido

Para averiguar qué CSS está causando el problema, puedes utilizar la herramienta Inspeccionar. Simplemente moviendo tu contenido al campo envolvente, a la sección de contenido y a las áreas de la barra lateral te mostrará su anchura y altura

Comprueba los problemas de anchura del CSS

Por ejemplo, si tu área de contenido tiene un 70% de ancho y el área de la barra lateral tiene un 33%, entonces se moverá automáticamente hacia abajo. Cuando necesites calcular estos valores, también deberás tener en cuenta el espacio utilizado por el relleno y los valores de los márgenes utilizados por cada sección

5. Borrar la caché de WordPress

La página web no se actualiza

Si sigues viendo la barra lateral debajo del área de contenido, es posible que quieras borrar la caché de WordPress.

Cuando haces cambios que no aparecen de inmediato, a menudo se debe a problemas de caché.

Es habitual que los plugins de caché te muestren una versión más antigua de la misma página. Borrar la caché de WordPress y del navegador te ayudará a ver los cambios aplicados a tu sitio web

Esperamos que este artículo te haya ayudado a saber cómo solucionar el error de la barra lateral debajo del contenido en WordPress. También es posible que quieras marcar nuestro manual definitivo sobre los errores más comunes de WordPress y cómo solucionarlos

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo arreglar el error de la barra lateral debajo del contenido en WordPress puedes visitar la categoría Themes.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up