L'aspetto dello switcher è configurato nel plugin di WordPress, non nella dashboard di Universally. Dieci impostazioni coprono colori, bordi e raggi; tutto ciò che va oltre viene gestito con variabili CSS anziché con il normale CSS del tema.
Prima di iniziare
In WordPress, vai su Universally nel menu di amministrazione. La voce Universally nella barra di amministrazione apre lo stesso posto.
Questo vale solo per i progetti WordPress. Su altre piattaforme non esiste ancora una configurazione dello switcher. Se ti trovi su un'altra piattaforma e hai bisogno di uno switcher ora, creane uno tramite l'API: vedi Crea uno switcher di lingua personalizzato in WordPress per l'approccio, che si adatta a qualsiasi stack.
Dove si trovano le impostazioni
Il plugin ha quattro schede: Generale, Switcher Lingua, Stile e Preferenze. Due sono importanti qui:
| Scheda | Contiene |
|---|---|
| Selettore di Lingua | come viene inserito lo switcher, dove si trova e cosa visualizza |
| Stile | colori, bordi e raggio degli angoli, separatamente per il trigger e il menu a discesa |
Scheda Switcher Lingua
| Impostazione | Opzioni |
|---|---|
| Implementazione | Automatico, che inserisce lo switcher per te senza codice, o Personalizzato, che ti fornisce uno shortcode da inserire nel tuo tema |
| Posizione | dove si trova uno switcher Automatico: In Basso a Destra, In Basso a Sinistra, In Alto a Destra o In Alto a Sinistra. Tutti e quattro fluttuano sopra la pagina. Ignorato quando l'Implementazione è Personalizzato |
| Nomi delle lingue | mostra o nasconde il nome della lingua |
| Bandierine Nazionali | mostra o nasconde la bandierina |
| Stile Bandierina | Arrotondato o Quadrato |
Scegli Salva Modifiche quando hai finito.
Nomi Lingue e Bandierine Nazionali sono interruttori indipendenti, quindi uno switcher solo bandierine o solo testo è una questione di disattivare uno dei due.
Scheda Stile
Due sezioni, cinque impostazioni ciascuna.
Stile Trigger è lo switcher chiuso che un visitatore vede per primo:
| Impostazione | Tipo |
|---|---|
| Sfondo | colore |
| Colore testo | colore |
| Colore bordo | colore |
| Bordo al passaggio del mouse | colore, usato quando il puntatore è sull'switcher |
| Raggio del bordo | Da 0 a 24px, predefinito 6 |
Styling del menu a discesa è l'elenco aperto:
| Impostazione | Tipo |
|---|---|
| Sfondo | colore |
| Colore testo | colore |
| Colore bordo | colore |
| Sfondo al passaggio del mouse sull'elemento | colore, usato sulla lingua sotto il puntatore |
| Raggio del bordo | Da 0 a 24px, predefinito 6 |
Ogni selettore di colore offre una palette di campioni e un'azione Cancella per tornare a nessun colore, che lascia inalterato il predefinito dell'switcher.
Oltre le opzioni integrate
L'switcher integrato è un elemento personalizzato che renderizza i propri contenuti in una shadow root. Ciò ha una conseguenza pratica: il CSS del tema non può stilizzare il suo interno. Una regola mirata a una classe all'interno dell'switcher non trova corrispondenza e fallisce silenziosamente.
Due cose lo raggiungono.
L'elemento stesso. universally-switcher è un elemento ordinario nella tua pagina, quindi il tuo tema può posizionarlo:
universally-switcher {
display: block;
margin: 0 auto 1rem;
}
Variabili CSS. Queste vengono lette dal foglio di stile dell'switcher e attraversano il confine dell'ombra, quindi impostarle nel tuo tema funziona. I quattro contrassegnati come nessuna impostazione non hanno un equivalente nella scheda Styling, e sono il motivo per cui usare le variabili è utile.
| Variabile | Predefinito | Anche un'impostazione |
|---|---|---|
--universally-font-size |
14px |
nessuna impostazione |
--universally-trigger-padding |
8px 12px |
nessuna impostazione |
--universally-trigger-bg |
#fff |
Sfondo |
--universally-trigger-text |
#1a1a1a |
Colore testo |
--universally-trigger-border |
#ddd |
Colore bordo |
--universally-trigger-border-hover |
#999 |
Bordo al passaggio del mouse |
--universally-trigger-radius |
6px |
Raggio del bordo |
--universally-dropdown-bg |
#fff |
Sfondo |
--universally-dropdown-text |
#1a1a1a |
Colore testo |
--universally-dropdown-border |
#ddd |
Colore bordo |
--universally-dropdown-hover-bg |
#f5f5f5 |
Sfondo al passaggio del mouse sull'elemento |
--universally-dropdown-radius |
6px |
Raggio del bordo |
--universally-dropdown-shadow |
0 4px 12px rgba(0,0,0,0.1) |
nessuna impostazione |
--universally-focus |
#0073aa |
nessuna impostazione |
Impostali sull'elemento, o su :root per coprire ogni istanza:
universally-switcher {
--universally-font-size: 16px;
--universally-trigger-padding: 10px 14px;
--universally-dropdown-shadow: none;
--universally-focus: #7c3aed;
}
Un valore impostato nella scheda Stile viene scritto direttamente sull'elemento, quindi ha la precedenza sullo stesso variabile dichiarato nel tuo foglio di stile. Cancella l'impostazione se vuoi che il CSS abbia la precedenza. Le due valori di raggio fanno eccezione: vengono sempre scritti sull'elemento, quindi modificali nella scheda Stile anziché nel CSS.
Crea il tuo. Se lo switcher deve essere una riga di schede, un elenco verticale o qualsiasi cosa strutturalmente diversa, renderizzalo tu stesso dagli stessi dati utilizzati dal plugin. Vedi Crea uno switcher di lingua personalizzato in WordPress.