WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

El CSS de un plugin solapa la hoja de estilos principal de mi web, ¿qué tengo que hacer?

Jorge López by Jorge López
24 enero 2020
in Optimización
Reading Time: 4 mins read
0

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.

Artículos relacionados

¿Cómo usar los atajos de teclado de WordPress?

17 septiembre 2015

Desbloqueando el potencial de la compresión HTTP

1 julio 2023

Cómo insertar publicaciones de redes sociales en WordPress

21 septiembre 2015

Optimiza la velocidad de tu sitio WordPress con esta guía definitiva

16 agosto 2023

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!

Tags: csshoja de estilosoverridingpluginsolapamiento
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Plugins

Optimiza la gestión de usuarios en WordPress con Index WP Users For Speed

4 junio 2025

En sitios web con miles de usuarios registrados, el panel de administración de WordPress...

Optimización

Cómo bloquear Scrapy y otros bots de scraping en OpenLiteSpeed, Apache y Nginx (aceptando Googlebot real)

13 junio 2025

El scraping masivo puede poner en jaque el rendimiento y la seguridad de tu...

Optimización

FlyingPress lanza oficialmente su versión 5 con un motor en la nube que ya ha optimizado más de 10 millones de páginas

28 mayo 2025

La nueva versión incluye mejoras en el rendimiento para móviles, un potente motor CloudOptimizer...

Noticias

Cómo proteger el archivo functions.php y otros archivos PHP críticos en WordPress

26 mayo 2025

El archivo functions.php de WordPress, junto con otros ficheros PHP críticos como wp-config.php, wp-settings.php...

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

5 plugins para gestionar múltiples sitios desarrollados con WordPress

22 abril 2020

Cómo trackear el envío de un formulario de Contact Form 7 con Analytics

21 septiembre 2017

Como integrar Facebook, Twitter y Google + en WordPress

14 febrero 2012

¿Es WordPress una buena opción para la web de un hotel?

13 febrero 2023

Cómo crear una navegación sticky en WordPress

22 agosto 2019
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.