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

Acabo de instalar WordPress, ¿y ahora qué?

4 febrero 2020

Optimización avanzada de bases de datos MySQL para WordPress

26 junio 2025

¿Es LiteSpeed una mejor opción para acelerar tu sitio web WordPress?

4 marzo 2025

¿Por qué no debes enviar newsletters desde tu WordPress?

28 febrero 2020

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...

Optimización

Automatización avanzada mediante plugins: seguridad, SEO y flujos de trabajo

5 julio 2025

La automatización se ha convertido en una pieza clave para gestionar sitios web eficientes...

Optimización

Migración segura de versiones importantes de PHP (ej. 7.4 a 8.4) en WordPress

1 julio 2025

Actualizar la versión de PHP en un sitio WordPress no es solo una recomendación...

Optimización

Comparativa de motores de caché y optimización de rendimiento en WordPress

30 junio 2025

El rendimiento web sigue siendo una prioridad para administradores y desarrolladores WordPress en 2025....

Noticias

¿Qué diferencia hay entre la caché del servidor, la caché del navegador y la caché del sitio web? Guía completa para acelerar tu página

27 junio 2025

La velocidad lo es todo en internet. Si un sitio tarda más de unos...

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




Últimos artículos

Cómo añadir un icono a los links externos en WordPress

16 noviembre 2015

Cómo mostrar citas aleatorias en el sidebar de WordPress

16 enero 2018

La evolución del negocio de plugins en WordPress: De los gratis al pago recurrente

18 diciembre 2024

Implementación de un firewall en .htaccess para mejorar la seguridad de WordPress

18 diciembre 2024

Cómo mostrar reviews de TripAdvisor en WordPress

18 octubre 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.