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

Cómo mostrar los posts más vistos o populares en WordPress
Cómo mostrar los posts más vistos o populares en WordPress
Probablemente en alguna ocasión te hayas encontrado con la necesidad de mostrar un listado de los posts más vistos o más populares de tu sitio.…
Oculta las notificaciones de plugins y temas en WordPress
Oculta las notificaciones de plugins y temas en WordPress
Es posible que te hayas encontrado alguna vez o tengas un sitio creado con WordPress que tenga multitud de plugins instalados, o algún cliente que…
Añade el código de Google Analytics a tus páginas AMP en WordPress
Añade el código de Google Analytics a tus páginas AMP en WordPress
Las páginas AMP cada día adquieren mayor importancia por su relevancia en los resultados de búsqueda en dispositivos móviles. Hace unos meses escribí un post…
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…