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

Creando un tema desde cero para WordPress parte 1: Consideraciones previas
Creando un tema desde cero para WordPress parte 1: Consideraciones previas
1. Creando un tema desde cero para WordPress: Consideraciones previas 2. Creando un tema desde cero para WordPress: Escribiendo el tema 3. Creando un tema…
¿No funcionan los shortcodes en tus widgets? Aprende cómo hacerlos funcionar
¿No funcionan los shortcodes en tus widgets? Aprende cómo hacerlos funcionar
En la entrada anterior Shortcodes: ¿Qué son y cómo crearlos? vimos que son los shortcodes y aprendimos a crearlos desde cero según nuestras necesidades. En ocasiones…
Mejora la puntuación de Google PageSpeed Insights: Habilita la compresión
Mejora la puntuación de Google PageSpeed Insights: Habilita la compresión
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…
Cómo definir una plantilla diferente por categoría para el detalle de los posts
Cómo definir una plantilla diferente por categoría para el detalle de los posts
En WordPress se usa la plantilla single.php para el detalle de los posts. Podemos crear plantillas para los posts de un custom post type concreto…