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

encontrar WordPress El problema de los estilos CSS backend corruptos es un verdadero dolor de cabeza. Esto se debe a que la interfaz de administración del backend puede convertirse en una página desordenada y sin estilo.

Este problema no sólo dificulta el uso del backend del sitio, sino que entorpece directamente la gestión y el mantenimiento del mismo, por lo que es un problema que hay que solucionar cuanto antes. Y muchos novatos a menudo no saben cómo solucionarlo.

Nos hemos encontrado con un problema similar en nuestro propio sitio web, así que probamos todos los pasos para encontrar la solución más fácil y eficaz. En este tutorial, vamos a compartir cómoQuick Fix WordPress Problema de corrupción de estilos CSS del backend.

¿Por qué está roto el CSS del backend de WordPress?

Hay muchas razones para la corrupción CSS backend de WordPress, lo que hace que sea difícil para los novatos para solucionar el problema. A continuación se muestra nuestro resumen de las principales causas de los estilos CSS rotos en el backend de WordPress:

1. conflicto de plug-ins
   Algunos plugins con código de baja calidad pueden incluir sus propios archivos CSS, que pueden entrar en conflicto con los estilos predeterminados de WordPress y provocar anomalías en el estilo del backend.
2. Error HTTP/HTTPS
   Cuando un sitio tiene problemas de contenido mixto (algunos archivos se cargan a través de HTTP en lugar de HTTPS), el navegador puede impedir que se carguen los archivos CSS, con la consiguiente pérdida de estilo.
3. Interferencia temática
   Algunos temas cargan sus propios archivos CSS en el backend, lo que puede causar conflictos. Esto también puede causar problemas de estilo si se utiliza un tema backend personalizado.
4. Problemas de caché
   La caché del navegador puede estar almacenando archivos CSS obsoletos. Además, el plugin de caché puede estar sirviendo archivos CSS antiguos, provocando que los estilos se muestren incorrectamente.
5. Problemas de CDN
   Una red de distribución de contenidos (CDN) mal configurada puede servir versiones antiguas de archivos CSS, lo que provoca que falten estilos o que éstos estén dañados.
6. Error de permiso de archivo
   Si los permisos de los archivos CSS no están configurados correctamente, es posible que el servidor no pueda leerlos.
7. corrupción de archivos
   Los archivos CSS pueden dañarse o perderse durante el proceso de actualización o carga.
8. Extensiones del navegador
   Algunas extensiones de navegador, especialmente los bloqueadores de contenido, pueden interferir con la visualización de CSS.

Entender estas causas puede ayudar a localizar rápidamente la causa raíz de los estilos CSS rotos en el backend de WordPress, para que pueda solucionar el problema con mayor eficacia.

Paso 1: Comprobar si hay conflictos de plugins

Según nuestra experiencia.Plugin de WordPress(especialmente los plugins de mala calidad) suelen ser la causa principal de la corrupción del CSS del backend. Sin embargo, a veces incluso los plugins bien escritos pueden causar conflictos debido a problemas de configuración del sitio WordPress o del servidor.

A continuación se indican formas de identificar y resolver conflictos entre plugins:

1. Desactive todos los plug-ins

En primer lugar, vaya al backend de WordPress y navegue hasta la sección Plugins " Plugins instalados Página.
Compruebe todos los plug-ins en el operación por lotes Seleccione en el menú desplegable desactivary luego haga clic en aparato.

Después de eso, actualiza tu página backend o recárgala para ver si el problema de CSS se ha resuelto. Si el problema se resuelve, significa que un plugin está causando el conflicto.

2. Activación de plug-ins caso por caso

Con el fin de identificar los plugins específicos que están causando el problema, es necesario volver a habilitar los plugins uno por uno. En cada plugin, haga clic en empezar a utilizar.

A continuación, actualice la página backend y compruebe si el CSS está roto de nuevo.
De este modo, es posible localizar el plug-in específico que está provocando el problema.

3. Actualización o sustitución de plug-ins

Una vez identificado el plugin conflictivo, se puede comprobar si dispone de actualizaciones. Si una actualización no resuelve el problema, busca un plugin alternativo o ponte en contacto con el desarrollador del plugin para resolver el problema.

Paso 2: Comprobación de las cargas HTTPS en busca de archivos no seguros

Otro problema común que conduce a la corrupción de CSS es la configuración incorrecta de HTTPS, que puede conducir a problemas de contenido mixto.

Esto ocurre cuando un sitio web utiliza el protocolo HTTPS, pero algunos archivos CSS se siguen cargando a través de HTTP (un protocolo inseguro).
Cuando esto ocurre, navegadores como Google Chrome bloquean automáticamente estos recursos no seguros, lo que da como resultado un CSS corrupto en el backend de WordPress.

¿Cómo identifico el problema?

Esto se puede hacer utilizando el navegador Herramientas de inspección (Inspect) Confirmación del problema:

1. Abra su navegador, haga clic con el botón derecho en la página y seleccione sonda.

2. Cambiar a consola para ver si el Error de contenido mixto.

Si algo como "Contenido inseguro bloqueado" mensaje de error, indicando que el problema existe.

¿Cómo soluciono los problemas de contenido mixto?

1. Comprobación de URL en la configuración de WordPress

• entrar en Ajustes " General página para asegurarse de que el Dirección de WordPress responder cantando dirección del sitio Las direcciones URL en el HTTPS Comenzando.

2. Forzar a WordPress a usar HTTPS Si la URL ya es correcta, puede forzar manualmente a WordPress a utilizar el protocolo HTTPS.
Edita tu 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';
}
define('FORCE_SSL_ADMIN', true);
¡if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') ! == false) {
    $_SERVER['HTTPS'] = 'on';
}
define('FORCE_SSL_ADMIN', true);
¡if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') ! == false) {
    $_SERVER['HTTPS'] = 'on';
}

Utilizar plug-ins para resolver Si no está familiarizado con el código, puede utilizar plugins como SSL realmente sencilloEl primer paso es forzar a todas las URL a utilizar HTTPS con un solo clic.

Paso 3: Comprobar si hay interferencias temáticas

La interferencia de temas es una de las causas comunes de corrupción de CSS en el backend de WordPress. Aquí hay maneras de identificar y solucionar los problemas relacionados con el tema:

1. Cambiar al tema por defecto

Para confirmar si un tema de WordPress está causando la corrupción de CSS, primero debe cambiar al tema predeterminado de WordPress.

1. Vaya al backend de WordPress y navegue hasta Aspecto " Temas Página.
2. Active un tema predeterminado de WordPress, por ejemplo Veinticuatro.

tome nota de: Si no tiene instalado el tema por defecto, puede hacer clic en la parte superior de la página Añadir nuevo tema para buscar el tema por defecto e instalarlo. El tema por defecto suele llevar el nombre del año.

3. Después de cambiar de tema, actualice la página backend para ver si el problema de CSS se ha resuelto.

Si el problema se resuelve, significa que tu tema original está causando un conflicto CSS.

2. Solucionar conflictos de temas

Si confirma que el problema proviene del tema, pruebe lo siguiente:

Buscar actualizaciones de temas

• entrar en Aspecto " Temas seleccione su tema y haga clic en Actualizaciones inmediatas para asegurarse de que se utiliza la última versión.

Compruebe el código personalizado del tema

• Si la actualización no funciona, debe comprobar si hay modificaciones personalizadas en el tema, en concreto:
  • CSS adicional(Estilos añadidos en los ajustes de personalización del tema).
  • archivo functions.php en el código personalizado para ver si hay algún error.

Contactar con el desarrollador del tema

• Si el problema sigue sin resolverse, puede ponerse en contacto con el desarrollador del tema para obtener asistencia técnica.
• Si el problema no puede solucionarse, considere la posibilidad de cambiar a otro hilo.

3. Gestión del código personalizado con WPCode

Para evitar problemas similares en el futuro, se recomienda utilizar WPCode Plugin para gestionar código personalizado. Es un plugin de gestión de fragmentos de código de WordPress de gran alcance que soporta la gestión de CSS personalizado sin tener que modificar directamente el. funciones.php Documentación.

Ventajas de WPCode:

• Guarda y gestiona más fácilmente el código CSS personalizado.
• Comprobación de errores integrada para ayudar a identificar problemas.
• No se pierde ningún CSS personalizado al cambiar de tema.
• Existe una versión gratuita, adecuada para las necesidades básicas.

Nuestro sitio también utiliza WPCode para gestionar fragmentos de código personalizados, incluido CSS personalizado.

Paso 4: Solucionar problemas de caché

Normalmente, los plugins de caché de WordPress no almacenan en caché el área de administración del backend. Sin embargo, una configuración incorrecta de la caché puede entrar en conflicto con la caché del navegador, lo que puede provocar problemas de corrupción de CSS.

1. Borra la caché de tu navegador

En primer lugar, debes borrar la caché de tu navegador:

• Abra Configuración en su navegador y busque Borrar datos de navegación Opciones.
• Seleccione Borrar datos almacenados en caché y asegúrese de que la opción de almacenar archivos en caché está marcada.
• Una vez completada la eliminación, vuelva a cargar el backend de WordPress para ver si el problema se ha resuelto.

2. Borrar la caché de WordPress

Si el problema persiste, el siguiente paso es borrar la caché de WordPress.

• Se trata de un archivo de caché generado por el plugin WordPress Cache.
• Vaya a la página de configuración del plugin de caché y busque la opción borrar la caché u opciones similares.

Para más información sobre cómo hacerlo, consulte nuestro artículo¿Cómo borro la caché en WordPress?

Paso 5: Solucionar problemas de CDN

Si el sitio utiliza un servicio de red de entrega de contenidos (CDN), una configuración incorrecta puede dar lugar a CSS dañado en el backend de WordPress. A continuación te explicamos cómo identificar y solucionar estos problemas:

1. Verificar errores de CDN

Utilice la función Herramientas de inspección (Inspect)Cambiar a consola Tab. Si el archivo CSS está bloqueado o no se encuentra, verá aquí el mensaje de error correspondiente.

2. Borrar la caché CDN

1. Inicie sesión en el sitio web de su servicio CDN, como Cloudflare, y vaya al panel de control.
2. salir para Configuración de "Caché Parte.
3. golpe (en el teclado) Purgarlo todo para borrar todas las cachés CDN.

tome nota de: La interfaz puede variar ligeramente de un proveedor de servicios CDN a otro, pero la opción de borrar la caché suele ser fácil de encontrar.

Después de borrar la caché, vuelva a su sitio y recargue la página backend para ver si el problema de CSS se ha resuelto.

Paso 6: Corregir errores de permisos de archivos

Los permisos de archivo incorrectamente configurados pueden impedir que el servidor lea los archivos CSS, lo que puede causar problemas de corrupción de CSS en el backend de WordPress. A continuación te explicamos cómo comprobar y corregir los permisos de los archivos:

1. Conexión al sitio web

Conéctese al sitio de WordPress utilizando la utilidad FTP. Una vez conectado, navegue hasta el directorio raíz de WordPress, que contiene el archivo wp-adminywp-incluye responder cantando wp-content Carpeta.

2. Comprobar y cambiar los permisos de las carpetas

1. Haga clic con el botón derecho del ratón wp-admin seleccione autoridad de archivo tal vez causalidad.

2. Asegúrese de que los permisos de todos los directorios están configurados como 755.

• Si los permisos son incorrectos, cámbielos a 755 y elija aplicarlos recursivamente a todos los subdirectorios.

3. Comprobar y cambiar los permisos de los archivos

1. Repita los pasos anteriores para establecer los permisos de archivo a 644.
2. Asegúrese de que los permisos se aplican recursivamente a todos los archivos (sólo archivos).

Una vez completados los pasos anteriores, vuelva a visitar la página backend de WordPress para comprobar si se ha resuelto el problema de CSS.

Paso 7: Reparar archivos dañados

Los archivos corruptos también pueden hacer que el backend CSS de WordPress se muestre de forma anormal.

Los archivos de WordPress pueden estar dañados debido a las siguientes razones:

• Las actualizaciones de WordPress están incompletas
• Eliminación accidental de documentos
• Mala configuración del proveedor de servicios de alojamiento

Métodos de reparación o sustitución de archivos dañados

1.Descargar la última versión de WordPress

• (después de un verbo de movimiento indica alejamiento del hablante) WordPress.org y descargue la última versión de los archivos de WordPress.
• Extraiga el archivo ZIP descargado en su ordenador.

2. Enlace al sitio web

• Conéctese al sitio de WordPress mediante la utilidad FTP o el panel de control.

3. Sube el último archivo de WordPress

• Suba los archivos de WordPress desde su ordenador al directorio raíz de su sitio web.
• Seleccionar al cargar Sobrescribirpara asegurarse de que el nuevo archivo sustituye al antiguo. Una vez finalizada la carga, visita la página de backend de WordPress para comprobar si se ha resuelto el problema de CSS.

Paso 8: Comprobar las extensiones del navegador

Las extensiones del navegador (especialmente las relacionadas con el bloqueo de contenidos y el bloqueo de anuncios) pueden interferir con la visualización del CSS del backend de WordPress.

Cómo reconocer y resolver los problemas causados por las extensiones

1. Abra el menú Gestión de extensiones

• Navegue en su navegador hasta Gestión de extensiones y plugins Menú.

2. Desactivar temporalmente todas las extensiones

• Especialmente bloqueadores de anuncios y plugins de seguridad.
• Puede elegir Desactivar extensiones O simplemente gíralo eliminando.

3. Compruebe si el problema está resuelto

• Después de desactivar la extensión, visite el backend de WordPress para ver si el problema de CSS se ha resuelto.

4. Permitir ampliaciones caso por caso

• Si el problema se resuelve, significa que una extensión está causando el conflicto.
• Vuelva a habilitar las extensiones una por una, actualizando la página de backend después de cada una para confirmar si el problema vuelve a producirse.

5. Ajuste la configuración de la extensión o busque una alternativa

• Una vez que hayas encontrado la extensión problemática, comprueba su configuración para asegurarte de que no está bloqueando CSS en el backend de WordPress.
• Si los ajustes no funcionan, considere la posibilidad de buscar otras extensiones alternativas.

Espero que os sirvan de ayuda.