Comment personnaliser le sélecteur de langue ?

Pour s'adapter à votre charte graphique, il est possible de personnaliser l'apparence du sélecteur de langue. Pour cela, wpLingua offre de nombreuses options de conception ainsi que la liberté d'ajouter votre propre CSS personnalisé.

1 - Personnaliser le sélecteur de langue avec des options de design

Quand vous allez à la wpLingua > onglet Sélecteur de langue, vous trouvez un écran avec les différentes options de personnalisation. Le panneau de conception du sélecteur vous offre 4 types d'options :

1.1 - Thème du sélecteur de langue

Cela vous permet de choisir les styles de couleur et de bordure du sélecteur de langue.

Les options de couleur offrent 5 thèmes:

1. Clair : couleur blanche dans l'arrière-plan du commutateur
2. Gris: couleur de fond gris
3. Noir: couleur de fond noire
4. Noir Flou : couleur de fond transparente et floue avec texte noir et bordures
5. Blanc Flou : couleur de fond transparente et floue avec texte blanc et bordures

Chaque thème est ensuite ventilé par forme et par style de bordure :

6. Double – lisse: le sélecteur de langue sera encadré par une double bordure aux coins arrondis.
7. Double – carré: double bordure avec coins carrés.
8. Simple – lisse: bordure unique avec coins arrondis.
9. Simple – carré: une seule bordure avec des coins carrés.

1.2 - Styles du sélecteur de langue

Ces options vous permettent de définir la disposition des langues dans le sélecteur...

1. Liste en ligne: les langues sont alignées à côté les unes des autres.
2. Liste en bloc : les langues sont placées dans des colonnes, l'une sous l'autre.
3. Liste avec menu déroulant : les langues apparaissent dans un menu déroulant ; ceci est recommandé lorsque votre site offre plusieurs langues.

1.3 – Nom affiché

Ces options vous permettent de choisir comment le nom de la langue doit être écrit dans le sélecteur.

1. Nom traduit : le nom des langues est traduit dans la langue originale du site.
2. Nom original: chaque langue conserve son nom dans sa propre langue (anglais, français, 日本語, Português, Español, etc.)
3. ID de langue : les noms de langue utilisent l'identifiant de langue (FR, EN, DE, RU, etc.)
4. Aucun affichage : pas de texte, seuls les drapeaux sont affichés.

1.4 – Style de drapeau

Ces options vous permettent de choisir l'apparence des drapeaux dans le sélecteur de langue.

1. Cercle affichera les drapeaux ronds
2. Rectangulaire affichera des drapeaux rectangulaires
3. Vague affichera les drapeaux ondulés
4. Pas d'affichage n'affichera aucun drapeau, seul le nom de la langue sera affiché

2 - Personnaliser les drapeaux du sélecteur de langue

Au-delà de la forme des drapeaux, vous pouvez également choisir le drapeau à afficher par langue. Il peut s'agir d'un désir d'utiliser un drapeau autre que des drapeaux conventionnels. Par exemple, vous pouvez utiliser le drapeau des États-Unis ou de l'Australie pour la langue anglaise, au lieu du drapeau de la Grande-Bretagne. Ou celui du Canada ou de la Belgique pour la langue française, au lieu du drapeau de la France... C'est possible !

2.1 - Choisissez votre préférence de drapeau

1. Allez dans wpLingua > Réglages généraux.
2. Cliquez sur Modifier le drapeau.
3. Sélectionnez votre drapeau favori et n'oubliez pas d'enregistrer vos modifications.
4. Il est également possible d'utiliser un drapeau personnalisé que vous importez en amont dans votre médiathèque.

2.2 - Utiliser des drapeaux personnalisés

Pour utiliser des drapeaux personnalisés, vous devez d'abord les importer dans votre médiathèque, comme suit:

1. Aller à l'onglet Médias > Médiathèque et cliquez sur Ajouter un nouveau fichier.
2. Importez votre drapeau puis cliquez dessus pour ouvrir les médias. Maintenant, vous pouvez cliquer sur Copier l'URL dans le presse-papiers.
3. Allez dans l'onglet wpLingua > Réglages généraux pour coller l'URL du drapeau personnalisé. Enregistrer les changements.
4. Votre sélecteur de langue affiche maintenant le nouveau drapeau.

Répéter pour chaque langue si nécessaire.

3 - Personnaliser le sélecteur de langue avec du CSS

Si vous voulez que le design du sélecteur de langue corresponde à votre charte graphique, vous pouvez le personnaliser avec du CSS personnalisé. Bien sûr, vous aurez besoin d'avoir une certaine connaissance de CSS, bien que ci-dessous nous vous donnerons quelques conseils, idéal si vous êtes débutant en CSS.

3.1 - Inspecter la console du navigateur

La console du navigateur est votre meilleur alliée. Elle vous aidera à tester le CSS personnalisé et à voir son rendu visuel en direct. Voici comment le faire :

1. Visitez votre site depuis votre navigateur et faites un clic droit, puis choisissez l'option Inspecter. Voici un exemple avec Firefox, mais d'autres navigateurs fonctionnent de la même manière.
2. Cliquez sur l'icône de la flèche. Cet outil vous permet de sélectionner facilement l'élément à inspecter. Utilisez-le pour inspecter le sélecteur de langue (cliquez sur le sélecteur de langue après avoir cliqué sur l'outil Flèche).
3. À gauche de la console est le code HTML, vous pouvez naviguer pour sélectionner d'autres balises HTML si nécessaire.
4. À droite de la console se trouve le code CSS. Même si vous n'êtes pas un as du CSS, vous pouvez facilement changer l'apparence en temps réel. Par exemple, changez le code de couleur hexadécimal des couleurs de bordure, des textes ou des fonds... Ne vous inquiétez pas, les changements ne sont pas pris en compte, il s'agit simplement de tester l'apparence, lorsque vous rechargez la page, le site retourne à son état initial. Profitez de l'occasion pour modifier le sélecteur de langue en fonction de vos préférences.
5. En temps réel, vous visualisez la nouvelle apparence du sélecteur de langue en fonction de vos modifications CSS.

3.2 - Apportez le code CSS dans les paramètres de wpLingua

3.3 - Quelques extraits de CSS utiles

Pour vous aider, nous avons pensé que ces quelques extraits de code CSS pourraient vous aider :

Tout d'abord, notez que la classe CSS .switcher-content vous permet d'agir sur le bloc entier du sélecteur de langue pendant la classe .wplng-langague vous permet d'agir sur les langues.

---

Pour cet exemple, le sélecteur de langue a été défini avec le thème Clair – Double – Carré. Pour modifier les couleurs de fond et de bordure du sélecteur, voici le code CSS :

.wplng-switcher.theme-light-double-square .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

Pour changer les couleurs de fond et de bordure des langues, voici le CSS :

.wplng-switcher.theme-light-double-square .switcher-content .wplng-language {
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

---

Mais si vous aviez choisi le thème Clair – Simple –Doux par exemple, vous remarquerez que l'une des classes CSS change (.theme-light-simple-smooth), prenez en compte cela lors de vos modifications (d'où l'importance d'utiliser la console du navigateur pour rechercher les bonnes classes CSS). Voici le code à utiliser :

.wplng-switcher.theme-light-simple-smooth .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

.wplng-switcher.theme-light-simple-smooth .switcher-content .wplng-language {
  background-color: #ffffff;
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

Sinon, pour éviter de cibler toutes les classes CSS, vous pouvez simplifier le code de cette façon sans oublier d'ajouter !important pour certaines règles. Le résultat sera le même :

.switcher-content {
  background-color: #5e33d9 !important;
  border: 1px solid #5e33d9 !important;
}

.wplng-language {
  background-color: #ffffff !important;
  border: 1px solid #5e33d9 !important;
  color: #5e33d9 !important;
}

---

De cette façon, vous pouvez changer tout ce que le code CSS permet : ajouter des ombres, des transitions, des états sur la souris, etc.

/* add a shadow to the switcher */

.switcher-content {
  box-shadow: 5px 5px 0px 0px #5e33d9;
  transition: 500ms ease;
}

/* obtain a rounded switcher */

.switcher-content {
  border-radius: 100px;
}

---

Et pour finir avec le code CSS personnalisé, voici celui utilisé sur notre site:

.switcher-content {
  box-shadow: 8px 8px 0px 0px #bcfa99;
  transition: 500ms ease;
	
}

.switcher-content:hover {
  box-shadow: 10px 10px 0px 0px #bcfa99;
}

.switcher-content .wplng-languages .wplng-language:hover .language-name {
  color: #bcfa99;
}

4 - Choisissez l'emplacement du sélecteur de langue

Maintenant que votre sélecteur de langue est entièrement personnalisé, il est temps de définir son emplacement sur votre site !

4.1 - Afficher le sélecteur de langue automatiquement

Aller à la wpLingua > Sélecteur > Onglet d'insertion du sélecteur pour choisir un emplacement prédéfini.

4.2 – Insérez manuellement le sélecteur de langue en utilisant un shortcode

4.3 - Insérez le sélecteur de langue dans le menu de navigation d'un thème classique

4.4 - Insérez le sélecteur de langue dans le menu de navigation d'un thème basé sur les blocs

5 – Personnalisez entièrement le sélecteur de langue avec wpLingua !

Nous espérons que ce guide vous a fourni une compréhension claire et complète de la personnalisation du sélecteur de langue de wpLingua.

N'oubliez pas que les options de flexibilité et de personnalisation offertes par wpLingua sont conçues pour garantir que votre site web communique efficacement dans plusieurs langues, et offre également une esthétique cohérente et engageante.

Si vous avez d'autres questions ou avez besoin d'aide supplémentaire, notre équipe de support est toujours là pour vous aider. Vos commentaires et idées sont précieux pour nous, alors que nous nous efforçons continuellement d'améliorer wpLingua.