L'apparence du sélecteur est configurée dans le plugin WordPress, pas dans le tableau de bord Universally. Dix paramètres couvrent les couleurs, les bordures et le rayon ; tout ce qui va au-delà est géré avec des variables CSS plutôt qu'avec du CSS de thème ordinaire.
Avant de commencer
Dans WordPress, allez à Universally dans le menu d'administration. L'élément Universally dans la barre d'administration ouvre le même endroit.
Ceci s'applique uniquement aux projets WordPress. Sur d'autres plateformes, il n'y a pas encore de configuration de sélecteur. Si vous êtes sur une autre plateforme et avez besoin d'un sélecteur maintenant, créez-en un via l'API : voir Créer un sélecteur de langue personnalisé dans WordPress pour l'approche, qui s'adapte à n'importe quelle pile.
Où se trouvent les paramètres
Le plugin a quatre onglets : Général, Sélecteur de langue, Style et Préférences. Deux sont importants ici :
| Onglet | Contient |
|---|---|
| Sélecteur de langue | comment le sélecteur est inséré, où il se trouve et ce qu'il affiche |
| Style | couleurs, bordures et rayon des coins, pour le déclencheur et la liste déroulante séparément |
Onglet Sélecteur de langue
| Paramètre | Options |
|---|---|
| Implémentation | Auto, qui insère le sélecteur pour vous sans code, ou Personnalisé, qui vous donne un shortcode à placer dans votre thème |
| Position | où un sélecteur Auto se place : En bas à droite, En bas à gauche, En haut à droite ou En haut à gauche. Les quatre flottent au-dessus de la page. Ignoré lorsque l'Implémentation est Personnalisée |
| Noms de langue | afficher ou masquer le nom de la langue |
| Drapeaux de pays | afficher ou masquer le drapeau |
| Style du drapeau | Arrondi ou Carré |
Choisissez Enregistrer les modifications lorsque vous avez terminé.
Les noms de langue et les drapeaux de pays sont des bascules indépendantes, donc un sélecteur uniquement avec des drapeaux ou uniquement avec du texte est une question de désactivation de l'un d'eux.
Onglet Style
Deux sections, cinq paramètres chacune.
Style du déclencheur est le sélecteur fermé que le visiteur voit en premier :
| Paramètre | Type |
|---|---|
| Arrière-plan | couleur |
| Couleur du texte | couleur |
| Couleur de la bordure | couleur |
| Bordure au survol | couleur, utilisée lorsque le pointeur est sur le sélecteur |
| Rayon de la bordure | 0 à 24px, par défaut 6 |
Style du menu déroulant est la liste ouverte :
| Paramètre | Type |
|---|---|
| Arrière-plan | couleur |
| Couleur du texte | couleur |
| Couleur de la bordure | couleur |
| Arrière-plan au survol de l'élément | couleur, utilisée sur la langue sous le pointeur |
| Rayon de la bordure | 0 à 24px, par défaut 6 |
Chaque sélecteur de couleur offre une palette d'échantillons et une action Effacer pour revenir à aucune couleur, ce qui laisse le défaut du sélecteur en place.
Au-delà des options intégrées
Le sélecteur intégré est un élément personnalisé qui rend son propre contenu dans une shadow root. Cela a une conséquence pratique : le CSS du thème ne peut pas styliser l'intérieur. Une règle visant une classe à l'intérieur du sélecteur ne correspond à rien et échoue silencieusement.
Deux choses l'atteignent.
L'élément lui-même. universally-switcher est un élément ordinaire de votre page, donc votre thème peut le positionner :
universally-switcher {
display: block;
margin: 0 auto 1rem;
}
Variables CSS. Celles-ci sont lues par la feuille de style du sélecteur et traversent la limite de l'ombre, donc les définir dans votre thème fonctionne. Les quatre marqués sans réglage n'ont pas d'équivalent dans l'onglet Style, et sont la raison d'utiliser des variables.
| Variable | Défaut | Aussi un réglage |
|---|---|---|
--universally-font-size |
14px |
sans réglage |
--universally-trigger-padding |
8px 12px |
sans réglage |
--universally-trigger-bg |
#fff |
Arrière-plan |
--universally-trigger-text |
#1a1a1a |
Couleur du texte |
--universally-trigger-border |
#ddd |
Couleur de la bordure |
--universally-trigger-border-hover |
#999 |
Bordure au survol |
--universally-trigger-radius |
6px |
Rayon de la bordure |
--universally-dropdown-bg |
#fff |
Arrière-plan |
--universally-dropdown-text |
#1a1a1a |
Couleur du texte |
--universally-dropdown-border |
#ddd |
Couleur de la bordure |
--universally-dropdown-hover-bg |
#f5f5f5 |
Arrière-plan au survol de l'élément |
--universally-dropdown-radius |
6px |
Rayon de la bordure |
--universally-dropdown-shadow |
0 4px 12px rgba(0,0,0,0.1) |
sans réglage |
--universally-focus |
#0073aa |
sans réglage |
Définissez-les sur l'élément, ou sur :root pour couvrir toutes les instances :
universally-switcher {
--universally-font-size: 16px;
--universally-trigger-padding: 10px 14px;
--universally-dropdown-shadow: none;
--universally-focus: #7c3aed;
}
Une valeur définie dans l'onglet Style est écrite directement sur l'élément, elle a donc priorité sur la même variable déclarée dans votre feuille de style. Effacez le réglage si vous souhaitez que le CSS prenne le dessus. Les deux valeurs de rayon font exception : elles sont toujours écrites sur l'élément, modifiez-les donc dans l'onglet Style plutôt que dans le CSS.
Créez le vôtre. Si le sélecteur doit être une rangée d'onglets, une liste verticale ou toute autre chose structurellement différente, rendez-le vous-même à partir des mêmes données que celles utilisées par le plugin. Voir Créer un sélecteur de langue personnalisé dans WordPress.