Problemas cargando CSS de plugins y temas WordPress
Los problemas cargando CSS de plugins y temas WordPress puede ser originado por muchos motivos, por lo que es imposible dar una solución que cubra todas las situaciones. De todas formas, en este artículo hablaremos de los errores más habituales por los que no carga el CSS en WordPress y al mismo tiempo hablaremos de cómo debemos proceder para detectar y solucionar los posibles errores en temas y plugins.
En primer lugar, accedemos a la página donde se debería cargar el código CSS y examinamos el código fuente para verificar que realmente se está solicitando el archivo CSS mediante un código HTML similar a:
<link rel="stylesheet" href="https://www.vozidea.com/wp-content/themes/vozidea_res/style.css" type="text/css" media='all' />
Errores CSS en WordPress originados por mala programación PHP.
Si examinando el código fuente no vemos ningún código HTML similar al anterior, es que no se está incluyendo el archivo de hoja de estilos CSS. En el caso de los temas, los archivos CSS se incluyen principalmente en las cabeceras de los temas, por lo que es buena práctica revisar el archivo header.php de nuestro tema WordPress.
En segundo lugar debemos revisar los archivos PHP que usen alguna de las siguientes funciones: wp_register_style(), wp_enqueue_style(), bloginfo('stylesheet_url'), get_stylesheet_uri(), get_stylesheet_directory() y get_stylesheet_directory_uri().
Estas funciones sirven para acceder a las hojas de estilo CSS e incluirlas en los temas o plugins, por lo que si el error es de programación, el problema seguramente esté originado de un uso incorrecto de dichas funciones. Estas funciones debemos buscarlas en el plugin o tema, según sospechemos donde se origina el problema.
En muchas ocasiones el error tiene su origen en los temas WordPress, ya que muchos temas personalizados no siguen las recomendaciones de programación establecidas en la propia documentación WordPress. Esta situación es fácil de diagnosticar, ya que si un plugin nos funciona con alguno de los temas por defecto incluidos en WordPress pero no con nuestro tema personalizado, ya sabemos el origen del problema.
El archivo CSS es accesible y carga correctamente pero no se aplican los estilos CSS.
Desde mi experiencia, me he encontrado con que el error proviene de que el tema personalizado no ha hecho uso de las funciones obligatorias body_class() o post_class(), que permiten a los desarrolladores una personalización más “fina” de las hojas de estilo CSS.
Este problema me lo he encontrado de forma muy habitual en clientes que querían usar el plugin de botones sociales Monarch (Elegant Themes) y no les funcionaba correctamente en su tema personalizado. En el caso de Monarch, el archivo CSS se cargaba correctamente, pero no se incluía la clase del estilo en la etiqueta <body> por lo que el CSS no podía funcionar.
El archivo CSS es inaccesible a través del navegador.
Otra opción es que el archivo CSS no sea accesible y no cargue correctamente. Lo primero será tratar de acceder a la URL del archivo CSS a través del navegador para comprobar si carga o si devuelve algún error. Si usamos el ejemplo anterior la URL sería: https://www.vozidea.com/wp-content/themes/vozidea_res/style.css
En el propio navegador podemos ver si es accesible el archivo CSS o si nos devuelve algún error. Si nos dice que el archivo no existe (HTTP 404 – File not found), debemos verificar a través de FTP (u otra forma de explorar las carpetas de nuestro servidor) que realmente existe el archivo CSS.
Si a pesar de la comprobación anterior, el archivo CSS existe en nuestro servidor, el error puede ser que tenga su origen en la configuración del servidor (permisos insuficientes, directivas .htaccess, etc) o incluso hay casos en los que el problema lo origina algún plugin de cache, por ello también es recomendable desactivarlo para poder diagnosticar correctamente el problema.
Consideraciones finales para tratar de solucionar los problemas cargando CSS de plugins y temas WordPress.
Hasta aquí puedo ayudar de forma general a solucionar los problemas al cargar los archivos CSS ya que las posibilidades son infinitas, pero lo más recomendable es tratar de aislar el error activando/desactivando plugins, cambiando de tema o modificando la configuración del servidor para así llegar al origen del problema y poder solucionarlo.