Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
own css

Cómo reemplazar la hoja de estilos de un plugin por una propia

En muchas ocasiones nos habremos encontrado con ésta situación: Instalamos un plugin que posee sus propios estilos y clases, y no encaja bien en nuestro diseño. Ante esto tenemos dos opciones: sobrescribir las clases del plugin en nuestra hoja de estilos CSS o reemplazar completamente la hoja de estilos CSS del plugin.

La primera opción tiene el inconveniente de que estamos “repitiendo” código. Cargamos primero el CSS del plugin con sus clases correspondientes, y después cargamos nuestro CSS (como vimos en el anterior artículo Cómo cargar correctamente los archivos JS y CSS si estás desarrollando un tema o plugin a medida) con las mismas clases, sobrescribiendo los estilos. Esto implica cargar dos archivos, y un aumento de peso que influirá en el óptimo rendimiento de la web.

La segunda opción se trata de reemplazar la hoja de estilos CSS completamente. No nos referimos a meter mano al plugin y machacar las reglas CSS directamente, ya que nos afectaría en futuras actualizaciones, perdiendo los cambios que hayamos hecho.

Para ésta labor, WordPress dispone del filtro style_loader_src. Veamos cómo funciona:

Creamos una función para reemplazar la hoja de estilos del plugin por la nuestra. Comprobamos si coincide en $handle con el nombre del plugin que queremos personalizar, y si es así retornamos la url de la ruta de nuestro CSS personalizado.

Nota

Para que esto surja efecto, el plugin debe cargar las hojas de estilo con wp_enqueue_style(), de lo contrario WordPress no tendrá constancia de ellas y no podrá reemplazarlas.

Puede que también te interese

Mejora la puntuación de Google PageSpeed Insights: Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página
Mejora la puntuación de Google PageSpeed Insights: Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Añadir cabeceras HTTP de seguridad en WordPress
Añadir cabeceras HTTP de seguridad en WordPress
En éste artículo vamos a ver cómo podemos enviar cabeceras HTTP de seguridad en nuestra web. Creo que es algo que no se utiliza mucho,…
Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS
Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
WP-CLI Parte 2, instalando WordPress paso a paso y primeras configuraciones
WP-CLI Parte 2, instalando WordPress paso a paso y primeras configuraciones
1. Instalación y primeros pasos 2. Instalando WordPress y primeros pasos y configuraciones 3. Trabajando con posts 4. Trabajando con usuarios 5. Trabajando con la…