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

Tratar con CSS roto en el área de administración de WordPress puede ser un verdadero dolor de cabeza. Esto se debe a que, en lugar del panel de administración, verás una página desordenada y sin estilo.

Un CSS roto en el área de administración también te impide trabajar en tu sitio web, lo que lo convierte en un problema grave. Y como hay muchas causas posibles, muchos principiantes no están seguros de cómo solucionar este problema.

Nos hemos encontrado con este problema antes en nuestros propios sitios web, así que fuimos a través de todos los pasos de solución de problemas para encontrar las soluciones más fáciles. Y en este tutorial, le ayudaremos a arreglar CSS roto en el escritorio de WordPress.

He aquí un breve resumen de los temas y pasos de solución de problemas que trataremos en este artículo:

¿Qué causa la rotura de CSS en el área de administración de WordPress?

Hay varias razones por las que el CSS puede 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 para averiguar lo que tienen que arreglar.

Según 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: Los problemas de contenido mixto, en los que algunos archivos se cargan a través de HTTP en lugar de HTTPS, pueden hacer que los navegadores bloqueen los archivos CSS.
• Interferencia de temas: Algunos temas cargan CSS en el área de administración, lo que puede causar conflictos. Si utilizas un tema de administración personalizado, también puede causar problemas de estilo.
• Problemas de caché: La caché del navegador puede contener versiones obsoletas de archivos CSS. Los plugins de caché pueden servir archivos CSS antiguos, causando problemas de estilo.
• Problemas con las CDN: Las redes de distribución de contenidos (CDN) mal configuradas pueden servir versiones obsoletas de archivos CSS, lo que provoca que falten estilos o que estos estén rotos.
• Permisos de archivo incorrectos: Los archivos CSS con permisos incorrectos podrían no ser legibles por el servidor.
• Archivos dañados: Los archivos CSS pueden corromperse o faltar durante las actualizaciones o cargas.
• Extensiones del navegador: Las extensiones, especialmente los bloqueadores de contenido, pueden interferir en la visualización del CSS.

La comprensión de estas causas le ayudará a identificar por qué su área de administración de WordPress está experimentando CSS roto para que pueda realmente solucionarlo.

Paso 1: Comprobar si hay conflictos de plugins

En nuestra experiencia, los plugins de WordPress mal codificados son a menudo los culpables de la rotura de CSS 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 o servidor WordPress.

A continuación se explica cómo identificar y resolver los conflictos entre plugins.

Desactivar todos los plugins

En primer lugar, debe ir a su escritorio de WordPress y navegar a la página Plugins ” Plugins instalados.

Ahora, seleccione todos los plugins y elija “Desactivar” en el menú desplegable “Acciones masivas” y, a continuación, haga clic en “Aplicar”.

Después de eso, simplemente actualice su área de administración o vuelva a cargar la página para ver si el problema de CSS se ha resuelto. Si el CSS es fijo, entonces el problema radica en uno de los plugins.

Reactivar plugins uno a uno

Para determinar qué plugin está causando el problema, es necesario reactivar cada uno de ellos individualmente. Para ello, basta con hacer clic en el enlace “Activar” situado debajo del plugin.

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

Esto le ayudará a identificar el plugin específico que causa el problema.

Buscar una alternativa o actualizar el plugin

Una vez que hayas identificado el plugin conflictivo, puedes comprobar si hay una actualización disponible para él. Si la actualización no resuelve el problema, busca un plugin alternativo o ponte en contacto con el desarrollador del plugin para obtener ayuda.

Para obtener instrucciones detalladas, consulte nuestro tutorial sobre cómo desactivar plugins. Este tutorial también muestra cómo desactivar plugins mediante FTP en caso de que el área de administración de WordPress no sea accesible.

Paso 2: Cargar archivos inseguros en HTTPS

Otra causa común de rotura de CSS con la que se han encontrado nuestros usuarios es que han configurado incorrectamente las URL seguras, lo que provoca problemas de contenido mixto.

Esto ocurre cuando su sitio web está configurado para utilizar el protocolo seguro HTTPS, pero el CSS se sirve desde HTTP o el protocolo inseguro.

Cuando esto ocurre, los navegadores más populares como Google Chrome bloquean automáticamente los recursos inseguros, lo que provoca que el CSS no funcione correctamente en el área de administración de WordPress.

Este problema puede confirmarse utilizando la herramienta de inspección de su navegador. Simplemente cambie a la pestaña Consola y verá el error Contenido mixto.

Para solucionar este problema, primero debe asegurarse de que la configuración de WordPress tiene las URL correctas.

Vaya a la página Ajustes ” General y asegúrese de que tanto la Dirección de WordPress como la Dirección del Sitio tienen HTTPS en las URLs.

Si ya tiene HTTPS en ambas URLs, entonces puede forzar manualmente a WordPress a utilizar el protocolo HTTPS.

Simplemente edite su archivo wp-config.php y añada el siguiente código:

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

Alternativamente, puede utilizar plugins como Really Simple SSL para imponer HTTPS para todas las URL.

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

Paso 3: Comprobar si hay interferencias temáticas

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

A continuación se explica cómo identificar y resolver los problemas relacionados con los temas.

Cambiar a un tema predeterminado

Para ver si su tema de WordPress está causando el CSS roto, primero tiene que cambiar a un tema por defecto de WordPress.

Vaya a su escritorio de WordPress y navegue hasta la página Apariencia ” Temas.

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

Nota: Si no tiene instalado ningún tema por defecto, puede instalar uno haciendo clic en el botón “Añadir nuevo tema” de la parte superior. Los temas predeterminados de WordPress tienen nombres de años.

Actualice su área de administración después de cambiar a un tema por defecto para ver si el problema de CSS se ha solucionado.

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

Corrección del conflicto de temas

Para solucionarlo, primero debe comprobar si hay una actualización disponible para su tema.

Vaya a Apariencia ” Temas, seleccione su tema y haga clic en “Actualizar ahora”.

Si esto no resuelve el problema, entonces usted tendrá que revisar los cambios que ha hecho a su tema. Comprueba todas las personalizaciones del tema que podrían causar el problema de CSS roto.

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

Como último recurso, póngase en contacto con el desarrollador del tema para obtener ayuda o considere la posibilidad de cambiar de tema.

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

Estas son algunas de las ventajas de WPCode:

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

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

Utilizamos WPCode en nuestros sitios web para gestionar fragmentos de código personalizados, incluyendo CSS personalizado. Para más detalles, consulta nuestra reseña de WPCode.

Paso 4: Corrección de 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 que una configuración incorrecta de la caché provoca conflictos con la caché del navegador, lo que puede causar problemas de CSS roto.

Para solucionarlo, primero tienes que borrar la caché de tu navegador.

Después de eso, puede volver a cargar el área de administración de WordPress para ver si el problema se ha resuelto. Si no es así, entonces usted necesita para borrar la caché de WordPress.

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

Paso 5: Corregir problemas de CDN

Si utiliza un servicio de red de distribución de contenidos (CDN), una configuración incorrecta puede causar problemas de CSS roto en el área de administración de WordPress.

He aquí cómo identificar y resolver estos problemas.

En primer lugar, debes utilizar la herramienta Inspeccionar de 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, debe acceder al sitio web de su servicio CDN e iniciar sesión en el panel de control de su cuenta.

Desde aquí, vaya a la sección Caché ” Configuración y haga clic en el botón “Purgar todo” debajo de la opción Purgar caché.

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

Después de eso, es necesario volver a su sitio web y volver a cargar el área de administración para ver si el problema se ha solucionado ahora.

Si no está corregido, continúe con el paso siguiente.

Paso 6: Corrección de los permisos de archivo incorrectos

También hemos observado que unos permisos de archivo incorrectos impiden que el servidor lea los archivos CSS, lo que provoca la aparición de CSS defectuosos en el área de administración de WordPress.

He aquí cómo comprobar y arreglar los permisos de los archivos.

En primer lugar, debe conectarse a su sitio WordPress mediante FTP.

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

Ahora, haga clic con el botón derecho en la carpeta wp-admin y seleccione ‘Permisos de archivo’ o ‘Propiedades’.

En primer lugar, debe asegurarse de que todos los directorios tienen el valor 755.

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

Ahora puede repetir el proceso, establecer los permisos en 644 y aplicarlos recursivamente sólo a todos los archivos.

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

Después de eso, visite el área de administración para ver si el problema de CSS roto se ha resuelto. Si todavía está allí, entonces usted necesita para proceder al siguiente paso.

Paso 7: Reparar archivos dañados

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

Sus archivos de WordPress pueden corromperse incluso sin que usted haga nada. Esto puede ocurrir debido a una actualización incompleta de WordPress, un borrado accidental de archivos o una configuración incorrecta por parte de su proveedor de alojamiento de WordPress.

A continuación se explica cómo reparar o sustituir los archivos dañados.

En primer lugar, debe descargar una copia nueva de WordPress desde WordPress.org.

A continuación, extraiga el archivo ZIP descargado en su ordenador.

A continuación, debe conectarse a su WordPress mediante FTP y cargar los archivos nuevos de WordPress desde su ordenador.

Elija “Sobrescribir” cuando se le pida para asegurarse de que se cargan archivos nuevos en su sitio web.

Una vez que haya terminado, puede visitar su área de administración de WordPress para ver si esto ha resuelto el problema de CSS roto.

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

Paso 8: Compruebe las extensiones del navegador

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

A continuación se explica cómo identificar y resolver los problemas causados por las extensiones del navegador.

En primer lugar, tienes que abrir tu navegador y navegar hasta el menú de extensiones/add-ons.

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

Puede simplemente desactivar las extensiones o eliminarlas por completo.

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

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

Reactive cada extensión individualmente y actualice el área de administración después de activar cada extensión para identificar la que causa el problema.

Una vez que haya identificado las extensiones problemáticas, puede comprobar la configuración de las extensiones para evitar el bloqueo del CSS de administración de WordPress.

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

Consejos para solucionar problemas

Con suerte, los pasos anteriores resolverán 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:

Actualice sus permalinks de WordPress para actualizar el archivo .htaccess sin riesgo de errores. En ocasiones, las reglas de reescritura de WordPress pueden impedir que los archivos CSS se carguen correctamente. Esta acción ayuda a borrar y restablecer las reglas de reescritura de URL.

Buscar malware:

A veces, un intento de pirateo o malware también puede hacer que su área de administración aparezca rota. Escanea tu sitio WordPress en busca de malware potencial e intenta limpiar tu sitio hackeado.

Esperamos que este artículo te haya ayudado a solucionar el problema del CSS roto en el área de administración de WordPress. También puedes consultar nuestra guía de solución de problemas de WordPress para ver otras formas de solucionar problemas de WordPress o consultar nuestra guía sobre cómo solicitar asistencia de WordPress correctamente.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.