Appearance
Sieve incluye un panel de Apariencia para que puedas ajustar el filtro y la búsqueda predictiva a tu tema sin escribir CSS. Eliges un preajuste de estilo y cuatro colores; las opciones se aplican tanto al filtro [sieve] como al cuadro [sieve_search]. Una instalación nueva se ve exactamente igual que antes, así que actualizar no cambia nada hasta que decidas lo contrario.
Dónde encontrarlo
Section titled “Dónde encontrarlo”En el administrador de WordPress, abre Sieve y despliega el panel de Apariencia. Ajusta el preajuste y los colores, observa la vista previa en vivo y luego haz clic en Guardar ajustes. Si usas un plugin de caché de páginas, vacía su caché tras cambiar la apariencia.
Preajustes de estilo
Section titled “Preajustes de estilo”| Preajuste | Aspecto |
|---|---|
Default | El aspecto integrado. No emite ningún marcado adicional, por lo que es idéntico a un plugin sin ajustes de apariencia. |
Minimal | Plano y discreto: separadores más ligeros entre facetas, chips compactos. |
Bordered | Cada faceta se coloca en un cuadro con borde, con chips y paginación enmarcados. |
Soft | Esquinas redondeadas y sombras suaves en facetas, desplegables y los resultados de búsqueda. |
Unstyled | No incluye ningún CSS del plugin. Tu tema aplica todos los estilos (ver más abajo). |
Los preajustes solo cambian la estructura (bordes, esquinas, sombras, espaciado). Los colores se controlan por separado, así que puedes combinar cualquier preajuste con cualquier paleta.
Colores
Section titled “Colores”Se exponen cuatro colores, cada uno con un selector de color y una vista previa en vivo:
| Color | A qué afecta |
|---|---|
| Acento | Estados activos, opciones seleccionadas, contornos de foco, el botón de envío de la búsqueda. |
| Borde | Separadores de facetas, bordes de campos y desplegables, contornos de los chips. |
| Texto atenuado | Recuentos de resultados y etiquetas secundarias. |
| Fondo | El contenedor del filtro y el fondo del desplegable de búsqueda. |
Los colores se aplican como variables CSS con alcance en el widget, incrustadas una vez por página justo después de la hoja de estilos. Solo se emiten los colores que realmente cambies, así que la paleta predeterminada no añade nada a la página.
Aviso de contraste
Section titled “Aviso de contraste”Dado que los estados activos y seleccionados muestran texto blanco sobre el color de Acento, el panel muestra una advertencia no bloqueante cuando el acento es demasiado claro para que el texto blanco resulte legible sobre él (por debajo del ratio WCAG de 4,5:1). También señala el bajo contraste entre el Texto atenuado y el Fondo. La advertencia es solo informativa; aun así puedes guardar.
Restablecer
Section titled “Restablecer”Restablecer valores predeterminados devuelve el preajuste a Default y cada color a su valor original.
Modo sin estilo
Section titled “Modo sin estilo”Unstyled retiene por completo la hoja de estilos del plugin y entrega todo el diseño a tu tema. Los widgets siguen incluyendo sus clases semánticas, así que puedes apuntarlos desde el CSS de tu tema:
.sieve-app,.sieve-facet,.sieve-chip,.sieve-pagepara el filtro..sieve-search,.sieve-search__input,.sieve-search__resultspara la búsqueda.
Los contornos de foco del teclado y las señales del modo de alto contraste de Windows (forced-colors) se siguen emitiendo en este modo, así que la accesibilidad se conserva incluso sin ningún estilo visual del plugin.
Rendimiento
Section titled “Rendimiento”La apariencia está diseñada para mantener intactos los Core Web Vitals:
- Sin solicitudes adicionales. Las reglas de los preajustes residen dentro de la hoja de estilos que el widget ya carga; los colores se incrustan en el marcado de la página. No se descarga nada nuevo.
- Sin desplazamiento del diseño. Los preajustes solo reestilizan elementos existentes; el marcado y el espacio reservado no cambian.
- Compatible con versiones anteriores. Con el preajuste predeterminado y los colores sin tocar, la salida es idéntica byte a byte a la de un plugin sin ajustes de apariencia, así que las páginas en caché siguen siendo válidas.