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

Deshabilitar página de categorías o etiquetas
Deshabilitar página de categorías o etiquetas
Como sabrás, WordPress por defecto tiene dos taxonomías para las entradas o posts de tu sitio: categorías y etiquetas. Estas taxonomías te permiten categorizar o…
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…
Cómo aumentar el límite del tamaño de archivos en la librería multimedia
Cómo aumentar el límite del tamaño de archivos en la librería multimedia
En función del hosting que hayamos contratado, en algunas ocasiones podemos encontrarnos con límites a la hora de subir archivos a la librería multimedia en…
Extendiendo los campos personalizados o custom fields en WordPress
Extendiendo los campos personalizados o custom fields en WordPress
En una entrada anterior vimos cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante, haciendo uso de meta_boxes para ordenar…