Ayer me topé con un caso muy curioso que me gustaría compartir con todos vosotros. Ya sabéis que soy desarrollador web y que suelo trabajar en muchas ocasiones con WordPress, pero lo que me ocurrió el otro día, no me había ocurrido nunca. Es algo extraño, pero que, como a mi, puede ocurrirte. La cuestión es que, tras actualizar un sitio web desarrollado con WordPress habían varias cosas que no se veían correctamente en la parte pública. Me explico, había columnas con anchos incorrectos, botones con colores erróneos…
Personalmente soy muy, pero que muy extricto en cuanto a modificar plantillas y demás, puesto que puede haber problemas a la hora de actualizar. Siempre utilizo un child theme si quiero hacer variaciones, por eso sabía que no podía ser nada relacionado con eso.
Tras mucho investigar, me di cuenta con el inspeccionador de elementos del navegador que habían reglas CSS que estaban solapando a otras, que eran las que debían estar actuando en dicho caso. ¿Por qué ocurría esto? Sencillo. Las reglas que solapaban a las principales del theme pertenecían a la hoja de estilos de un plugin tenía instalado en el sitio web. Concretamente era el plugin WP Bakery. Un page builder el cual no podía desinstalar ya que desmoronaría el diseño de la web.
La hoja de estilos del plugin WP Bakery (a la cual llamaremos por ejemplo wpbakery.css) se cargaba después de la hoja de estilos principal de la página (a la cual llamaremos por ejemplo styles.css), solapando los estilos de una encima de la otra. En resumidas cuentas, ocurría esto:
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="wpbakery.css">
Cuando en realidad, debería ser así:
<link rel="stylesheet" type="text/css" href="wpbakery.css">
<link rel="stylesheet" type="text/css" href="styles.css">
Una vez localizado el problema, tenía que encontrar la solución.
Por supuesto, no podía desinstalar el plugin WP Bakery ya que el diseño de todas las páginas que integraban el sitio web estaban realizadas con este page builder. Desinstalarlo significaría tirar la web por la borda. Era inviable.
¿Que podía hacer? Había que mover la declaración de carga del CSS principal del theme delante de la declaración de carga del CSS del plugin. Y para eso me tenía que ayudar de la función wp_enqueue_style.
La función wp_enqueue_style registra la hoja de estilo que indiques en su segundo parámetro sin sobreescribirla y la pone a la cola. ¿Qué es eso de ponerla a la cola? Evidentemente WordPress carga muchas hojas de estilo. Del propio tema, de plugins, personalizadas… Para no tener que interactuar directamente con el theme, las va cargando a medida que los plugins y temas llaman a dicha función, y ponen las llamadas «a la cola».
Pues bien, mediante la función add_action podemos indicarle el grado de prioridad con el que queremos que se cargue esa hoja de estilos. Así que, lo que hice fue abrir el fichero functions.php del theme que tenía instalado y agregar esta sentencia:
function theme_enqueue_styles() {
wp_enqueue_style('css-theme', get_template_directory_uri() . '/style.css', '', '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 99);
Como podéis ver, en el tercer parámetro de la función add_action he puesto el número 99. Cuanto más alto sea este número, mayor será la prioridad para que realice la acción.
La teoría estaba muy bien, pero en realidad esto no me funcionó. No sé qué prioridad tendría la carga del CSS de WP Bakery, pero pusiera lo que pusiera, no funcionaba ¿Que hice? Llegué a la conclusión de que la mejor solución era cargar la hoja de estilos principal de la web en el footer. Así en el futuro no tendría que preocuparme más por este tema.
Simplemente había que cambiar un parámetro frente al código anterior:
function theme_enqueue_styles() {
wp_enqueue_style('css-theme', get_template_directory_uri() . '/style.css', '', '1.0', 'all' );
}
add_action( 'get_footer', 'theme_enqueue_styles', 99);
En la función add_action añadí el parámetro get_footer para que los CSS se carguen en el pie de la web.
Volví a recargar la parte pública de la web y… ¡voilá! todo estaba resuelto.
Y hasta aquí nuestro artículo sobre cómo impedir que hojas de estilos de plugins solapen las de tu tema. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!
