La apariencia del selector se configura en el plugin de WordPress, no en el panel de control de Universally. Diez ajustes cubren colores, bordes y radio; cualquier cosa más allá se hace con variables CSS en lugar de CSS de tema ordinario.
Antes de empezar
En WordPress, ve a Universally en el menú de administración. El elemento Universally en la barra de administración abre el mismo lugar.
Esto se aplica solo a proyectos de WordPress. En otras plataformas, aún no hay configuración de selector. Si estás en otra plataforma y necesitas un selector ahora, crea uno contra la API: consulta Crea un selector de idioma personalizado en WordPress para el enfoque, que se adapta a cualquier stack.
Dónde están los ajustes
El plugin tiene cuatro pestañas: General, Selector de Idioma, Estilo y Preferencias. Dos son importantes aquí:
| Pestaña | Contiene |
|---|---|
| Selector de idioma | cómo se inserta el selector, dónde se ubica y qué muestra |
| Estilo | colores, bordes y radio de esquina, para el disparador y el desplegable por separado |
Pestaña Selector de Idioma
| Configuración | Opciones |
|---|---|
| Implementación | Automático, que inserta el selector por ti sin código, o Personalizado, que te da un shortcode para colocar en tu tema |
| Posición | dónde se ubica un selector Automático: Abajo a la Derecha, Abajo a la Izquierda, Arriba a la Derecha o Arriba a la Izquierda. Los cuatro flotan sobre la página. Ignorado cuando la Implementación es Personalizada |
| Nombres de idioma | mostrar u ocultar el nombre del idioma |
| Banderas de país | mostrar u ocultar la bandera |
| Estilo de bandera | Redondeado o Cuadrado |
Elige Guardar Cambios cuando hayas terminado.
Los Nombres de Idioma y las Banderas de País son interruptores independientes, por lo que un selector solo de banderas o solo de texto es cuestión de apagar uno.
Pestaña Estilo
Dos secciones, cinco ajustes cada una.
Estilo del Disparador es el selector cerrado que ve primero un visitante:
| Configuración | Type |
|---|---|
| Fondo | color |
| Color del Texto | color |
| Color del Borde | color |
| Borde al Pasar el Ratón | color, se usa cuando el puntero está sobre el selector |
| Radio de borde | 0 a 24px, predeterminado 6 |
Estilo del menú desplegable es la lista abierta:
| Configuración | Type |
|---|---|
| Fondo | color |
| Color del Texto | color |
| Color del Borde | color |
| Fondo al pasar el cursor sobre el elemento | color, se usa en el idioma debajo del puntero |
| Radio de borde | 0 a 24px, predeterminado 6 |
Cada selector de color ofrece una paleta de muestras y una acción Borrar para volver a sin color, lo que deja el valor predeterminado del selector en su lugar.
Más allá de las opciones integradas
El selector integrado es un elemento personalizado que renderiza su propio contenido en una shadow root. Eso tiene una consecuencia práctica: el CSS del tema no puede estilizar su interior. Una regla dirigida a una clase dentro del selector no coincide con nada y falla silenciosamente.
Dos cosas sí llegan a él.
El elemento en sí. universally-switcher es un elemento ordinario en tu página, por lo que tu tema puede posicionarlo:
universally-switcher {
display: block;
margin: 0 auto 1rem;
}
Variables CSS. Estas son leídas por la propia hoja de estilos del selector y cruzan el límite de la sombra, por lo que configurarlas en tu tema funciona. Los cuatro marcados como *sin configuración* no tienen equivalente en la pestaña Estilo, y son la razón para usar variables en absoluto.
| Variable | Predeterminado | También es una configuración |
|---|---|---|
--universally-font-size |
14px |
sin configuración |
--universally-trigger-padding |
8px 12px |
sin configuración |
--universally-trigger-bg |
#fff |
Fondo |
--universally-trigger-text |
#1a1a1a |
Color del Texto |
--universally-trigger-border |
#ddd |
Color del Borde |
--universally-trigger-border-hover |
#999 |
Borde al Pasar el Ratón |
--universally-trigger-radius |
6px |
Radio de borde |
--universally-dropdown-bg |
#fff |
Fondo |
--universally-dropdown-text |
#1a1a1a |
Color del Texto |
--universally-dropdown-border |
#ddd |
Color del Borde |
--universally-dropdown-hover-bg |
#f5f5f5 |
Fondo al pasar el cursor sobre el elemento |
--universally-dropdown-radius |
6px |
Radio de borde |
--universally-dropdown-shadow |
0 4px 12px rgba(0,0,0,0.1) |
sin configuración |
--universally-focus |
#0073aa |
sin configuración |
Establécelos en el elemento, o en :root para cubrir cada instancia:
universally-switcher {
--universally-font-size: 16px;
--universally-trigger-padding: 10px 14px;
--universally-dropdown-shadow: none;
--universally-focus: #7c3aed;
}
Un valor establecido en la pestaña Estilos se escribe directamente en el elemento, por lo que supera a la misma variable declarada en tu hoja de estilos. Borra la configuración si quieres que el CSS prevalezca. Los dos valores de radio son la excepción: siempre se escriben en el elemento, así que cámbialos en la pestaña Estilos en lugar de en el CSS.
Crea el tuyo propio. Si el selector necesita ser una fila de pestañas, una lista vertical o cualquier cosa estructuralmente diferente, reprodúcelo tú mismo a partir de los mismos datos que utiliza el plugin. Consulta Crear un selector de idioma personalizado en WordPress.