WordPress no carga CSS ni JS cómo repararlo

Por qué WordPress no carga CSS ni JS

Cuando WordPress deja de cargar los archivos CSS (estilos) y JS (JavaScript), el sitio suele verse “desmaquetado”, sin diseño, con listas de enlaces azules y elementos desordenados. En algunos casos, ciertas funcionalidades dejan de funcionar por completo, como menús desplegables, sliders o formularios. Este problema suele estar relacionado con rutas incorrectas, conflictos de plugins, errores de caché, cambios en la URL del sitio o configuraciones del servidor.

Antes de hacer cambios drásticos, es importante entender que WordPress carga los estilos y scripts a través de funciones específicas del núcleo y del tema. Si algo interrumpe ese proceso, los archivos dejan de servirse correctamente o el navegador los bloquea. Identificar la causa raíz es clave para aplicar la solución adecuada sin romper otras partes del sitio.

• Rutas incorrectas a wp-content, wp-includes o al tema activo.
• Plugins de caché o minificación que generan archivos corruptos o rutas erróneas.
• Cambios en la URL del sitio (HTTP a HTTPS, dominio nuevo, migraciones mal hechas).
• Permisos de archivos y carpetas mal configurados en el servidor.
• Errores de CDN o reglas de seguridad (firewall, mod_security, hotlink protection).
• Errores de código en el tema hijo o en funciones personalizadas.

Comprobar si el problema es de caché o navegador

El primer paso es descartar que el fallo sea simplemente un problema de caché del navegador o de un plugin de caché. Muchas veces, después de actualizar un tema, un plugin o WordPress, el navegador sigue usando versiones antiguas de los archivos CSS y JS, lo que provoca errores visuales o scripts que no se ejecutan.

• Prueba en ventana de incógnito: abre el sitio en modo privado y comprueba si los estilos se cargan correctamente.
• Prueba en otro navegador: si en otro navegador se ve bien, es probable que sea caché local.
• Forzar recarga completa: en la mayoría de navegadores puedes usar Ctrl + F5 (Windows) o Cmd + Shift + R (macOS).
• Vaciar caché del navegador: borra archivos temporales e historial reciente.

Si tras estas pruebas el problema persiste en todos los navegadores y dispositivos, es muy probable que el origen esté en la configuración de WordPress, en el tema, en los plugins o en el servidor. En ese caso, continúa con las siguientes comprobaciones.

Revisar la URL del sitio y las rutas de archivos

Uno de los motivos más frecuentes por los que WordPress no carga CSS ni JS es que las URLs configuradas para el sitio no coinciden con el dominio real o con el protocolo (HTTP/HTTPS). Esto ocurre a menudo tras migraciones, cambios de dominio, activación de SSL o restauraciones desde copias de seguridad.

Cuando la URL del sitio no es correcta, WordPress genera rutas erróneas para los archivos estáticos. El resultado es que el navegador intenta cargar los estilos y scripts desde ubicaciones que no existen o que están bloqueadas.

• Entrar en Ajustes > Generales y comprobar:
  - Dirección de WordPress (URL)
  - Dirección del sitio (URL)
• Asegurarse de que ambas URLs usan el dominio correcto y el protocolo adecuado (http o https).
• Evitar barras finales innecesarias o subcarpetas que ya no existan.

define( 'WP_HOME', 'https://tudominio.com' );
define( 'WP_SITEURL', 'https://tudominio.com' );

Después de corregir las URLs, limpia la caché de WordPress y del navegador, y recarga el sitio. Si las rutas eran el problema, deberías ver cómo vuelven a cargarse los estilos y scripts correctamente. Si sigues sin ver los archivos CSS/JS, inspecciona el código fuente de la página y comprueba si las rutas a .css y .js apuntan al dominio correcto.

Conflictos con plugins y temas

Los conflictos entre plugins, o entre un plugin y el tema activo, pueden impedir que WordPress cargue correctamente los archivos CSS y JS. Esto sucede cuando un plugin desregistra scripts esenciales, cambia el orden de carga, provoca errores de PHP o genera salidas inesperadas antes de que se envíen las cabeceras HTTP.

Para diagnosticar si el problema está en un plugin o en el tema, es recomendable seguir un proceso sistemático de desactivación y prueba. Aunque pueda parecer tedioso, es la forma más fiable de localizar el origen del conflicto sin dañar el sitio.

• Desactiva todos los plugins: desde Plugins > Plugins instalados, desactiva todos temporalmente.
• Comprueba el sitio: si los estilos y scripts vuelven a cargarse, el problema está en uno o varios plugins.
• Activa uno a uno: ve activando los plugins de forma individual, recargando el sitio tras cada activación.
• Identifica el culpable: cuando al activar un plugin el problema reaparezca, habrás localizado el origen del conflicto.
• Cambia al tema por defecto: si con todos los plugins desactivados el problema continúa, activa un tema por defecto (por ejemplo, Twenty Twenty-Three) y prueba de nuevo.

Una vez identificado el plugin o tema problemático, revisa si hay actualizaciones disponibles, consulta la documentación del desarrollador o busca alternativas más compatibles. Evita mantener activo un componente que rompe la carga de CSS y JS, ya que afectará gravemente a la experiencia de usuario y al SEO.

Problemas con plugins de caché y minificación

Los plugins de caché y optimización de rendimiento suelen combinar, minificar y retrasar la carga de archivos CSS y JS. Aunque esto mejora la velocidad del sitio, también puede provocar que algunos estilos o scripts dejen de cargarse, especialmente cuando se aplican reglas demasiado agresivas o incompatibles con ciertos temas y plugins.

Si tu WordPress dejó de cargar CSS y JS justo después de activar o configurar un plugin de caché, es muy probable que el problema esté relacionado con la minificación, la combinación de archivos o el defer/async de scripts.

• Desactiva temporalmente el plugin de caché y recarga el sitio.
• Si el problema desaparece, vuelve a activarlo pero deshabilita:
  - Minificación de CSS
  - Minificación de JS
  - Combinación de archivos CSS/JS
  - Carga diferida de JS (defer/async) para scripts críticos
• Excluye de la optimización los archivos CSS/JS del tema principal y de plugins clave (como constructores visuales).
• Vacía siempre la caché después de cada cambio de configuración.

En algunos hostings gestionados, la caché a nivel de servidor (como NGINX cache, Varnish o LiteSpeed) también puede interferir. En estos casos, utiliza las herramientas del panel de control del hosting para vaciar la caché y, si es posible, desactivar temporalmente las optimizaciones automáticas mientras realizas pruebas.

Errores HTTPS, mixed content y CDN

Cuando un sitio WordPress pasa de HTTP a HTTPS o empieza a usar una CDN (como Cloudflare, BunnyCDN o similares), es habitual que aparezcan problemas de carga de CSS y JS por contenido mixto (mixed content) o por rutas mal configuradas en la red de distribución de contenidos. El navegador puede bloquear archivos que se sirven por HTTP en una página HTTPS, o bien la CDN puede apuntar a rutas antiguas o inexistentes.

Los síntomas típicos incluyen advertencias de seguridad en la consola del navegador, iconos de candado con advertencias en la barra de direcciones y estilos que no se aplican correctamente. Revisar estos mensajes es fundamental para entender qué archivos están siendo bloqueados.

• Abre la consola del navegador (F12 > pestaña “Consola” o “Console”).
• Busca mensajes de “Mixed Content” o “Contenido mixto bloqueado”.
• Identifica qué archivos CSS/JS se están cargando por HTTP en lugar de HTTPS.
• Comprueba la configuración de la CDN y las reglas de reescritura de URLs.

Si usas una CDN, revisa que el dominio CDN esté correctamente configurado, que apunte a la ruta adecuada de tu sitio y que no esté sirviendo versiones antiguas de los archivos. En ocasiones, basta con vaciar la caché de la CDN o desactivarla temporalmente para comprobar si es la causa del problema.

Permisos de archivos y configuración del servidor

Si los permisos de archivos y carpetas no son correctos, el servidor puede impedir el acceso a los archivos CSS y JS, devolviendo errores 403 (prohibido) o 404 (no encontrado). También pueden influir reglas de seguridad en .htaccess, configuraciones de NGINX, firewalls de aplicaciones web (WAF) o módulos como mod_security.

Este tipo de problemas suele aparecer tras cambios en el servidor, migraciones, restauraciones de copias de seguridad o instalaciones manuales. Revisar los permisos y las reglas de acceso es esencial para garantizar que los archivos estáticos se sirven correctamente.

• Permisos recomendados para carpetas: 755.
• Permisos recomendados para archivos: 644.
• Asegúrate de que el propietario de los archivos es el usuario correcto del servidor.
• Comprueba que no existan reglas en .htaccess que bloqueen .css o .js.
• Revisa si el firewall del hosting está bloqueando peticiones a wp-content o wp-includes.

Si no tienes experiencia con permisos y configuraciones de servidor, es recomendable contactar con el soporte técnico de tu proveedor de hosting. Ellos pueden revisar los logs de errores, ajustar permisos de forma segura y desactivar temporalmente reglas de seguridad que estén bloqueando la carga de recursos estáticos.

Depurar con el inspector del navegador

El inspector del navegador es una herramienta fundamental para entender por qué WordPress no está cargando los archivos CSS y JS. Permite ver exactamente qué recursos se solicitan, qué respuestas devuelve el servidor y qué errores se producen en la consola. Usarlo de forma sistemática te ayudará a localizar la causa del problema con precisión.

Aunque cada navegador tiene pequeñas diferencias, la mayoría ofrece las mismas pestañas clave: Elements (o Inspector), Console, Network y Sources. Para diagnosticar problemas de CSS y JS, las más útiles son “Network” y “Console”.

• Pestaña Network (Red):
  • Recarga la página con la pestaña abierta para ver todas las peticiones.
  • Filtra por “CSS” y “JS” para centrarte en estilos y scripts.
  • Revisa el código de estado (200, 301, 404, 403, 500, etc.).
  • Haz clic en un archivo problemático para ver su URL completa y cabeceras.
• Pestaña Console (Consola):
  • Busca errores de JavaScript que puedan detener la ejecución de otros scripts.
  • Identifica mensajes de contenido mixto (mixed content) o recursos bloqueados.
  • Localiza advertencias de CORS o políticas de seguridad de contenido (CSP).

Combinar la información del inspector con los pasos anteriores (revisión de URLs, plugins, caché, permisos y CDN) te permitirá construir un diagnóstico sólido. Documenta los errores que encuentres y, si necesitas ayuda externa, compártelos con tu desarrollador o con el soporte del hosting para acelerar la resolución.

Buenas prácticas para evitar que vuelva a ocurrir

Una vez que has conseguido que WordPress vuelva a cargar correctamente los archivos CSS y JS, es importante aplicar una serie de buenas prácticas para reducir al mínimo la probabilidad de que el problema se repita en el futuro. Muchas incidencias se originan por cambios apresurados, configuraciones poco probadas o falta de control de versiones.

Adoptar una estrategia ordenada de mantenimiento, pruebas y seguridad te permitirá actualizar tu sitio con confianza, aprovechar las mejoras de rendimiento y mantener una experiencia de usuario consistente.

• Realiza copias de seguridad regulares: antes de grandes cambios (actualizaciones, migraciones, nuevos plugins), asegúrate de tener un backup completo.
• Prueba en un entorno de staging: utiliza un clon de tu sitio para probar nuevas configuraciones de caché, minificación o cambios de tema.
• Evita acumular plugins innecesarios: cuantos más plugins, mayor riesgo de conflictos y errores de carga.
• Mantén todo actualizado: núcleo de WordPress, temas y plugins, siempre desde fuentes oficiales.
• Documenta cambios importantes: anota cuándo activas un plugin de caché, cambias de CDN o modificas reglas de .htaccess.
• Revisa periódicamente la consola del navegador: incluso si el sitio parece funcionar, los avisos pueden anticipar problemas futuros.

Aplicando estas buenas prácticas, reducirás significativamente los riesgos de que WordPress vuelva a dejar de cargar CSS y JS, y tendrás un plan claro de actuación en caso de que algo falle tras una actualización o cambio de configuración.

Preguntas frecuentes

En esta sección encontrarás respuestas directas a dudas habituales cuando WordPress no carga los archivos CSS y JS. Úsalas como referencia rápida para identificar la causa más probable en tu caso y aplicar la solución adecuada.