Muchos complementos, muchos estilos: crear una experiencia de usuario consistente con WordPress

Agregar complementos de WordPress a su sitio web puede brindar todo tipo de funciones maravillosas. Ya sea que se trate de un artículo costoso como un carrito de compras o una mejora más pequeña como un widget de publicaciones relacionadas, existen infinitas posibilidades.

Pero la funcionalidad es solo una parte del paquete. Muchos complementos de WordPress también vienen cargados con su propio CSS. A veces, esos estilos se notan bastante en la parte frontal de su sitio web.

Teóricamente, puede ser algo bueno. Pero parte de este CSS es muy obstinado. Puede verse significativamente diferente a los estilos que ya ha establecido en su sitio web. Por lo tanto, cuantos más complementos agregue, más inconsistente puede volverse el aspecto de su sitio web.

La buena noticia es que hay algunas formas diferentes de abordar el problema. Hoy, le presentaremos algunas técnicas para evitar que el CSS de un complemento interrumpa su UX.

Anule el CSS del complemento en su tema

El primer método para lidiar con el estilo de los complementos no autorizados es bastante sencillo. Pero requiere un poco de paciencia. Implica encontrar cualquier clase de CSS o ID específicos que no coincidan con la interfaz de usuario de su sitio.

Localizar el CSS apropiado requiere cierto conocimiento de las herramientas de desarrollo de su navegador web. Al hacer clic con el botón derecho en un elemento de la página y seleccionar " Inspeccionar " (o " Inspeccionar elemento " en Safari), se mostrarán las marcas HTML y CSS relacionadas.

A partir de ahí, se necesita un poco de experimentación. Por ejemplo, a veces el elemento en el que hizo clic derecho no es necesariamente el que controla el estilo. Eso requiere navegar dentro del HTML del inspector y hacer clic en cosas como contenedores principales o enlaces.

Ayuda si sabes lo que estás buscando para cambiar. Las propiedades background-color o font-size CSS, por ejemplo, pueden ser más fáciles de detectar que otras.

Una vez que encuentre los estilos correctos, cópielos y péguelos en el archivo style.css de su tema. Alternativamente, también puede usar el panel CSS adicional dentro de la pantalla de personalización de WordPress y pegar el código allí (discutiremos otras opciones a continuación). Luego, realice los cambios deseados, cargue o guarde.

Sugerencia: solo necesita incluir las propiedades CSS dentro de una clase o ID que desea cambiar. Todo lo demás se puede omitir.

Esta técnica es útil para situaciones en las que hay una pequeña cantidad de estilos que le gustaría cambiar. Sin embargo, puede ser engorroso si desea realizar cambios masivos.

Quitar estilos de complementos y comenzar desde cero

Este método requiere un compromiso de tiempo, junto con algunas habilidades CSS intermedias a avanzadas. Y es posible que incluso desee reservarlo para situaciones en las que los estilos de un complemento realmente se interpongan en su camino.

Estamos hablando de usar la función wp_dequeue_style() de WordPress, que elimina una hoja de estilo previamente puesta en cola. Esto se puede usar para desactivar de manera efectiva cualquier hoja de estilo relacionada con un complemento.

Una vez que haya desactivado una hoja de estilo, puede tomar los estilos del complemento y editarlos como desee. Puede ser un gran trabajo, pero también una forma de asegurarse de que los estilos sean exactamente lo que usted quiere que sean.

El sitio de recursos para desarrolladores de WordPress tiene un gran ejemplo de cómo se hace esto. Una de las claves del éxito aquí es encontrar el nombre registrado de la hoja de estilo. Esto se puede encontrar dentro del código del complemento, o también puede encontrarlo en la fuente de una página de inicio, etiquetada como la ID de la hoja de estilo.

Además, necesitará el CSS asociado con el complemento. Nuevamente, querrá sumergirse en la carpeta del complemento para encontrar los archivos que necesita. Sus contenidos deberán copiarse, pegarse en el style.css de su tema y cambiarse para satisfacer sus necesidades.

Aún así, hay complementos que tienen muchos estilos. WooCommerce es un buen ejemplo. Viene repleto de una cantidad significativa de CSS. Los estilos funcionan bastante bien, pero a veces pueden chocar con su tema.

Si desea eliminar todas las hojas de estilo de WooCommerce o solo algunas específicas, su documentación puede guiarlo a través del proceso.

Más consejos y solución de problemas

Hacer que el CSS de un complemento se adapte a su voluntad puede ser complicado. Las cosas no siempre funcionan como uno quiere la primera vez. Con eso en mente, aquí hay algunos otros consejos e ideas para la solución de problemas a considerar:

Verifique la documentación del complemento

En algunos casos, la documentación de un complemento puede proporcionar consejos sólidos para implementar personalizaciones de estilo. Además de los métodos mencionados anteriormente, puede haber otras opciones, como la configuración de back-end o temas específicos del complemento.

Además, asegúrese de consultar los foros de soporte. Lo más probable es que alguien ya haya hecho preguntas sobre estilos personalizados. Puede haber alguna información valiosa para ayudarle en el camino.

Experimente en las herramientas de desarrollo del navegador

Ya mencionamos la importancia de las herramientas de desarrollo del navegador para encontrar los estilos que desea anular. Son igualmente cruciales para la resolución de problemas cuando las cosas no funcionan según lo previsto.

Por ejemplo, la herramienta de inspección puede ayudarlo a determinar dónde se encuentra un estilo personalizado dentro de la cascada. Es posible que otro estilo esté tomando precedente, o tal vez esté viendo una versión en caché de la página.

Aún mejor es que puede editar estilos directamente dentro del inspector y ver los resultados al instante. Esto le permitirá ver cómo se ve un cambio antes de implementarlo.

Estas herramientas pueden convertirse en tus mejores amigas para eliminar errores. ¡Conócelos!

Implementar cambios de manera sostenible

Si va a dedicar tiempo a personalizar los estilos de un complemento, querrá asegurarse de que se implementen de manera sostenible. Eso significa colocarlos en un lugar donde estarán a salvo de ser borrados o cambiados sin darse cuenta.

Está bien colocar estilos dentro de la hoja de estilo principal de su tema, siempre que sepa que no se perderán después de una actualización del tema. Los temas secundarios son una excelente manera de protegerse contra esto.

Para mantener las cosas mejor organizadas, podría valer la pena colocar todos sus estilos personalizados en una hoja de estilo separada. De esta manera, siempre podrá encontrar esos estilos específicos cuando necesite hacer un cambio.

Además, vigile de cerca los registros de cambios de los complementos. Los estilos evolucionan, y no se garantiza que lo que personalice hoy funcione para siempre.

Dale a tu sitio web de WordPress un aspecto impecable

En general, los complementos de WordPress son fantásticos. Pero puede ser un desafío lograr que sus estilos asociados encajen con el resto de su sitio web. Aún así, puedes llegar allí con un poco de excavación.

Con la ayuda de las herramientas de desarrollo de su navegador web, puede localizar las clases de CSS y los ID que desea cambiar. A partir de ahí, se trata de aplicar esos cambios de la manera que mejor se adapte a sus necesidades.

Se necesita un buen ojo, pero el esfuerzo realmente puede dar sus frutos. Cuando todos los aspectos de su sitio web se ven y se sienten consistentes, es mucho más fácil para los visitantes navegar. Además, el contenido desarrolla un flujo natural. La experiencia del usuario será mucho mejor gracias a ello.