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

Como desactivar la edición de plugins y temas desde WordPress
Como desactivar la edición de plugins y temas desde WordPress
Si has llegado hasta aquí desde un buscador probablemente sea porque alguien ha tocado donde no debería y algo se ha roto. WordPress como sabemos…
Cómo eliminar automáticamente los enlaces por defecto en las imágenes dentro del editor de WordPress
Cómo eliminar automáticamente los enlaces por defecto en las imágenes dentro del editor de WordPress
WordPress dispone de un sistema potentísimo para administrar el contenido multimedia de tu sitio web. Es muy fácil subir archivos, imágenes, etc…y siempre las tendremos…
Creando un plugin para WordPress parte 4: Integración con WordPress
Creando un plugin para WordPress parte 4: Integración con WordPress
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…
Cómo realizar una migración de WordPress correctamente
Cómo realizar una migración de WordPress correctamente
En este artículo vamos a ver paso a paso como realizar correctamente una migración de WordPress, tanto de hosting como de dominio de forma manual.…