Cómo solucionar CSS roto en el panel de administración de WordPress

El CSS roto en el panel de administración de WordPress parece aterrador al principio. Pero hemos aprendido que generalmente es una simple reacción en cadena causada por un plugin o una regla de caché, y podemos rastrearla rápidamente.

Después de ayudar a miles de lectores y clientes, hemos perfeccionado una lista de verificación que identifica al culpable sin tocar su contenido ni arriesgar tiempo de inactividad.

Quédese con nosotros y lo guiaremos a través de cada paso, para que su área de administración vuelva a estar en forma y pueda seguir construyendo con confianza.

Aquí hay una descripción general rápida de los temas y los pasos de solución de problemas que cubriremos en este artículo:

¿Qué causa que el CSS se rompa en el área de administración de WordPress?

Hay varias razones por las que el CSS podría romperse en el área de administración de WordPress. Sin embargo, al igual que muchos errores comunes de WordPress, puede ser frustrante para los principiantes descubrir qué necesitan arreglar.

En nuestra experiencia, las siguientes son las principales causas de CSS roto en el área de administración de WordPress:

• Conflictos de plugins: Los plugins mal codificados con su propio CSS pueden entrar en conflicto con los estilos predeterminados de WordPress al anular o interferir con los estilos del área de administración.
• Desajuste HTTP/HTTPS: Problemas de contenido mixto, donde algunos archivos se cargan a través de HTTP en lugar de HTTPS, pueden hacer que los navegadores bloqueen los archivos CSS.
• Interferencia del tema: Algunos temas cargan CSS en el área de administración, lo que puede causar conflictos. Si estás utilizando un tema de administrador personalizado, también puede causar problemas de estilo.
• Problemas de caché: La caché del navegador puede contener versiones desactualizadas de los archivos CSS. Los plugins de caché podrían servir archivos CSS antiguos, causando problemas de estilo.
• Problemas de CDN: Las redes de entrega de contenido (CDN) mal configuradas pueden servir versiones desactualizadas de los archivos CSS, lo que lleva a estilos faltantes o rotos.
• Permisos de archivo incorrectos: Es posible que los archivos CSS con permisos incorrectos no sean legibles por el servidor.
• Archivos corruptos: Los archivos CSS pueden corromperse o faltar durante las actualizaciones o cargas.
• Extensiones del navegador: Las extensiones, especialmente los bloqueadores de contenido, pueden interferir con la forma en que se muestra el CSS.

Comprender estas causas te ayudará a identificar por qué el área de administración de tu WordPress está experimentando CSS roto para que puedas solucionarlo.

Paso 1: Verifique conflictos de plugins

En nuestra experiencia, los plugins de WordPress mal codificados suelen ser los culpables de que el CSS se rompa en el área de administración. Sin embargo, a veces, los plugins bien codificados también pueden tener problemas con la configuración de tu sitio WordPress o servidor.

Aquí te explicamos cómo identificar y resolver conflictos de plugins.

Desactiva todos los plugins

Primero, necesitas ir a tu panel de administración de WordPress y navegar a la página Plugins » Plugins Instalados.

Ahora, selecciona todos los plugins y elige 'Desactivar' en el menú desplegable de 'Acciones en lote', luego haz clic en 'Aplicar'.

Después de eso, simplemente actualiza tu área de administración o recarga la página para ver si el problema del CSS se ha resuelto. Si el CSS está arreglado, entonces el problema reside en uno de los plugins.

Reactivar plugins uno por uno

Para determinar qué plugin está causando el problema, necesitas reactivar cada uno individualmente. Puedes hacerlo simplemente haciendo clic en el enlace 'Activar' debajo del plugin.

Después de activar cada plugin, tienes que actualizar el área de administración para verificar si el CSS se rompe de nuevo.

Esto te ayudará a identificar el plugin específico que está causando el problema.

Busca una alternativa o actualiza el plugin

Una vez que hayas identificado el plugin conflictivo, puedes verificar si hay una actualización disponible para él. Si la actualización no resuelve el problema, considera buscar un plugin alternativo o contactar al desarrollador del plugin para obtener soporte.

Para instrucciones detalladas, consulta nuestro tutorial sobre cómo desactivar plugins. Este tutorial también muestra cómo desactivar plugins usando FTP en caso de que no puedas acceder a tu área de administración de WordPress.

Paso 2: Cargando archivos inseguros en HTTPS

Otra causa común de CSS roto que nuestros usuarios han encontrado es que tienen URLs seguras mal configuradas, lo que lleva a problemas de contenido mixto.

Esto sucede cuando tu sitio web está configurado para usar el protocolo seguro HTTPS, pero el CSS se sirve desde HTTP o el protocolo inseguro.

Cuando esto sucede, los navegadores populares como Google Chrome bloquearán automáticamente los recursos inseguros, lo que resultará en CSS roto en tu área de administración de WordPress.

Este problema se puede confirmar usando la herramienta Inspeccionar en tu navegador. Simplemente cambia a la pestaña Consola y verás el error de Contenido Mixto.

Para solucionar este problema, primero debes asegurarte de que la configuración de tu WordPress tenga las URL correctas.

Ve a la página Configuración » General y asegúrate de que tanto la Dirección de WordPress como la Dirección del Sitio tengan HTTPS en las URL.

Si ya tienes HTTPS en ambas URL, entonces puedes forzar manualmente a WordPress a usar el protocolo HTTPS.

Simplemente edita tu archivo wp-config.php y agrega el siguiente código:

define('FORCE_SSL_ADMIN', true);
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
    $_SERVER['HTTPS'] = 'on';
}

Alternativamente, puedes usar plugins como Really Simple SSL para forzar HTTPS en todas las URL.

Para más detalles, consulta nuestro tutorial sobre cómo solucionar el error de contenido mixto en WordPress.

Paso 3: Verifique interferencias del tema

Hemos descubierto que la interferencia innecesaria del tema también es una causa común de CSS roto en el área de administración de WordPress.

Aquí te mostramos cómo identificar y resolver problemas relacionados con el tema.

Cambia a un tema predeterminado

Para ver si tu tema de WordPress está causando el CSS roto, primero necesitas cambiar a un tema predeterminado de WordPress.

Ve a tu panel de WordPress y navega a la página Apariencia » Temas.

Aquí, necesitas activar un tema predeterminado de WordPress, como Twenty Twenty-Four.

Nota: Si no tienes ningún tema predeterminado instalado, puedes instalar uno haciendo clic en el botón ‘Añadir nuevo tema’ en la parte superior. Los temas predeterminados de WordPress llevan el nombre de años.

Actualiza tu área de administración después de cambiar a un tema predeterminado para ver si el problema de CSS se ha solucionado.

Si el CSS ahora se carga correctamente, entonces el problema está en tu tema anterior.

Solución de conflictos de temas

Para solucionar esto, primero debes verificar si hay una actualización disponible para tu tema.

Ve a Apariencia » Temas, selecciona tu tema y haz clic en ‘Actualizar ahora’.

Si esto no resuelve el problema, entonces deberás revisar cualquier cambio que hayas hecho en tu tema. Verifica todas las personalizaciones del tema que podrían causar el problema de CSS roto.

En particular, querrás revisar cualquier CSS adicional o código personalizado en el archivo functions.php en busca de errores.

Como último recurso, contacta al desarrollador del tema para obtener soporte o considera cambiar a un tema diferente.

Recomendamos usar WPCode para evitar este tipo de errores en el futuro. Es el mejor plugin de fragmentos de código de WordPress que te permite administrar todo tu CSS personalizado en un solo lugar y no requiere editar el archivo functions.php .

Aquí tienes algunos de los beneficios de WPCode:

• Puedes guardar y administrar tu código CSS personalizado más fácilmente.
• WPCode incluye verificaciones integradas para buscar errores.
• No pierdes tu CSS personalizado al cambiar de tema.

También hay disponible una versión gratuita de WPCode con funciones limitadas.

Usamos WPCode en nuestros sitios web para administrar fragmentos de código personalizados, incluido el CSS personalizado. Para más detalles, consulta nuestra reseña de WPCode.

Paso 4: Solucione problemas de caché

Normalmente, los plugins de caché de WordPress no almacenan en caché el área de administración de WordPress.

Sin embargo, hemos visto configuraciones de caché incorrectas que causan conflictos con la caché del navegador, lo que puede provocar problemas de CSS roto.

Para solucionar esto, primero necesitas borrar la caché de tu navegador.

Después de eso, puedes recargar el área de administración de WordPress para ver si el problema se ha resuelto. Si no es así, entonces necesitas borrar la caché de WordPress.

Esta es la caché generada por tu plugin de caché de WordPress. Tenemos un tutorial detallado sobre cómo borrar la caché en diferentes plugins de caché de WordPress.

Paso 5: Solucione problemas de CDN

Si estás utilizando un servicio de Red de Entrega de Contenidos (CDN), una configuración incorrecta a veces puede causar problemas de CSS rotos en el área de administración de WordPress.

Aquí te mostramos cómo identificar y resolver estos problemas.

Primero, necesitas usar la herramienta Inspeccionar elemento en tu navegador y cambiar a la pestaña 'Consola'. Aquí verás errores si tus archivos CSS están bloqueados o no se encuentran.

A continuación, necesitas acceder al sitio web de tu servicio CDN e iniciar sesión en tu panel de cuenta.

Desde aquí, navega a la sección Caché » Configuración y haz clic en el botón 'Purgar todo' bajo la opción Purgar caché.

Nota: Te mostramos la captura de pantalla de Cloudflare CDN. Sin embargo, podrás localizar fácilmente la opción para purgar la caché en todos los proveedores de CDN.

Después de eso, necesitas regresar a tu sitio web y recargar el área de administración para ver si el problema se ha solucionado.

Si no se ha solucionado, continúa con el siguiente paso.

Paso 6: Solucione permisos de archivo incorrectos

También hemos encontrado permisos de archivo incorrectos que impiden que el servidor lea los archivos CSS, lo que provoca que el CSS se vea mal en el área de administración de WordPress.

Aquí te mostramos cómo verificar y corregir los permisos de archivo.

Primero, necesitas conectarte a tu sitio de WordPress usando FTP.

Una vez conectado, debes navegar a tu directorio raíz de WordPress. Este es el directorio que contiene las carpetas wp-admin, wp-includes y wp-content.

Ahora, haz clic derecho en la carpeta wp-admin y selecciona 'Permisos de archivo' o 'Propiedades'.

Primero, necesitas asegurarte de que todos los directorios estén configurados en 755.

Si no lo están, cambia los permisos y aplícalos recursivamente a todos los subdirectorios.

Ahora puedes repetir el proceso, establecer los permisos en 644 y aplicarlos recursivamente solo a todos los archivos.

Para más detalles, consulta nuestro tutorial sobre cómo establecer permisos de archivos en WordPress.

Después de eso, visita el área de administración para ver si el problema de CSS roto se ha resuelto. Si aún persiste, entonces necesitas proceder al siguiente paso.

Paso 7: Repare archivos corruptos

Los archivos corruptos pueden causar CSS roto en el área de administración de WordPress.

Tus archivos de WordPress pueden corromperse incluso sin ninguna acción de tu parte. Esto puede suceder debido a una actualización incompleta de WordPress, eliminación accidental de archivos o una mala configuración por parte de tu proveedor de hosting de WordPress.

Aquí te explicamos cómo reparar o reemplazar archivos corruptos.

Primero, necesitas descargar una copia nueva de WordPress desde WordPress.org.

Luego, extrae el archivo ZIP descargado en tu computadora.

A continuación, necesitas conectarte a tu WordPress usando FTP y subir los archivos nuevos de WordPress desde tu computadora.

Elige 'Sobrescribir' cuando se te solicite para asegurar que los archivos nuevos se suban a tu sitio web.

Una vez terminado, puedes visitar tu área de administración de WordPress para ver si esto ha resuelto el problema de CSS roto.

Si esto no soluciona el problema, entonces es hora de pasar al siguiente paso.

Paso 8: Verifique extensiones del navegador

Las extensiones del navegador, especialmente aquellas relacionadas con el bloqueo de contenido y anuncios, pueden interferir con la forma en que se muestra el CSS en el área de administración de WordPress.

Aquí te explicamos cómo identificar y resolver problemas causados por extensiones del navegador.

Primero, necesitas abrir tu navegador y navegar al menú de extensiones/complementos.

Deshabilita temporalmente todas las extensiones, especialmente los bloqueadores de anuncios y los complementos de seguridad.

Puedes simplemente deshabilitar las extensiones o eliminarlas por completo.

Una vez que hayas terminado, puedes ir al área de administración de WordPress para ver si el problema de CSS se ha resuelto.

Si el problema se resuelve, entonces necesitas averiguar qué extensión causó el problema.

Reactiva cada extensión individualmente y actualiza el área de administración después de habilitar cada extensión para identificar la que causa el problema.

Una vez que hayas identificado las extensiones problemáticas, puedes revisar la configuración de la extensión para evitar que bloquee el CSS del administrador de WordPress.

Si eso no funciona, entonces intenta encontrar una extensión alternativa.

Consejos para la solución de problemas

Esperamos que los pasos anteriores resuelvan los problemas de CSS en el área de administración de WordPress. Sin embargo, si ninguno de los pasos anteriores funciona, puedes probar estos consejos adicionales:

Actualizar Permalinks:

Actualiza tus permalinks de WordPress para actualizar el archivo .htaccess sin arriesgarte a cometer errores. Ocasionalmente, las reglas de reescritura de WordPress pueden impedir que los archivos CSS se carguen correctamente. Esta acción ayuda a limpiar y restablecer las reglas de reescritura de URL.

Escanear en busca de Malware:

A veces, un intento de hackeo o malware también podría hacer que tu área de administración parezca rota. Escanea tu sitio de WordPress en busca de malware potencial e intenta limpiar tu sitio hackeado.

Esperamos que este artículo te haya ayudado a solucionar el problema de CSS roto en el área de administración de WordPress. También te puede interesar consultar nuestra guía de solución de problemas de WordPress para obtener formas adicionales de arreglar problemas de WordPress o nuestra guía sobre cómo pedir soporte de WordPress correctamente.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.